盒子就是用div块 设置一个块 设置长宽
属性
width ： 宽
height ： 高
border ： 边框
border-top ： 顶边框
border-top-color ： 顶边框的颜色
border-top-width ： 顶边框的宽度
border-top-style ： 顶边框线的样式
solid ： 实线
dashed ： 虚线
dotted ：点线
合成一块 ： border-top ： 10px solid #00；
左：left 右：right 低：bottom 按照上方以此类推
padding ： 文字距离盒子距离
padding-top ： 文字距离盒子顶部的距离 20px
左：left 右：right 低：bottom 按照上方以此类推
简写 ：
padding：top right bottom right 顺时针方向
如果设置三个值： 上 左右 下
如果设置两个值： 上下 左右
如果设置四个值 ： 上下左右
margin 盒子边框和外边的距离
设置方法和padding相同
width 和 height 是内容的尺寸 而不是盒子的尺寸
auto 自动计算
margin 50px auto 10px 盒子水平居中
盒子套盒子 也可以使用
设置负值 ：会反方向移动
外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后外边距的高度等于两个合并外边距高度重视较大者
如：box1 margin-bottom ： 30px
box2 margin-top ： 1px
两个间距为30px
一般在工作中 只设置margin-top 可以精确控制
塌陷 ：
外盒子设置大小 内盒子设置margin-top会带动外盒子下移
三种解决方法
1. 外盒子设置border
2. 外盒子设置 overflow：hidden 元素溢出
3. 使用伪元素类
.clearfix：before{
content : "";
display : table ;
}
使用时在 内元素盒子处 class= "con clearfix" 就可以
元素溢出 ：
overflow ：
visible 默认 默认会溢出
hidden 多余的裁剪 然后隐藏起来
scroll 内容会被裁剪 单浏览器会显示滚动条内容
auto 智能 如果裁剪 就出现滚动条
inherit 继承父 元素overflow 属性的值
块元素 也称为行元素
div p ul li h1-h6 dl dt dd 等
支持全部的样式
如果没有设置宽度 默认宽度为父级宽度的100%
盒子占一行 即使设置了宽度
内联元素 行内元素 a span em b strong
支持部分样式 不支持宽高 margin上下 padding上下
只支持左右
宽高由内容决定
盒子并在一行
代码换行 盒子之间会产生间距
子元素是内联元素 父元素可以用 text-align 属性设置子元素水平对齐方式
padding 属于盒子里边 设置padding 会撑开盒子
去掉代码换上间隙的方法
1. 去掉内联元素的换行
2. 将内联元素的父级设置为 font-size 为0 内联元素自身在设置 font-size
内联块元素
img input 类型元素
支持全部样式
如果没有设置宽高 宽高由内容决定
盒子并在一行
代码换行 盒子有间隙
子元素是内联元素 父元素可以用 text-align 属性设置子元素水平对齐方式
转化为内联块元素
display：inline-block 内联块元素
1. none 元素隐藏不占位置
2. block 元素快形式显示
3. inline 内联元素显示
4. inline-block ： 内联块形式
ul li 属性
list-style 列表前的符号
none 无
float 浮动 left 可以自动浮动
如果不确定高 浮动会导致内元素框撑不开父元素框
清除浮动 ：
1. overflow ：hidden
2. 在最后面加一个空的div style="clear:both"
3. 使用成熟的清浮动样式类
.clearfix：after{
content：“”；
display：table；
clear：both；
}
合并元素塌陷和清除浮动
.clearfix ：before，.clearfix：after{
content："";
display : table ;
}
.clearfix after{
clear : both;
}
.clearfix{
zoom : 1; # 兼容 ie 的问题
}
浮动 特性
1. 左右浮动两种
2. 浮动元素碰到父元素的边界停下来
3. 相邻浮动的块元素可以并在一行 超出父级宽度就换行
4. 浮动让行内元素和块元素转化为行内块元素 支持不会有行内块元素的间隙问题
5. 浮动元素后面没有元素 没有浮动的元素会占据浮动元素的位置 没有浮动的元素内的文字会避开浮动元素 形成文字饶图的现象
6. 父元素如果没有设置尺寸 父元素内整体浮动无法撑开父元素 父元素需要清除浮动 详情见上面的三种解决方案
7. 浮动元素之间没有垂直margin的合并
原文：https://www.cnblogs.com/fuyi2345/p/11391719.html