Css盒模型，浮动

Css盒模型

CSS盒子模型规定了处理元素内容，内边框 和 外边框的方式
最内部分的元素内容，直接包围内边距，内边框呈现了元素背景。内边距的边缘的边框，边框以外是外边框

元素的尺寸：

height 设置元素的高度。属性值：auto：默认。
width 设置元素的宽度属性值：auto：默认
padding 属性：元素的内边距：
padding-top 属性设置元素的上内边距 （空间）
padding-right 属性设置元素右边距 （空白）
padding-left 属性设置元素的下内边距 （底部空白）
padding 属性接受长度值或百分比值，但不允许使用负值。
border 属性：元素的边框，是围绕元素内容和内边距地一条或多条线。
border 属性：
border-width
border-style
border-color
margin 属性：元素的外边距：
围绕在元素边框的空白区域是外边距。设置外边距会在元素外
创建额外的“空白”。
margin-top 属性设置元素的上外边距（空间）。margin-right 属性设置元素外内边距（空白）。 margin-bottom 属性设置元素的下外边距（底部空白）。 margin-left 属性设置元素左外边距（空白）。 margin 属性接受长度值或百分比值，允许使用负值。

css其他属性

opacity：透明度设定
opacity 与通过 rgba()设定透明度的区别：前者同时作用于元素的标签内容，后者只是作用于元素本身。
opacity的取值范围是0——1

Css浮动

浮动含义

文档流:包含元素的布局宽高背景颜色等等
文本流:包含文字元素内容
左浮:不脱离文本流脱离文档流
右浮: 脱离文本流也脱离文档流
父盒子高度=divl+div2+div3+div4+div5的高 父盒子高度=坍塌
浮动带来的问题，对自身有影响都脱离文档流，对兄弟改变了布局，对父级造成了坍塌*

清除浮动

1、给父设置高 (不推荐)
2、给使用浮动元素后面添加空的块级元素，clear:both 、
在浮动元素的父级上清楚浮动
3、after伪类请浮动
4、在父容器上添加溢出隐藏属性overflow: hidden;