CSS - CSS特性

coderklaus
183 阅读7分钟

继承

CSS的某些属性具有继承性(Inherited):

  1. 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性，相当于给每一个后代元素都设置了相同的样式

  2. 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高)

  3. 常见的文本和字体相关的样式 (例如: font-size/font-family/font-weight/line-height/color/text-align等类似于font-*或text-*格式的属性 ) 都具有继承性

    但并不是全部的文本和字体相关的样式都会被继承(例如: text-decoration等属性没有继承性)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*
      因为color具有继承性 所以当在div.fahter上设置字体颜色为红色的时候
      其子元素div.child的字体颜色也会变成红色
    */
    .father {
      color: red;
    }
  </style>
</head>
<body>
  <div class="father">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    <div class="child">
      Consectetur blanditiis laudantium, minima iste id enim magni rem possimus,
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      /*
        此时字体大小相对于父容器字体大小的2倍
        没有父容器的时候，就相对于body的字体大小，也就是浏览器默认的字体大小
      */
      font-size: 2em; /* 32px  */
    }

    /*
      继承过来的是属性的计算值 而不是属性的设置值
      所以此时 div.child 的字体大小是32px（计算值）
      而不是2em（设置值），否则 div.child的字体大小会变成64px
    */
  </style>
</head>
<body>
  <div class="father">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    <div class="child">
      Consectetur blanditiis laudantium, minima iste id enim magni rem possimus,
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      border: 1px solid red;
    }

    .child {
      /*
        border属性 默认情况下是不会继承下来的
        但是我们可以将某一个元素的属性值设置为inherit
        从而开启属性的强制继承，来将父元素中设置的border值继承下来
      */
      border: inherit;
    }
  </style>
</head>
<body>
  <div class="father">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    <div class="child">
      Consectetur blanditiis laudantium, minima iste id enim magni rem possimus,
    </div>
  </div>
</body>
</html>

层叠

对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置

对应的属性值会被一层层覆盖上去，最终只有最后一个或者优先级最高的那个会生效

判断标准

  1. 选择器的权重, 权重大的生效, 根据权重可以判断出优先级
  2. 先后顺序, 权重相同时, 后面设置的生效

选择器权重

选择器权重
!important10000
内联样式1000
id选择器100
类选择器、属性选择器、伪类10
元素选择器、伪元素1
通配符0

层级可以被累加

LKwOSE.png

元素类型

HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等

对于一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起

对于一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起

而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行

所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:

  1. 块级元素(block-level elements): 独占父元素的一行
  2. 行内级元素(inline-level elements): 多个行内级元素可以在父元素的同一行中显示

对于任何的块级元素或者行内级元素而言，属性的默认值一般为auto

例如: width和height的默认值即为auto

表示的是自己不进行任何的设置，其具体的值由浏览器来自主进行决定

display

属性说明描述
block让元素显示为块级元素1. 在父级元素中独占一行
2. 可以设置宽度和高度
3. 高度默认由内容来决定
4. 即使设置了元素的宽度，元素依旧独占一行
inline让元素显示为行内级元素1. 可以和其它行内级元素在同一行
2. 行内非替换元素不能设置元素的宽高
3. 行内替换元素可以设置元素的宽高
4. 默认的宽度和高度由元素内容的宽度和高度决定
inline-block让元素同时具备行内级、块级元素的特征1. 可以和其它行内级元素在同一行
2. 可以设置元素的宽度和高度
3. 默认的宽度和高度由元素内容的宽度和高度决定
none隐藏元素隐藏元素

注意事项

  1. 块级元素和行内块元素可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)
  2. p元素不能包含其他块级元素， 否则渲染会混乱
  3. 一般情况下，行内元素只能包含行内级元素

LK3dLC.png

  1. 在严格意义上讲，并不是所有的行内级元素(inline level)都不可以设置宽度和高度

    而是仅仅只有行内非替换元素(例如a, span等)这类元素是不可以设置元素的宽度和高度的

    但是对于行内替换元素(例如img，input等)这类元素是可以设置元素的宽度和高度的

隐藏元素的方式

方式描述备注
display: none元素不显示，也不占位
但是元素存在于DOM中		只能设置元素是显示还是隐藏
visibility: hiddenvisibility的可选值是`visiblehidden<br />默认值是visible<br />visibility`只能设置元素的显示和隐藏
不显示，占位，且存在于DOM中，不响应用户交互		只能设置元素是显示还是隐藏
opacity: 0设置当前元素及其子元素的透明度
可以设置全透明，全不透明和半透明等
不显示，占位，且存在于DOM中，响应用户交互		可以设置元素透明度
可以设置元素自身和元素下所有子元素的透明度
rgba(x, x, x, 0)通过使用RGBA颜色模型并设置透明度为0，
使元素的颜色（例如背景色或文本颜色）透明，因而在视觉上不可见
不显示，占位，且存在于DOM中，响应用户交互		可以设置元素透明度
不推荐使用，局限性过大
这种方法适用于文本、边框、背景等的颜色设置，
但整个元素不会被隐藏，除非所有的颜色都被设置为完全透明
/*
	在css中 如果一个值为0.x 其前边的0可以被省略
	也就是说 0.5 等价于 .5
*/
opacity: 0.5

overflow

overflow用于控制内容溢出时的行为

值描述
visible默认值
溢出的内容照样可见
hidden溢出的内容直接裁剪
scroll无论元素是否溢出，都会显示横向和竖向滚动条
只有内容溢出了，滚动条才是可以交互的，否则对应滚动条将是不可交互的（灰色显示）
auto自动根据内容是否溢出来决定是否提供滚动机制
如果内容未溢出，就不显示滚动条；如果内容溢出，则提供滚动条

PS:

  1. 滚动条会占用容器的 width 或 height，这就是所谓的“滚动条占位”，这将减少用于显示内容的可用空间

  2. 溢出的文本并不占位，不会影响标准流中的其它元素的布局

    所以如果后边有其它元素，那么后边的其它元素会覆盖在溢出的文本上

avatar
文章
阅读
粉丝