CSS的含义

WJLSH123

已于 2022-05-09 16:29:06 修改

阅读量1.4k

点赞数

分类专栏： css 文章标签： css

于 2021-07-20 18:57:10 首次发布

本文链接：https://blog.csdn.net/WJLSH123/article/details/118942214

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS的含义

描述
- HTML：网页结构的表达
- CSS：网页样式的修饰
- JS：网页样式的互动

CSS：层叠样式表

作用：
- 修饰页面的标签
  - 例如：颜色，大小，间距
- 对页面的元素进行定位和布局
含义：所谓层叠，可以将网页想象成一层一层的结构，层次高的样式会覆盖层次低的样式，我们的CSS可以为每一层设置不同的样式。处于文档的最底层被称为文档流。元素默认都在文档流中放置。

CSS引入方式

行内(内联)样式：样式写在标签内的style中

范围：当前标签，不复用
```
<p style='color:red'>
    qqq
</p>
```
内部样式表：样式写在head中的style标签中

范围：当前页面
```
<style>
    p{
        color:red;
    }
</style>
```

外部样式表：将css编写至外部的css文件中，然后通过link标签引入外部的css样式。（结构和表现分离，有助于后期维护）

范围：引入的页面

<!-- 外部css文件 -->
p{
	color:red;
}
<!-- html文件调用 -->
<link rel='stylesheet'  href='./css.css' type='text/css'>
<!-- stylesheet：定义一个外部加载的样式表 -->

CSS语法

语法：

选择器 + 声明块

选择器：通过选择器可以找到页面需要修饰的元素

声明块：

由{} + 样式

样式：样式名 : 样式值;
CSS注释：

/*
	注释
*/

## 选择器

元素选择器

通过元素选择器可以选中页面中所有的元素
语法：

元素{

样式名称 : 值:

}

p{
   color:red;
}

id选择器

通过元素的id属性可以选中唯一的元素
语法：

#id值{

样式名称 : 值:

}

#zhi{
   color:red;
}
······
<p id='zhi'>1</p>

class(类)选择器

通过元素的class属性可以选中一组元素
语法：

.class值{

样式名称 : 值:

}

.zhi{
	color:red;
}
.c2{
	background-color:pink;
}
......
<p class='zhi'>1</p>
<p class='zhi'>2</p>
<p class='zhi c2'>3</p>

选择器分组(并集选择器)

使用选择器分组可以同时选择多个选择器
语法：

选择器1,选择器2,······选择器n{

样式名称 : 值:

}

#p1,.p2,p{
	background-color:pink;
}

通配符选择器

选中页面中所有元素
语法：

*{

样式名称 : 值:

}

*{
	margin:0;
	border:0;
}

并集选择器

选中同时符合多个条件的元素
语法：

选择器1选择器2······选择器n{

样式名称 : 值:

}

div.d1{
    font-size:40px;
}

长度单位

像素：px
百分比：%
em

像素
- 屏幕中每个发光的小点称为像素
- 显示越清晰，像素越小，凡之像素越大
- 我们平时css样式设置的像素称为css像素，屏幕本身称为物理像素。
- 默认物理像素和css像素1：1显示
百分比 %

设置百分比是以父元素的样式来计算

使用百分比能够同比例变化，父元素变化，子元素也变化

创建自适应页面时常常使用
em

em和%比类似，相对于当前字体的大小来计算

1em = 1个font-size的值

使用em时，当字体大小发生改变，则em也随之改变

如果设置的样式和字体相关，就可以使用em单位

颜色单位

颜色的设置
颜色单词
RGB读法

在CSS中可以直接使用颜色单词表示不同的颜色
- 例如：red、blue、green、pink
使用RGB表示法
- 通过RGB三种颜色的配法，配出不同的颜色。
- rgb(red=值,green=值,blue=值)
  - 值：0_{255，%（最终也会转化为0}255）
- rgba(red=值,green=值,blue=值,透明度)
使用16进制表示法：
- #FF0000（原理与RGB表示法类似）

*{
	color:rgb(155,0,12)
	color:rgba(155,0,12,0.3)
	color:#FF0000
}

字体样式

