CSS学习（第三天）（层叠性、继承性、优先级，CSS 盒子模型）

已于 2022-04-18 10:16:35 修改
阅读量389 收藏 2
点赞数 1
分类专栏： 2.CSS 文章标签： css
于 2020-08-13 17:45:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ingenuou_/article/details/107933514
版权

紧接第二天

CSS学习第三天

ctrl+alt+F将所有的都按照格式来

5 CSS的三大特性

CSS中有三个非常重要的三个特性：层叠性、继承性、优先级

5.1 层叠性

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

层叠性原则：

  • 样式冲突，遵循的原则是就近原则，哪个样式离结构进就执行哪个样式
  • 样式不冲突，不会层叠，正常去执行（有冲突的地方去覆盖，没冲突的地方去执行）
div {
    color: red;
    font-size: 18px;
   }
div {
    color: pink;/* 覆盖掉上面的red颜色 */
   }

在这里插入图片描述

5.2 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，简单理解：子承父业

  • 恰当使用继承可以简化代码，降低css样式的复杂性
  • 子元素可以继承父元素的样式（text-、font-、line-、这些元素开头的都可以继承，以及color属性）

虽然没有定义<p>的样式，但是定义了其父类<div>的样式，p继承了div的文字颜色和大小的样式

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   div {
    color: red;
    font-size: 18px;
   }
  </style>
 </head>
 <body>
  <div>
   <p>文本颜色</p>
  </div>
 </body>
</html>

5.2.1 行高的继承

font: 12px/24px "microsoft yahei";
font: 12px/1.5 "microsoft yahei";

body {
    color: red;
    font: 12px/1.5 "microsoft yahei";
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5
  • 此时子元素的行高是：当前子元素的文字大小*1.5
  • body 行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body {
    color: red;
    font: 12px/1.5 "microsoft yahei";
   }
   div {
    /* 子元素继承了父元素body的行高 1.5倍，当前文字大小的1.5倍，14*1.5 */
    font-size: 14px;
   }
  </style>
 </head>
 <body>
  <div>
   <p>文本颜色</p>
  </div>
  <p>江山如画</p>
 </body>
</html>

在这里插入图片描述
在这里插入图片描述

5.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生

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

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   div {
    color: red;
   }
   .test {
    color: pink;
   }
  </style>
 </head>
 <body>
  <div class="test">你笑起来真好看</div>
 </body>
</html>

类选择器（粉色）优先于标签选择器（红色）
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   div {
    color: red;
   }
   .test {
    color: pink;
   }
   #demo {
    color: green;
   }
  </style>
 </head>
 <body>
  <div class="test" id="demo">你笑起来真好看</div>
 </body>
</html>

ID选择器（绿色）优先于类选择器（粉色）
在这里插入图片描述

<div class="test" id="demo" style="color: purple;">你笑起来真好看</div>

行内样式style=""（紫色）优先于ID选择器（绿色）
在这里插入图片描述
将!important,放在后面，优先级最高，

.test {
    color: pink!important;
}

在这里插入图片描述

5.3.1 优先级(注意)

在这里插入图片描述

优先级注意点：

  1. 权重是有四组数字组成，但是不会有进位
  2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值（4个数字）
  4. 继承的权重是0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是0，
  5. 我们看标签到底执行哪个样式，就先看这个标签有没有直接被选出来
  6. a链接浏览器默认指定一个样式 蓝色有下划线 a {color: blue;},这个默认指定优先级高于继承来的样式

5.3.2 优先级(权重叠加)

