CSS-2

结构伪类选择器

声明

本文以查找p标签进行举例子

作用

根据元素的结构关系"查找"元素

查找第一个

p:first-child{
	background-color:red;
}

查找第一个 p 标签元素

找最后一个

p:last-child{
	background-color:green;
}

查找最后一个 p 标签元素

查找某一个

p:nth-child(666){
	background-color:blue;
}

查找第 666 个 p 标签元素

查找偶数个

/* n从0开始 */
p:nth-child(2n){
	background-color:blue;
}

查找 "偶数" 个 p 标签元素

查找奇数个

/* n从0开始 */
p:nth-child(2n+1){
	background-color:blue;
}

查找 "奇数" 个 p 标签元素

查找某倍数

/* 找到5的倍数的 p 标签，n从0开始 */
p:nth-child(5n){
	background-color:blue;
}

查找 " ? 倍数" 的所有 p 标签元素

查找某个之后的

/* 找到第5个元素之后的 p 标签 */
p:nth-child(5+n){
	background-color:blue;
}

查找 "第 ? 个以后"的 p 标签元素

查找某个之前的

/* 找到第5个元素之前的 p 标签 */
p:nth-child(5-n){
	background-color:blue;
}

查找 "第 ? 个之前"的 p 标签元素

伪元素选择器

• 注意：必须设置 “content” 属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
• 伪元素默认是 “行内” 显示模式
• 权重和标签选择器相同

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

    div::before{
        content:"老鼠";
        w100
    }

    div::after{
        content:"大米";
    }

    <div>爱</div>

最终显示结果为："粉红色"的框里面，写着"老师爱大米"

盒子模型

重要组成部分

• 内容区域：width & height
• 内边距：padding（出现在内容与盒子边缘之间）
• 边框线：border
• 外边距：margin（出现在盒子外面）

div{
    width: 200px;
    height: 200px;
    background-color: pink;

    /* 内容与盒子边缘之间 */
    padding: 20px;
    
    /* 盒子边框 */
    border: 1px solid #000;

    /* 出现在盒子外面，拉开两个盒子之间的间距 */
    margin: 50px;
}

边框线

实线

border: 1px solid #000;

虚线

border: 2px dashed #000;

点线

border: 3px dotted #000;

单方向框线

border-top: 	1px solid #000;  	/* 上边框线 */
border-right: 	1px solid #000;  	/* 上边框线 */
border-bottom: 	1px solid #000;  	/* 上边框线 */
border-left: 	1px solid #000;  	/* 上边框线 */

内边距

单方向

padding-top:	20px;
padding-right:	20px;
padding-bottom:	20px;
padding-left:	20px;

多值写法

padding: 10px 20px 30px 40px;	/* 上  右  下  左*/
padding: 10px 40px 80px;		/* 上   左右  下 */
padding: 10px 80px;				/*  上下  左右  */

记忆方法：从"上"开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样（对面的意思是：下对上，左对右）

尺寸计算

• 默认情况下：盒子尺寸 = 内容尺寸 + 内边距尺寸 + border尺寸
• 因此，在这种情况下，加 padding 和 border 会撑大盒子

div{
    width: 200px;
    height: 200px;
    background-color: pink;
    
    padding: 30px;
    border: 3px solid #000;
    
    /* 内减模式：不需要手动做减法，加 padding 和 border 也不会撑大盒子了 */
    box-sizing: border-box;
}

外边距

一、外边距的"单方向"控制，以及多值写法，都是和 padding 一样的
二、外边距不会撑大盒子

举例：
a.外边距单方向控制:
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    
b.多值写法:
    margin: 10px 20px 30px 40px;	/* 上  右  下  左*/
    margin: 10px 40px 80px;			/* 上   左右  下 */
    margin: 10px 80px;				/*  上下  左右  */
记忆方法：从"上"开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样（对面的意思是：下对上，左对右）

版心居中

/* 外边距的应用举例：版心居中 */

div{
    width: 75%;
    height: 200px;
    background-color: pink;
    /* ------------------------ */
    box-sizing: border-box;
    /* ------------------------ */
    padding: 20px;
    border: 1px solid #000;

    /* 网页"版心居中"效果：margin: 0 auto;  */
    /* "版心居中"效果的前提：有 width 属性 */
    margin: 0 auto;
}

圆角效果

圆角知识点

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    
    /* -------圆角效果------- */
    border-radius: 20px;	/* 20px指的是圆的半径 */
}

border-radius: 20px;				/* 四个角都是一样 */
border-radius: 20px 30px;			/* 左上+右下       右上+左下 */
border-radius: 10px 20px 30px;		/* 左上   右上+左下   右下 */
border-radius: 10px 20px 30px 40px;  /* 左上   右上   右下   左下 */

记忆方法：从左上角顺时针开始赋值，没有取值的角与对角取值相同

正圆形状

应用场景：头像
实现原理：给正方形盒子设置圆角属性值为"50%"

    img {
        width: 200px;
        height: 200px;
        /*  */
        border-radius: 50%;
    }

胶囊形状