字体颜色
字体系类
字体分类
1. serif：衬线字体（体现在文字由毛笔细边的效果）
2. sans-serif：非衬线字体
3. monospace：等宽字体
4. cursive：草书字体
5. fantasy：虚幻字体
字体粗细
1. font-weight：（weight 重量）
  1. bold：加粗
  2. bolder：更粗的字体
  3. lighter：定义更细的字体
  4. 也可以设置100~900的值（浏览器中没有那么多级别的字体，所以需要达到效果，差别大才有效果）
字体风格
1. 设置小型大写字母：font-variant :
  1. 可选值：
    1. normal 正常显示，默认值
    2. small-caps 文本以大写较小的方式显示

设置字体颜色
color:red
设置字体大小
font-size:50px
设置字体
font-family:宋体 微软雅黑;
设置字体风格
font-style：normal/italic/oblique(正常/斜体/倾斜)
设置字体粗细
font-weight:bold
文本以大写较小的方式显示
font-variant:small-caps;

字体设置的简写
font:font-style,font-weight,font-size/line-height,font-family
font：20px '华为云彩';

简写时：font-size和font-family都必须写

文本样式

text-transform：设置文本内容的大小写

可选值：
- none：默认效果
- capitalize：单词首字母大写
- uppercase：所有单词大写
- lowercase：所有单词小写

text-decoration：设置文本的修饰

可选值：
- none
- underline：下划线
- overline：上划线
- line-through：删除线

letter-spacing：设置字符之间的间距，多用于中文

word-spacing：设置单词之间的间距，多用于英文

text-align：文本对齐方式

可选值：
- left 左（默认）
- right 右
- center
- justify 两端对齐

text-indent：设置首行缩进
text-align-last: justify; 文本在标签内平均分布

-  正值：向右移动
-  负值：向左移动

行高

css没有直接提供行间距的样式
可以间接的通过行高来设置行间距，行高越大，行间距越大
行间距使用line-height设置行高来体现
网页中的文本内容实际上有看不见的一行一行的线，在字体偏下位置，线与线之间的距离称为行高
文字会默认在行高中的垂直方向显示
行间距 = 行高 - 字体大小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t4pSaNZl-1628080676253)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1626685143643.png)]

font-size:20px;
line-height:10px;
/* 也可以设置百分比，相对于文字大小进行计算 */
line-height:100%;
/* 也可以设置倍数，相对于文字大小进行计算 */
line-height:1.5;
font:30px(字体大小)/50px(行高) '微软雅黑';

垂直方向居中

line-height : 父元素高度
- 对于单行文本，可以将文本高度设置为与父元素高度相同
- 设置行高，且父元素高度相同
vertical-align：middle
- vertical-align：垂直方向对齐方式

文本阴影

text-shadow：设置文本阴影

语法：
- text-shadow : 阴影颜色 , X轴偏移量 , Y轴偏移量 , 阴影的模糊半径;
- X为正：阴影右移
- Y为正：阴影下移

伪类样式

专门表示元素的一种特殊状态
比如：访问过的链接、获取/失去焦点的状态

:link{} 未访问的链接

:visited{} 已访问

:hover{} 鼠标悬浮停留

:active{} 选中的链接

a:hover{
    text-decoration:none;
    color:red;
}

列表样式

list-style-type:;
- 可选值：
  - none
  - disc：默认，实心圆
  - circle：空心圆
list-style-image:url();------将图片设置为列表项的标记
list-style-position：设置列表项放置的位置
- 可选值
  - outeside:列表项放置在文本之外（默认值）
  - inside：列表项放置在文本之内

li{
    height:30px;
    line-height:30px;
    /* 去掉实心点*/
    list-style-type:none;
    /* 添加图片 */
    list-style-image:url('./');
    /* 设置边框 */
    border:;
    /* 设置列表项放置的位置 */
    list-style-position:inside;
    /* 简写属性 */
    list-style:none inside url('./');
}
list:列表
position:位置

背景样式

