CSS学习笔记

# 选择器

# 类选择器 (opens new window)

. lol{

}

/*  多类名类选择器 */
.lol .pubg{

}

<div class='lol'></div>
<div class='pubg'></div>

# ID选择器 (opens new window)

#name{

}

<div id='name'></div>

# 标签选择器 (opens new window)

P{

}

<p></p>

# 通配符选择器 (opens new window)

选择全部元素

* {

}

# 后代选择器 (opens new window)

.list li{

}
.list li a{

}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <a herf="#">这是标签</a>
    </li>
</ul>

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <a herf="#">这是标签2</a>
    </li>
</ul>

# 子元素选择器 (opens new window)

.list > li{

}
.list > li > a{

}

<ul>
    <li>老大</li>
    <li>老儿</li>
    <li>老三</li>
</ul>

<ul class="list">
    <li>
        <a herf="#">太子</a>
        <a herf="#">二皇子</a>
    </li>
    <li>2</li>
    <li>3</li>
</ul>

# 相邻兄弟组合器 (opens new window)


img + p {
  font-weight: bold;
}

# 通用兄弟选择器 (opens new window)

/* 在任意图像后的兄弟段落 */
img ~ p {
  color: red;
}

# 并集选择器 (opens new window)

.a,
 b,
 c {

}

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>

# 属性选择器

选择符	简介
E[att]	选择具有 att 属性的 E 元素
E[att="val"]	选择具有 att 属性且值等于 val 的 E 元素
E[att^="val"]	匹配具有 att 属性且值以 val 开头的 E 元素
E[att$="val"]	匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"]	匹配具有 att 属性且值中含有 val 的 E 元素

# 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素 E
E:last-child	匹配父元素中最后一个 E 元素
E:nth-child(n)	匹配父元素中的第 n 个子元素E
E:first-of-type	指定类型 E 的第一个
E:last-of-type	指定类型 E 的最后一个
E:nth-of-type(n)	指定类型 E 的第 n 个

nth-child(n)选择某个父元素的一个或多个特定的子元素

n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个子元素，里面数字从1开始...
n 可以是关键字:even 偶数，odd 奇数
n 可以是公式:常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)

公式	取值
2n	偶数
2n+1	奇数
5n	510 15 ...
n+5	从第5个开始 (包含第五个) 到最后
-n+5	前5个 (包含第5个) ...

# 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意

before 和 after 创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法: element.:before@
before和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为1

# 伪类(Pseudo-classes) (opens new window)

待补充。。。。。

LVHA 有序书写，否则不生效

    /* LVHA */
    /* 未访问*/
    a:link{
        background-color: #48b65a;
    }
    /* 选择过 */
    a:visited{
        background-color: #a72929;
    }
    /* 以上为超链接专属伪类 */

    
    /* 得到焦点 */
    a:focus{
        background-color: #d66091;
    }
    /* 鼠标悬浮 */
    a:hover {
        background-color: #FFF;
        text-decoration: none;
    }
    /* 按下没弹起 */
    a:active {
        background-color: #4456db;
        text-decoration: none;
    }

    <a href="https://google.com">链接1</a>
    <a href="https://lovefile.cn">链接4</a>
    <a href="https://baidu.com">链接5</a>

# font-文字 (opens new window)

    .font_type{
  /* 文字大小 */
  font-size: 30px;
  /* 文字粗细 */
  font-weight: bold;
  /* 字体 */
  font-family: cursive;
  /* 文字样式
  normal 常规
  italic  选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
  oblique 选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（italic ）替代。
          可以精确控制 oblique 字体的倾斜程度
  font-style: oblique 23deg;
  */
  font-style: oblique;
}

# text-文本 (opens new window)

    .text_type{
        /* 字体
        下划线 underline
        删除线 line-through
        顶部线 overline
        什么也没有 none
         */
        text-decoration: underline;
        /*  缩进 按文字大小*/
        text-indent: 2em;
        /* 对齐方式 */
        text-align: center;
        /*
          行高 = 字体高度 + 上下边距
          盒子中，行高 == 容器高度 可达到文字水平居中效果
        */
        line-height: 10px;
    }

# display-显示模式 (opens new window)

    /*设置为块元素， 能设置宽高*/
    .block {
        display: block;
        height: 50px;
    }

    /*设置行内元素， 不能能设置宽高*/
    .inline{
        display: inline;
    }

    /*设置行内块元素， 能设置宽高*/
    .inline-block{
        display: inline-block;
        height: 50px;
        width: 300px;
    }

<div  style="background-color: #48b65a;">
    这是一个div,属于块元素，有宽高占一行,不信你看我背景
</div>
<span style="background-color: #d66091;">
        这是一个span标签,属于行内元素,内容多长我多长，没有宽高,不信你看我背景
    </span>
