2. 技术
    3. 【笔记】CSS的三大特性和css元素显示模式

    【笔记】CSS的三大特性和css元素显示模式

    技术2024-06-17  77

    CSS三大特性

    一、层叠性

    相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。 层叠性主要解决样式冲突的问题

    层叠性原则：
    如果样式冲突，则遵循就近原则，哪个样式近 ，就执行哪个样式。 例如： div{ background-color: black; } div{ background-color: orange; }

    先给div背景颜色设置成黑色，后设置成橙色。因为div离设置成橙色这个样式近，所以最终div会显示成橙色

    二、继承性

    子标签会继承父标签的某些样式，如文本颜色和字号( text- , font- , line-这些元素开头的可以继承,以及color属性)

    案例：

    <style> div{ color: blueviolet; font-size: 16px; } </style> <body> <div> <p>我是子标签，没有设置样式，但是 父标签设置了，所以我继承后字体变大变紫了</p> </div> </body>

    效果显示：

    继承中的特殊情况——行高的继承
    body { font : 12px/1.5 Microsolft YaHei; } 行高可以跟单位，也可以不跟单位如果子元素没有设置行高，则会继承父元素行高为1.5此时子元素行高为：当前子元素的文字大小*1.5body行高1.5，子元素可以根据自己文字大小自动调整行高 例如： <style> body{ color: blueviolet; font: 12px/1.5 'Microsoft Himalaya'; } div{ /* 子元素继承了父元素body的行高1.5 ,这个1.5就是当前元素文字大小font-size 的1.5倍 */ /* 所以当前div的行高就是14 * 1.5 = 21像素*/ font-size: 14px; } </style>

    三、优先级

    当同一个元素指定多个选择器 如下：

    <style> div{ color: blue; } .new { color: orange; } </style> <body> <div class="new"></div> </body>

    这时就会有一个原则告诉我们，到底该选择谁，因此也就会有优先级的产生。

    选择器相同, 则执行层叠性。选择器不同,则根据 选择器权重执行

    选择器权重大小如下表所示：

    选择器选择器权重继承 或 *0,0,0,0元素选择器0,0,0,1类选择器 ，伪类选择器0,0,1,0ID选择器0,1,0,0行内样式 style=“ ”1,0,0,0！important无穷大

    因此在上述代码中，div是元素选择器，.new是类选择器。类选择器的权重大于元素选择器，所以最后显示效果为橙色。

    优先级注意事项：

    权重由4位数组成，但是不会有进位等级判断从左往右，数值相等则判断下一位继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0a链接浏览器有默认指定样式，蓝色，下划线。因此给a链接的父元素body指定样式时，a不会继承。 例如： <style> /*父元素的权重是100*/ #father { color: orange; } /*p继承的权重是0*/ p { color: blue; } </style> <body> <div id="father"> <p>我会变蓝</p> </div> </body>

    尽管ID选择器的权重较大，但是p继承过来的权重过来的权重是0，所以p标签会执行自己设置的样式，最终结果是蓝色。

    /所以以后我们看标签到底执行那个样式，就先看这个标签有没有直接被选出来/

    权重叠加

    如果是复合选择器,则会有权重叠加,需要计算权重

    <style> /*ul li 的权重是 0，0，0，1 + 0,0,0,1 = 0,0,0,2 */ ul li { color: blue; } /*li 的权重是0，0，0，1*/ li { color: orange; } /*.new li 的权重是0，0，1，0 + 0，0，0，0，1 = 0，0，1，1*/ .new li { color: pink; } </style> <body> <div class="new"> <ul> <li>我会变粉色</li> <li>我会变粉色</li> </ul> </div> </body>

    注意：权重会叠加，但永远不会有进位

    CSS元素显示模式

    什么是元素显示模式？

    元素显示模式就是 元素（标签）以什么样的方式显示 比如div，它的显示方式就是自己独占一行，而span标签，一行却可以放多个。 在网页中有许许多多的标签，不同的地方会用到不同的标签，了解它们的特点能有利帮助我们布局。

    一、块元素

    常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、 <ol>、<li>等 ,其中 <div>标签是最典型的块元素。

    特点：
    自己独占一行，高度和宽度、外边距以及内边距都可以控制宽度默认是父级宽度的100%是一个容器或者盒子，里面可以放块级元素或者行内元素文字类的元素内不能使用块级元素。<p>、<h1>~<h6>等都属于文字类块级类标签。 <p> <div>不可以把我放p里面</div> </p> /*此种方法是错误的*/

    二、行内元素

    常见的行内元素有<a>、<strong>、 <b>、<em>、<i>、 <del>、 <ins>、 <span>等 ,其中 <span>标签是最典型的行内元素。

    特点：
    一行可以显示多个不能直接设置宽、高默认宽度就是它的文本宽度行内元素内只能放文本或其他行内元素链接里面不能再放链接，但是行内元素<a>链接里面可以放块元素，这是个特殊情况。

    三、行内块元素

    行内元素中有一些特殊标签，它们同时具有块元素和行内元素特点，比如<img>、<input>、<td>等

    特点：
    和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。默认宽度就是它本身内容的宽度（行内元素特点）高度，行高、外边距以及内边距都可以控制（块元素特点）

    以input为例：

    <style> input { width: 100px; height: 50px; } </style> <body> <input type='text'> <input type='text'> </body>

    显示效果：

    四、元素显示模式转换

    在一些情况下，一种模式的元素需要另外一种模式的元素的特性，这时我们就需要转换元素显示模式。比如我们想要给行内元素<span>设置宽和高，这就需要把<span>转换成块元素。

    转换为块元素 display: block； <style> a { display: block;/*转换为块元素*/ width: 200px; background-color: palevioletred; } </style> <body> <a href="#">我是行内元素，本来不能设置高度</a> <a href="#">我是行内元素，但是转换成了块元素</a> </body>

    效果显示： 2. 转换为行内元素 diaplay: inline；

    <style> div { display: inline; /*将div转换为行内元素*/ } </style>

    3.转换为行内块元素 display: inline-block

    <style> span { display: inline-block; /*将span标签转换为行内块元素，可设置高度宽度*/ width: 2000px; height: 50px; } </style>
    Processed: 0.016, SQL: 9