应用场景：按钮
实现原理：给长方形盒子设置圆角属性值为"盒子高度的一半"

    div {
        width: 200px;
        height: 80px;
        background-color: orange;
        /* ------------ */
        border-radius: 40px;
    }

阴影效果

属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意事项：
	1. X轴偏移量 Y轴偏移量 必须书写
	2. 默认是外阴影，内阴影需要添加 inset (不常用)

    div {
        width: 200px;
        height: 80px;
        background-color: orange;
        margin: 0 auto;
        /* ------------ */
        
        box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);  默认是外阴影！
        
        /* box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset; */  内阴影不常用！
    }

元素溢出

作用：控制溢出元素的内容的显示方式

div {
    width: 200px;
    height: 200px;
    background-color: pink;

    overflow: hidden;   /* 溢出的内容，隐藏起来 */
    overflow: scroll;   /* 溢出的内容，通过滚动条显示，如果不溢出，也显示滚动条 */
    overflow: auto;   /* 溢出的内容，通过滚动条显示，如果不溢出，就不显示滚动条 */
}

外边距问题

吞并现象

场景：垂直排列的兄弟元素，上下 margin 会相加吗？
现象：上下两个 margin 不会相加，两个 margin 中的较大值生效
结论：因此，在写 margin 时候，如果遇到了"垂直排列的兄弟元素"，设置其中一个 margin 即可

塌陷问题

场景：父子级的标签，子级添加"上外边距（margin-top）"会产生塌陷问题
现象：导致父级一起向下移动

解决方法：
	1. 直接取消子级的 margon-top，使用父级的 padding					(推荐)
	2. 不取消子级的 margon-top，但是父级必须设置 overflow: hidden;	    (推荐)
	3. 不取消子级的 margon-top，但是父级必须设置 border-top;

行内元素问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决办法：给行内元素添加 line-height 可以改变垂直位置

span {
	margin: 50px;
	padding: 20px;
	
	/* 添加下面一行代码，直接解决问题 */
	line-height: 100px;
}

清除默认样式

/* 常用的"清除默认样式"的方法 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;  /* 此句子的作用是，防止盒子被撑大，可根据实际情况，选择加与不加*/
}

/* 去除列表的项目符号 */
li {
	list-style: none;
}

/* 清除 a 标签的下划线 */
a {
    text-decoration: none;
}

浮动

作用：让"块元素"水平排列
特点：顶端对齐，具备"行内块"显示模式的特点

属性名：float
属性值：
	1. left		左对齐
	2. right	右对齐

代码演示：
.one {
    width: 100px;
    height: 100px;
    background-color: brown;

    float: left;

}

.two {
    width: 200px;
    height: 200px;
    background-color: orange;

    float: left;
}

清除浮动带来的影响

浮动带来的影响：
	父级里面的子级元素设置为浮动，如果此时父级元素没有高度，子级无法撑开父级元素的高度，可能会导致页面布局错乱！

---

方法一

额外标签法（了解）

• 在父级元素内容的最后添加一个块级元素，设置CSS属性"clear: both"

.clearfix {
    clear: both;
 }
 
<div class="clearfix"></div>

---

方法二

单伪元素法（方法二与方法一的原理是相同的）

• 在父级标签中，添加 class=“clearfix” 即可

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

---

方法三

双伪元素法【推荐】

• 在父级标签中，添加 class=“clearfix” 即可

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

.clearfix::after {
	clear: both;
}

补充说明：

1. before 是用来解决"外边距塌陷问题"
2. after 是用来清除浮动带来的影响

---

方法四

overflow 方法

• 父级元素添加 CSS 属性 “overflow: hidden”

---

Flex 布局

详细研究

教程网址：https://juejin.cn/post/6984365925168316447

认识 Flex 布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。 Flex 模型不会产生浮动布局中脱标的现，布局网页更简单、更灵活。

设置方式：给父级元素设置 display: flex，子元素可以自动挤压或拉伸
组成部分

• 弹性容器（设置 display: flex 的父级元素）
• 弹性盒子（弹性容器里面的子级盒子）
• 主轴：默认在水平方向
• 侧轴/交叉轴：默认在垂直方向

主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

属性名：

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

• aligh-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性容器设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

.box {
	display: flex;
	align-items: center;  /* 所有的盒子沿着侧轴居中 */
}

.box div:nth-child(2) {
	align-self: center;  /* 某个盒子沿着侧轴居中 */
}

修改主轴方向

• 将主轴的方向，由原来的水平修改为垂直；侧轴自动变换到水平方向

.box {
    display: flex;
    /* ------------ */
    flex-direction: column;  /* 修改主轴方向 */
}

img {
    width: 150px;
    height: 32px;
}

<div class="box">
	<img src="./images/img0" alt="">
	<span>媒体</span>
</div>

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸

属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数

flex: 1;  /* 表示占用父级剩余空间的一份 */

弹性盒子换行

弹性盒子可以自动挤压或压缩，默认情况下，所有弹性盒子都在一行显示

属性名：flex-wrap
属性值：
	wrap:		换行
	nowrap:		不换行（默认）

行对齐方式

属性名：align-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等