-
定位:
position 属性
static(默认值) : 没有定位
relative: 相对定位,没有脱离文档流,相对于没有定位前的位置,进行偏移
absolute: 绝对定位,脱离文档流
后面的元素会向上补齐,覆盖块级元素(或行内元素)
本质:元素会隐性变成inline-block(行内块级元素)原理:相对于离它最近的已定位的“祖先”元素,如没有定位的“祖先”元素, 就以初始可视窗口为准,直接进行设置
fixed : 固定定位,脱离文档流
原理:相对于浏览器的边框,进行定位top:
right:
left:
bottom:z-index: 指定层叠的顺序 . 值越大,就在最上面
z-index属性必须和position结合使用,才有效 -
定位应用场景:
- 重叠时应用
- 一般不用于布局
3.盒子尺寸
标准盒子:
总宽度 = 设置的宽度 + padding 左右 + border左右 + 外边距左右
怪异盒子:
总宽度 = 设置的宽度 + 外边距左右
设置的宽度 = 内容宽 + padding 左右 + border左右
box-sizing
content-box: 标准盒子计算尺寸
border-box : 怪异盒子计算尺寸
-
盒子属性
垂直方向的margin 后进行合并
行内元素不能设置垂直方向的margin
子元素与父元素之间没有任何填充物时,子元素的margin 会作用到父元素上思考 : 到底用magin ,padding
-
如何居中
具体:http://bugshouji.com/bbs-read-run?tid=1135
行内元素
水平居中:
text-align:center;
垂直居中:
单行文本:
height 与line-height 的高度相同时,可以实现垂直居中
多行文本:
方法1:
vertical-align:middle;
注:vertical-align 作用单元格时,才生效,所以一般会结合dispaly:table-cell; 一起使用
样式重点分析:
- 父级的标签,高度和行度一致
p{
height: 200px;
line-height: 200px;
border: 1px solid red;
font-size: 16px;
}
- 子标签, 设置为行内块级元素,垂直居中,且单独设置行高
注:line-hight:1 ; 这里的1指与父级的字体大小相同,你可以可以直接写具体的px
p span{
display: inline-block;
vertical-align: middle;
line-height: 1;
}
块级元素
水平居中:
方法1:常规方法 - 定宽元素
此方法缺点:内层元素必须设定(固定)宽度