背景颜色 (在元素的最底层)
- background-color:颜色;
背景图片
- background-image:url(‘./’)
- 如果背景图大于元素，则显示图片的左上角
- 如果背景图片和元素一样大，则图片全部显示
- 如果背景图片比元素小，则图片默认平铺
图片平铺
- background-repeat:;
  - 值：
    - repeat------平铺
    - no-repeat------不平铺
    - repeat-x------x轴平铺
    - repeat-y------y轴平铺
设置背景图片位置
- 使用两个关键字（如果只设置一个值，则第二个值默认center）：
  - top、left、right、bottom、center
- 使用单位值
  - background-position:x y;
  - x：水平偏移量
  - y：垂直偏移量
- 使用百分比
  - background-position:x% y%;
  - 根据当前元素的高设置百分比
- 默认在元素的左上角
设置背景图片大小
- background-size:;
  - 值：
    - auto
    - length：设置宽高
    - per：百分比
    - cover：整个背景放大，填充整个元素
    - contain：保持图片比例，将图片放大。
设置背景图片是否随滚动条一起滚动
- background-attachment:;
- fixed------图片不随滚动条移动
- scroll------图片随滚动条移动

/* 背景颜色 */
background-color:颜色;
/* 背景图片 */
background-image:url('./')
/* 设置背景重复效果 */
background-repeat:repate;
background-repeat:no-repate;
background-repeat:repate-x;
background-repeat:repate-y;
/* 设置背景图片位置 */
background-position:left center;
background-position:10px 10px;
background-position:10% 10%;
/* 设置背景图片大小 */
background-size:auto;
background-size:100px 200px;
background-size:50% 50%;
/* 设置背景图片是否随滚动条一起滚动 */
background-attachment:fixed;
/* 简写 */
background:;

线性渐变

 /* 设计背景的线性渐变 */
background:linear-gradient(to top,orange,blue);
background-image:linear-gradient(to bottom,orange,blue,yello)
background-image:linear-gradient(270deg,orange,blue,yello)

子元素和后代选择器

在HTML中元素之间存在层次关系

元素之间的关系：

子父关系（特殊的祖先元素）
兄弟关系
祖先元素

/* 后代选择器 */
作用：指定元素的所有后代元素
语法：祖先元素 +空格+ 后代元素
body p{
    /*注意选择器是否有空格，如果有则为后代选择器，如果没有就是交集选择器*/
}

/* 子元素选择器 */
语法：父元素 > 子元素
body > p{
    
}

伪类选择器

a:link{
    
}
a:visited{
    /*由于用户的隐私问题visitide只能设置颜色*/
}
a:hover{
    
}
a:active{
    
}

/*hover和active可以为其他元素设置*/
p:hover{
    
}
p:active{
    
}
input:focus{
    /*:focus 获取焦点伪类*/
}

前缀：

-ms：IE浏览器

-moz：firfox浏览器

-webkit：Googlr浏览器

p::selection{
    /* 选中伪元素 */
}

伪元素选择器

伪元素表示的是标签的内容

伪类表示的是标签的状态

p::first-letter{
    /* 表示元素的第一个字符，仅适用于块级元素 */
}
P::first-line{
    /* 表示元素的首行，仅适用于块级元素 */
}

p::before{
    /* ::before  表示在元素的最前面
    content  表示添加的内容
    */
    content:'a'
}
p::after{
    /* 表示在元素的最后 */
}

属性选择器

语法：

[属性名称]：选取含有该属性名称的选择器
[属性名=‘属性值’]：选取含有指定属性值的元素
[属性名^=‘属性值’]：选取含有指定值开头的样式
[属性名$=‘属性值’]：选取含有指定值结尾的样式
[属性名*=‘属性值’]：选取含有指定值的样式

p[title]{
    
}
p[title='abc']{
    
}
p[title^='a']{
    /* 选取含有指定属性值开头的元素 */
}
p[title$='c']{
    /* 选取含有指定值结尾的元素 */
}
p[title*='b']{
    /* 选取含有指定值的元素 */
}

子元素伪类选择器

查找顺序：

1. 位置(先)→类型(后)

先找第一个元素→再进行元素匹配

:first-child------选取第一个子元素

:last-child------选取最后一个子元素

:nth-child(n)------选取第n个子元素(n从1开始)