权重叠加：如果是复合选择器，则会有权重叠加（但不会有进位），需要计算权重

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   /* 复合选择器会有权重叠加的问题 */
   /* ul li 权重  0,0,0,1+0,0,0,1=0,0,0,2   2*/
   ul li {
    color: pink;
   }
   /*li 权重  0,0,0,1  1 */
   li {
    color: red;
   }
   /* .nav li 权重  0,0,1,0+0,0,0,1=0,0,1,1  11*/
   .nav li {
    color: green;
   }
  </style>
 </head>
 <body>
  <ul class="nav">
   <li>大猪蹄子</li>
   <li>大猪蹄子</li>
  </ul>
 </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   /* 复合选择器会有权重叠加的问题 */
   /* ul li 权重  0,0,0,1+0,0,0,1=0,0,0,2   2*/
   ul li {
    color: pink;
   }
   /*li 权重  0,0,0,1  1 */
   li {
    color: red;
   }
   /* .nav li 权重  0,0,1,0+0,0,0,1=0,0,1,1  11*/
   .nav li {
    color: green;
   }
   /* .pink 权重  0,0,1,0  10*/
   .pink {
    color: purple;
    font-weight: 700;
   }
   /* .nav .pink 权重  0,0,1,0+0,0,1,0=0,0,2,0  20*/
   .nav .pink {
    color:pink;
    font-weight: 700;
   }
  </style>
 </head>
 <body>
  <ul class="nav">
   <li class="pink">大猪蹄子</li>
   <li>大猪蹄子</li>
  </ul>
 </body>
</html>

在这里插入图片描述

6 CSS 盒子模型

能够准确阐述盒子模型的4个组成部分

能够利用边框复合写法给元素添加边框

能够计算盒子的实际大小

能够利用盒子模型布局模块案例

能够给盒子设置圆角边框

能够给盒子添加阴影

能够给文字添加阴影

6.1 盒子模型

页面布局要学习的三大核心：盒子模型、浮动和定位，学习好盒子模型能非常好的帮助我们布局页面

6.1.1 看透网页布局的本质

网页布局过程:

1.先准备好相关的网页元素,网页元素基本都是盒子Box。
2.利用CSS设置好盒子样式,然后摆放到相应位置。
3.往盒子里面装内容.

网页布局的核心本质:就是利用CSS摆盒子。

6.1.2 盒子模型（Box Model）组成

所谓的盒子模型：就是把HTML页面中布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框（border）、内边距（padding），外边距（margin）和实际内容（content）

在这里插入图片描述

6.1.3 边框（border）

border 可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式（实线还是虚线）、边框颜色

语法：

border: border-width | border-style | border-color

在这里插入图片描述
border-width:5px边框的粗细，一般情况下都用px

