概述
概述
内容
盒子模型
（一）内容
盒子模型的概念：
盒子模型的概念
height和width表示的是内容的高度和宽度。
盒子模型
盒子模型的宽度和高度
盒子模型举例
overflow属性：
当内容溢出盒子框时的属性。
overflow属性
overflow举例
border属性
border属性
盒子的应用：水平分割线
hr水平分割线不能设置颜色样式，有限制。
padding属性和margin属性
浏览器除了对字体字号等有一个默认值之外，对padding和margin属性也有，所以在定义这两个属性时首先要对其默认值清零。
对默认值清零
margin属性和padding属性可以取值的单位有：px和%（外层盒子的高度和宽度），上右下左四个取值。
以margin为例：
margin属性赋值
盒子模型margin
盒子模型margin举例
用margin属性的时候要注意两点：
（1）div标签要换行，是独占一行的
（2）使用margin属性时要注意，两个盒子在垂直方向上的margin会合并。
margin属性垂直方向上合并
margin属性还可以设定盒子的水平居中，将左侧和右侧的值取值为auto
水平居中
案例
大盒子里面有三个并列的图片
案例HTML
案例CSS
图片之间有一个浏览器默认设定的空白距离
空隙
CSS定位
概述
对盒子进行定位
定位方式分为三类：（1）文档流（2）浮动定位（3）层定位
3种定位机制
文档流flow
默认的方式，相当于平常写字一样，从上到下，从左到右
浮动定位float
想要盒子并列排列一般采用浮动定位
层定位layer
使用position属性设定，像图层一样前后层叠在一起
文档流定位
元素分类：block、inline、inline-block
元素类型装换：display属性
block元素特点：
-独占一行
-元素的height、width、margin、padding都是可以设置的
常见的block元素：
div、段落、列表、标题、表格、表单等
常见的block元素
将元素显示为block类型的元素：
可以设置height、width、margin、padding
inline元素特点：
-不单独占一行
-width、height不可设置
-width是由元素里面的文字和图片的宽度决定的，不能改变
常见的inline元素：<span>、<a>
将其他元素显示为inline元素：display：inline；
inline元素问题
inline元素默认是水平排列，但是有一个间距问题，一般最简单的方式就是将inline类型转换为block等其他类型的元素，或者在a标签外面套上p标签或者ul标签。
inline-block元素：
-不单独占一行
-元素的height、width、margin、padding都可以设置
常见元素：<image>
显示为inline-block元素：display：inline-block
display属性可以设置为四种值
display属性
浮动定位float
浮动定位
float属性将div实现横向多列布局
left——向左浮动
right——向右浮动
none——不浮动
float属性
float用处
box1向右浮动
float属性
float属性
clear属性
清楚单侧浮动元素的用法
将第二个盒子的clear设置为right，表示它的右侧不会有浮动元素，所以要另起一行。
clear属性
为了不让footer卡在右侧，将其clear属性设置为both
层定位
层定位
层定位概述
层定位概述
z-index可以是负数
position属性
固定定位
案例
相对定位
绝对定位
绝对定位
绝对定位
一般将父元素定义为相对定位，子元素定义为绝对定位，这样当我们移动父元素时，子元素也会跟着一起移动。
relative+absolute
relative+absolute案例
relative+absolute案例
将子元素（叶子）的top值设为负数。
如果在多个层相嵌套的情况下，我们可以将最外面的父元素设置为相对定位，被嵌套的父元素和子元素设置为绝对定位就行了。
作者：penpy
链接：https://www.jianshu.com/p/f963b7a0e32d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。