元素显示模式以及css的特性

余晖_
193 阅读3分钟

Chrome调试工具

Chrome.png

  • 如果出现了黄色感叹号，并且被划掉了，则这句代码一定有错误。
  • 样式没有显示，最大的可能是 类名拼写错误。

Chrome调试工具能够帮助我们快速的对代码进行纠错和调试，很重要！

元素显示模式

块级元素

显示特点:

1.独占一行(一行只能显示一个)

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签:

  • div、p、h、ul、li...

html

 <div>
        块级元素
 </div>

css

div {
            width: 300px;
            height: 300px;
            background-color: pink;
}

行内元素

显示特点：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

代表标签：

  • a、span、i、em、strong...

html

<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>

css

span {
     /* 设置宽高无效 */
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

行内块元素

显示特点：

1.一行可以显示多个

2.可以设置宽高

代表标签：

  • input、textarea、button、select...
  • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具显示的结果是inline。

html

<input type="text">
<input type="text">
<button>按钮</button>
<button>按钮</button><br><br>
<img src="./img/1.jpg" alt="">
<img src="./img/1.jpg" alt="">

css

input {
    width: 150px;
    height: 50px;
}
​
button {
     width: 150px;
     height: 50px;
}
​
img {
     width: 150px;
}

元素显示模式转换

yuansu.png

元素显示模式转换主要是为了改变元素原有的显示特点，转换成块级元素和行内块元素用的比较多。

HTML嵌套规范

  • 块级元素可以嵌套：文本、块级元素、行内元素、行内块元素等等，但是p标签中不能嵌套div、p、h、等块级元素。
  • a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签。

css特性

继承性

子元素默认继承父元素样式的特点

  • 控制文字的属性都能继承，不是控制文字的属性不能继承

可以通过调试工具判断样式是否可以继承

可以继承的常见属性：color、font-style、font-weight、font-size、font-family、text-indent、text-align、line-height...

html

<div>
    <div>
        <p>继承性</p>
    </div>
</div>

css

 div {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 以下属性可以继承 */
      color: blue;
      font-style: italic;
      font-weight: 700;
      font-size: 20px;
      font-family: '宋体';
      text-indent: 2em;
      text-align: center;
      line-height: 200px;
}

继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

1.a标签的color会继承失效

  • 其实color属性继承下来了，但是被浏览器设置的样式给覆盖掉了

2.h系列标签的font-size会继承失效

  • 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

层叠性

相同的选择器设置相同的样式才会有层叠性

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上

给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最下面的样式会生效

html

<div class="box">层叠性</div>

css

 .box {
            font-size: 20px;
            color: pink;
        }
        .box {
            color: green;
        }
        .box {
            color: orange;
        }

优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

继承<通配符<标签选择器<类选择器<id选择器<行内样式<!important

!important不能提升继承的优先级，只要是继承优先级最低

如果不是继承,!importmant最大，实际开发不建议使用!impormant

权重叠加

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

quanzhong.png

权重叠加计算公式中每一级之间不存在进位

如果优先级相同，则比较层叠性，最终样式在最下面的生效

avatar
文章
阅读
粉丝