<a href="#"  style="background-color: #60a3d6;">
    这是一个a标签,也属于行内元素,内容多长我多长,没有宽高，不信你看我背景
</a>

<h1>接下来我要用 display 把div变成  <strong><em><ins>行内元素</ins></em></strong></h1>
<h1>接下来我要用 display 把span变成 <b><i><u>块元素</u></i></b></h1>


<div class="inline" style="background-color: #48b65a;">
    我是一个div ,设置了 [display: inline] 被变成行内元素了,从此没有了宽高,内容多长我多长
</div>
<div class="inline" style="background-color: #48b65a;">
    我是一个div ,设置了 [display: inline-block] 被变成行内块元素了,我虽然不占一行但是能指定宽高
</div>

<span class="block" style="background-color: #d66091;">我是一个 span ,设置了 [display: block] 被变成块元素了 我也能设置宽高了</span>

# 背景 (opens new window)

.background-box{
    height: 500px;
    /*opacity: 0.3;*/
    /*背景色 rgba  其中a表示透明度*/
    background-color: rgba(210, 13, 13, 0.4);
    /* 平铺模式   no-repeat 不平铺*/
    background-repeat: no-repeat;
    /*设置背景图X轴居中, Y轴设置20px */
    background-position: center 20px;
    /*设置背景图*/
    background-image: url("https://ossweb-img.qq.com/upload/webplat/info/yxzj/20230302/49944960390528.jpg");
}

<div class="background-box"></div>

# CSS 的继承

子元素会继承父元素的font-,text- 等样式

选择器	权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类/伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style	1,0,0,0
!important z重要的	最高

# 权重叠加 (层叠加)

复合选择器会有权重叠加的问题

需要注意:权重累加，并不是二进制计算，只会叠加，不会进位

 ul li{
    color: #4ba946;
 }

 li{
    color: red
 }

<ul>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
</ul>

因为 ul li 有2级权重 : 0,0,0,1(ul) + 0,0,0,1 (li)= 0,0,0,2

因为 li 只有1级权重 : 0,0,0,0(li)= 0,0,0,1

0,0,0,2 > 0,0,0,1

所以上面示例中 li 会显示green

# 盒子模型

# border

会影响盒子大小

需要根据实际情况，减去盒子大小

.box {
    /* 线宽 */
    border-width: 5px;
    /* 边框样式
        solid 实线
        dashed 虚线
        detted 点线
    */
    border-style: solid;
    /* 边框颜色 */
    border-color: #FFF;
    /* 边框角度 */
    border-radius: 15px;
    /* 合并边框  */
    border-collapse: collapse;
}

# border-radius 原理

在一个box的各个角落，放置辣一个等同于border-radius的圆，用圆的弧度，代替了角

# border-radius 应用

border-radius 可以设置多个值

1个值: 相同的左上，右上，左下，右下
2个值: 左上右下，右上左下
3个值: 左上，右上左下,右下
4个值: 各自指定左上，右上，左下，右下

# 圆

将 border-radius 设置为正方形盒子的一半

.box{
  height:500px;
  width: 500px;
  border-radius:50%
}

# 圆角矩形

将 border-radius 设置为圆矩形盒子的一半

.box{
  height:300px;
  width: 800px;
  border-radius:400px
}

# content

# padding

会影响盒子大小需要计算

需要根据实际情况，减去盒子大小

当盒子没有widht和height时，不会撑大。

个人理解是:块元素默认父元素宽高

.padding {
  /* 
  内边距
  如果是1参数:相等的上 左 下 右
  如果是2参数:上下  左右  
  如果是3参数:上 左右 下 
  如果是4参数:分别上 左 下 右
  */
  padding: 10px 5px 10px 5px;

  /* 等效上面 */
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
}

# margin

.margin{
        /* 
    外边距
    如果是1参数:相等的上 左 下 右
    如果是2参数:上下  左右 
    如果是3参数:上 左右 下 
    如果是4参数:分别上 左 下 右
    */
    margin: 10px 5px 10px 5px;

    /* 等效上面 */
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 10px;
    margin-bottom: 5px; 
}

# margin 水平居中

盒子设置了宽度
margin 左右设置自动 auto
适用于块元素，行内元素/行内块元素给父元素添加:text-align:center即可

.box {
    width: 900px;
    background-color: rgba(210, 13, 13, 0.4);
    /* 块居中 */
    margin: 0px auto;
    /* 行内元素居中 */
    text-align:center;
}

<div class="box">
    <span>1111</span>
</div>

# 嵌套元素外边距塌陷

.father {
    width: 900px;
    background-color: rgba(210, 13, 13, 0.4);
    margin-top: 100px;
}

