当前位置：首页 > news >正文

CSS笔记III

news 文章来源：https://blog.csdn.net/2303_77073508/article/details/135638402 2025/5/16 21:00:52

选择器

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素(第一个元素N值为1)

nth-child(公式) 作用是可以根据元素的结构关系查找多个元素

偶数标签：2n ；奇数2n+1 or 2n-1 之类的依次类推

找到第五个以后的所有标签 n+5 ；第五个以前的所有标签是-n+5

伪元素选择器

作用：创建虚拟元素(伪元素) ，用来摆放装饰性的内容

选择器	说明
E::before	在E元素中最前面添加一个伪元素
E::after	在E元素中最后面添加一个伪元素

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

    <style>div::before {content: "html";}div::after {content: "js";}</style>
</head>
<body><div>css</div><!--这是在css前后分别添加html和js-->

注意：伪元素选择器创建出来的是行内元素，宽高效果如果想修改显示需要，转换成块元素；

PxCook软件

PxCook(像素大厨) 是一款切图设计工具软件。支持psd文件

低代码工具

盒子模型

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成。除去内容部分，其余每个部分又分别包含上、下、左和右4个方向，方向既可以分别定义也可以统一定义。

我们生活中常见的手机盒子就可以看作一个盒子模型，完整的手机盒子通常包含手机、内填充物和盛装手机的外壳。如果把手机想象成HTML标记，那么手机盒子就是一个CSS盒子模型。内容就是盒子里装的手机；内边距就是怕手机损坏得填充物：边框就是盒子本身外部的壳；外边距就是多个手机盒子排放时空的缝隙。

组成

盒子模型重要组成部分：

内容区域 width&height
内边距 padding
边框线 border
外边距 margin

边框线

属性名：border (bd)

属性值：边框线粗细(数字+px) 线条样式(solid -实线、dashed -虚线、dotted -点线) 颜色 (三个属性不区分书写顺序)

设置单方向边框线

属性名：border-方位名词 (缩写方式:bd+方位名词首字母)

top bottom left right （上下左右）

属性值：边框线粗细线条样式颜色 (不区分顺序)

内边距

作用：设置内容与盒子边缘之间的距离

属性名：padding

设置单方向内边距同样是属性名-方位词

例如顶部内边距 padding-top

多值写法

padding 复合属性写法看下面表格

顺序是上右下左（top 、right 、bottom、left）绕着盒子从top开始顺时针转取值，如果数到当前方向没有数值，取值就和对面的数值一样。

取值个数	code	说明
一个值	padding:10px	四个方向内边距均为10px
四个值	padding:10px 40px 80px 40px	上:10px ; 右: 20px; x下：80px ；左：40px；
三个值	padding: 10px 40px 80px	上:10px ; 左右: 40px; x下：80px ；
两个值	padding: 10px 80px	上下:10px ; 左右: 80px;

尺寸计算

默认情况：

盒子尺寸=内容尺寸 + border尺寸 + 内边距尺寸

给盒子增加boeder / padding 会增加盒子尺寸产生不必要的尺寸

解决方法
- 手动做减法
- 内减模式：box-sizing：border-box

外边距

作用：拉开两个盒子之间的距离

属性名：margin

注意：与padding的属性值，写法含义基本一样，也同样可以定义单个方向的属性。

板心居中 margin: 0 auto

板心居中的前提是盒子必须要有宽度width 不然不会产生效果

清楚默认样式

清楚标签的默认样式

* {margin:0;padding:0;box-sizing:border-box;
}
<!--先清楚所有标签内外边距并且设置内减盒子属性-->

元素溢出

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

属性名：overflow

