CSS定位问题 ,CSS图文样式,CSS响应式

229 阅读2分钟

111## 1.absolute 和 relative 分别根据什么定位? image.png

 relative 根据自身来定位 对外界元素不会有任何影响
 absolute 根据最近一层的定位元素来进行定位 (它的父级元素没有就往上查找 如果没有任何定位元素的 直接找到body)
 
 CSS定位元素:
    absolute 生成绝对定位的元素,根据最近一层的定位元素来进行定位。
    relative 生成相对定位的元素,根据自身位置进行定位。
    fixed    生成固定定位的元素,根据浏览器窗口进行定位。
     

2.居中对齐有哪些实现方式?

  1. 水平居中
    inline 元素:text-align:center;
    block  元素:margin:auto;
    absolute 元素:left:50% + margin-left 负值
  1. 水平居中
    inline   元素:line-height 的值等于 height的值
    absolute 元素:top:50% + margin-top:负值
    absolute 元素:tarnsform(-50%,-50%)
    absolute 元素:left:0 right:0 top:0 bottom:0 + margin:au

3.CSS图文样式

  1. line-height如何继承?
  • body写line-height:2;子元素p标签中写18px 会根据font-size*父元素的比例做计算 image.png

  • body写line-height:30;子元素会直接继承父元素对应数值 image.png

  • body写line-height:200%;则继承计算出来的值。 例如(父元素中 font-size * 200%)

image.png

  • 总结
    1. 父元素写对应 比例(2 / 1.5) 子元素继承 font-size * 2 
    2. 父元素直接写数值 30px 子元素会直接继承对应的数值
    3. 父元素直接写写百分比 如:200% 子元素则会继承计算出来的值  计算方式:(父元素中 font-size * 200%

4.CSS响应式

  1. rem是什么?
  • rem是一个长度单位
     px   :绝对长度单位 ,最常用
     em  :  相对长度单位 ,相对于父元素 不常用
     rem :  相对长度单位 ,相对于根元素 , 常用于响应式布局
  • rem的弊端?
    阶梯性