免责声明：本文仅做分享~
目录
CSS引入方式
内部样式:CSS 代码写在 style 标签里面.
外部样式:CSS 代码写在单独的 CSS 文件中（.css） 在 HTML 使用 link 标签引入 .
<link rel="stylesheet" href="./my.css">
行内样式:配合 JavaScript 使用,CSS 写在标签的 style 属性值里.
选择器
选择器: <br>
标签选择器: <br>
类选择器: <br> .
ID选择器: <br> #
属性选择器: <br>
伪类选择器: <br>
伪元素选择器: <br>
通配符选择器: <br> <!-- 一般删除一些样式时使用 --> *{}
盒子尺寸和背景色
文字控制属性
行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
单行文字 垂直居中
行高属性值等于盒子高度属性值.
字体族
属性名：font-family
属性值：字体名
font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次 查找.
font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体.
font复合属性
设置网页文字公共样式.
属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
--字号和字体值必须书写.
文本对齐方式
控制内容水平对齐方式 . 属性名：text-align
#divs3 {
text-align: center;
}
text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
文本修饰线
text-decoration
color 文字颜色
-----
复合选择器
伪类选择器
伪类表示元素状态，选中元素的某个状态设置样式。
鼠标悬停状态：选择器:hover { CSS 属性 }
超链接伪类
如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。
CSS特性
继承性 层叠性 优先级
css三大特性：继承、层叠、优先级 <br>
继承：子元素继承父元素的样式。 （文字控制属性。）
层叠：同一元素的样式层叠，后面的样式覆盖前面的样式。
优先级（权重）：!important > 内联样式 > 外部样式表 > 内部样式表 > 浏览器默认样式。
id > class > 标签选择器 > 通配符选择器
继承性
继承性：子级默认继承父级的 文字控制属性。
如果标签有默认文字样式会继承失败。 例如：a 标签的颜色、标题的字体大小。
层叠性
特点： 相同的属性会覆盖：后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加：不同的 CSS 属性都生效。
优先级
优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
基础选择器：
规则：选择器优先级高的样式生效。
公式：
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
（选中标签的范围越大，优先级越低）
复合选择器-叠加 ：
叠加计算：如果是复合选择器，则需要权重叠加计算。
公式：（每一级之间不存在进位）
规则：
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important 权重最高
继承权重最低
Emmet 写法
代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。
背景属性
背景图默认有平铺（复制）效果。 bgi
背景图平铺方式
background-repeat（bgr）
背景图缩放
设置背景图大小
background-size（bgz）
常用属性值： 关键字
cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白 百分比：根据盒子尺寸计算图片大小 数字 + 单位（例如：px）
（图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同。）
背景图固定
背景不会随着元素的内容滚动。
background-attachment（bga）
fixed
背景复合属性
background（bg）
属性值：
背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定
（空格隔开各个属性值，不区分顺 序）
显示模式
显示模式：标签（元素）的显示方式。
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
块级元素
l 独占一行 div
l 宽度默认是父级的100%
l 添加宽高属性生效
行内元素
l 一行可以显示多个 span
l 设置宽高属性不生效
l 宽高尺寸由内容撑开
行内块元素
l 一行可以显示多个
l 设置宽高属性生效
l 宽高尺寸也可以由内容撑开
-转换显示模式
-----
结构伪类选择器
作用：根据元素的结构关系查找元素。
:nth-child(公式)
n=0 -->
伪元素选择器
创建虚拟元素（伪元素），用来摆放装饰性的内容。
• 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
• 伪元素默认是行内显示模式
• 权重和标签选择器相同
盒子模型
组成
• 内容区域 – width & height
• 内边距 – padding（出现在内容与盒子边缘之间）
• 边框线 – border
• 外边距 – margin（出现在盒子外面）
边框线
属性名：border（bd） 属性值：边框线粗细 线条样式 颜色（不区分顺序）
设置单方向边框线 :
属性名：border-方位名词（bd+方位名词首字母，例如，bdl）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
内边距
设置 内容 与 盒子边缘 之间的距离。
padding / padding-方位名词
尺寸计算
盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
l 结论：给盒子加 border / padding 会撑大盒子
l 解决:
l 手动做减法，减掉 border / padding 的尺寸
l 內减模式：box-sizing: border-box
外边距
拉开两个盒子之间的距离.
margin
与 padding 属性值写法、含义相同.
版心居中 – 左右 margin 值 为 auto（盒子要有宽度）
外边距问题 – 合并现象
场景：垂直排列的兄弟元素，上下 margin 会合并.
现象：取两个 margin 中的较大值生效.
外边距问题 – 塌陷问题
场景：父子级的标签，子级的添加 上外边距 会产生塌陷问题.
现象：导致父级一起向下移动.
解决方法：
• 取消子级margin，父级设置padding
• 父级设置 overflow: hidden
• 父级设置 border-top
行内元素 – 内外边距问题
场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法：给行内元素添加 line-height 可以改变垂直位置
清除默认样式
元素溢出
控制溢出元素的内容的显示方式。
overflow
圆角
border-radius
正圆形状 -- 给正方形盒子设置圆角属性值为 宽高的一半 / 50%
胶囊形状 -- 给长方形盒子设置圆角属性值为 盒子高度的一半.
阴影
box-shadow : X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色 内外阴影
标准流
标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个.
div
span
浮动
让块元素水平排列。
清除浮动
场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱） 解决方法：清除浮动（清除浮动带来的影响）
方法一：额外标签法
• 在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
方法二：单伪元素法
方法三：双伪元素法（推荐）
方法四：overflow --最简单.
• 父元素 添加 CSS 属性 overflow: hidden
总结
浮动属性 float，left 表示左浮动，right 表示右浮动
l特点
1.浮动后的盒子顶对齐
2.浮动后的盒子具备行内块特点
3.父级宽度不够，浮动的子级会换行
4.浮动后的盒子脱标
l清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
推荐双伪元素法清除浮动。
l拓展：浮动本质作用是实现图文混排效果。
flex布局
--用的更多。
Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸。
组成部分：
•弹性容器
•弹性盒子
•主轴：默认在水平方向
•侧轴 / 交叉轴：默认在垂直方向
--沿主轴方向排列。
主轴对齐方式
justify-content
/* 各个间距都相等 */
justify-content: space-evenly;
侧轴对齐方式
•align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
•align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
侧轴无高度 / stretch
修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向。
属性名：flex-direction
主轴 ，侧轴
弹性伸缩比
作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。
弹性盒子换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
flex-wrap
wrap：换行
nowrap：不换行（默认）
行对齐方式
align-content
--该属性对单行弹性盒子模型无效。
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