属性值：关键字

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动 (无论是否溢出，都显示滚动条位置)
auto	溢出滚动 (溢出才显示滚动条位置）

外边距问题

外边距合并问题

特定场景：垂直排列的兄弟元素，上下margin会合并

显示：合并时取两个margin中较大值生效

外边距塌陷问题

特定场景：父子级标签，子级标签添加的margin-top会产生外边距塌陷问题

显示效果：导致父级标签一起向下移动

解决方法
- 取消子级margin 父级设置padding
- 父级设置overflow：hidden
- 父级设置boeder-top

行内元素-内边距问题

特定场景：行内元素添加margin和padding ，无法改变元素垂直位置

解决方法：给行内元素添加line-height可以改变垂直位置

圆角效果

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：数字+px / 百分比

属性值(圆角半径)

外边框有四个角同样四个角可以单独取值单个取值的写法同上文padding的格式从左上角开始顺时针书写数值没有读取到数值的角与其对角的数值相同

常见圆角
- 正圆：将正方形盒子设置圆角属性值为宽高的一半or50%
```
yuan {width:200px;height:200px;border-radius:100px;
}
```
- 胶囊形状给长方形盒子设置圆角属性值为盒子高度的一半
```
yuan {width:200px;height:100px;backfround-color: greenborder-radius:50px;
}
```

注意圆角最大取值是50%，超过50%不会变得更圆。

阴影

作用：给元素设置阴影效果

属性名：box-shadow

属性值：x轴偏移量 y轴偏移量 模糊半径扩散半径颜色内外阴影

注意：x轴偏移量 y轴偏移量必须书写不然阴影不会生效

默认是外阴影，内阴影需要添加inset

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则

例如：块元素独占一行，行内元素可以一行显示多个。

就是网页中标签的默认显示模式当不足以满足需求时再使用浮动或者flex布局

浮动

作用：让块级元素在一行水平排列

属性名：float

属性值关键字 left(左对齐) 、right(右对齐)

特点：顶对齐，具有行内块级元素显示模式的特点

注意：如果要设置块级元素浮动尽量全部设置不然可能会出现脱标效果和强转行内块有异曲同工之秒具体基础看code

<!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>* {margin: 0;padding:0;}li {list-style: none;}.product {margin: 50px auto;width: 1226px;height: 628px;background-color: pink;/* 版心居中的大盒子 */}.left {float: left;width: 234px;height: 628px;background-color: green;}.right {float: right;width: 978px;height: 628px;background-color: brown;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: yellowgreen;}/* 第四个和第八个li 去掉margin-right 不然会掉出盒子 */.right li:nth-child(4n){margin-right: 0;}/* 因为父级的宽度不够 所以浮动的盒子回掉出盒子 */</style>
</head>
<body><div class="product"> <div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

清除浮动

特点场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度(可能导致页面布局错乱)

解决方法：清除浮动(清楚浮动带来的影响)、

方法一：额外标签法

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

方法二：单伪元素法

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

方法三：双伪元素法(推荐)

       <!--before是为了防止塌陷，解决外边距塌陷问题-->.clearfix::before,.clearfix::after{content: "";display: table;}<!--after作用是清除浮动-->.clearfix::after{clear: both;}

方法四：overflow

父元素添加CSS属性 overflow：hidden

浮动 -总结

属性 float ， left表示左浮动、right表示右浮动

特点
- 浮动后的盒子顶对齐
- 浮动后的盒子具备行内块的特点
- 父级宽度不够，浮动的子级会换行
- 浮动后的盒子脱标
清楚浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
- 双伪元素法

Flex布局

重点学习

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

flex-组成

设置方式：给父元素设置 display：flex，子元素可以自动挤压或者拉伸

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴/交叉轴：默认在垂直方向

弹性容器 display：flex里面的元素盒子叫弹性盒子

	<!--仅写css样式-->   <style>/* 弹性容器 */.box {display:flex;height: 300px;border:1px solid #000;}/* 弹性盒子 */.box div {width: 200px;background-color: pink;}</style>

flex -布局

描述	属性
create flex container	display：flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

主轴对齐方式

属性名： justify-content

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

侧轴对齐方式

属性名：

align-items 当前弹性容器内所有的弹性盒子的侧轴对齐方式(给弹性容器设置)
align-self 单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

属性值相同都是关键字：

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

技巧：在为单独的弹性盒子的时候可以配合结构伪类选择器，选中某个特定的弹性盒子。

修改主轴方向

属性名：flex-direction

属性值：关键字

属性值	效果
row	水平方向，从左到右
column	垂直方向，从上到下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

注意：

修改主轴方向为垂直方向，侧轴自动变换到水平方向
主轴在垂直垂直居中
侧轴在水平水平居中

弹性伸缩比

特点：可以控制弹性盒子的主轴方向的尺寸

属性名：flex

属性值：数字，表示占用父级剩余尺寸的份数（权重）

整数数字控制权重剩余空间的弹性盒子所占弹性容器的权重

弹性盒子换行

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

属性名： flex-wrap

属性值：

wrap 换行
nowrap 不换行 (默认)

行对齐方式

属性名：align-content