目录
- 一、CSS的引入方式
- 二、CSS基础选择器
- 三、CSS选择器进阶（复合选择器）
- 四、字体和文本样式
- 1.字体样式
- (1)字体大小 font-size
- (2)字体粗细：font-weight
- (3)字体样式：font-style
- (4)字体类型：font-family
- (5) 自定义字体 @font-face
- 复合属性 front
- (6)文字颜色：color
- 2.文本样式
- 1. 文本缩进：text-indent
- 2. 文本水平对齐方式： text-align
- 3. 文本垂直对齐方式：vertical-align
- 4. 文本修饰： text-decoration
- 5. 文字阴影： text-shadow
- 6. 文本走向： text-orientation
- 7. 文本行布局： writing-mode
- 8. 文本换行：white-space
- 9. 单词换行：word-wrap
- 10. 文字间距：letter-spacing
- 11. 单词间距：word-spacing 和 字母转换 text-transform
- 12. 行高：line-height
- 13. 文字溢出： text-overflow
- 14. 文本排版方向：direction
- 综上例子：
- 五、列表样式 list-style
- 六、背景
- 七、元素显示模式
- 八、CSS的三大特征
- 九、盒模型
- 十、CSS伪类
- 十一、CSS伪元素
- 素材源：
一、CSS的引入方式
1.内嵌式：CSS 写在style标签中
提示：style虽然可以写在任意位置，但是通常约定写在head中
当前页面 小案例
2.外联式：CSS 现在一个单独.css文件中
提示：需要通过link标签在网页中引入
多个页面 项目中
3.行内式：CSS 写在标签的style属性上
提示：基本不推荐使用，之后会配合js使用
当前标签 配合js使用
4.也可以使用模块化的思想直接引用(在其他.css文件中引用)：
@import url(./reset.css);
二、CSS基础选择器
1.标签选择器
结构：标签名 { CSS属性: 属性值 }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
- 标签选择器是选择一类标签，而不是某一个
- 标签选择器无论嵌套关系有多深，都能找到对应标签
2.类选择器
结构：.类名 { CSS属性: 属性值 }
作用：通过类名，找到页面中所有这类标签，设置样式
注意点：
- 所有标签都有class属性，class属性就被称之为类名
- 类名可以由数字、字母、下划线、中划线组成，不能以数字和中划线开头
number_1 对 1num ❌ _uuu （类样式库） 对 -YCS ❌ qy_11 对 - 一个标签可以拥有多个类名，类名之间需要用空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器
结构：#id属性值 { CSS属性: 属性值 }
作用：通过id属性值，找到页面中所有这个id属性值的标签，设置样式
注意点：
- 所有标签都有id属性
- id属性类似于身份正号码，在一个页面中是唯一的，不可重复使用
- 一个标签只能有一个id属性值
- 一个id选择器只能选中一个标签
4.通配符选择器（极少用）
结构：* { CSS属性: 属性值 }
作用：找到页面中所有标签，设置样式
注意点：
- 开发中使用极少，只会在极特殊的情况下使用
- 在一些案例中可能会使用用于去除标签中默认margin和padding
5.属性选择器
结构：[属性名（各种条件）] { CSS属性: 属性值 }
作用：通过属性名或者符合筛选条件的属性名，找到页面中所有这类标签，设置样式
种类
- [属性名] 包含什么属性名的标签
- [属性名=‘a’] 属性值等于a的标签
- [属性名^=‘a’] 属性值以a开头的标签
- [属性名*=‘a’] 属性值包含a的标签
- [属性名$=‘a’] 属性值以a结尾的标签
- [属性名~=‘a’] 属性值至少有一个匹配
css代码：
/* 会选中属性为name的标签 */
[name] {
background-color: burlywood;
}
/* 会选中div中 属性值=age的标签 */
div[class='age'] {
background-color: yellowgreen;
}
/* 选中属性值以a开头的标签 */
[class^='a'] {
font-size: 20px;
}
/* 属性值包含t的标签 */
[name*='t'] {
color: violet;
}
/* 属性值以s结尾的标签 */
[class$='s'] {
background-color: #096;
}
html代码：
<body>
<div class="age">age1</div>
<p class="ages">age2</p>
<div name="elements" class="elements">elements1</div>
<p name="switch">elements2</p>
</body>
三、CSS选择器进阶（复合选择器）
1.后代选择器
作用：根据HTML嵌套关系，选择父元素 后代中 满足条件的元素
选择器语法：选择器1 选择器2 { css }
结果：在选择器1找到所有符合选择器2的后代（儿子、孙子、重孙…）
注意点：
- 后代包括 儿子、孙子、重孙…
- 后代选择器 选择器与选择器之间用空格隔开
2.子代选择器
作用：根据HTML嵌套关系，会选择离它最近一级的子元素，子元素里面其他元素不会被选择
选择器语法：选择器1 > 选择器2 { css }
结果：在选择器1找到所有符合选择器2的后代（儿子）
注意点：
- 子代包括 儿子
- 子代选择器 选择器与选择器之间用 > 隔开
3.并集选择器
作用：同时选中多组标签，设置相同的样式
选择器语法：选择器1 , 选择器2 { css }
结果：选择器1 和 选择器2 选中标签，都改变样式
注意点：
- 并集选择器 选择器与选择器之间用 , 隔开
- 并集选择器可以基础选择器也可以复合选择器
- 并集选择器通常一行写一个，提高代码可读性
4.交集选择器
作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2 { css }
结果：标签，即选择器1选中，又能被选择器2选中标签，改变样式
注意点：
- 交集选择器 选择器与选择器之间紧挨着
- 交集选择器如果有标签的情况，标签选择器必须写在前面
5.伪类选择器
hover(使用标签较多)
兄弟之间的样式改变：.box:hover~.nav -->当鼠标移入box时改变兄弟元素nav的样式
作用：选中时候鼠标悬停在元素上的状态
选择器语法：选择器:hover { css }
注意点：
- 伪元素选择器只在特定状态下显示
6.a标签的伪类
- a: link: 没有被访问过的标签样式
- a: active： 鼠标点击时候的标签样式
- a: visited: 被访问过的标签样式
- a: hover： 鼠标悬停在元素上的状态
7.input标签的伪类
- :focus: 鼠标选中输入光标设置 input:focus {background-color: #333;} 定光标，改变背景样式
- ::placeholder: 伪类元素占位符内容更改
综上例子：
css代码：
<style>
.box1 .a {
background-color: palegreen;
}
.box2 > p {
color: brown;
}
.a,
.xx2 {
font-weight: 700;
}
p.x2 {
color: #096;
}
a:link {
color: pink;
}
a:active {
font-size: 20px;
color: tomato;
}
a:hover {
font-weight: 700;
color: antiquewhite;
}
a:visited {
color: steelblue;
}
input:focus {
background-color: #096;
}
input::placeholder {
color: pink;
}
</style>
html代码：
<body>
<div class="box1">
<div class="a">box1 a</div>
<p class="a">box1 p</p>
</div>
<div class="box2">
<div class="x2">box2 x2
<p class="x2">box2 x2 p</p>
</div>
<p class="xx2">xx2</p>
</div>
<a href="#">This is a</a><br><br>
TEXT<input type="text" placeholder="一个文本框">
</body>
效果：
四、字体和文本样式
1.字体样式
(1)字体大小 font-size
取值：数字 + px、 数字 + em、 数字 + rem
em：一个文字的大小，
rem：根据 根元素计算(没有父元素的元素 ，HTML元素是根元素)
注意点：
* 谷歌浏览器默认文字大小是16px
* 单位需要设置，否则无效
* 谷歌浏览器默认最小字体就12px
(2)字体粗细：font-weight
取值：数字 （100、200、300、400…900) 400正常,700加粗 大于400是加粗 小于400是变细
关键词： normal=400（正常） bold=700 / bolder=900（加粗） lighter=100 (变细)
注意点：
* 不是所有字体都提供了九种粗细，因此部分取值在页面中没变化
* 实际开发中以：正常、加粗两种取值使用最多
(3)字体样式：font-style
取值：normal（正常）italic(倾斜)
(4)字体类型：font-family
取值：文字名称
/* 从左到右依次查找能在本机显示的字体 都没有就显示默认字体*/
font-family: "MV Boli",喻兵行楷,宋体,微软雅黑, Arial;
字体没有特殊符号和空格，不加双引号或者单引号
渲染规则：
1. 从左到右按顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
1. 如果字体名中存在多个单词，用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体
(5) 自定义字体 @font-face
@font-face： 自定义字体(把字体文件存放在网站 目录中，用户系统不需要安装字体)【css3新增】
.ttf 的文本
/* 自定义字体 */
@font-face {
/* 自定义字体 名字 */
font-family: myfont1;
/* 添加要引入的字体样式 */
src: url(./font/1.ttf);
}
/* 运用自定义字体时，直接引用自定义名字 */
.box1 {
font-family: myfont1;
}
复合属性 front
font: style weight size family
省略要求：只能省略前两个，如果多省略了就相当于默认值
注意点：
要么就连写，要么就把单独写的内容放在下面
(6)文字颜色：color
取值：关键字（red、green、black）
十六进制：rgb( )、 rgba( ) -->三元色+透明度
2.文本样式
文本样式基本都是可以继承父元素的
1. 文本缩进：text-indent
取值：数字 + px、 数字 + em、 数字 + rem
/* 常用em让电脑计算缩进字符*/
text-indent: 2em;
2. 文本水平对齐方式： text-align
取值：left(左对齐)、right（右对齐）、center（居中）
注意点：
如果需要文本水平居中，text-align属性给文字所在标签（文本的父级标签）设置
3. 文本垂直对齐方式：vertical-align
一般用于图片元素与文本的混排
1.单位： px,em,rem,百分比 （正数往 上移，负数往 下移 ）
sub 下标元素,类似sub标签
super 上标元素，类似sup标签
2.属性值：
baseline 基线对齐(默认值)
top 顶线对齐
middle 中线对齐
bottom 底线对齐
text-top 与父元素文本顶部对齐
text-bottom 与父元素文本底部对齐
vertical-align: top(顶线) middle(中线) baseline(基线) bottom(底线);
4. 文本修饰： text-decoration
取值：underline(下划线)、line-through（删除线）、overline（上划线）、none（无装饰）
注意点：
开发中会使用 text-decoration: none; 清除a标签的默认下划线
5. 文字阴影： text-shadow
取值：1px 1px 1px red
1. 水平偏移量
2. 垂直偏移量
3. 模糊半径（阴影大小）
4. 阴影颜色
例子：火焰字，彩虹字，石头字
6. 文本走向： text-orientation
取值：upright(将英文改成纵向)、mixed（正常）
text-orientation: upright;
7. 文本行布局： writing-mode
取值：vertical-lr（将英文改成垂直显示，汉字不会有效果）
writing-mode: vertical-lr;
8. 文本换行：white-space
处理元素内容的空白
默认是到父元素边界按单词换行，如果 单词较长会超过父元素边界
取值：nowrap（不换行）
white-space:nowrap;
9. 单词换行：word-wrap
到容器边界设置换行方式
默认时单词没有空格不换行,甚至会超出指定宽度
属性值：
normal 默认值：到边界按单词截断换行
break-word ：可以截断单词，当单词到了边界就 从边界字母处换行 inherit ：继承父元素的white-space属性
word-wrap: break-word;
9.1 单词换行：word-break
处理文本到边界的换行方式
normal：默认值，到边界按单词截断换行
break-all： 到边界的字符开始截断
keep-all：不允许单词截断
inherit：继承父元素的word-break属性
10. 文字间距：letter-spacing
取值：数字+px、数字+em
letter-spacing: 5px;
letter-spacing: .5em;
11. 单词间距：word-spacing 和 字母转换 text-transform
word-spacing: 单词间距 单词间距,以空格区分单词，也就是空格的距离
text-transform: capitalize(首字母大写) uppercase(全转大写) lowercase(全转小写) none(默认);
/* 空格以10px分隔 */
word-spacing: 10px;
/* 将字母的首字符转成大写 */
text-transform: capitalize;
12. 行高：line-height
文字默认留上下半行间距，行高 = 2半行间距高度 + 文本高度
单位：px、em 、rem、百分比
行高连写 font：style weight size/line-hegiht family
13. 文字溢出： text-overflow
取值：clip（文字溢出剪切）、ellipsis（文字省略…）
注意点：
需要配合 white-space: nowrap； --文本不换行使用
还需搭配 overflow：hidden；
14. 文本排版方向：direction
需要设置unicode-bidi 为bidi-override;， direction样式才生效
rtl 从右往左排版
ltr 从左往右排版
.box {
direction: rtl;
unicode-bidi:bidi-override;
}
综上例子：
css代码：
<style>
.text {
width: 50px;
background-color: #096;
/* 文本在一行上显示 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
p {
font-size: 20px;
font-weight: 700;
/* 文字阴影 */
text-shadow: 2px 2px 3px palegreen;
/* 文字的间距 */
letter-spacing: 3px;
}
.span1 {
font-weight: 700;
/* 垂直显示 */
writing-mode: vertical-lr;
}
.span2 {
color: brown;
/* 垂直显示 汉字不会有效果*/
writing-mode: vertical-lr;
/* 将英文改成纵向 */
text-orientation: upright;
}
.word1 {
margin-bottom: 2px;
width: 60px;
background-color: #096;
}
.word2 {
width: 60px;
background-color: #096;
/* 到指定宽度直接换行 */
word-wrap: break-word;
}
.box {
width: 50px;
height: 100px;
background-color: palevioletred;
/* 行高 */
line-height: 100px;
}
</style>
HTML代码：
<body>
<div class="text">This is a text</div>
<p>This is a p</p>
<span class="span1">This is a span1标签</span>
<span class="span2">This is a span2标签</span>
<div class="word1">Thissssss isss a word</div>
<div class="word2">Thissssss isss a word</div>
<div class="box">111</div>
</body>
效果：
五、列表样式 list-style
列表样式控制，list-style写在ul是控制ul里面所 有的li标签，可以给单个li标签控制样式
ul li {
/* 设置ul列表的所有li标签的图标 */
list-style-type: circle;
/* 使用图片代替图标 */
list-style-image: url();
/* 图标在ul的位置(inside 在ul元素里面， outside在ul元素外面--默认) */
list-style-position: inside;
/* 简写 顺序是type,image,postion 没有的省 略 */
list-style:armenian url() inside;
}
六、背景
和img不同的是，background图片超出元素会自动裁剪，img超出元素会出现滚动条
1. 背景颜色：background-color
取值：rgb、rgba(a表示透明度)、十六进制、关键字、transparent（透明色）
注意点：
背景不影响盒子大小、并且能够看清盒子大小和位置、一般布局时候建议使用背景颜色
2. 背景图片：background-image
取值：url(路径)
注意点：
* 背景图片中url中可以省略引号
* 背景图片默认水平和垂直平铺
/* 背景图片 */
background-image: url(路径);
/* 引入多张图片,用 ， 分隔*/
background-image: url() , url(),url()
3. 背景平铺：background-repeat
取值：repeat(平铺)、no-repeat(不平铺)、repeat-x（水平平铺）、repeat-y（垂直平铺）
/* 三个取值 */
background-repeat: no-repeat(不重复) repeat-x(X轴重复) repeat-y(Y轴重复);
4. 背景图位置：background-position
取值：x（水平）、y（垂直） —> 数字 + px、50%、vw、vh
x除了数字之外：left（左）、center（居中）、right（右）
y除了数字之外：top（上）、center（居中）、bottom（下）
/* 图片位置坐标 正数表示右移和下移 负数表示左移和上移*/
/* background-position: X轴的值 Y轴的值; */
background-position: 40% -30px;
background-position: right bottom;
5. 背景图的定位基轴：background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位
/* 默认值 从padding位置开始计算放置图片 */
background-origin: padding-box;
/* 从边框开始计算放置图片 */
background-origin: border-box;
/* 从内容位置开始计算放置图片 */
background-origin: content-box;
6.背景图的裁剪：background-clip
/* 背景图片裁剪 */
/* 内边距以内的背景图可见 */
background-clip: padding-box;
/* 内容区域的背景图可见 */
background-clip: content-box;
7. 背景图尺寸：background-size
/* 1.给具体的像素： 宽 高*/
background-size: 200px 100px;
/* 2.给百分比：宽 高 (父元素必须有宽高，会破坏原图比例)*/
background-size: 100% 100%;
/* 3.给系统值：
cover：把背景图像扩展至足够大，以使背景图完全覆盖背景区域 (会保证图片的比例)
contain：把图像图像扩展至最大尺寸，让图片完全显示在元素中(会保证图片的比例)
*/
background-size: cover;
background-size: contain;
8. 背景复合：background
背景属性复合写法(没有顺序要求)，有的样式就写，没有的就省略
background: 颜色 地址 位置 平铺 滚动 ;
建议顺序:
background-color
background-image
background-postion/background-size[同时 有postion和size需要用/区分]
repeat
origin
clip
*背景颜色半透明：background: rgba(0，0，0，.3); (前三个参数为颜色值,最后一个为透明度)–0.3中0可省
/* 颜色 路径 X轴/大小 Y轴 不平铺 */
background: pink url() 5px/50px 15px no-repeat;
/* 引入多张背景图时用,分隔开： 路径 横坐标 纵坐标 不平铺*/
background: url() X Y no-repeat,
url() X Y no-repeat,
url() X Y no-repeat;
9. 实际应用
9. 1 全屏轮播图
全屏轮播图，一般宽度是1920px，当屏幕尺寸 在1920和网页设计宽度之间，网页就不能出现横 线滚动条，图片一般需要用背景图(背景图是自动 裁剪的)
9. 2 雪碧图
雪碧图: 如果网站有很多小图片，加载每个图 片都会发送一起图片请求，会影响网页加载速度。可以把所有的小图按一定的尺寸统一放在一 起，做成一张图片，一次请求就能把所有小图片加载完成。使用图片一般要用背景图定位
通过 background-position 去调整雪碧图的位置
七、元素显示模式
单位可以是 50px ，也可以基于父元素给百分比 50%，跟着浏览器窗口计算 50vw
1.块级元素（block）
块级元素的大小会基于父元素的大小去设置
显示特点：
- 独占一行（一行只能显示一个块级标签）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
代表标签：
div、p、pre、h1-h6、ul、li、dl、dt、dd、form、header…
注意：p,h1-h6等文字标签里不能放div标签
2.行内元素（inline）
行内元素大小都是自适应的
显示特点：
- 一行可以显示多个行内标签
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：
a、span、b、u、i、s、strong、ins、sub、sup、em、del、mark…
注意：链接里面不能再放链接，但是 a 标签里面能放块级元素，给 a 转换成块级元素最安全
3.行内块元素（inline-block）
显示特点：
- 一行可以显示多个
- 可以设置宽高
代表标签：
img、 input、textarea、button、select…
特殊情况：img标签有行内块元素的特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
- display: block; 转换成块级元素
- display: inline-block; 转换成行内块元素
- display: inline 转换成行内元素
HTML 嵌套规范
- 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…
但是：p标签中不要嵌套div、p、h等块级元素 - a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签 - 行内元素、行内块元素一般作为被嵌套内容
居中方法
-
水平居中 ：
文字： text-align: center
块级元素： margin: 0 auto; -
垂直居中 ：
文字 line-height: 父级高度；
八、CSS的三大特征
1.继承性
特性：子元素默认继承父元素样式的特点（子承父业）
可以继承的常见属性（文字控制属性都可以继承）
- color
- font
- text-algin、text-indent…
- line-height
…
注意点：
- 可以通过调试工具判断样式是否可以继承
- a标签颜色一般不继承
- h系列标签font-size会继承无效
继承应用
好处：在一定程度上减少代码
场景：
- ul设置list-style：none属性，从而去除列表每一个li中默认的圆点样式
- 直接可以给body设置统一文字
2.层叠性
特性：
- 给同一个标签设置不同样式 —> 此时样式会叠加 —> 会共同作用在一个标签上
- 给同一个标签设置相同样式 —> 此时样式会覆盖 —> 最终写在后面的样式会覆盖前面的样式
注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层级判断出结果
3.CSS优先级
特性：不同选择器具有不同优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级判断：
继承 < 通配符选择器（*） < 标签选择器 < 类(class)选择器 < id选择器 < 行内样式 < js（javascript） < !important
注意点：
- !important 写在属性值的后面，分号的前面。
- !important不能给继承添加，只要是继承优先级最低
- 实际开发中不建议使用!important
权重的叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方式，判断最终哪个选择器优先级最高
权重叠加：
行内样式个数 id选择器的个数 类选择器的个数 标签选择器的个数
优先级的权值相加
九、盒模型
盒子模型: html标签是可以嵌套的，可以把这种嵌套的标签看做是一个盒子，盒子里面可以装任何的内容(其他的元素)。可以把一个html标签 看做是一个盒子，盒子事件渲染的形状叫盒子模型。 网页本质上就是由不同的盒子拼凑出来的。
盒子模型 = 内容content + 内边距padding + 边框 border + 外边距margin 构成。
元素的真实尺寸 = content + padding + border
content内容的尺寸由width和height决定
块级元素：盒子模型的所有样式都有效
行内元素：不能设置content的尺寸,margin上下外边距无效，左右生效
1.内边距 padding
内容与盒子间的距离
padding：10px； - -四个边的距离一样
padding：10px 20px；- -上下 左右
padding：10px 20px 30px；- - 上 左右 下
padding：10px 20px 30px 40px ；- - 上 右 下 左
分开写法：padding-top/left/right/bottom：10px；
注意：会影响盒子实际大小，会撑大盒子 --需要计算去修改盒子大小
如果盒子本身没有指定 width/height 属性，此时 padding 会继承父元素的宽,不会撑开盒子大小 --如果写了宽度会撑开盒子实际宽度且高度就是padding上下值
解决方法：box-sizing: border-box（使padding的值在内部撑开）
2.外边距 margin
盒子与盒子之间的距离
margin：10px； - -四个边的距离一样
margin：0 auto；- -上下 左右 (auto是自适应)
margin：10px 20px 30px；- - 上 左右 下
margin：10px 20px 30px 40px ；- - 上 右 下 左
分开写法：margin-top/left/right/bottom：10px；
**注意几个特性：
1.上一个盒子的margin-bottom和下一个盒子的margin-bottom的距离会有重合（谁的值大采用谁的值）
2.行内元素的margin/padding上下值是失效的，左右正常显示
3.盒子嵌套塌陷问题：
如果父 子元素都有上外边距值,此时父元素会塌陷较大的外边距值，且子元素并不会有任何效果
解决方案:
1.可为父元素定义上边框 (border-top: 1px solid transparent;)
2.可为父元素定义内边距 (padding: 1px;)
3.可为父元素添加 overflow：hidden；（它不会改变盒子实际大小）
3.边框
3.1 内边框 border
盒子边框线
border-width：2px；- -边框粗细
border-style：solid(实线)/dashed(虚线)/dotted(点线);- - 边框样式
border-color：red；- - 边框颜色（默认黑色）
复合写法：border：1px solid red；- -粗细 样式 颜色
分开写法：borer-top/left/right/bottom：1px solid red；
3.2 table 的边框样式
另加：cellspacing=’0‘ 加在table上，
border-collapse: collapse; (表格的单元格合并) --合并相邻的边框，从2px变成1px
table {
width: 200px;
height: 100px;
border: 1px solid #ccc;
/* 允许边框重合的地方折叠 2px折叠成1px*/
border-collapse: collapse;
}
table td {
border: 1px solid #ccc;
}
3.3 外边框 outline（轮廓）
样式值和写法与border一致，但只能同时设置四周的样式，不能单独设置一边。用的较少，
outline: 10px solid green;
/* 偏移量:外边框离元素的距离 */
outline-offset: 10px;
4.box-sizing：border-box（重要）
计算盒子宽、高时候，不会让padding的内容把盒子撑开、border的外边框让盒子原样式变大
5.清除自带的默认样式
* {
margin：0；
padding：0；
}
h1,p,li...
{
margin：0；
padding：0；
}
6.文档流 / 标准流
1.从上到下布局
2.块级元素独占一行
3.行内元素或行内块元素，一行可多个布局
1.浮动 float
特性：
将块级元素一行显示，
会脱离文档流，会影响其它盒子的布局
解决办法：清除浮动
原因:
1. 在父盒子不方便给高度,但又因为子盒子浮动不占位置,父盒子高度会为0,会影响其他标准流盒子
2.清除浮动后,父盒子会根据浮动的子盒子自动检测高度，不会影响下面的标准流
3.如果父盒子有高度 则不需要清除浮动清除浮动方法：以下两种都可(clearfix加给父盒子)
/*父级添加 after伪元素 */
.clearfix:after {
/*内容*/
content: '';
/*元素属性变块级元素*/
display: block;
/*清除浮动*/
clear: both;
/*兼容处理 高度为0，可见属性隐藏*/
height: 0;
visibility: hidden;
}
/*兼容 IE6、7*/
.clearfix {
*zoom:1;
}
/* 父级添加 双伪元素*/
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}
float：left；- -左浮动（依次排序 123）
float：right；- -右浮动（反着排序321）
2.定位 position
元素定位 position，设置元素在文档流的位置关系。定位元素会脱离文档流(不影响其他元素)。标准文档流元素之间互相有影响。
1.静态定位：position：static；
2.相对定位：position：relative；
相对定位 以自己原来位置为参照进行边偏移，不会脱离文档流 会保留原有位置 会压住其他盒子
3.绝对定位：position：absolute；
绝对定位 会脱离文档流，不保留原有位置
绝对定位的定位是相对于有定位的父级元素（不包括static）移动。如果都没有定位，会参照浏览器定位。
.box1{
/* 添加relative相对定位，不给left和top不会影响元素位置
(这里添加relative目的是让子元素的决对定位是相对于当前元素)
如果用absolute 会让margin 失效。*/
position: relative;
margin: 0 auto;
width: 400px;
height: 400px;
background-color: #ccc;
}
.box1_1{
/* 绝对定位，相对于最近定位的上级元素位置变化 */
position: absolute;
top: 50px;
left: 50px;
}
4.固定定位：position：fixed；
固定定位 以浏览器可视窗口显示,不随滚动条移动而移动,会脱离文档流 不占有位置
注意：1.绝对定位和固定定位的层级相对较高
解决方法： z-index：1/10/100；
2.使用绝对定位和固定定位，需要设置宽高
5.粘性定位：position：sticky；
以浏览器可视窗口为参考点 会占有原先位置
(兼容性不太好) 必须添加 top，bottom，left，right 其中一个才能生效
top: 10px; --当元素被滚动条拉到离顶部10px开启粘性定位,继续拉滚动条也停留此位置
定位拓展：
拓展1：加了绝对定位的盒子不能通过 margin：0 auto；水平居中，但可通过小算法实线水平和垂直居中
水平 -->先让 left：50%；再margin-left：-盒子宽度的一半；
垂直 -->先让 top：50%；再margin-top：-盒子高度的一半；
/
拓展2：行内元素加了绝对定位或固定定位，可以直接设置宽高
块级元素加了绝对定位或固定定位，不给宽高 将会是内容大小
/
拓展3：浮动和绝对(固定)定位脱标的区别：
浮动只会压住下面标准流的盒子，但不会压住里面的文字和图片 --因为浮动有文字环绕效果
绝对(固定)定位会压住下面标准流盒子的文字和图片
3.层级问题
层级就是一种覆盖关系，在最上面的层级相对较高。
定位层级 > 浮动层级 > 普通元素层级
层级的更改： z-index：1/10/100；（无单位，且只有定位才能使用）
4.模块的隐藏和显示（隐藏并不是被删除了）
1.元素隐藏：
display：none；- -不占文档流
visibility：hidden； - - 占文档流
opacity：0；- -占文档流 透明度(0-1)
overflow：hidden；- -相对于文字的溢出隐藏
2.元素显示：
display：block；
visibility: visible;
opacity：1；
overflow：visible；
3.内容溢出：
overflow：hidden/visible/auto/scroll；
hidden:表示隐藏溢出部分
visible(默认):表示显示溢出部分
auto:溢出才显示滚动条不溢出不显示
scroll:内容溢出不溢出都显示滚动条
overflow-x: 控制水平方向的显示方案，属性值和overflow一样
overflow-x: hidden; 水平方向溢出隐藏
overflow-y: 控制垂直方向的显示方案，属性值和overflow一样
overflow-y: hidden; 垂直方向溢出隐藏
7. 调整textarea 尺寸
一般textarea不允许用户随意调整宽高，会影响网页布局
resize: none;
both 允许调整宽高 (默认)
none 不允许调整
horizontal 调整宽度
vertical 调整高度
resize: none;
十、CSS伪类
选择的内容需要在同一个父元素内部
1. :nth-child（）
种类
li:first-child 第一个li标签
li:last-child 最后个li标签
li:nth-child(5) 选中第5个li标签
li:nth-last-child(2) 倒数第二个元素
nth-child(n)计算公式：
奇数：2n+1、2n-1、odd
偶数：2n、even
几倍：5n
找到前三个：-n+3
2. :nth-of-type( ) —更推荐使用
用法和计算同上
li:nth-of-type(5n) 选中li的5的倍数的元素
nth-of-type 与 nth-child 区别:
nth-child 需要找到对应的父元素 从第一个标签开始算，即使包含其他标签
nth-of-type 会根据父元素中 需要找到的标签去排序，即使还包含其他标签
十一、CSS伪元素
利用css创建新标签 不需要HTML标签
1. 常用的几个伪元素
::after 在元素之后添加内容
::before 在元素之前添加内容
::first-line 选中div内的第一行文本 在块级元素中生效
::first-letter 选择文本的首字符 在块级元素中生效
.test::before {
content: '❤';
}
.test::after {
content: '🐅';
}
/* ::first-line选中div内的第一行文本 在块级元素中生效 */
div::first-line {
color: pink;
}
/* ::first-letter选择文本的首字符 在块级元素中生效 */
div::first-letter {
color: green;
}
素材源：
炫酷特效素材网：
站长之家 https://sc.chinaz.com/jiaoben/220307477630.html
懒人图库 https://www.lanrentuku.com/ued/wd/6409.html
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