border-style: solid实线边框

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   div {
    width: 200px;
    height: 200px;
    /* 边框的粗细 */
    border-width: 5px;
    border-color: pink;
    /* 边框的样式，实线边框 solid*/
    /* border-style: solid; */
    
    /* 边框的样式，虚线边框dashed */
    /* border-style: dashed; */
    
    /* 边框的样式，虚线边框dotted */
    border-style: dotted;
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.1.3.1 边框的复合写法

CSS边框属性允许你指定一个元素边框的样式和颜色

边框简写： 没有顺序

border: 1px solid red;

border: 5px solid pink;

边框分开写法：

border-top: 1px solid red;/* 只设定上边框，其余同理*/
border-bottom: 1px solid pink;/*下边框*/
border-left: 5px solid blue;
border-right: 5px solid purple;

border-top-color: red;
顺序：（反过来就给覆盖掉了）（边框的层叠性）
border: 5px solid pink;
border-top: 5px solid red;

6.1.4 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
语法：
border-collapse: collapse;

  • collapse单词是合并的意思
  • border-collapse: collapse;表示相邻边框合并在一起
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   table {
    width: 200px;
    height: 100px;
   }
   /* 定义表格table、td、th */
   table,
   td,
   th {
    /* 边框宽度、实线、粉色 */
    border: 1px solid pink;
    /* 合并相邻的边框 */
    border-collapse: collapse;
    /* 表格里面字体的大小 */
    font-size:14px;
    /* 表格里面的文字水平居中 */
    text-align: center;
   } 
  </style>
 </head>
 <body>
  <table align="center" cellspacing="0"> 
   <thead>
    <tr> 
     <th>排名</th>
     <th>排名</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>1</td>
    </tr>
    <tr>
     <td>1</td>
     <td>1</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

没有合并相邻的边框
在这里插入图片描述
合并相邻的边框border-collapse: collapse;
在这里插入图片描述

6.1.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小，因此我们有两种方案解决：

  1. 测量盒子大小的时候，不要量边框
  2. 如果测量的时候包括了边框，则需要width/height 减去边框宽度

6.1.6 内边距 （padding）

padding用于设置内边距，即边框与内容之间的距离

当内容和盒子贴的太近，这个时候就要增加内间距。

在这里插入图片描述

div {
    width: 100px;
    height: 60px;
    background-color: pink;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

<div>对对对对对对对对对对对对对对对对对对</div>

调整了上下左右内边距
在这里插入图片描述

6.1.6.1 内边距 (复合属性)

padding属性（简写属性）可以有一到四个值（这四个都很重要）
在这里插入图片描述

6.1.6.2 内边距 哪些情况会影响盒子的实际大小

当我们给盒子指定padding值之后，发生了两件事情：

  1. 内容和边框有了距离，增加了内边距
  2. padding影响了盒子的实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

解决方案：

  • 如果保证盒子跟效果图大小保持一致，则让width/height 减去多出来的内边距大小即可
  • 没有指定width/height不会撑开盒子（宽/高）

6.1.7 外边距（margin）

margin属性用于设置外边距，即 控制盒子和盒子之间的距离。
margin简写方式和padding完全一致
在这里插入图片描述

6.1.7.1 外边距（margin）典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  1. 盒子必须指定宽度（width）
  2. 盒子左右的外边距都设置为auto（上下是没有关系的）
  3. 前提：块级盒子

margin: 100px auto;：上下100px，左右auto自动水平居中
语法：

.header { width: 960px; margin: 0 auto;}

常见的写法，一下三种都可以：

  • margin-left: auto; margin-right: auto;
  • margin:auto;
  • margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center

6.1.7.2 外边距合并（相邻块元素垂直外边距的合并）

使用margin定义块元素的垂直边距时，可能会出现外边距的合并。

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者，这种现象被称为 相邻块元素垂直外边距的合并 。

解决方案，尽量只给一个盒子添加margin值

在这里插入图片描述

6.1.7.3 外边距合并（嵌套块元素垂直外边距的塌陷）

对于两个嵌套关系（父子）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

浮动的盒子不会有外边距合并的问题

解决方案：

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边框
  3. 可以为父元素添加overflow:hidden

在这里插入图片描述
第一种

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   .father {
    width: 400px;
    height: 400px;
    background-color: purple;
    margin-top: 50px;
    border:1px solid transparent;/*定义 父类 边框宽度1px 实线，透明*/
   }
   .son {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 100px;
   }
  </style>
 </head>
 <body>
  <div class="father"> 
   <div class="son"></div>
  </div>
 </body>
</html>

在这里插入图片描述
第二种

/* border:1px solid transparent; */
    padding:1px;/*修改 父类 内边距也是同样的效果*/

第三种
添加overflow:hidden;不需要额外增加盒子的大小

/* border:1px solid transparent; */
    /* padding:1px; */
    overflow:hidden;/*可以为父类添加 overflow:hidden;*/

还有其他方法，比如浮动、固定、绝对定位的盒子，不会有塌陷问题，后面总结。

6.1.8 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

这也是我们css的第一行代码
* {
    padding:0;/*清除内边距*/
    margin:0;/*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级或者行内块元素就可以。

6.2 PS基本操作

切图工作基本上都在PS完成的
在这里插入图片描述
在这里插入图片描述

6.3 综合案例

6.3.1 案例一：产品模块

在这里插入图片描述

6.3.2 案例二：快报模块

在这里插入图片描述
去掉li前面的项目符号（小圆点）
语法：

list-style: none;

6.3.3 案例总结

问题1：布局为啥用不同盒子，我只想用div？

标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p

问题2：为啥用那么多类名？

类名就是给每个盒子起一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也方便

问题3：到底用margin还是padding？

大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

问题4：自己没有思路？

布局有很多种实现方式，可以先模仿再自己去设计
一定多运用辅助工具，屏幕画笔、PS

6.4 圆角边框

在CSS3中，新增了圆角边框的样式，这样我们的盒子就变成圆角了。

border-radius属性用于设置元素的外边框圆角。

语法：
border-radius: length;
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

6.4.1 圆形

  • 参数值可以为数值或者百分比的形式
    定义一个圆----->先定义一个正方形，再定义一个正方形宽高的一半为半径。
    50%，就是宽度和高度的一半 等价于100px。
  • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可,或者直接写为50%
  • 如果是个矩形，设置为高度的一半就可以做
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，左下角，右下角
  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

border-radius: 50px;四角都是50px
在这里插入图片描述

border-radius: 50px 20px;左上角和右下角为50px,右上角和左下角为20px
在这里插入图片描述

border-radius: 50px 20px 10px;左上角为50px ，右上角和左下角为20px，右下角为10px
在这里插入图片描述

border-radius: 50px 20px 10px 6px;左上角，右上角，左下角，右下角
在这里插入图片描述

	width: 200px;
	height: 200px;
	border-radius: 100px;

	border-radius: 50%;

div {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: pink;
   }

在这里插入图片描述

6.4.2 圆角矩形

设置为高度的一半

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    /*为高度的一半*/
    border-radius: 50px;
   }

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

6.5 盒子阴影

CSS3新增了盒子阴影，我们可以使用box-shadow 属性为盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color insert;

blur模糊距离：模糊的还是实的
spread阴影的尺寸，就是影子的大小

注意：

  • 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
  • 盒子阴影不占用空间，不会影响其他盒子的排列

在这里插入图片描述

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    margin: 100px auto;
    /*spread阴影的尺寸，就是影子的大小，不能为负值*/
    box-shadow: -4px -4px 10px -4px  rgba(0,0,0, .3);
}

在这里插入图片描述

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    margin: 100px auto;
    box-shadow: 10px 10px 10px 10px  rgba(0,0,0, .3);
}

