CSS(cascading style sheets)层叠样式表

也被称为级联样式表，也是一种标记语言

语法规范

CSS规则由两部分组成，选择器和一条或者多条声明

选择器：给谁修改样式

声明：修改的属性

属性和属性值以键值对的形式出现，以分号结尾

CSS基础选择器

作用：选择标签，即想把哪个标签进行修改

分类

基础选择器和复合选择器

基础选择器

是由单个选择器组成

包含标签选择器、类选择器、id选择器、通配符选择器

标签选择器：标签名作为选择器，例如<div>标签

语法

写在<head>中

<head>
    <style>
        标签名
        {
            属性1:属性值
            属性2:属性值
        }
    </style>
</head>

####作用

可以将某一类标签选择出来，比方说所有的段落p，能快速的把同一类标签设置为同一样式

只能修改一类的标签，不能单独修改某个标签

####类选择器

单独选择一个或者多个标签

语法

.类名
{
    属性1:属性值;
    属性2:属性值;
}

#####应用属性

找到需要更改的标签，在标签内写入

class="类名"
例如
<p class="red">
    hou
</p>

名字不能取例如div之类的

#####多类名

class中可以写多个类名，多个类名之间用空格隔开

id选择器

以#定义样式，以id属性设置特定元素

语法

#id名
{
    属性1:属性值;
    属性2:属性值;
}
调用
<p id="id名">紫色</p>

id选择器只能被调用一次

通配符选择器

表示选取页面中所有的标签

#####语法

*
{
    属性1:属性值;
    属性2:属性值;
}

可以更改所有的标签，作用范围是全局的

CSS字体属性

属性	中文	说明
`font-family`	字体	设置字体
`font-size`	字体大小	设置字体大小
`font-weight`	字体重量	设置字体的粗细
`font-style`	字体样式	设置字体样式

####font-family