.son {
    width: 900px;
    background-color: rgba(190, 23, 13, 0.4);
    margin-top: 30px;
}

<div class="father">
    <div class="son"></div>
</div>

以上示例，父元素上边距100px,子元素30px

由于嵌套关系，父元素被强制下拉,导致父元素上边距130px

# 解决方案

.father {
    width: 900px;
    background-color: rgba(210, 13, 13, 0.4);
    margin-top: 100px;
    /* 设置边框  恩断义绝框 */
    border : 1px solid transparent;
    /* 设置内边距 划清界线 */
    padding : 1px;
    /* 溢出隐藏  */
    overflow:hidden;  
}

.son {
    width: 900px;
    background-color: rgba(190, 23, 13, 0.4);
    margin-top : 30px;
}

浮动，固定，绝对定位不会有塌陷问题

# 清除内外边距

很多元素都带有外边距，例如:body,li

# 解决

*  {
    padding:0;
    margin:0
}

行内元素，尽量只设置左右内外边距，因为上下设置了也不生效

因为行内元素没有高度

span{
    margin: 0 0;
    padding: 0 0;
}

# 阴影

# 盒子阴影

序列	值	必须	描述
1	h-shadow	true	水平阴影位置，允许负值（X轴）
2	v-shadow	true	垂直阴影位置，允许负值（Y轴）
3	blur	false	模糊距离（模糊）
4	spread	false	阴影的尺寸（大小）
5	color	false	阴影的颜色
6	inser	false	将外部阴影改为内部阴影

注意 outset 默认不需要手动指定,否则不生效

/* 

 */
.box-shadow{
   box-shadow: 10px 10px 10px 10px blank
}

# 文字阴影

序列	值	必须	描述
1	h-shadow	true	水平阴影位置，允许负值（X轴）
2	v-shadow	true	垂直阴影位置，允许负值（Y轴）
3	blur	false	模糊距离（模糊）
4	color	false	阴影的颜色

/* 

 */
.text-shadow{
   box-shadow: 10px 10px 10px blank
}

# 浮动(重要)

可以让块元素一行内并排显示

个人理解：就是元素在原来的位置飘起来，向指定的方向一直飘，直到与边框（父元素边界）或者另一个浮动元素进行贴贴

网页布局:多个块级元素，纵向排列标准流，横向排列找浮动

特性

浮动会脱离标准流（脱标）
- 脱离:简单理解，飞起来，原来位置被后面的元素占有
- 浮动只会影响后面的标准流，不会影响前面的标准流（简单理解，浮动是飞，但是是前面的标准流是空气墙），所以可以用标准流分割浮动
浮动的元素会一行内显示，并且元素顶部对齐
- 父元素宽带不够容纳，会新起一行，所以会适应不同屏幕宽度
浮动的元素具有行内块元素的
- 添加浮动后，任何元素都会拥有行内块元素的特性

float

属性值	描述
none	不浮动（默认值）
left	元素左浮动
rigth	元素右浮动

.float{
    float: left; 
}

# 清除浮动

为什么要清除浮动

很多情况下，我们浮动都会给父容器指定高度

但是很多情况下，我们不方便给父容器指定高度

这时候父容器高度为0，而浮动不会占用高度，这时候就会影响下面的标准流

浮动不会压住文字或者图片

清除浮动方式

原理都是划清容器界限闭合处理

方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加了许多无意义标签，结构差
父级添加 overflow	书写简单	如果父容器有高度，无法显示溢出部分
父级添加 after伪元素	结构语义正确，css生成	IE6-7不支持，但是我也不想兼容
父级添加双伪元素	结构语义正确，css生成	IE6-7不支持，但是我也不想兼容

方式一： clear 隔墙法

属性值	描述
both	同事清除左右两侧浮动影响
left	清除元素左浮动
rigth	清除元素右浮动

    .box {
        width: 800px;
                    height: 200px; 
        border: 1px solid blue;
        margin: 0 auto;
    }

    .damao { 
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
    }

    .ermao {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .footer {
        height: 200px;
        background-color: black;
    }

    /* 核心代码 */
    .clear {
        clear: both;
    }

<div class="box">
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
    <div class="ermao">二毛</div>
    <div class="ermao">二毛</div>
    <div class="ermao">二毛</div>
    <!-- <div class="clear"></div> -->
    <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
    <span class="clear"></span>
</div>
<div class="footer"></div>

方式二： overflow 父元素添加 overflow

如果父容器有高度，无法显示溢出部分

修改上面box：设置overflow: hidden;

    .box {
        /* 清除浮动 */
        overflow: hidden;
        width: 800px;
        /* 如果这里设置了高度，溢出部分将会隐藏 */
        /* height: 300px; */
        border: 1px solid blue;
        margin: 0 auto;
    }

方式三：伪元素

    /*解释 
    在指定的类后面新增一个
    内容为""
    高度为0
    带有 clear: both 样式的
    不显示的
    块元素
    */
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /* IE6、7 专有 */
        *zoom: 1;
    }

    <div class="box clearfix"></  div>

