css属性的继承
- 给元素设置样式之后,该元素的后代都会具有该样式
- 可以继承
- 字体类:font-size(字体大小)font-weight(字体加粗) font-style(字体倾斜)font-family(字体类型)
- 文本类:color(文本颜色) text-indent(缩进) line-height(行高) letter-spacing(字符间距) word-spacing(单词之间的距离) text-align(文本对齐方式)
- 列表属性:list-style
- 不可继承
- text-decoration(文本修饰) width height float padding margin border
定位 position
- static 默认值
- relative 相对定位
- 参考物:自己本身
- 移动距离:left/right/bottom/top:数值+px
- 特点
- 移动之后依然占位
- 定位元素的层级要比普通元素的层级要高
- aboslute 绝对定位
- 参考物(包含块):有定位属性(除static属性之外)的祖先元素,设置绝对定位的元素,会一层一层向上找有定位属性的祖先元素,谁有定位属性,就参考谁去移动,如果找到body也没有找到有定位属性的祖先元素的话,就参考body,也就相当于浏览器的窗口
- 移动距离:left/right/bottom/top:数值+px
- 特点
- 脱离文档流,会遮挡后面元素的文字
- 给元素设置绝对定位后,margin:auto会失效
- 给内联元素添加定位后,内联元素会变成块级元素
- 给元素不设置宽,自适应宽度的时候,加了绝对定位,自适应会失效,需要重置元素的宽width:100%
- 应用场景
- 元素水平垂直居中
<div class="box1"> <div class="box2"></div> </div>
.box1 { width: 600px; height: 400px; background-color: pink; margin: 0 auto; position: relative; } .box2 { width: 200px; height: 200px; background-color: cornflowerblue; position: absolute; /* left: 150px; */ /* top: 100px; */ left: 50%; 当前参考元素的宽度的50% margin-left: -100px; 向左拉取当前盒子宽度的一半 top: 50%; margin-top: -100px;向上拉取当前盒子高度的一半 }
- 元素水平垂直居中
设置边框圆角
- border-radius:数值+px;