:first-of-type------同一层级兄弟元素中其类型的第一个元素。

:last-of-type------同一层级兄弟元素中其类型的第一个元素。

p:first-child{
    /* 先找到所有层级的第一个子元素，再判断这些子元素的类型是否符合 */
}
body>p:last-child{
	/* 先找到body所在层级的最后一个子元素，再判断这些子元素的类型是否符合 */
}

兄弟元素选择器

/* 后一个兄弟选择器 */
span + p{
    /* 选择span后一个同一层级p元素 */
}

/* 兄弟选择器 */
span~p{
    /* 选择span后的所有同一层级p元素 */
}

否定伪类选择器

可以从已经选择的元素中剔除某些元素

语法：

选择器 : not(选择器){

}

p:not(.p1){
    
}

样式的继承

祖先元素的样式，后代元素都有可能继承
不是所有的样式都可以被继承
- 背景
- 边框
- 定位

盒子模型

页面中的任何元素都可以认为是一个四边形的盒子，称为盒子模型
如何摆放盒子的位置被称为布局

盒子模型的构成

内容：content 内边距：padding 边框：border 外边距：margin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DrQhcKWC-1628080676255)(C:\Users\lenovo\Desktop\图片\盒子.png)]
content、padding、border影响可视区域大小（盒子的可见区域 = 内容区+内边距+边框）
margin改变盒子的位置

盒子边框

width、height设置盒子内容区域的大小

分别设置边框样式，需要三个同时设置才有效果：
1. border-width：边框宽度
2. border-color：边框颜色
3. border-style：边框样式
border-radius：圆角
设置边框的宽度、颜色
1. 四个值：（上右下左，顺时针）
2. ```
border-width:10px,20px,30px,40px;
border-color:red,black,pink,yellow;
```
3. 三个值（上、左右、下）
4. 两个值（上下、左右）
5. 一个值
- css也提供了四个不同的取值方向
  - top、right、bottom、left
  - ```
  border-top-width:20px;
  border-top-color:pink;
```
边框样式
1. 值
  1. none
  2. solid 实线
  3. dotted 点状线
  4. dashed 虚线

/* 简写，三个属性没有顺序 */
F:2px,solid,red;

边框合并

border-collapse: collapse;

盒子的内边距

内边距影响可见框的大小，元素的背景延伸到内边距
盒子的可见区域大小由内容区域、内边距、边框共同决定
可见区域大小

1. 可见宽：border-left-weight+padding-left+内容+padding-right+border-right-weight
2. 可见高：border-top-weight+padding-top+内容+padding-bottom+border-bottom-weight

padding的设置方法和border一样

padding:10px,20px,30px,40px;
padding-left:100px;

如果存在子元素，子元素设置为百分比，则根据父元素的width和height进行计算，padding和border不计入当中。

盒子外边距

外边距：盒子之间的距离
不影响盒子本身的大小，但会影响盒子的位置
盒子的默认位置为元素的左上角
设置margin-top、margin-left：移动盒子的位置
设置margin-left和margin-bottom会改变兄弟元素的位置
外边距可以为负
margin可以设置auto

/* margin-left或margin-right设置auto可任意获得水平最大值 */
/* 如果水平方向同时设置margin，则在父元素中水平居中 */
margin-left:auto;
margin-right:auto;
/* 垂直方向设置margin，则默认值为0px */

外边距也有四个方向的值，设置方式与border-width相同

margin:10px,20px,30px,40px;

设置外边距的margin-top为负值，会出现覆盖上方元素的情况，但依然是盒子模型

外边距的重叠和传递

垂直外边距：在页面中相邻的垂直方向的外边距会发生重叠现象
外边距重叠会使用相邻兄弟元素外边距的最大值
外边距重叠的条件：
1. 相邻
2. 垂直方向
解决方法：两个元素之间添加内容，使元素垂直方向不相邻

.box1{
    width:200px;
    height:200px;
    background-color:red;
    
    margin-bottom:200px;
}
.box2{
    width:200px;
    height:200px;
    background-color:pink;
    
    margin-top:200px;
    margin-bottom:200px;
}
.box3{
    width:200px;
    height:200px;
    background-color:pink;
    
    margin-top:100px;
}

