CSS标签显示模式、CSS行高、CSS 背景、CSS层叠性/继承性/优先级

1. 标签显示模式（display）

1.1 什么是标签显示模式

  • 什么是标签的显示模式？

    标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个

  • 作用：

    我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。

  • 标签的类型(分类)

    HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

1.2 块级元素(block-level)

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

  • 块级元素的特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。

  • 注意：

    • 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div

    • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

1.3 行内元素(inline-level)

  • 例：常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

  • 行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。

注意：

  • 链接里面不能再放链接。

  • 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

1.4 行内块元素（inline-block）

  • 例：在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。 （3）高度，行高、外边距以及内边距都可以控制。

1.5 三种模式总结区别

元素模式元素排列设置样式默认宽度包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素
行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度  

1.6 标签显示模式转换 display

  • 块转行内：display:inline;

  • 行内转块：display:block;

  • 块、行内元素转换为行内块： display: inline-block;

2. 行高那些事（line-height）

2.1 行高测量

行高的测量方法：

 

2.2 单行文本垂直居中

行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。

文字的行高等于盒子的高度。

这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

行高 = 上距离 + 内容高度 + 下距离

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

行高和高度的三种关系

  • 如果 行高 等 高度 文字会 垂直居中

  • 如果行高 大于 高度 文字会 偏下

  • 如果行高小于高度 文字会 偏上

3. CSS 背景(background)

3.1 背景颜色(color)

  • 语法：background-color:颜色值;   默认的值是 transparent  透明的

3.2 背景图片(image)

  • 语法：background-image : none | url (url) 

参数作用
none 无背景图（默认的）
url 使用绝对或相对地址指定背景图像

background-image : url(images/demo.png);

小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

3.3 背景平铺（repeat）

语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数作用
repeat 背景图像在纵向和横向上平铺（默认的）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺

3.4 背景位置(position)  

语法：

background-position : length || length

background-position : position || position

参数值
length 百分数 | 由浮点数字和单位标识符组成的长度值
position top | center | bottom | left | center | right 方位名词

 

注意：

  • 必须先指定background-image属性

  • position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

  • 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致

  • 如果只指定了一个方位名词，另一个值默认居中对齐。

  • 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y

  • 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中

  • 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

3.5 背景附着

  • 背景附着就是解释背景是滚动的还是固定的

  • 语法： background-attachment : scroll | fixed 

参数作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

3.6 背景简写

  • background：属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

  • background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

  • 语法：background: transparent url(image.jpg) repeat-y  scroll center top ;

3.7 背景透明(CSS3)

语法：background: rgba(0, 0, 0, 0.3);

  • 最后一个参数是alpha 透明度 取值范围 0~1之间

  • 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);

  • 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

  • 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

3.8 背景总结

属性作用值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment 背景固定还是滚动 scroll/fixed
背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明 让盒子半透明 background: rgba(0,0,0,0.3); 后面必须是 4个值

 

4 CSS层叠性

  • 概念：

    所谓层叠性是指多种CSS样式的叠加。

    是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

  • 原则：

    • 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

    • 样式不冲突，不会层叠

5 CSS继承性

  • 概念：

    子标签会继承父标签的某些样式，如文本颜色和字号。

    想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

  • 注意：

    • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

    • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行高的继承</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>
</head>
<body>
    <div>我是DIV</div>
    <p>我是P</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html

  • 行高可以跟单位也可以不跟单位

  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5

  • 此时子元素的行高是：当前子元素的文字大小 * 1.5

  • body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

6 CSS优先级

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

  • 选择器相同，则执行层叠性

  • 选择器不同，就会出现优先级的问题。

1). 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器计算权重公式
继承或者 * 0,0,0,0
每个元素（标签选择器） 0,0,0,1
每个类，伪类 0,0,1,0
每个ID 0,1,0,0
每个行内样式 style="" 1,0,0,0
每个!important 重要的 ∞ 无穷大

 

  • 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

  • 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

  • div { color: pink!important; }

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

  • div ul li ------> 0,0,0,3

  • .nav ul li ------> 0,0,1,2

  • a:hover -----—> 0,0,1,1

  • .nav a ------> 0,0,1,1

注意：

  1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

3). 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。

2） 如果没有选中，那么权重是0，因为继承的权重为0.

 

4). CSS权重的六个题

第1题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第1题</title>
        <style type="text/css">
            div div{ 
                color:blue;
            }
            div{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    试问这行字体是什么颜色的？
                </div>
            </div>
        </div>
    </body>
</html>

第1题答案：blue

解释：

blue：权重是 1+ 1

red：权重是 1

 

第2题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第2题</title>
        <style type="text/css">
            #father{
                color:red;
            }
            p {
                color:blue;  
            }
        </style>
    </head>
    <body>
        <div id="father">
            <p>试问这行字体是什么颜色的？</p>
        </div>
    </body>
</html>

第2题答案： blue

解释：

red：#father 没有被选中，p继承的权重是0

blue：p 被选中了

 

第3题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>第3题</title>
    <style type="text/css">
        div div div div div div div div div div div div{    
            color:red;
        }
        .me {  
            color:blue;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div class="me">试问这行文字是什么颜色的</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

第3题答案：blue

解释：

red：12个div，所以权重是 0，0，0，12  

blue：权重是 0，0，1，0

 

第4题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第4题</title>
        <style type="text/css">
            div p {   
                color:red;
            }
            #father {
                color:green;
            }
            p.c2{    
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p class="c2">
                试问这行字体是什么颜色的？
            </p>
        </div>
    </body>
</html>

第4题答案：blue

解释：

green： # father 没有被选中，继承权重是0

red： 权重是 2

blue：权重是11

 

第5题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>第5题</title>
    <style type="text/css">
        .c1 .c2 div{  
            color: blue;
        }
        div #box3 {  
            color:green;
        }
        #box1 div { 
            color:yellow;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                文字
            </div>
        </div>
    </div>
</body>
</html>

第5题答案：yellow

解释：

先看有没有被选中：只要满足 div、box3、c3，就能被选中，上述三个都满足，都能选中。

blue：先被排除，因为其他两个都有 # 符号，id选择器优先级比类选择器优先级高。

gree：权重 0，1，0，1

yellow：权重  0，1，0，1

gree和yellow的权重一样，根据就近原则，yellow 离盒子最近，所以是 yellow

 

第6题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第6题</title>
        <style type="text/css">
            #father #son{ 
                color:blue;
            }
            #father p.c2{ 
                color:black;
            }
            div.c1 p.c2{  
                color:red;
            }
            #father{
                color:green !important;
            }
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p id="son" class="c2">
                试问这行字体是什么颜色的？
            </p>
        </div>
    </body>
    
</html>

第6题答案：blue

解释：

 首先看一下有没有被选中，只要满足 p、son、c2，就能被选中，虽然 green 有一个 !important 但是没有被选中。所以 green 被排除了。

blue： 权重是两个 # ，black 权重是一个# ，red 权重没有 #

权重id比类大，所以颜色是blue

 

posted @ 2021-05-15 17:58  屠魔的少年  阅读(5)  评论(0)    收藏  举报