首页 大杂烩正文

CSS学（第三天）（层叠性、遗传性、优先级，CSS盒模型）

原创
小哥 3年前 (2022-11-16) 阅读数 8 #大杂烩

紧接第二天

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的文字颜色和大小的样式



 
  
  
    
    
    
          
	      
	
  
 
 
  

   
文本颜色

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>

    文本颜色

    江山如画


5.3 优先级

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

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



 
  
  
    
    
    
          
	      
	
  
 
 
  
你笑起来真好看

类选择器（粉色）优先于标签选择器（红色）



 
  
  
    
    
    
          
	      
	
  
 
 
  
你笑起来真好看

ID选择器（绿色）优先于类选择器（粉色）

你笑起来真好看

行内样式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 优先级(权重叠加)

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



 
  
  
    
    
    
          
	      
	
  
 
 
  
    
   
  • 大猪蹄子
    • 
   
  • 大猪蹄子
    • 
  

 




 
  
  
    
    
    
          
	      
	
  
 
 
  
    
   
  • 大猪蹄子
    • 
   
  • 大猪蹄子
    •

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 实线边框



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>

    排名 排名
    1 1
    1 1

没有合并相邻的边框

合并相邻的边框 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;
}


对对对对对对对对对对对对对对对对对对

调整了上下左右内边距

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


第一种


第二种

/* 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的注释

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

上一篇：加括号 下一篇：requests，pymysql，django的使用
相关文章
最新文章
标签列表
粤ICP备19068341号
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
Powered By Z-BlogPHP Theme By 编程老白