外边距传递：如果子元素的垂直外边距和父元素相邻，就会发生外边距传递。子元素设置的外边距传递给父元素。
传递条件：相邻、垂直
解决方法：
1. 在父元素中设置文本内容（缺点：间隔的文本占用父元素的内容区域）
2. 为父元素设置边框、内边距（缺点：增大了可是区域，且设置内边距会影响content(内容区)）

浏览器的默认样式

每个元素在浏览器中都有默认的margin和padding大多数情况下我们需要自己设置，所以我们会清除默认的间距

/* 清除默认间距 */
*{
    margin:0;
    padding:0;
}

display属性

设置元素的类型

/*
	display:
		inline	行内元素（宽高失效、内容大小即为元素大小）
		block	块元素（可设置宽高，独占一行）
		none	元素不显示，并且位置不占用（visiblity:hidden; 隐藏元素但位置占用）
		inline-block	行内块（行内元素，但可以设置宽高）
隐藏元素，但位置保留--visibility: hidden;
		
*/

overflow属性

默认子元素存在与父元素中，如果子元素大小超过父元素，则默认在父元素外显示
超出部分怎么显示用overflow

/*
	overflow:
		hidden	溢出部分隐藏
		scroll	溢出部分使用滚动条显示
		visible	显示（默认）
		auto	溢出部分使用滚动条显示(只有溢出时才显示滚动条)
	*/

内联盒子

内联元素设置高宽不起作用
内联元素设置水平内边距、边框、外边距，起作用，而且影响布局
内联元素设置垂直内边距、边框，起作用，但不影响布局
设置上下外边距不起作用

/*水平内边距起作用，而且影响布局*/
span1{
    padding-right:10px;
}
span2{
    padding-left:10px;
}
/*设置左右边框，起作用，影响布局*/
span1{
    border-right-width:10px;
}
span2{
    border-left-width:10px;
}
/*水平外边距，起作用，但不影响布局*/
span1{
    margin-right:100px;
}
span2{
    margin-left:100px;
}

box-size属性

设置盒子模型的内边距和边框是否绘制在边框之外。

box-sizing:
	border-box（怪异盒模型，width包含padding和border）
	content-box（标准盒模型，内边距和边框绘制在宽高之外）

怪异盒子模型可视区域的宽：width（width包含padding和border）
怪异盒子模型可视区域的高：height（height包含padding和border）

选择器优先级(面试)

当使用不同的选择器选中同一个元素，并设置相同的样式时，这样就产生样式冲突。最终选则那种样式，根据选择器的优先级决定，优先级(权重)高的起作用
当包含多个选择器时需要将多个选择器的优先级相加
权重累加不能超过上一层级的权重（例如：类的权重最大值为99）
如果选择器权重相同，按顺序执行（谁在后面，执行谁）
并集选择器，各个选择器优先级单独计算，不进行累加

/*
	!important	优先级：无穷大
	内联样式，优先级：1000
	id选择器，优先级：100
	类和伪类选择器，优先级：10
	元素选择器，优先级：1
	通配符选择器，优先级：0
	继承，没有优先级。
*/
/*
	交集选择器，优先级：选择器1+选择器2
	并集选择器，优先级：选择器之间单独计算
*/
/*
	根据继承的原理，子元素会继承父元素的一些属性
*/

文档流

网页可以理解为层层叠加的效果，文档流处在网页的最底层
所有元素默认都存在于文档流

块元素

常见的有：p h1~h6 div ul ol li

特点：

独占一行
宽度、高度、内外边距
宽度默认是父元素的100%
是一个容器盒子，里面可以放块元素和行内元素

注：
- 文字类的元素不允许使用块级元素
- 例如：

代码书写：
<p>
    <div>
        
	</div>
</p>

实际浏览器生成：
<p></p>
	<div></div>
<p></p>

如果width或height设置为auto，在添加padding或border，则可视区域不变，内容区域减少
如果width或height设置为100%，在添加padding或border，则可视区域变大，内容区域不变
如果不设置宽高，则宽高的默认值为auto

