CSS盒子模型和浮动

CSS盒子模型和浮动

一盒子模型

1、什么是盒子模型

盒子模型是CSS中重要的指导思想，是网页布局的基石

它认为页面中所有元素都是一个盒子，可以通过设置它的属性进而改变该盒子的显示状态

它认为盒子间是相互影响的

2、盒子模型中常用的盒子属性

width：设置盒子的内容的宽度，属性值为像素值或百分比，如果是块元素默认宽度为父元素的100%，如果是行内元素默认宽度为内容的宽度

height：设置盒子内容的高度，属性值为像素值或百分比，元素的默认高度为自适应高度

border：设置元素的边框

1) border-style：设置边框类型，属性值有solid、dashed、dotted、none

​ solid：实线

​ dashed：虚线

​ dotted：点线

​ none：无

2) border-width：设置边框宽度，属性值是像素值，值越大，边框越宽

3) border-color：设置边框颜色，属性值为颜色名称、十六进制代码

4) border的复合形式：border：值1 值2 值3；注意边框的类型是不可以省略的

5) 上边框：border-top

6) 下边框：border-bottom

7) 左边框：border-left

8) 右边框：border-right

9) border-radius：设置边框圆角效果，属性值为像素值

10) border-top-left-radius：左上角

11) border-bottom-left-radius：左下角

12) border-top-right-radius：右上角

13) border-bottom-right-radius：右下角

14) border-radius：值，表示四个角的弧度相同

15) border-radius：值1（左上、右下） 值2（右上、左下）

16) border-radius：值1（左上） 值2（右上、左下） 值3（右下）

17) border-radius：值1（左上） 值2（右上） 值3（右下） 值4（左下）

margin：设置页面中元素间的距离，称为外边距，属性值为像素值，值越大，距离越大

1) margin-top：上外边距

2) margin-bottom：下外边距

3) margin-right：右外边距

4) margin-left：左外边距

5) 也可以采用值的个数表示上下左右外边距，如

​ margin：值，表示，四个边距相同

​ margin：值1（上下） 值2（左右）

​ margin：值1（上） 值2（左右） 值3（下）

​ margin：值1（上） 值2（右） 值3（下） 值4（左）

6) 注意事项：两个上下关系的元素间的距离采用较大的margin值，而不是和，但是如果是左右关系的元素，那么它们间的距离就是margin之和

padding：设置盒子内容和边框的距离，也称为内边距，属性值为像素值，值越大，间距越大

1) padding-top：上内边距

2) padding-bottom：下内边距

3) padding-left：左内边距

4) padding-right：右内边距

5) 也可以通过值的个数来表示内边距

​ padding：值，表示上下左右相同

​ padding：值1（上下） 值2（左右）

​ padding：值1（上） 值2（左右） 值3（下）

​ padding：值1（上） 值2（右） 值3（下） 值4（左）

3、什么时候用margin，什么时候用padding

如果两个元素是平行关系（即兄弟关系）时，要调节它们的间距只能用margin

如果两个元素是包含和被包含的关系（即父子关系）时，那么要调节它们间的距离可以用margin（子元素），也可以用padding（父元素），注意：当给子元素加margin-top时会出现父元素同步下移的问题，解决方法如下：

​ 1) 不给子元素加margin-top，给父元素加padding-top

​ 2) 给子元素加margin-top，给父元素加边框

​ 3) 给子元素加margin-top，给父元素加pading-top:0.1px;（常用）

4、margin和padding使用技巧

利用*{margin:0;padding:0}清除页面中默认的内外边距

利用margin: 0 auto使元素在页面中达到居中效果，该方法只适用于块元素

5、盒子的实际高度和宽度（标准盒模型）

实际宽度=左边框+左内边距+width+右内边距+右边框

实际高度=上边框+上内边距+height+下内边距+下边框

6、CSS3中box-sizing：border-box可以将标准盒模型变为怪异盒模型，所谓怪异盒模型就是width包含了边框和内边距，就不用再减了

一般在页面布局中加这个*{

margin=0;padding=0;box-sizing:border-box;

}

二、浮动

1、属性：float，属性值left、right、none

left：元素向左浮动

right：元素向右浮动

none：元素不浮动，默认

2、什么是浮动：所谓浮动就是指设置了float属性的元素会从标准文档流中脱离出来，在浮动流中按照新的排列规则进行排列

标准文档流：所谓标准文档流就是页面默认的排列规则，如果是块元素垂直显示，如果是行内元素或行内块元素在一行显示

浮动流：所谓浮动流就是设置了float属性的元素会从标准流中脱离出来，在标准流的上方新建一个层，在这个成里所有元素都是在一行显示的，我们把这种排列规则称为浮动流

3、浮动所带来的影响

设置了浮动属性的元素会从标准流中脱离出来，它会失去在标准流中的原有位置，该位置会被标准流中的其它元素占据

在浮动流中所有元素都是在一行显示的，但是如果空间不够大，那么元素自动换行

浮动的元素自动变成块元素

浮动的元素宽度为最小宽度，所以为了方便控制，通常给浮动的元素加width

浮动的元素会丢失标准流中的原有位置，标准流中的其它元素会占据它的空间，但是文本会对它形成环绕

一个元素在浮动前会分析它前面的元素的类型，如果是块元素，那么这个元素会在块元素的下方显示

元素都向右浮动后，显示顺序为倒叙

4、父元素的塌陷：如果父元素没有高度，那么此时父元素的高度就是由子元素决定的，如果子元素设置了浮动，那么父元素的高度就会塌陷，父元素的背景色无法显示，另外也会对周边元素造成影响

给父元素设置高度

利用clear属性来清除浮动所带来的影响，clear属性的作用就是清除浮动，属性值为left /right/both/none

1) left：清除左侧的浮动

2) right：清除右侧浮动

3) both：清除两侧浮动

4) none：默认，不清除浮动

利用:after选择器清除浮动，格式：父元素:after{content:””;display:block;clear:both;}

5、浮动的利用

页面布局

制作页面中各个模块