font-family:"Microsoft YaHei";
若字体名称为两个或两个以上的单词时要加引号，单个单词可以不加，若有多个字体，可以用逗号分割
font-family:"Microsoft YaHei","apple";
检索过程：如果第一个字体匹配，则使用第一个字体，否则继续检索，直到有合适的，如果都没有，则使用浏览器默认的
为保证统一性，一般给body指定字体
body 
{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

font-size

font-size:2px;

**px(pixel)**为像素的意思
在<body>标签中指定的大小不会修改标题标签的大小，标题标签需要单独设置

font-weight

属性的查找文档在这里

font-style

normal-普通、标准、正常

italic-斜体

CSS文本属性

属性	中文	说明
`color`	颜色	文本颜色
`text-align`	对齐	文本对齐
`text-decoration`	装饰	文本装饰
`text-indent`	缩进	文本首行缩进
`line-height`	行间距	行间距

文本颜色属性

类型	表示
预定义	`color:预定义颜色值`
十六进制	`color:#6位16进制`
RGB	`color:rgb(值1,值2,值3)`或者`color:rgb(值1%,值2%,值3%)`

文本对齐

align对齐方式

属性	表示
`left`	左对齐，默认
`right`	右对齐
`center`	居中对齐

文本装饰

text-decoration

属性	中文	表示
`none`	没有	默认，没有装饰线
`underline`	强调	下划线
`overline`	-	上划线
`line-through`	穿过	删除线

文本缩进

text-indent

text-indent:1px;

单位	含义
`px`	像素
`em`	相对于当前文字的大小

行间距

line-height，行高

行间距=文字高度+上间距+下间距

CSS引入方式

按照书写的位置（引用方式）不同，分为

行内样式表(行内式)

<p style="color:xxx,font-size:xxx;">
	行内样式表
</p>

作用范围：一个标签

内部样式表(嵌入式)

写到HTML内部，是将CSS抽取出来，单独放到<style></style>中

理论上<style><style>可以放在任意位置，但一般放在<head></head>中

作用范围：当前HTML标签页

###外部样式表(链接式)

单独建立一个CSS文件，用来存储样式，之后再把CSS引入使用

####引入CSS

<link rel="stylesheet" href="路径">

作用范围：多个页面

VSCode快速代码

####HTML

! 生成框架
标签名*5 生成5个标签
标签名1>标签名2>...>标签名n 将2当作1的儿子...以此类推
标签名1+标签名2+....标签名n 生成同级标签
.类名*n 生成n个div 类为类名的标签
标签名.类名*n 生成n个标签名 类为类名的标签
标签名.类名$n 生成n个标签名 类为类名(1-n)的标签
标签名{内容} 生成<标签名>内容</标签名>

CSS

写首字母加数字

例如

text-indent:3em

ti3em

text-decoration:none;

tdn

text-align:center

tac

##复合选择器

后代选择器

有以下代码

<h1>无序列表</h1>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <h1>有序列表</h1>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

若仅想更改有序列表中的每个元素的CSS，可使用后代选择器语句

即父级+后代

ol li
{
    属性
}

类和标签也可以相互混用

<h1>无序列表</h1>
<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>
<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>

以上有两组ol，如果只想更改第二个ol的a的属性，可以为第二个ol指定类

即

<h1>无序列表</h1>
<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>
<ol class="类名">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>

而CSS为

.类名 ol li a
{
    属性
}

子选择器

使用后代选择器更改某个标签的CSS样式时默认是将其所有的后代都选中，也可以仅选择其亲儿子

<ol>
        <a href="#">儿子</a>
        <p>
            <a href="#">孙子</a>
        </p>
</ol>

如果按照后代选择器的方法进行选择a的时时候

ol a
{
    属性
}

此时会将ol中所有的a的值属性全部改变

若只想选择亲儿子

ol>a
{
    属性
}

并集选择器

选择多组标签，为其定义相同的样式，用于集体声明，任何选择器都可以作为集体选择器的一部分

用,分隔

例如如果同时定义<div和<p>有一样的样式

div,p
{
    属性;
}

伪类选择器

链接伪类选择器

语法

a:属性

属性	说明
`a:link`	未被访问的链接
`a:visited`	所有已经访问的链接
`a:hover`	鼠标位于其上的链接
`a:active`	选择活动链接，即鼠标放上未弹起

书写时必须按照link-visited-hover-active

####:focus伪类选择器

focus-焦点、重点，一般在表单中使用

input:focus
{
    属性
}

CSS元素显示模式

显示模式为元素(标签)以什么方式显示，HTML元素分为块元素和行内元素

块元素

在HTML中

<div>  
</div>
<p>
</p>
<h1-h6></h1-h6>

等都是块元素，div是最典型的

特点

独占一行
高度、宽度、内外边距都可以控制
宽度默认是容器(父级)的100%
是一个容器或者是盒子，里面还可以放行内元素或者块元素
文字类的元素内不能放块级元素，例如<p>中不能放<div>，<1-6>中也不能放

行内元素

例如

<a></a><span></span>

等元素都属于行内元素，也被称为内联元素

特点

相邻行内元素在一行上，一行可以显示多个
宽高值对行内元素不起作用
默认宽度是它本身内容的宽度
行内元素只能放文本或者其他行内元素
<a>中不能放<a>，可以放其他的元素

行内块元素

例如

<input><img><td>

等标签，属于块内元素，既有行内元素的特点，也有块元素的特点

特点

一行可以有多个，但每个元素直接有空隙
本身的宽度是内容的宽度
高度、行高、内外边距可以设置

显示模式转换

例如将行内元素转换为块内元素，例如增加<a>的控制范围

####行内元素转换为块内元素

默认的情况下，<a>的大小无法被控制，可以在CSS中加入

display:block;

生效宽度和高度

块内元素转换为行内元素

display:inline;

设置后，宽度高度无效

转换为行内块元素

display:inline-block;

文字垂直居中

line-height:盒子的高度;

背景(background)

名称	中文	说明
`background-color`	颜色	背景颜色
`background-image`	图像	背景图像
`background-repeat`	重复	设置背景的平铺方式
`background-position`	位置	背景图片的位置
`background-attachment`	附属	背景图片附着方式
`background`	背景透明	背景透明

background-color

背景颜色的默认值为transparent，即透明的、清澈的

background-image

背景图像，与插入图像的区别再于便于控制位置

值	说明	格式
`none`	无背景图	`background-image:none`
`url`	填写url地址或文件路径	`background-image:url()`

###background-repeat

默认的情况下，背景是平铺的

值	说明	格式
`repeat`	平铺-默认值	`background-repeat:repeat`
`no-repeat`	不平铺	`background-repeat:no-repeat`
`repeat-x`	沿x轴平铺	`background-repeat:repeat-x`
`repeat-y`	沿y轴平铺	`background-repeat:repeat-y`

当背景颜色和背景图片都存在时，背景图片会压住背景颜色，即背景图片浮于背景颜色上方

background-position

background-position:水平值垂直值;

如果第二个值省略，默认是center

背景图片的位置，值可以是数字，也可以是预置好的参数值

可以使用方位名词或者精确单位

####方位名词

参数值	说明
`top`	顶部
`center`	居中
`bottom`	底部
`left`	左
`right`	右

精确单位

如果是精确单位，那么第一个是x坐标（到左侧），第二个是y坐标（到上侧）

如果只指定一个值，只会设置x，而y默认为center

单位也可以混合使用

background-attachment

背景附着方式，控制页面背景是否固定或者跟着页面滑动

常用于做视差效果，例如各大软件的官网介绍页

值	中文	用法
`scroll`	滚动	`background-attachment:scroll`
`fixed`	固定	`background-attachment:fixed`

默认值是scroll

background:

background:rgba(0,0,0,透明度)

三大特性

三大特性分别为层叠性、继承性、优先性

层叠性

解决样式冲突问题，即同一选择器用了两个或者多个不同属性

遵循就近原则，即当样式冲突时，最终的样式为最后一个属性值

继承性

在CSS中都具有继承性

<div>
    <p>
        龙生龙，凤生凤，老鼠的儿子会打洞。
    </p>
</div>

以上代码中，如果只更改div的属性，p中未设置的相关属性也会一并更改

###优先级

当选择器相同时，按照层叠性执行
如果不同，则按照优先级执行，优先执行权重高的

从高到低

选择器	权重	表示
`!important`重要的	1，最高	`无穷大`
行内样式`style=""`	2	`1,0,0,0`
ID选择器	3	`0,1,0,0`
类选择器伪类选择器	4	`0,0,1,0`
元素选择器	5	`0,0,0,1`
继承或者`*`	6，最低	`0,0,0,0`

越靠近元素的优先级最高

!important

选择器
{
    属性:属性值 !important;
}

不管父元素的权重有多高，子元素继承下来的永远是最低的

例如

<div>
    <p>
        这里
    </p>
</div>

<style>
    div
    {
        color:red;
    }
    p
    {
        color:pink;
    }
</style>

以上代码执行后，标签中的文字颜色pink

权重叠加

在复合选择器中出现的问题，将权重相加(不存在进位)进行判断

盒子模型

组成部分

名称	中文	作用
`border`	边界	边框
`content`	内容	内容
`padding`	填充	内边距
`margin`	边沿，余量	外边距

盒子模型示意图

border边框

可以设置的属性

属性	含义
`border-width`	设置边框的粗细
`border-style`	设置边框的风格
`border-color`	设置边框的颜色

border-style

属性值	中文	含义
`solid`	实心，坚硬的	实线
`dashed`	虚线	虚线
`dotted`	点缀，点线，有点的	圆心线
`none`	没有	无线

复合写法

border:width style color;

复合写法没有固定的顺序

padding内边距

用于设置内边距

分类	含义
`padding-top`	上内边距
`padding-bottom`	下内边距
`padding-left`	左内边距
`padding-right`	右内边距

用法

padding-top/left/bottom/right:像素值;

复合写法

写法	含义
`padding:1px`	上下左右内边距均`1px`
`padding:1px 2px`	上下内边距为`1px`，左右内边距为`2px`
`padding:1px 2px 3px`	上边距`1px`，左右边距`2px`，下边距`3px`
`padding:1px 2px 3px 4px`	上边距`1px`，右边距`2px`，下边距`3px`，左边距`4px`

按照上右下左，顺时针方向

padding也会影响盒子的大小，例如有一个300*300的div的，div中有一个padding:20px的其他元素，此时div的大小为320*320

如果没有指定宽度，设置padding的宽不受影响

margin外边距

用于设置外边距，即盒子与盒子之间的距离

写法	含义
`margin-top`	上外边距
`margin-bottom`	下外边距
`margin-left`	做外边距
`margin-right`	右外边距

margin的简写形式与padding一致

应用

外边距可以实现块级元素的水平居中，但有两个前提：

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

有三种写法

/*方法1*/
margin:0 auto;
/*方法2*/
margin:auto;
/*方法3*/
margin-left:auto;
margin-right:auto;

原理就是将左右设置为auto

以上方法仅针对于块元素，若想让行内元素也实现居中对齐，可以对其父元素进行设置

text-align:center;

外边距合并

只要是指margin-top和margin-bottom

当两个不同的块级元素分别存在margin-top和margin-bottom时，两者的垂直间距将以最大的为准

例如

.div1,.div2{
    height:300px;
    width:300px;
    background-color:pink;
}
.div1
{
    margin-bottom:100px;
}
.div2
{
    margin-top:200px
}

有以下

<div class="div1">
    
</div>

<div class="div2">
    
</div>

此时两者上下间距为最大值200px

解决方法

只给其中一个设置margin值

塌陷

当盒子中嵌套盒子，被嵌套的盒子想要向下或者向上移动时，会出现塌陷问题

.div1 {
    height: 300px;
    width: 300px;
    background-color: pink;
}

.div2 {
    height: 30px;
    width: 30px;
    margin-top: 20px;
    background-color: red;
}

    <div class="div1">
        <div class="div2">

        </div>
    </div>

问题图片

想要效果

解决方法

给父元素添加边框，可以设置为1px，颜色背景与父元素相同（也可以设为透明，transparent），设置线的格式
给父元素指定一个内间距，padding:1px
万能代码overflow:hidden

####清除内外边距

默认情况下<body>等都有默认的边距

使用通配符选择器

*
{
    padding:0px;
    margin:0px;
}

圆角边框

border-radius

radius中文是半径的意思，语法格式

border-radius:长度;

如果盒子是正方形，那么将border-radius设置为长宽值的一般，那么，这个盒子就成为圆形的了

同理，下图所示的也是为高度一半

border-radius:长度是一个简写

border-radius:数值单位1 数值单位2 数值单位3 数值单位4;

按照顺时针设置，左上，右上，右下，左下

盒子阴影 box-shadow

值	中文	含义
`h-shadow`		必需，水平阴影位置，允许负值
`v-shadow`		必需，垂直阴影位置，允许负值
`blur`	模糊	可选，模糊距离，扩散的程度
`spread`	传播	可选，阴影尺寸，影子大小
`color`	颜色	可选，阴影颜色
`inset`	插图	可选，改为内阴影，默认值是`outset`可以设置为`inset`

box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 内外阴影;

最后一个数值不可以写为outset因为是默认的，可以写成inset

阴影不占用空间，其他盒子依旧可以和按照顺序无缝排列

鼠标经过其他标签时，也可以产生类似于<a>的效果，使用

标签名+驴哈就可以

文字阴影text-shadow

值	中文	含义
`h-shadow`		必需，水平阴影位置，允许负值
`v-shadow`		必需，垂直阴影位置，允许负值
`blur`	模糊	可选，模糊距离，扩散的程度
`color`	颜色	可选，阴影颜色

box-shadow:水平阴影位置 垂直阴影位置 模糊距离 颜色;

浮动float

CSS提供三种传统的布局方式

普通流（标准流）
浮动
定位

普通流（标准流/文档流）

按照默认的方式排列

比如，默认的div是块级元素

有很多效果标准流没法做，所以用到了浮动

典型应用

多个块级元素在一行中显示

准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

语法

选择器
{
    float:属性值;
}

值	含义
`none`	元素不浮动，默认值
`left`	元素向左浮动
`right`	元素向右浮动

将盒子放在同一行中

特性

会脱离标准流
浮动的盒子不再保留原来的位置，因为位置变了，所以原本的位置被其他盒子占用了

如果只对一个盒子加了浮动，其他的盒子没加，那么新建的盒子会叠放在浮动的盒子之下
如果多个盒子设置为浮动，那么盒子会一行内以顶端对齐
如果一行之内无法完全显示该盒子，则该盒子会另起一行
所有元素都可以加浮动特性，添加浮动特性后，元素具有行内块元素的属性
浮动元素通常与其搭配的标准流的父级一起使用，一般是为其父级排列上下左右位置，再从父级元素内添加浮动
一个元素浮动了，其他盒子也浮动
浮动只会影响到后边的标准流，不会影响前边的

清除浮动

理论上父盒子的大小是不设置高度大小的，一般会让子盒子撑开，如果不设置高度父元素的高度会变为0，因为浮动的元素不占用位置

由于父级元素在很多情况下不方便给给高度，但盒子浮动不会占用位置，当父级元素为0时，会影响到其他的标准流盒子

以下就是异常情况

清除浮动的本质是清除浮动造成的影响

####语法

选择器{
    clear:属性值;
}

属性值	含义
`left`	清除左侧浮动
`right`	清除右侧浮动
`both`	清除全部浮动

一般都用clear:both;

本质

清除浮动元素脱离标准流造成的影响
策略是只让浮动在父盒子内部影响，不影响父盒子外的元素

解决方法

额外标签法（隔墙法）

在浮动元素末尾加一个空标签并为其清除浮动，例如

<div style="clear:both;">
	
<div/>

新添加的标签必须为块级元素

给父级添加overflow

是给父级添加的属性

overflow:hidden/auto/scroll;

overflow为溢出的意思

scroll为滚动的意思

:after伪元素法

也是给父元素添加的效果

双伪元素清除浮动

也是给父元素添加

CSS属性书写顺序

一般遵循的顺序

布局定位属性，例如display等
自身属性，例如width height border padding background
文本属性，例如color font text
其它属性，例如border-radius box-shadow

CSS定位

可以使某个盒子浮于某个盒子上方

组成

定位可以将盒子定在任意的位置

定位=定位模式+边偏移

定位模式是选择的定位方式，通过CSS中的position进行设置的

属性值包括

值中文含义

static 静态的静态定位

relative 相对的相对定位

absolute 绝对的绝对定位

fixed 固定的固定定位

sticky 黏黏性定位

值	中文	含义
`static`	静态的	静态定位
`relative`	相对的	相对定位
`absolute`	绝对的	绝对定位
`fixed`	固定的	固定定位
`sticky`	黏	黏性定位

边偏移决定了最终的位置

属性值包括

属性值含义

left left:99px; 左侧偏移量

right right:99px; 右侧偏移量

top top:99px; 顶部偏移量

bottom bottom:99px; 底部偏移量

属性	值	含义
`left`	`left:99px;`	左侧偏移量
`right`	`right:99px;`	右侧偏移量
`top`	`top:99px;`	顶部偏移量
`bottom`	`bottom:99px;`	底部偏移量

静态定位static

是元素的默认定位方式，无定位的意思

position:static;

是按照标准流的形式摆放元素的位置，没有边偏移
很少被使用，可以直接被认为是标准流

相对定位relative

元素移动位置时，相对于原来的元素的位置进行表示的

以自己原来的位置为基准进行移动
移动后，原来的位置仍在保留，即原来标准流中的位置继续占有原来的位置，新的盒子不能接着放在原来的位置

绝对定位absolute

元素移动时是以它的父元素为基准进行移动

若父元素即其上所有元素没有定位属性，则以浏览器为基准进行移动
如果父元素加了除了static元素以外的任意定位，那么将会以父元素为基准进行移动
盒子会以最近一级有定位的元素为基准进行移动，例如一个盒子的父元素没有定位，但它的爷爷元素有定位，则会以它的爷爷元素为基准进行定位
绝对定位不会占用原来的位置

子绝父相

意思是子级用绝对定位，父级得用相对定位

子级绝对定位，不会占用位置，可以放在父盒子的任意位置，不影响兄弟盒子
父盒子需要添加定位限制子盒子在父盒子内显示
因为父盒子需要占用位置，所以只能用相对定位

固定定位fixed

将元素固定到计算机浏览器的可视位置，并且在滚动页面时位置保持不变

是以浏览器的可视窗口为基准进行定位
跟它的父元素没有关系
不占有原先的位置
固定定位不是永远和浏览器的四个角对齐的
- 让固定定位以版心对齐，即无论如何缩放，被固定的始终以中心元素的右侧/左侧边缘对齐
  - 设置其left:50%
  - 让其margin-left:版心宽度的50%

效果代码

<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-18 22:18:34
-->
<!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>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

.div1 {
    width: 400px;
    height: 300px;
    background-color: pink;
    margin: auto;
}

.div2 {
    width: 50px;
    height: 50px;
    background-color: rgb(0, 0, 0);
    position: fixed;
    left: 50%;
    margin-left: 202px;
}

黏性定位sticky

可以认为相对定位和固定定位的混合

特性

以可视窗口为参考位置进行移动
占有原来的位置
必须添加top bottom left right其中一个有效

定位叠放次序z-index

z为z轴的含义，为了解决多个盒子叠放在一起的优先级问题

z-index:值;
/*例如*/
z-index:1;

z-index的数值不限，可以是正值也可以是负值，默认为auto，数值越大，盒子越往上
如果值相同，则按照书写顺序，后来者居上
值后无需加单位
只有盒子定位的才有z-index值

绝对定位居中

加了绝对定位relative的盒子不能使用margin:auto实现居中

先让盒子向左/右走50%，即letf:50%;或者right:50%
在让盒子的margin-left或者margin-right走负的盒子宽度的一半的一半

实现垂直居中也同理，只不过是修改top或者bottom以及margin-top或者margin-bottom

其他特性

行内元素添加绝对定位absolute、固定定位fixed、float浮动后，可以直接设置高度和宽度，即自动转化为了块级元素
块级元素添加定位后，如果不指定宽度和高度，则大小为内容的大小，而不是一行的大小
浮动float的元素不会压住标准流的文字、图片
绝对定位absolute、固定定位fixed会压住标准流的文字、图片以及所有内容

元素的显示与隐藏

让一个元素可以进行显示隐藏，比如鼠标经过某个地方时，可以显示出来

display显示隐藏
visibility显示隐藏
overflow溢出隐藏

display

值	含义
`none`	隐藏元素
`block`	除了转换成块级元素还有显示元素的功能

使用display隐藏元素后，不再占用原来的位置，常与JavaScript配合一起进行隐藏元素

visibility

值	含义
`inherit`	继承，遵循父级的显示/隐藏属性
`visible`	可视
`hidden`	隐藏

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

overflow溢出

对溢出的元素进行操作，可以设置溢出的部分的属性，隐藏或者显示

值	含义
`visible`	可视，默认值
`hidden`	隐藏超出的内容，对多出的部分进行隐藏
`scroll`	滚动，始终显示滚动条，可以拖动滚动条查看溢出部分的内容
`auto`	当内容超出时显示滚动条，不超出时不显示

有定位的盒子慎用overflow，会隐藏多余的盒子

遮罩案例

<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-26 15:53:23
-->
<!DOCTYPE html>
<html lang="zh-cn">

<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>
    <link rel="stylesheet" href="style.css">
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">
        </div>
    </div>
</body>

</html>

.div1,
.div2 {
    background-color: red;
    width: 300px;
    height: 300px;
    color: white;
}

.div1 {
    background-color: rgb(145, 255, 2);
    position: relative;
}

.div2 {
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    display: none;
}

.div1:hover .div2 {
    display: block;
}

* {
    background-color: pink;
}

鼠标经过隐藏的盒子不会有反应，因为这个元素被隐藏了，若想有反应，可对其父级进行操作

CSS高级技巧

精灵图

网页中经常会用许多很小的图片进行装饰，但当图片过多时服务器会很频繁的发送和接收，造成服务器压力过大，降低页面加载速度

为了减少服务器的发送和请求次数，引入了CSS精灵技术，也成为CSS Sprite(精灵)、CSS雪碧

核心原理：将小图片整合成大图片，使得服务器只需要请求一次

download

例如上图为王者荣耀官网所用到的CSS精灵图

主要是针对背景图片，将多个小背景，整合在一张大的图片中
适用于经常显示且不发生变化的图片
用到的属性为background-position:水平值垂直值，在网页中，越往下垂直值越大，越往右，水平值越大

用法

.div1
{
    width:宽度值;
    height:高度值;
    background-image:url(图片位置);
    background-position:水平值 垂直值;
    background-repeat:no-repeat;//背景不重复
}

缺点

图片文件比较大
图片本身放大会失真
一旦制作完毕再进行更换会很复杂

字体图标iconfront

字体图标为了解决部分精灵图的缺点，再网页中，经常会看到放大镜（搜索）的小图标、小喇叭图标等，这些图标一般都是icon front(字体图标)，本质属于字体，具有放大不失真的特点

优点

字体图标要比图像小，一旦加载出来，就会马上渲染，减少服务器的请求
具有灵活性，可以添加任何的属性，阴影、改颜色等
具有强大的兼容性，几乎支持全部的浏览器

使用

将下载好的文件解压，取出front文件夹，并放入到网页的根目录下
为保证浏览器兼容问题，front文件夹内有4个字体文件

打开下载的压缩包，将style.css中的front-face选择器复制下来

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?s644t4');
  src:  url('fonts/icomoon.eot?s644t4#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?s644t4') format('truetype'),
    url('fonts/icomoon.woff?s644t4') format('woff'),
    url('fonts/icomoon.svg?s644t4#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

引入到页面，在<head></head>标签中添加<style></style>标签，将以上内容添加至<style></style>标签中
打开压缩包内的demo.html，选择需要插入的图标，复制后边的乱码
在编辑器中，添加一个存放的标签，并将乱码粘贴到存放的标签中，并为标签添加font-family:'icomoon'; 属性

字体图标的追加

打开https://icomoon.io/app/#/select，选择import icons，上传压缩包内的selection.json，选择需要追加的图标，直接下载并替换文件即可

三角形的绘制

将盒子的长宽设置为0像素，为其添加边框，并将边框的颜色设置为透明
```
border:10px solid rgba(0,0,0,0);
/*或者*/
border:10px soild transparent;
```
再为想要添加的三角形的方向进行修改颜色
```
border-left/right/top/bottom-color:颜色;
```

.div7 {
    width: 0px;
    height: 0px;
    border: 30px solid rgba(0, 0, 0, 0);
    border-left-color: red;
}

##界面样式

用户鼠标样式

即修改网页中的用户的鼠标样式

使用到的是cursor属性

值	含义
`default`	默认的，小箭头
`pointer`	指针，即小手样式
`move`	移动，即四个箭头
`text`	针对文字的编辑指针样式
`not-allowed`	不允许，即禁止图标

轮廓线outline

给表单添加outline:0;或者outline:none;

去掉防止拖拽文本域

即文本域右下角的拖动按钮，即通过拖动即可将文本域进行扩大，但如果进行扩大，势必会挤占其他的盒子

设置textarea的resize属性值为none

vertical-align垂直对齐

仅适用于行内元素和行内块元素

值	含义
`baseline`	以基线对齐，元素放在父基线上
`top`	把元素的顶端与行中最高元素的顶端对齐
`middle`	把元素放在父元素中间
`bottom`	把元素的顶端与最低元素的顶端对齐

####图片底部缝隙问题

vertical-align常用来解决图片底部存在缝隙的问题，因为图片默认是与文字的基线对齐，所以会有个缝隙，可以将vertical-align的值设置为middle|top|bottom等任意非baseline即可

第二个方法将图片转换为块级元素，即display:block;，因为块级元素独占一行

溢出文字省略号显示

单行文本溢出显示省略号
1. 强制将文本在一行中显示
```
white-space:nowrap;
```
2. 超出部分隐藏
```
overflow:hidden;
```
3. 文字用省略号代替超出部分
```
text-overflow:ellipsis;
```

综上

white-space:nowrap;/*默认值为normal（普通的）即自动换行*/
overflow:hidden;
text-overflow:ellipsis;

布局技巧

margin:负值;，常用来解决添加边框后的两个边框重叠问题

文字围绕浮动元素

效果

代码

<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-29 20:11:38
-->
<!DOCTYPE html>
<html lang="zh-cn">

<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>
    <link rel="stylesheet" href="style.css">
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?s644t4');
            src: url('fonts/icomoon.eot?s644t4#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?s644t4') format('truetype'), url('fonts/icomoon.woff?s644t4') format('woff'), url('fonts/icomoon.svg?s644t4#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        .div4 p {
            font-family: 'icomoon';
            font-size: 199px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">

        </div>
        <p>一萨弗哈德森看见发哈第三方的卡刷饭卡上顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
    </div>
</body>

</html>

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid red;
    font-size: 10px;
}

.div2 {
    width: 90px;
    height: 90px;
    background-color: black;
    margin: 5px;
    float: left;
}

原理为对正方形盒子添加左浮动

翻页按钮

<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-29 20:38:11
-->
<!DOCTYPE html>
<html lang="zh-cn">

<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>
    <link rel="stylesheet" href="style.css">
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?s644t4');
            src: url('fonts/icomoon.eot?s644t4#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?s644t4') format('truetype'), url('fonts/icomoon.woff?s644t4') format('woff'), url('fonts/icomoon.svg?s644t4#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        .div4 p {
            font-family: 'icomoon';
            font-size: 199px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">

        </div>
        <p>一萨弗哈德森看见发哈第三方的卡刷饭卡上顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
    </div>
    <br>
    <div class="div3">
        <div class="div4">
            页面
        </div>
        <a href="#" style="width: 80px;">上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" style="width: 80px;">下一页</a>
        <input type="text" style="background-color: white;outline:none;"> 页
        <button style="width: 60px;height: 35px;">确定</button>
    </div>
</body>

</html>

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid red;
    font-size: 10px;
}

.div2 {
    width: 90px;
    height: 90px;
    background-color: black;
    margin: 5px;
    float: left;
}

.div3 {
    width: 600px;
    height: 100px;
    border: 1px solid red;
    font-size: 10px;
    margin: auto;
    text-align: center;
}

.div4 {
    text-align: center;
    width: 100%;
    background-color: black;
    color: white;
    /* height: 20%;
    line-height: 10px; */
}

.div3 a,
.div3 input,
.div3 button {
    margin: 30px 0;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgb(233, 233, 233);
    text-decoration: none;
    border: 1px gray solid;
}

梯形

Q.E.D.

Moyok的博客

CSS(cascading style sheets)层叠样式表

语法规范

CSS基础选择器

分类

基础选择器

语法

语法

id选择器

语法

通配符选择器

CSS字体属性

font-size

font-weight

font-style

CSS文本属性

文本颜色属性

文本对齐

文本装饰

文本缩进

行间距

CSS引入方式

行内样式表(行内式)

内部样式表(嵌入式)

VSCode快速代码

CSS

后代选择器

子选择器

并集选择器

伪类选择器

链接伪类选择器

CSS元素显示模式

块元素

特点

行内元素

特点

行内块元素

特点

显示模式转换

块内元素转换为行内元素

转换为行内块元素

文字垂直居中

背景(background)

background-color

background-image

background-position

精确单位

background-attachment

background:

三大特性

层叠性

继承性

!important

例如

权重叠加

盒子模型

组成部分

盒子模型示意图

border边框

border-style

复合写法

padding内边距

用法

复合写法

margin外边距

应用

外边距合并

解决方法

塌陷

解决方法

圆角边框

盒子阴影 box-shadow

文字阴影text-shadow

浮动float

普通流（标准流/文档流）

典型应用

语法

特性

清除浮动

本质