行内元素

常见的有：a img strong

特点：

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

注意：a里面可以放块级元素，但最好转化为块级模式

浮动

向左/向右浮动
float:
	left	元素向左浮动
	right
	none	不浮动

块元素

使float属性为非none，让元素脱离文档流

2. 当元素脱离文档流，紧跟着下面的元素会向上浮动

元素浮动后，会向左/右浮动，直到遇到父元素或其他浮动元素元素的边框，停靠在该位置
如果浮动元素上面有未浮动的块元素，则浮动不会超过块元素
块元素浮动后，宽度不再默认占整行，宽度为设置的值
如果浮动元素在一行放不下，则自动换行
浮动元素不会超过兄弟元素，最多并排
当父元素脱离文档流，其宽高都由子元素撑开

内联样式

内联元素脱离文档流后就会变成块级元素，w和h就会起作用

文字环绕

浮动元素不会覆盖文本内容，文本内容会自动环绕在元素的周围。（占半个文档流）
经常使用浮动，制作文本环绕的效果

基本布局

通过浮动布局页面

高度坍塌

原因：父元素高度由子元素撑开，子元素浮动后脱离文档流，导致父元素高度丢失。

后果：导致页面布局发生改变(混乱)

解决方法：

选择器::before
		::after{
    content:'';
    display:table;
   	clear:both;
}
/* 
	高度坍塌+子元素外边距对父元素的影响
*/

其他解决方法：

给父元素设置高度（缺点：高度不能自适应）
在子元素下方添加div元素，并清除div元素的浮动解决高度坍塌问题（缺点：页面会添加多余的元素）

设置伪类：(推荐)

属性值::after{
    content:'';
    display:block;
    clear:both;
}

清除浮动

理解：清除浮动对当前元素的影响

原理：清除浮动后，浏览器会自动给元素添加一个上外边距，以使其位置不受其他元素影响。（开发者工具看不出来）

清除向左/右/左右浮动对当前元素的影响
clear:left/right/both
		none（表示不清除浮动）

清除完浮动，元素退回原始的位置

清除两侧浮动，以最大值为主

定位

/*
	- 将指定的元素放置到页面的任意位置
    - 通过position 设置定位
*/
/*
	position:
        fixed	固定定位
        relative	相对定位
        absolute	据对定位
        static	无定位(默认)
        inhert	从父元素继承
*/

/*
	相对定位（relative）
		可以使用left top right bottom 四个熟悉设置元素的位置
		left ：表示相对于定位位置的左侧的偏移量
		top ： 表示相对于定位位置的上侧的偏移量
		bommot ：表示相对于定位位置的下侧的偏移量
		right： 表示相对于定位位置的右侧的偏移量
	通常使用两个偏移量就可以定位，一个水平位置，一个垂直位置进行定位
*/

/* 
	可以使用left top right bottom 四个熟悉设置元素的位置
	left ：表示相对于定位位置的左侧的偏移量
	top ： 表示相对于定位位置的上侧的偏移量
	bottom ：表示相对于定位位置的下侧的偏移量
	right： 表示相对于定位位置的右侧的偏移量
	通常使用两个偏移量就可以定位，一个水平位置，一个垂直位置进行定位
*/

/* 
	当开启元素的相对定位，而不设置偏移量，则元素不会发生任何移动
	相对定位是相对于元素在文档流中的原来的位置设置定位`
	相对定位的元素不会脱离文档流，原始的位置会被保留
	相对定位的元素会提升一个层级
	相对定位不会改变元素的状态，块和内联不会改变
*/

/* 
	绝对定位
		绝对定位脱离文档流，提升半个层级（文本还在原来的层级）
		开启绝对定位，如果偏移量不发生改变，则位置保持不变（left和top其实是有值的）
		绝对定位是相对于离他最近的开启了定位的祖先元素进行定位。如果都没有定位，则相对于页面的左上角进行定位。（设置谁，谁改变。垂直和水平相互不影响）
		left和top不设置值与left=0/top=0不一样
*/

/*
	绝对定位会改变元素的状态
		块级元素会变成内联元素，高度由内容撑开
		内联元素会变成块级元素
*/

