高级选择器，盒子模型，CSS样式

xby_1.

已于 2023-04-13 09:23:19 修改

阅读量181

点赞数

文章标签： css css3

于 2023-03-31 19:02:05 首次发布

本文链接：https://blog.csdn.net/m0_73180034/article/details/129778123

版权

1.Emmet 语法

1.1 快速生成HTML结构语法

生成标签，直接输入标签名按Tab键即可，比如：div 然后按Tab键，就可以生成<div> </div>
如果想要生成多个相同标签，加上* 就可以了，比如：div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用> 比如 ul > li 就可以了
如果有兄弟关系的标签，用 + 就可以了，比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了
如果生成的div类名是有顺序的，可以用自增符号 $
如果想在生成的标签内写内容可以用{ }表示

1.2 快速生成CSS样式

CSS基本采取简写形式即可

比如 w200 按Tab 可以生成 width：200px
比如 lh26 按Tab 可以生成 line-height：26px

2.CSS的复合选择器

复合选择器是建立在基础选择器之上，对基础选择器进行组成而成的

在这里插入图片描述

2.1 后代选择器

后代选择器又称包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2{ 样式声明 }

上面语法表示选择元素1里面的所有元素2（后代元素）

代码：

<head>
<style>
        ul li{
          color:deeppink;
        
        }
 </style>
</head>
<body>
    <ul>
      父与子
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
    </ul>
    <ol>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
    </ol>
    </body>

效果图:
在这里插入图片描述

元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

2.2 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选择亲儿子元素

元素1>元素2{样式声明}

上述语法表示选择元素1里面的所有直接后代（子元素）元素2

元素1和元素2之间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管，也可以叫他亲儿子选择器

代码：

<body>
.nav>a{
color:deeppink;
}
</body>
<head>
    <div class="nav">
      <a href="#">我是儿子</a>
      <p><a href="#">我是孙子</a></p>
    </div>
</head>

效果图:
在这里插入图片描述

2.3 并集选择器

并集选择器可选择多组标签，同时为它们定义相同的样式，通常用于集体声明

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

元素1，
元素2 {样式声明}

上述语法表示选择元素1和元素2

元素1和元素2之间用逗号隔开，最后一个选择器不需要加逗号
逗号可以理解为和的意思
并集通常用于集体声明

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号表示

2.4.1 链接伪类选择器

在这里插入图片描述
注意事项：

为了确保生效，请按照LVHA的顺序声明
记忆法：love hate
因为a链接在浏览器中有默认样式，所以实际工作中给链接单独制定样式

常用写法：在这里插入图片描述

2.4.2 focus伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说

input:focus{
background-color:yellow;
}

2.5 复合选择器总结

在这里插入图片描述

2.6 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
在这里插入图片描述

内容为空时的写法：content:“” ;

伪元素清除浮动

在这里插入图片描述

3.CSS的元素显示模式

3.1 什么是元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面，元素的显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个span

HTML元素一般分为块元素和行内元素两种类型

3.2 块元素

在这里插入图片描述
块级元素的特点：

比较霸道，自己独占一行
高度、宽度、外边距、内边距都可以控制
宽度默认是容器（父级宽度）的100% 例：div的父级是body
是一个容器及盒子，里面可以放行内或块级元素

注：

文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放<div>
同理，<h1>-<h6>等都是文字类块级标签，里面也不能放其他块级元素

3.3 行内元素

在这里插入图片描述
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给a转换一下块级模式最安全

3.4 行内块元素

在这里插入图片描述
行内块元素的特点：

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

3.5 元素显示模式总结

在这里插入图片描述

3.6 显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如：比如想要增加链接a的触发范围。

转换为块元素：display：block；
转换为行内元素：display：inline；
转换为和行内块元素：display：inline-block；

3.7 单行文字垂直居中的原理

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
在这里插入图片描述

3.8 元素的显示与隐藏

类似网站广告，当我们点击关闭时就不见了，但是我们重新刷新页面，会重新出现！
本质：让一个元素在页面中隐藏或者显示出来

display显示隐藏元素

display属性用于设置一个元素应如何显示

display：none ；隐藏对象
display：block；除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏

visibility：visible；元素可视
visibility：hidden；元素隐藏

visibility隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visibility：hidden
如果隐藏元素不想要原来位置，就用display：none（用处更多重点）

overflow 溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么

在这里插入图片描述
一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
但如果有定位的盒子，请慎用overflow：hidden，因为它会隐藏多余的部分

小结：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    .tudou {
        position: relative;
        width: 320px;
    height: 320px;
    margin: 30px auto;
    background-color: aqua;
    }
   .tudou img{width: 100%;
        height: 100%;
    }
    
    .mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        background: rgba(0,0,0,.4) url(images/播放.png) no-repeat center;
        /* display: none; */
    }
    .tudou:hover .mask{
        display: block;
    }
    </style>
   
</head>
<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/美女.jpg">
    </div>
</body>
</html>

效果图：
在这里插入图片描述

4.CSS的背景

4.1 背景颜色

background-color

4.2 背景图片

background-image
优点是非常便于控制位置

div{
width:300px;
height:300px;
background-image:url (url);
}