在这里插入图片描述

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    margin: 100px auto;
}
div:hover {
    /* 原先盒子没有阴影，当鼠标经过盒子就添加阴影效果 */
    box-shadow: 10px 10px 10px 10px  rgba(0,0,0, .3);
}

6.6 文字阴影(了解)

在css3中，我们可以使用text-shadow属性将阴影应用于文本
语法：
text-shadow: h-shadow v-shadow blur color;
在这里插入图片描述

div {
    width: 200px;
    height: 100px;
    background-color: pink;
    margin: 100px auto;
    text-shadow: 5px 5px 6px rgba(0,0,0, .3);
   }

7 CSS的注释

加蓓努力我先飞
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS基础学习】CSS的三大特性
01-08
CSS有三大特性，分别是 继承性，层叠性，优先级。CSS的主要特征是继承性，这里先讲解继承性。 继承性 继承性的使用说明 继承性的描述： 继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父类的...
CSS学习（三）CSS优先级和盒子模型
qq_61623880的博客
06-30 88
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。
CSS优先级&CSS盒子模型
sz1125218970的博客
12-25 549
web笔记
CSS盒子模型 - 优先级
qq_52647098的博客
07-11 372
CSS盒子模型 - 优先级
CSS继承性+层叠性+盒子+浮动
TATA2015的博客
12-14 172
CSS继承性+层叠性+盒子+浮动 CSS继承性 <style> div{ color: pink; font-size: 30px; width: 500px; background: green; ...
CSS 样式的优先级(权重)
houyanhua1的专栏
03-10 2294
默认样式&lt;标签选择器&lt;类选择器&lt;id选择器&lt;行内样式&lt;!important      0                1                10            100         1000      1000以上继承的权重为0  (字体的css会继承自父类标签元素)权重会叠加     (div.box  权重:1+10=11)  (div #...
css基础、选择器介绍、样式介绍
12-29
CSS三大特性：继承性、层叠性、优先级； 盒子模型：内容、边框、内边距、外边距； CSS布局：结构伪类选择器、伪元素、标准流、浮动； 定位：绝对定位、相对定位、固定定位、子绝父相； 装饰：垂直对齐方式、光标...
CSS3笔记1
08-04
多背景(CSS3)凹凸文字导航栏案例文本的装饰CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS特殊性（Specificity）盒子模型（CSS重点）看
css入门笔记
05-15
继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ color:red !...
div+css有实例,易学易懂
07-11
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
CSS优先级
qq_39509610的博客
12-07 541
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。 CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具
Web前端之 CSS入门第三天
xiaobao3306的博客
10-17 207
css第03天 ## 一、css三大特性 ### 1、层叠性 ​ 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 ​ 层叠性原则: - 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 - 样式不冲突，不会层叠 ![1571490015544](images\1571490015544.png) ### 2、继承性 ​...
css_复合选择器_border_css层叠性与覆盖性_background_多标记构图法_行高_文本修饰属性_超链接的伪类_导航制作_Unit_4;
qq_38053395的博客
07-14 352
Topic 1 ： 复合选择器：后代选择器：一个空格表示包含（嵌套）关系，不管空格前后是哪种基础选择器，只要有空格就是后代选择器1         /*ul li{ background:green;}*/ 2         .father .son{ background:blue;} 并集选择器：作用：控制页面中样式相同的盒子一个逗号表示合并关系1         div,p,h1...
CSS 基础(盒模型、选择器、权重、优先级)
weixin_33725126的博客
09-06 294
层叠样式表(Cascading Style Sheets) 盒模型 选择器 权重与优先级 继承 盒模型 盒模型包含四部分：margin、border、padding、content。如果不使用doctype声明，浏览器默认使用自己的模式解析。如IE使用IE盒模型，firefo则使用标准盒子模型等。 标准盒子模型 IE盒子模型的区别是，content区域包含border和padding 选...
CSS基本功：盒模型、选择器优先级
tt_Litingting的博客
05-29 1692
盒模型盒子模型就是容器在页面上所占的空间大小。 CSS盒子模型分为标准的W3C盒子模型和低版本的IE盒子模型 盒子模型由4个属性组成：外边距（margin）、边框（border）、内边距（padding）和内容（content）。 比方来说，你在网上买了一个杯子，快递小哥给你送过来的时候肯定是放在一个盒子里包装好了的。这个杯子就相当于内容(content),为了防止杯子在运输的时候不小心打碎，
CSS盒子模型-02-优先级-叠加计算
weixin_63562705的博客
12-10 343
3.2权重叠加计算 ★场景: 如果是复合选择器，此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效 ★权重叠加计算公式: (每一级之间不存在进位) ★比较规则: 1.先比较第一级数字,如果比较出来了，之后的统统不看 2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看 3. ...... 4.如果最终所有数字都相同, 表示优先级相同，则比较层叠性(谁写在下面，谁说了算!) ★注意点: !important如果不是继承， 则权重最高，天下第一.
盒子模型、优先级、新增伪类
隅寒的博客
04-05 195
1、行内元素有哪些?块级元素有哪些? 行内: a b span input… 块: div ul li p h1 dl… 空: br hr 2、画图解释一下CSS的盒子模型。 3、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算？ （1）CSS选择符有哪些? id # class . 标签 div p 相邻 ul+div 子 ul>li 后 ul li 通配 * 属性 a [hre...
CSS盒子模型，CSS选择符，CSS优先级算法（八）
kiku
10-02 358
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ （1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些？哪些属性可以继承？ id选择器（ # myid） ...
css盒子子类继承父类哪些,css不继承父类的属性有哪些
weixin_29749887的博客
08-04 2157
css不继承父类的属性有：display、width、height、margin 、border、float、clear、position、top、right、bottom、left、background、content、size等等。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。CSS继承是一种规则，它允许样式不仅应用于某个特定html标签元...
css层叠性和css继承性
最新发布
04-09
CSS层叠性（Cascading）和CSS继承性（Inheritance）是CSS的两个重要特性。 1. CSS层叠性： CSS层叠性指的是当多个CSS规则应用于同一个元素时，通过一定的规则来确定最终应用的样式。具体来说，CSS样式表中的规则...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值