/*
	我们在开发中使用子元素绝对定位时，都会给父元素这只相对定位
*/

/*
	固定定位
		固定定位与绝对定位的大部分特征相同
		相同点：
			1.元素脱离文档流
			2.不设置偏移量，默认位置保持不变
			3.会提升元素层级
		不同点：
			1.参考点在浏览器(视口)的左上角
			2.不会随滚动条移动
		
*/

元素的层级

如果元素都开启定位，则会开启层级

默认元素按照由上而下布局顺序，越往后层级越高

z-index:数值;（同级元素，值越大，层级越高）

没有开启定位的元素，z-index不起作用

父元素层级再高，也不会盖住子元素

透明度

opactiy:值;（值的范围：0~1）

兼容IE8及以下：
	filter:alpha(opactiy:值)
/*
	值：0~100
*/

BFC

在页面中的元素都有一个隐含的属性叫做Block Fomatting Context 简称：BFC

当开启BFC属性时，元素有以下特征

父元素的垂直外边距不会和子元素重叠（外边距重叠）
开启BFC的父元素不会被浮动元素覆盖
开启BFC的父元素可以包含浮动元素

BFC 解决父元素坍塌

如何开启BFC属性

方法一：设置元素浮动
1. 开启方式：开启父元素浮动
2. 作用：开启BFC的父元素可以包含浮动元素
3. 缺点：父元素下的兄弟元素会上移，布局变化（不推荐）
方法二：设置固定定位和绝对定位
1. 开启方式：设置元素绝对定位(固定定位)的方式开启
2. 作用：开启BFC的父元素可以包含浮动元素
3. 缺点：父元素下的兄弟元素会上移，布局变化（不推荐）
方法三：设置inline-block
1. 开启方式：使用设置元素的inline-block方式开启
2. 作用：开启BFC的父元素可以包含浮动元素
3. 缺点：如果父元素没有设置宽度，则父元素宽度丢失，由子元素撑开（不遇见）
方法四：将元素的overflow设置为非visible的值
1. 开启方式：将元素的overflow设置为非visible的值方式开启
2. 作用：开启BFC的父元素可以包含浮动元素
3. 缺点：较小，推荐

BFC解决外边距传递

解决兄弟元素外边距重叠

兄弟元素之间添加一个间隔(其他元素)
给任意元素添加父元素(如：div)，并开启BFC(overflow:hidden;)
1. 父元素的垂直外边距不会和子元素重叠

<div style='overflow:hidden;'>
    <div class='box1' style='margin:10px;'></div>
</div>
<div class='box2'></div>
/*
	解决box1与box2垂直外边距重叠
*/

解决父子元素外边距重叠

BFC的父元素的垂直外边距不会和子元素重叠
1. 打开父元素的BFC

浮动元素覆盖

      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        /* 开启BFC，解决不被浮动元素覆盖问题 */
        /* 开启BFC后，元素会排在浮动元素的后面 */
        overflow: auto;
      }

Emmet语法

提高编写HTML与CSS的速度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2La899f-1628080676256)(C:\Users\lenovo\Desktop\图片\1626145035146.png)]

问题解决

css怎么获得屏幕的高度？
答：通过vh / vw 我们可以获得当前屏幕的视窗宽度

inline-block 100%布局的坑？
答：
	inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，这时你的100%布局就乱了
	最简单的方法在父级元素加上font-size=0就能解决
	还有一种就是手动把空格删掉不过排版就很难看

颜色透明？
rgba(red,green,blue,0)
transparent

WJLSH123

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS的含义

CSS的含义描述HTML：网页结构的表达CSS：网页样式的修饰JS：网页样式的互动CSS：层叠样式表作用：修饰页面的标签例如：颜色，大小，间距对页面的元素进行定位和布局含义：所谓层叠，可以将网页想象成一层一层的结构，层次高的样式会覆盖层次低的样式，我们的CSS可以为每一层设置不同的样式。处于文档的最底层被称为文档流。元素默认都在文档流中放置。CSS引入方式行内(内联)样式：样式写在标签内的style中范围：当前标签，不复用<p style=
复制链接

扫一扫