CSS教程 三个重点（盒模型、浮动、固定）

CSS教程 三个重点：

1、盒模型

box-model

• Margin(外边距) - 清除边框外的区域，外边距是透明的。

• Border(边框) - 围绕在内边距和内容外的边框。

• Padding(内边距) - 清除内容周围的区域，内边距是透明的。

• Content(内容) - 盒子的内容，显示文本和图像。

注意：设置背景颜色的时候，边框是有颜色的

背景图常用的样式：

1. background-color:pink;    背景颜色

2. background-imager:url(url地址);    背景图片

1. overflow-x: hidden;

2. overflow-y: hidden;

3. background-repeat:no-repeat;    背景图片是否平铺

1. no-repeat:不平铺

2. repeat-x:x轴平铺

3. repeat-y:y轴平铺

4. repeat:平铺
   

4. background-size:auto 100%;    背景图片的大小

1. 第一个参数是x轴
   

2. 第二个参数是y轴

3. auto：

4. 百分比/像素：

5. cover：覆盖下面的面积
   

5. background-position:    背景图片显示位置

1. left：左

2. center：中

3. right：右

4. top：上

5. bottom：下

行内元素和块元素的转化：

display:inline;    显示成行内元素

display:none;    不显示，完全释放空间

display:block;    显示成块元素

display:inline-block;    在一行中显示块元素，但是可以设置尺寸

注意事项：内联元素不能设置尺寸，尺寸是由内容决定的。

2、浮动：破坏默认的文档的布局 float

默认的文档的布局：

1、块元素垂直排列，从上向下

2、行内元素，从左向右排列

浮动元素遵守浮动布局规则：

1、需要定义尺寸

2、按照定义的顺序。left向左浮动；right向右浮动

3、浮动元素会释放原占有的空间。

清除浮动：

1、必须是块元素才能清楚浮动

2、必须是浮动的兄弟元素，在所有的浮动元素之后。

3、添加clear样式

3、定位：position

功能强大，破坏默认的文档流布局，可以让一个元素定位到页面的任意位置。

定位遵循的定义规则：

1、定义的位置

2、自定义定位的样式

1、绝对定位：absolute

参照物：从当前元素的父元素开始向上查找，第一个非static定位的元素为参照物，如果找不到，则以body为参照物。

2、相对定位：relative

参照物：以未偏移之前的位置，为参照物

3、固定定位：fixed

参照物：以视区（可视区域）为参照物。

小编是：刘广法，转载请注明出处，网站地址：https://liuguangfa.com/