在这里插入图片描述
注：不要落下url （）

4.3 背景平铺

background-repeat: repeat | no repeat | repeat-x | repeat-y

在这里插入图片描述
注：页面既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色

4.4 背景图片位置

background-position

background-position：x y;

参数代表的意思是：x坐标和y坐标可以用方位名词或精准单位
在这里插入图片描述

4.4.1 参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和top left效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

4.4.2 参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

4.4.3 参数是混合单位

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

4.5 背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动，后期可以制作视差滚动的效果

background-attachment ：scroll | fixed

4.6 背景属性复合写法

在这里插入图片描述
例：

4.7 背景色半透明

background：rgba (0,0,0,0.3)

最后一个参数是alpha透明度，取值范围在0~1之间
我们习惯把0.3的0省略掉，写成background：rgba(0,0,0,.3)
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

4.8 背景总结

在这里插入图片描述

5. CSS的三大特性

5.1 层叠性

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

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

5.2 继承性

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

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

行高的继承性

body{
font:12px/1.5 Microsoft Yahei;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高 1.5 这样写法最大的优势是里面的子元素可以根据自己文字的大小自动调整行高

5.3 优先级

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

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

权重如下：
在这里插入图片描述

在这里插入图片描述

注：*>浏览器（a）>继承

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
例：
a:hover 0,0,1,1
.nav ul li 0,0,1,2

6.盒子模型

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
在这里插入图片描述

6.1 边框

边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：

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

在这里插入图片描述

border-style
在这里插入图片描述
边框简写：

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

语法：

border-collapse：collapse；

collapse 单词是合并的意思
border-collapse：collapse；表示相邻边框合并在一起

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

在这里插入图片描述

6.2 内边距

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

在这里插入图片描述

padding简写属性：

在这里插入图片描述

padding会影响盒子的实际大小

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

6.3 外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

在这里插入图片描述

margin简写方式代表含义与padding相同

6.3.1 块级盒子水平居中

条件：

盒子必须指定了宽度
盒子左右的外边距都设置为auto

.heade r{width:960px;
margin:0 auto;}

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

margin-left：auto；margin-right：auto；
margin：auto；
margin：0 auto；

6.3.2 行内元素和行内块元素水平居中

给其父元素添加 text-align：center即可

6.3.3 外边距合并

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

在这里插入图片描述
解决方案：
尽量只给一个盒子添加margin值

嵌套块元素垂直外边距的塌陷

解决方案：
可以为父元素定义上边框
可以为父元素定义上内边框
可以为父元素添加 overflow：hidden

6.4 清除内外边距

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

*{
padding：0；
margin：0；
}

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

6.5 去掉li前面的小圆点

li{
list-style:none;
}

7. PS基本操作

在这里插入图片描述

8. 圆角边框

border-radius
语法：

border-radius:length;

radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yuan{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background-color: aqua;
        }
        .juxing{
            width: 150px;
            height: 50px;
            border-radius: 20px;
            background-color: rgb(17, 103, 50);
        }
        .butong{
            width: 150px;
            height: 50px;
            border-radius: 10px 20px ;
            background-color: rgb(118, 64, 21);
        }
    </style>
</head>
<body>
    <p>1.圆形</p>
    <div class="yuan"></div>
    <p>2.圆角矩形</p>
    <div class="juxing"></div>
    <p>3.设置不同的圆角</p>
    <div class="butong"></div>
</body>
</html>

效果图：
在这里插入图片描述

9. 盒子阴影

box-shadow

box-shadow:h-shadow v-shadow blur spread color inset;

在这里插入图片描述
注意：

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

10. 文字阴影

text-shadow

在这里插入图片描述

word-wrap

normal
break-word 换行

11. CSS高级技巧

11.1 字体图标

字体图标使用场景：主要用于显示网页中通用、常用、简单的一些小图标

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

在这里插入图片描述
字体图标的引入：

在这里插入图片描述

11.2 CSS三角

 <style>
        div{
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border:50px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>
<body>
    <div></div>

效果图：
在这里插入图片描述

11.3 CSS用户界面样式

鼠标样式

li {cursor:pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

在这里插入图片描述

轮廓线 outline

给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框

防止拖拽文本域 resize

11.4 vertical-align 属性应用

实现行内块和文字垂直居中对齐

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

语法：

在这里插入图片描述

图片底侧空白缝隙解决方案

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐
主要解决方案有两种：

给图片添加 vertical-align:middle|top|bottom 等（提倡）
把图片转换为块级元素 display：block ；

11.5 溢出的文字省略号显示

单行文本溢出显示省略号 ------ 必须满足三个条件

在这里插入图片描述

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

在这里插入图片描述

11.6 常见布局技巧

margin负值的运用

在这里插入图片描述

z-index 提高层级

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性
让图片左浮动

行内块的巧妙运用

三角妙用

直角三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width:0;
            height: 0;
            border-top: 100px solid transparent;
             border-left: 50px solid rgb(19, 130, 78);
              border-right: 50px solid rgb(44, 36, 133);
               border-bottom: 0px solid rgb(81, 67, 8);
        }
        
    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>