CSS盒子模型

CSS盒子模型 【重点】
一个标签相当于一个盒子
盒子各种属性
width宽
height高 
Margin边界 外边界
Padding填充 内边距
Border边框书写：
padding : 40px 60px 30px 20px;
           上     右    下     左
padding : 40px 40px 30px;
           上   左右  下
padding : 40px 60px;
          上下   左右
padding : 40px；
          上下左右
（margin同上）/*box-sizing: content-box;*/
                /*盒子的实际大小 (内容+border+padding)*/
                box-sizing: border-box;
                /*盒子的实际大小(宽高) border+padding压缩内容的大小*/思考：
div {
    width:400px;
    height:200px;
    margin:40px 20px 30px 30px;
    padding:10px 50px 70px;
    border: solid 10px #000;
}
请问盒子的实际宽高？
宽   高
520 300
670 370两种盒子 
box-sizing: border-box;
box-sizing: content-box;默认块级元素和行级元素通常自带一些默认盒子属性值
div{
    width:100%;
    height:auto;
    margin:0px;
    padding:0px:
    border:none;
}
h1{
    width:100%;
    height:auto;
    margin:19px 0px;
    padding:0px:
    border:none;
}边界合并【重点】
上下两元素，临近边界，取较大的值边界溢出
假如父级元素没有设定盒子属性时
首个子级元素的上边界将会跑出该父级元素盒子模型无效标签：
strong,em,a,span
display:block;变成块级标签让盒子属性起作用img,video,audio 行内块标签
宽、高、填充和边界均可设定一、行块互转【重点】
display : block; 指定对象为块元素。 p div h ul li table form  
display : inline; 指定对象为内联元素。 span font a b strong label
空元素 hr br
display:inline-block；指定对象为内联块元素。 img input
vertical-align: middle  两个结合 实现行内块元素居中隐藏整个对象
display:none 
visibility:hidden  
opacity:0
display隐藏对象不占位
溢出隐藏
overflow总结：
块级元素经常带有一些默认的边界填充属性
行级元素不能自由设定盒子属性，但可以转块
隐藏有两种方法，占位有别二、分栏：
column-count : 分栏数目
column-width : 分栏宽度
column-rule: 分割线
column-gap: 栏与栏之间的间距
兼容写法
-webkit-column-rule:三、浮动【重点】
浮动的属性和浮动产生的一些影响
float:left; /*或right*/两列排版（固定宽度 百分比宽度）
图文排版
多行多列排版
父元素子元素宽度设置好  子元素floatfloat之后元素变为inline-block
float之后margin值不再重叠
清除浮动
并列元素清除浮动
1、不受浮动影响的元素设置clear:both;
2、在两个元素之间添加一个块元素设置clear:both;height:0px;
3、在两个元素之间添加<br clear="all" />父对象高度塌陷问题
当父级元素中的所有子元素(如li)都设定了浮动左对齐，该父元素自身高度丧失，解决办法：
1. 给父级添加浮动
2. 给父级添加display:inline-block;
3. 给父元素添加overflow:hidden;
4. 给父元素添加高度clear清除浮动
1. 在浮动元素下加
<div ></div>
.clear{height:0px; background:blue;font-size:0;  clear:both;}
2. 在浮动元素下加
<br clear="all">
3. after伪类清除浮动（现在主流方法）
.clear:after{
                content: ""
                display: block;
                clear: both;
            }
.clear{
                zoom: 1;  /*ie7重载  1:1展示*/
            }Ie6左边界双倍
解决办法：display:inline属性