方式四：双伪元素

    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

    <div class="box clearfix"></  div>

# 定位

# 相对定位

.box {
    position: relative;
}

在元素原来位置偏移量
会保留元素原来位置

# 绝对定位

.box {
    position: absolute;
}

在屏幕可视区域偏移
父容器必须指定定位，否则默认为屏幕（父相子绝）
不会保留元素原来位置

在父元素居中对齐方法

左/右偏移50% - magin-left/magin-right 自身宽度一般

水平居中同理

# 固定定位

.box {
    position: fixed;
}

不会保留原来位置
在屏幕可是区域偏移
不会随着屏幕滚动

.box {
    position: sticky;
}

会保留原来位置
在达到指定偏移位置时固定

# 鼠标样式

属性值	描述
default	默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

.mouse{
  cursor: default;
}

# 元素显示隐藏

display: none 隐藏元素不保留位置
visibility: hidden 隐藏元素不保留位置
overflow 控制溢出部分显示处理


.box{
  display: none;
  visibility: hidden;
  overflow: auto;
}

# 盒子模型

CSS3中可以通过 box-sizing 来指定盒模型，有2个值:即可指定为content-box、 border-box，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况:

box-sizing:content-box 盒子大小为 width + padding+ border
box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

# 过渡(transition)

transition

transition:要过渡的属性花费时间运动曲线何时开始

属性 : 想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写all
花费时间:单位是秒(必须写单位) 比如 0.5s
运动曲线:默认是ease (可以省略)
- linoar 匀速
- ease 逐慢下来
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
何时开始:单位是秒(必须写单位)可以设置延迟触发时间默认是0s (可以省略)


.transition{
  transition: all  .5s ease;
  transform: ;
}

# 转换(transform)

移动(translate)

定义2D转换中的移动，沿着X和Y 轴移动元
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:(50%,50%)
- 例如自身长，宽为: 200px ,100px, translate:(50%,50%) 将会向右下方分别移动100px,50px
对行内标签没有效果

/*使用 translate 实现居中 */
.box {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%)
}

.box1 {
    transform: translateX(10%)
}

.box2 {
    transform: translateY(1px);
    transform-origin: left;
}

transform-origin 中心点转换

语法transform-origin: x y; 注意后面的参数 x和y 用空格隔开
x,y 默认转换的中心点是元素的中心点(50% 50%)
还可以给x y设置像素或者方位名词 top bottom left right center)

.box{
    /*transform-origin: 10px 20px;*/
    transform-origin: top left;
}

旋转(rotate)

语法 transform: rotate(度数)
rotate里面跟度数，单位是deg 比如 rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

.box {
    transform: rotate(45deg)
}

缩放(scale)

# 小技巧

# 去除input轮廓线


input{ 
  outline: none;
}

# 防止文本框拖拽

textarea{
  resize: none;
}

# 设置行内元素/行内有元素块对齐方式

属性值	描述
baseline	默认: 父元素基线对齐，及父元素底部对齐
top	行内最高元素顶部对齐
middle	父元素中线对齐
bottom	行内最低元素底部对齐


.align {
  vertical-align: middle; 
}

# 解决图片底部空白

给图片添加 vertical-align bottom | top
转换图片为块级元素 display:block

# 单行文本溢出省略号

必须满足三个条件

先强制一行内显示文本 white-space: nowrap; (默认 normal自动换行)
超出的部分隐藏 overflow: hidden;
文字用省略号替代超出的部分 text-overflow: ellipsis;

# 多行文本省略号移除

超出部分隐藏 overflow: hidden;
超出部分显示省略号 text-overflow: ellipsis;
弹性伸缩盒子模型显示 display: -webkit-box;
限制在一个块元素显示的文本的行数 -webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式 -webkit-box-orient: vertical;

# CSS实现三角形

观察

.box{
    width: 0;
    height: 0;
}
.triangle{
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}

<div class="box triangle"></div>

渲染

# 保留向下的三角形

去除底边框
左右边框设置透明

.bottom{
    /*去除底边框*/
    border-bottom-width: 0;
    /*左右边框设置透明*/
    border-color: orangered transparent;
}

<div class="box triangle bottom"></div>

渲染

# 渐变

.gradient {
  width: 100%;
  height: 50px;
  background: linear-gradient(to right,#b2effe 40%, rgb(136,254,230))
}

<div class="gradient"></div>

渲染

# Flex布局

跳转此处查看

上次更新: 2025/05/14, 01:34:05

← 常用标签媒体查询→