css盒子模型和浮动（笔记4）

CSS盒子模型和浮动

一.盒子模型和概念和相关属性

盒子模型：

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外 边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作 一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。**

盒子模型常用的相关属性：

1. width：设置盒子的内容的宽度，属性值为像素值或百分比，如果是块元素默认宽度为父元素的100%，如果是行内元素默认宽度为内容的宽度
2. height：设置盒子内容的高度，属性值为像素值或百分比，元素的默认高度为自适应高度
3. border：设置元素的边框
   border-style：设置边框类型，
   属性值有（solid(实线)、dashed(虚线)、dotted(点线)、none(无))
   border-width：设置边框宽度，值越大，边框越宽,属性值是(px)
   border-color：设置边框颜色，属性值为颜色名称
   上边框：border-top
   下边框：border-bottom
   左边框：border-left
   右边框：border-right
   border-radius：设置边框圆角效果，属性值为像素值
   border-radius：值，表示四个角的弧度相同
   border-radius：值1（左上、右下） 值2（右上、左下）
   border-radius：值1（左上） 值2（右上、左下） 值3（右下）
   border-radius：值1（左上） 值2（右上） 值3（右下） 值4（左下）
4. margin：设置页面中元素间的距离，称为外边距，属性值为像素值(px)，
   ​ margin：值，表示，四个边距相同
   margin：值1（上下） 值2（左右）
   margin：值1（上） 值2（左右） 值3（下）
   margin：值1（上） 值2（右） 值3（下） 值4（左）
5. padding：设置盒子内容和边框的距离，也称为内边距，属性值为像素值，值越大，间距越大 padding-top：上内边距
   padding-bottom：下内边距
   padding-left：左内边距
   padding-right：右内边距.

二、浮动

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：默认，不清除浮动
闭合浮动，

.父级添加overflow属性方法

可以给父级添加overflow：hidden auto scroll
使用after伪元素清除浮动

使用before和after双伪元素清除浮动