第八章 CSS属性的继承

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;