盒子、浮动、BFC

盒子组成

盒子属性

margin

外边距 代表盒子四周的区域。相邻元素的边距会合并

border

设定介于padding的外边缘与margin的内边缘之间，默认值为0

padding

内边距 在任何定义的边界内的元素内容周围生成空间

width&height

用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度

max-width

定义元素的最大宽度

min-height

定义元素的最小高度

边框属性

border-width边框宽度

border-style边框样式

dotted点状边框 hidden用于解决边框冲突 dashed虚线边框 solid实线边框 double双线边框

groove3d凹槽边框，效果取决于border-color的值 ridge3d垄状边框，效果取决于border-color的值

inset3d inset 边框，效果取决于border-color的值​ outset3d outset边框，效果取决于border-color的值

border-radius圆角边框半径

取值：绝对值 px、mm 、cm 相对值 em 、rem %

外边距属性

margin:上 右 下 左

在默认(标准流)布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

水平方向上的外边距会叠加

内边距属性

padding

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化​ 2.给标签设置内边距之后, 内边距也会有背景颜色

CSS盒模型

内容盒子(W3C盒子/标准盒子)

box-sizing:content-box

内容区的宽

​ width

内容区的高

​ height

盒子的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

​ height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

​ width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高

​ height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

边框盒子(IE盒子/怪异盒子)

box-sizing:border-box

内容区的宽

​ width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

​ height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

​ width=contentWidth+border-left+border-right+paddingLeft+paddingRight

盒子的高

​ height=contentHeight+border-top+border-bottom+paddingTop+paddingBottom

所占屏幕空间的宽

​ width+marginLeft+marginRight

所占屏幕空间的高

​ height+marginTop+marginBottom

 盒子背景样式

background-color 背景颜色

background-image 背景图片

background-repeat 背景平铺属性

background-position 背景定位属性

背景属性缩写的格式​ background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

background-attachment 修改关联方式 scroll 会随着滚动条的滚动而滚动​ fixed 不会随着滚动条的滚动而滚动

浮动

浮动特性:脱离文档流 原先位置不保留 飘在文档流上方

float:left; right none

- 浮动元素字围现象

​浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

清除浮动：

        1.对哪个元素造成了影响{clear:both;}

        2.伪元素清除浮动

                ::after{content:""; display:block; clear:both}

        3.空div（浮动元素之后）{clear:both;}

        4.给父元素增加高度

        5.触发BFC overflow:auto/hidden

BFC

概念：块级格式化上下文，理解为元素的一种属性。只要元素拥有这种属性，就能成为一块独立的渲染区域。

如何触发：

        1.html 2.float 3.position 4.display 5.overflow不为visible

作用特性：

        1.避免外边距重叠 2.清除浮动 3.避免元素被浮动元素遮盖 4.两列布局 5.三列布局

外边距重叠

兄弟级外边距重叠：1.尽量给其中一个设置外边距 2.给其中一个包裹父元素并设置BFC

父子级外边距重叠：1.给父元素设置边框 2.给父元素触发BFC

面试如何问?说一说盒模型?区别?

        1.盒子种类:{

            1.w3c盒子/内容盒子/标准盒子 box-sizing:centent-box

            2.IE盒子/边框盒子/怪异盒子 box-sizing:border-box

        }

        2.盒子区别?

            1.w3c盒子width设置给内容区的

            盒子的宽:----

            所占页面的宽:----

            2.边框盒子的width设置给盒子的

            盒子的宽:

            所占页面的宽: