CSS
文章目录
- CSS
- 一、CSS基本选择器
- 二、font字体
- 五、CSS背景
- 六、元素显示模式及转换
- 八、CSS优先级
- 十、外边距合并与塌陷
- 十一、伪类和伪元素
- 十二、浮动
- 十二、清除浮动
- 十四、CSS进阶
- 十五、精灵图
一、CSS基本选择器
1.CSS的介绍
(1)CSS: 层叠样式表
2.CSS语法规则
<style>
/* Css注释 */
/* 选择器 {css属性} */
/* 选择器：查找标签 */
p {
color: red;
font-size = 20px;
background-color: green;
}
</style>
<body>
<p> 这是一段文字 </p>
</body>
3.CSS的引入方式
（1）内嵌式：CSS写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
(2)外链式：CSS写在一个单独的.css文件中
提示：需要通过link标签在网页中引入
(3) 行内式：
提示：建议配合js使用
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS写在style标签中 | 当前页面 | 小案例 |
| 外联式 | CSS写在单独的CSS文件中，通过link引入 | 多个页面 | 项目中 |
| 行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
4.标签选择器
（1）结构：标签名{css属性名：属性值}
(2)：通过标签名，找到页面中所有这类标签，设置样式
(3)注意点
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签
<style>
p {
color:red;
}
</style>
<body>
<p>
这是一段文字
</p>
</body>
5.类选择器
5.1结构：.类名{css属性名：属性值}
5.2作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
5.3注意点：
(1)所有标签上都有class属性，class属性的属性值称为类名
(2)类名可以有数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
(3)一个标签可以同时有多个类名，类名之间以空格隔开
(4)类名可以重复，一个类选择器可以同时选择多个标签
<style>
.red{
color:red;
}
.div{
width:20px;
height:30px;
background-color:red;
}
</style>
<body>
<p class="red">
Hello
</p>
<div class="div">
</div>
</body>
6.id选择器
6.1 结构：#id属性值{css属性名：属性值}
6.2作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
6.3注意点：
(1)所有标签上都有id属性
(2)id属性类似于身份证号码，在一个页面中是唯一的，不可重复的！
(3)一个标签删只能有一个id属性值
(4)一个id选择器只能选择一个标签
<style>
#red{
color:red;
}
#div{
width:20px;
height:30px;
background-color:red;
}
</style>
<body>
<p id="red">
Hello
</p>
<div id="div">
</div>
</body>
二、font字体
1.字号
1.1属性名：font-size
1.2取值：数字+px
1.3注意点：
（1）谷歌浏览器默认文字大小是16px
（2）单位需要设置，否则无效
<head>
<style>
p{
font-size:17px;
}
</style>
</head>
<body>
<p>
段落文字
</p>
</body>
2.字体粗细
2.1属性名：font-weight
2.2取值：
关键字：
| 正常 | normal |
|---|---|
| 加粗 | bold |
纯数字：100 -900的整百数：
| 正常 | 400 |
|---|---|
| 加粗 | 700 |
2.3注意点：
（1）不是所有字体都是提供了九种粗细，因此部分取值页面中午变化
（2）实际开发中以：正常、加粗两种取值使用最多。
3.字体样式
3.1属性名：font-style
3.2取值：
(1)正常（默认值）:normal
(2)倾斜：italic
4.字体系列
4.1属性名：font-family
4.2常见取值：具体字体1，具体字体2，…,字体系列
(1)具体字体：“微软雅黑”、“黑体”
(2)字体系列：sans-serif、serif、monospace
4.3渲染规则：
(1)从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
(2)如果都不支持，此时会根据系统操作，显示最后字体系列的默认字体
4.4注意点：
(1)如果字体名称中存在多个单词，推荐使用引号包裹
(2)最后一项字体系列不需要引号包裹
(3)网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
5.层叠性
如果给同一个标签设置了相同的属性，此时样式会层叠，写在最下面的会生效
6.font复合属性
6.1属性名：font(复合属性)
6.2取值：
font:style weight size family
<style>
p{ font: italic 700 77px 宋体}
</style>
<p>
文字
</p>
6.3省略要求：
只能省略前两个，如果省略了相当于设置了默认值
6.4注意点：
(1)要么把单独的样式写在连写的下面
(2)要么把单独的样式写在连写的里面
三、文本样式
1.文本缩进
1.1属性名：text-indent
1.2取值：
(1)数字 + px
(2)数字 + em（推荐：1em = 当前标签的font-size的大小）
2.文本水平对齐
2.1属性名：text-aligh
2.2取值：
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
2.3注意点：
如果需要让文本水平居中，text-aligh属性给文本所在标签(文本的父元素)设置
3.图片水平居中
3.1text-align:center 能让那些元素水平居中
(1)文本
(2)span标签、a标签
(3)input标签、img标签
3.2注意点：
如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置
<style>
body{
text-align:center;
}
</style>
<body>
<img src="ss">
</body>
4.文本修饰线
4.1属性名：text-decoration
4.2取值：
| 属性值 | 效果 |
|---|---|
| underline | 下划线(常用) |
| line-through | 删除线(不常用) |
| overline | 上划线(几乎不用) |
| none | 无修饰线(常用) |
4.3注意点：
开发中会使用text-decoration:none；清除a标签默认的下划线
5.行高
5.1作用：控制一行的上下行距
5.2属性名：line-height
5.3取值：
(1)数字 + px
(2)倍数 （当前标签font-size的倍数）
5.4应用：
(1)让单行文本垂直居中可以设置line-height：文字父元素高度
(2)网页精准布局时，会设置line-height：1可以取消上下间距
5.5行高与font连写的注意点：
(1)如果同时设置了行高和font连写,注意覆盖问题
(2)font: style weight seize / line-height family;
<head>
<style>
p{
line-height:50px
line - height: 1.5;
}
</style>
</head>
<body>
<p>
文字
</p>
</body>
5.6文字垂直居中
垂直居中技巧：设置行高属性值 = 自身高度属性值
<style>
div{
width:50px
height: 20px
line-height:20px
}
</style>
<div>
文字垂直居中
</div>
5.7标签水平居中
(1)如果需要让div、p、(大盒子)水平居中
可以通过margin: 0 auto;实现
(2)注意点:
(1)如果需要让div、p、h（大盒子）水平居中,直接给当前元素本身设置即可
(2)margin: 0 atuo 一般针对与固定宽度的盒子,如果大盒子没有设置宽度，此时会默认占满父元素的宽度
四、CSS复合选择器
1.后代选择器：空格
1.1作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
1.2 选择器语法：选择器1 选择器2 {css}
1.3结果：
(1)在选择器1所找到标签的后代(儿子、孙子、重孙子…)中，找到满足选择器2的标签，设置样式
1.4注意点：
(1)后代包括：儿子、孙子、重孙子…
(2)后代选择器中，选择器与选择器之前通过空格隔开
<style>
div p {
color:red;
}
</style>
<p>
p标签
</p>
<div>
<p>
这是div的儿子
</p>
</div>
2.子代选择器：>
2.1作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
2.2选择器语法：选择器1 > 选择器2 {css}
2.3结果：
在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签,设置样式
2.4注意点：
(1)子代只包括儿子
(2)子代选择器中，选择器与选择器之间通过 > 隔开
<style>
div > p {
color:red;
}
</style>
<p>
p标签
</p>
<div>
<p>
这是div的儿子
</p>
</div>
3.并集选择器：,
3.1作用：同时选择多组标签，设置相同的样式
3.2选择器语法：选择器1 , 选择器2{css}
3.3结果：
找到选择1和选择器2选择的标签，设置样式
3.4注意点：
(1)并集选择器中的每组选择器之间通过，分隔
(2)并集选择器中的每组选择器可以是基础选择器或者复合选择器
(3)并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<head>
<style>
p,div,span{
color:red;
}
</style>
</head>
<body>
<p>
</p>
<div>
</div>
<span></span>
</body>
4.交集选择器：紧挨着
4.1作用：选择网页中同时满足多个选择器的标签
4.2选择器语法：选择器1选择器2{css}
4.3结果：
(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
4.4注意点：
(1)交集选择器中的选择器之间是紧挨着的，没有东西分隔
(2)交集选择器中如果有标签选择器，标签选择器必须写在最前面
<head>
<style>
p.txt{
color:red;
}
</style>
</head>
<body>
<p>
</p>
<p class = "txt">
</p>
<div>
</div>
<span></span>
</body>
5.hover伪类选择器
5.1作用：选择鼠标悬停在元素上的状态，设置样式
5.2 选择器语法：选择器:hover{css}
5.3注意点：
伪类选择器选中的元素的某种转态
<style>
a{
color:red;
}
a:hover{
colro:green;
}
</style>
<body>
<a>百度一下</a>
</body>
6.Emment语法
6.1作用：通过简写语法，快速生成代码
6.2 语法：
| 记忆 | 实例 | 效果 |
|---|---|---|
| 标签名 | div | |
| 类选择器 | .red | |
| id选择器 | #one | |
| 交集选择器 | p.red#one | |
| 子代选择器 | ul>li |
|
| 内部文本 | ul>li(我是li的内容) |
|
| 创建多个 | ul>li*3 |
|
五、CSS背景
1.背景颜色
1.1属性名：background-color(bgc)
1.2属性值：
颜色取值：关键字、rgb表示法、raba表示法、十六进制
1.3注意点：
(1)背景颜色默认值是透明：raba(0,0,0,0)、transparent
(2)背景颜色不会影响盒子大小，而且还能看清盒子的大小位子，一般在布局中会习惯先给盒子设置背景颜色
<style>
div {
width:300px;
height:200px
background-color:rgba(0,0,0,.5);
}
</style>
2.背景图片
2.1属性名：background-image(bgi)
2.2属性值：background-image: url(“图片路径”)
2.3注意点：
(1)背景图片中url中可以省略引号
(2)背景图片默认是在水平和垂直方向平铺的
(3)背景图片仅仅是指给盒子起的装饰效果，类似于背景颜色，是不能撑开盒子的
<style>
div{
width:200px;
height:100px;
background-image:url(./img/1.jpj);
}
</style>
3.背景平铺
3.1属性名：background-repeat(bgr)
3.2属性值：
| 取值 | 效果 |
|---|---|
| repeat | (默认值)水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向(x轴)平铺 |
| repeat-y | 沿着垂直方向(y轴)平铺 |
<style>
div{
width:200px;
height:100px;
background-image:url(./img/1.jpj);
background-repeat: no-repeat;
}
</style>
4.背景位置
4.1属性名：background-position(bgp)
4.2属性值：background-position:水平方向位置 垂直方向位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wnck9bQN-1659429805099)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220528105412238.png)]
4.3注意点：
方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
<style>
div{
width:200px;
height:100px;
background-image:url(./img/1.jpj);
background-repeat: no-repeat;
background-position: -20px -10px;
background-position: center;
}
</style>
5.背景属性连写
5.1属性名：background(bg)
5.2属性值：
单个属性值的合写，取值之间以空格隔开
5.3书写顺序：
推荐：background：color image repeate position
5.4省略问题：
(1)可以按照需求省略
(2)特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url()
5.5：注意点：
如果需要设置单独的样式和连写
(1)要么把单独的样式写在连写的下面
(2)要么把单独的样式写在连写的里面
<style>
div{
width:200px;
height:100px;
/* 不区分先后顺序 */
background: red ulr(./img/1.jpg) no-repeat center;
}
</style>
6.背景图和img的区别
6.1 需求：需要在网页中展示一张图片的效果？
(1)方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
(2)方法二：div标签+背景图片
需要设置div宽高,因为背景图片只是装饰的css样式，不能撑开div标签
六、元素显示模式及转换
1.块级元素
1.1显示特点：
(1)独占一行(一行只能显示一个)
(2)宽度默认是父元素的宽度，高度默认由内容撑开
(3)可以设置宽高
1.2代表标签：
div、p、h系列、ul、li、dl、dt、form、header、nav、footer
2.行内元素
2.1显示特点：
(1)一行可以显示多个
(2)宽度和高度默认由内容撑开
(3)不可以设置宽高
2.2代表标签：
a、sapn、b、u、i、s、strong、ins、em、del
3.行内块元素
3.1显示特点：
(1)一行可以显示多个
(2)可以设置宽高
3.2代表标签：
input、textarea、button、select
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
4.元素模式转换
4.1目的：改变元素默认的显示特点，让元素符合布局要求
4.2语法：
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display:block | 转换成块级元素 | 较多 |
| display:inline-block | 转换成行内块元素 | 较多 |
| display:inline | 转换成行内元素 | 较少 |
5.HTML嵌套规范注意点
（1）块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…
但是：p标签中不要嵌套div、p、h等块级元素
（2）a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
七、三大特性
1.继承性
1.1特性：子元素有默认继承父元素样式的特点(子承父业)
1.2 可以继承的常见属性(文字控制属性都可以继承)
(1) color
(2)font-style、font-weight、font-size、font、family
(3)text-indent、text-align
(4)line-height
1.3注意点:
可以通过调式工具判断样式是否可以继承
<style>
div{
color:red;
font-szie:17px;
}
</style>
<body>
<div>
<span></span>
</div>
</body>
1.4如果元素有浏览器默认样式，此时继承性依存在
（1）a标签的color会继承失效
（2）h系列标签的font-size会继承失效
2.层叠性
2.1特性：
(1)给同一个标签设置不同的样式 > 此时样式会层叠叠加 > 会共同作用在标签上
(2)给同一个标签设置相同的样式 > 此时样式会层叠覆盖 > 最终写在最后的样式会生效
2.2注意点：
当样式冲突时，只有当选择器优先级相同是，才能通过层叠性判断结果
<style>
div{
color:red;
color:green;
}
</style>
八、CSS优先级
1.优先级
1.1特性：不同选择器具有不同的优先级,优先级搞的选择器样式会覆盖优先级低选择器样式
1.2优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < Id选择器 < 行内样式 < !important
1.3注意点：
(1)!important写在属性值的后面，分号的前面！
(2)!important不能提示继承的优先级，只要是继承优先级最低！
(3)实际开发中不建议使用!important
2.权重叠加计算
2.1 使用场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终那个选择器优先级最高会生效
2.2 权重叠加计算公式：(每一级之间不存在进位)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8kSCTfs1-1659429805102)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220528134335782.png)]
2.3比较规则：
(1)先比较第一级数字，如果比较出来了，之后的统统不看
(2) 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
(3)…
(4)如果最终所有数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算！)
2.4注意点：
!important如果不是继承，则权重最高，天下第一！
九、盒子模型
1.内容的宽度和高度
1.1作用：利用width和height属性默认设置是盒子内容区域的大小
1.2属性：width/height
1.3常见取值：数字 + px
2.边框(border) - 连写形式
2.1属性名：border
2.2属性值：单个取值的连写，取值之间以空格隔开
如：border: 1px solid red;
2.3快捷键 :bd + tab
3.边框(border) - 单方向设置
3.1使用场景：只给盒子的某个方向单独设置边框
3.2属性名：border - 方位名词
3.3属性值：连写的取值
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid、虚线dashed、点线dotted |
| 边框颜色 | border-color | 颜色取值 |
3.4 自动内减
(1)需求：盒子尺寸300*300,背景粉色，边框10px实线黑色,上下左右20px的内边距,如何完成?
答：给盒子设置border或padding时，盒子会被撑大,如果不想盒子被撑大?
解决方法1：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
解决方法2：自动内减
操作：给盒子设置属性box-sizing: border-box;即可
优点：浏览器会自动计算多余大小，自动在内容中减去
<style>
div{
width:300px;
height:300px;
background-color:pink;
border:10px solid blank;
padding: 20px;
box-sizing:border-box; /* 自动内减 */
}
</style>
3.5清除默认样式
*{
padding: 0px;
margin: 0px;
}
3.6 版心居中（网页的有效内容）
div{
width: 1000px;
height: 300px;
background-color:red;
margin: 0 auto;
}
十、外边距合并与塌陷
1.外边距合并现象
1.1场景：垂直布局的块级元素，上下的margin会合并
1.2结果：最终两者距离为margin的最大值
1.3解决方法：避免就好
只给其中一个盒子设置margin即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AtwRNWKq-1659429805103)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220528174036783.png)]
解决代码
<head>
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
.one{
/* margin-bottom:50px; */
margin-bottom:100px;
}
.two{
/* margin-top:50px; */
}
</style>
</head>
<body>
<div class="one">
</div>
<div class="two">
</div>
</body>
2.外边距塌陷现象
2.1场景：互相嵌套的块级元素，子元素的margin-top会作用到父元素上
2.2结果：导致父元素一起往下移动
2.3解决办法
（1）给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
（2）给父元素设置overflow:hidden
（3）转换成行内块元素
（4）设置浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SmEPjy2l-1659429805104)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220528173042246.png)]
解决代码
<head>
<style>
.father{
width:300px;
height: 300px;
background-color:pink;
/* 给父元素设置border-top或者padding-top*/
/* 1 */
padding-top 50px;
/* 2 */
border:1px solid #000;
/* 给父元素设置overflow:hidden */
overflow:hidden;
}
.father .son{
width:100px;
height:100px;
background-color: skyblue;
margin-top: 50px;
/*转换成行内块元素*/
display:inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class = "son">
</div>
</div>
</body>
3.行内元素margin或padding改变垂直位置
(1)行内标签的margin-top和bottom不生效
(2)行内标签的padding-top或bottom不生效
解决办法：
给行内标签设置行高(line-height)
<head>
<style>
span{
line-height:100px;
}
</style>
</head>
<body>
<span></span>
</body>
十一、伪类和伪元素
1.作用于优势：
1.1 作用：根据元素在HTML中的结构关系查找元素
1.2 优势：减少对于HTML中类的依赖,有利于保持代码整洁
1.3 使用场景：常用于查找父级选择器中的子元素
| 选择器 | 说明 |
|---|---|
| E:first-child{} | 匹配父元素中第一个子元素，而且是E元素 |
| E:last-child{} | 匹配父元素中最后一个字元素，而且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n个子元素,而且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素,并且是E元素 |
<head>
<style>
/*选中第一个*/
li:first-child{
background-color:red;
}
/*选中最后一个*/
li:last-child{
background-color:pink;
}
/*选中任意一个*/
li:nth-child{
background-color:blue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
2.公式
2.1 n为：0、1、2、3、4、5、6、…
2.2 通过n可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | -n+5 |
| 找到后五个往后 | n+5 |
2.3结构伪类选择器易错点
<head>
<style>
/*第一个li里面的a */
li:first-child a{
color:red;
}
/*找到第一个li里面的第三个a */
li:first-child a:nth-child(3){
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a></a>
<a></a>
</li>
<li><a></a></li>
</ul>
</body>
3.伪元素
一般页面中的非主体内容可以使用伪元素
3.1 区别：
(1) 元素：HTML设置的标签
(2) 伪元素：由CSS模拟出的标签效果
| 伪元素 | 作用 |
|---|---|
| ：：before | 在父元素内容的最前面添加一个伪元素 |
| ：：after | 在父元素内容的最后面添加一个伪元素 |
3.2注意点：
(1) 必须设置content属性才能生效
(2)伪元素默认是行内元素
<head>
<style>
.father{
width: 300px;
height: 300px;
background-color:red;
}
.father::before{
content:'老鼠';
}
.father::after{
content:'大米';
}
</style>
</head>
<body>
<!--伪元素 通过CSS创建标签，装饰不重要的小图-->
<!--找父级，在这个父级里面创建子级标签-->
<div class="father">爱</div>
<!--老鼠爱大米-->
</body>
十二、浮动
1.标准流
（1）又称文档流，是浏览器在渲染显示网页内容是默认采用的一套排版规则，规定了应该以何种方式排列元素
（2）常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
2.浮动的代码
<head>
<style>
div{
width:100px;
height:100px;
background-color:red;
}
div .one{
float:left;
}
div .two{
float:right;
}
</style>
</head>
<body>
<div>
<div class="one">
</div>
<div class="two">
</div>
</div>
</body>
3.浮动的特点
（1）浮动元素会脱离标准流(简称：脱标)，在标准流中不占有位置
相当于从地面飘到空中
（2）浮动元素比标准流搞半个级别，可以覆盖标准流中的元素
（3）浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
（4）浮动元素有特殊的先效果
*** 一行可以显示多个**
*** 可以设置宽高**
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto居中
4.CSS属性顺序
(1) 浮动 / display
(2) 盒子模型：margin border padding 宽度高度背景色
(3)文字样式
十二、清除浮动
1.场景搭建
1.1含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
1.2原因：
子元素浮动后脱标 > 不占位置
1.3目的;
需要父元素有高度，从而不影响其他网页元素的布局
1.4清除浮动方法
（1）直接设置父元素高度
(2)特点：
优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度，如：新闻列表、京东推荐模块
<head>
<style>
.top{
margin: 0 auto;
width: 1000px;
/*父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响*/
height:300px;
background-color:pink;
}
.top .left{
float:left;
width:200px;
height:300px;
background-color:#ccc;
}
.top .right{
float:right;
width:790px;
height:300px;
background-color:skyblue;
}
.buttom{
height:100px;
background-color:green;
}
</style>
</head>
<body>
<div class="top">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="bottom">
</div>
</body>
（2）额外标签法
操作：
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置 clear:both
特点：
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
<head>
<style>
.top{
margin: 0 auto;
width: 1000px;
background-color:pink;
}
.top .left{
float:left;
width:200px;
height:300px;
background-color:#ccc;
}
.top .right{
float:right;
width:790px;
height:300px;
background-color:skyblue;
}
.buttom{
height:100px;
background-color:green;
}
.top .clearfix{
/*清除左右两侧浮动的影响*/
clear:both;
}
</style>
</head>
<body>
<div class="top">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearfix">
</div>
</div>
<div class="bottom">
</div>
</body>
（3）单伪元素清除法
操作：用伪元素代替了额外标签1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqJuLbwt-1659429805104)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220529012222288.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ofz26Au9-1659429805105)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220529012240672.png)]
特点：
优点：项目中使用，直接给标签加类即可清除浮动
<head>
<style>
.top{
margin: 0 auto;
width: 1000px;
background-color:pink;
}
.top .left{
float:left;
width:200px;
height:300px;
background-color:#ccc;
}
.top .right{
float:right;
width:790px;
height:300px;
background-color:skyblue;
}
.buttom{
height:100px;
background-color:green;
}
/*单伪元素清除浮动*/
.clearfix::after{
content: '';
display:block;
clear:both;
/*为了兼容性*/
height:0px;
visibility:hidden;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="bottom">
</div>
</body>
(4)双伪元素清除法
操作：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fX3DGrYa-1659429805106)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220529013408023.png)]
特点：
优点：项目中使用，直接给标签加类即可清除浮动
<head>
<style>
.top{
margin: 0 auto;
width: 1000px;
background-color:pink;
}
.top .left{
float:left;
width:200px;
height:300px;
background-color:#ccc;
}
.top .right{
float:right;
width:790px;
height:300px;
background-color:skyblue;
}
.buttom{
height:100px;
background-color:green;
}
/*.clearfix::before 作用:解决外边距塌陷问题
外边距塌陷：父子标签，都是块级，子级加margin会影响父的位置*/
/*清除浮动*/
.clearfix::before,
.clearfix::after{
content:'';
dispaly:block;
}
}
/*真正清除浮动标签*/
.clearfix::after{
clear:both;
}
</style>
</head>
<body>
<div class="top clearfix">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="bottom">
</div>
</body>
(5) 给父元素设置overflow:hidden
操作：
直接给父元素设置overflow:hidden
特点：
优点：方便
十三、CSS定位
1网页常见布局方式
(1)标准流
块级元素独占一行 > 垂直布局
行内元素/行内元素一行显示多个 > 水平布局
(2)浮动
可以让原本垂直布局的块级元素变成水平布局
(3)定位
可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况
2.定位的使用方式
2.1设置定位方式
属性名：position
常见属性值：
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
2.2设置偏移值
(1)偏移值设置分为两个方向,水平和垂直方向各轩一个使用即可
(2)选取的原则一般是就进原则(离那边进用哪个)
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | botton | 数字+px | 距离下边的距离 |
3.静态定位
3.1介绍：静态定位是默认值，就是之前认识的标准流
3.2代码：position:static;
3.3注意点：
(1)静态定位就是之前的标准流，不能通过方位属性进行移动
(2)之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定；
4.相对定位
4.1 介绍：自恋型定位，相对于自己之前的位子进行移动
4.2 代码：position：relative;
4.3 特点：
(1)需要配合定位属性实现移动
(2)相对于自己原来位置进行移动
(3) 在页面中占位置 > 没有脱标
4.4 应用场景：
(1) 配合绝对定位组CP (子绝父相)
(2) 用于小范围的移动
5.绝对定位
5.1介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
5.2 代码：position：absolute;
5.3 特点：
(1) 需要配合方位属性实现移动
(2) 默认相对于浏览器可视区域进行移动
(3) 在页面中不占位置 > 已经脱标
5.4 应用场景：
(1) 配合绝对定位组cp(子绝父相)
6.子绝父相
<head>
<style>
.father{
position:relative;
width:300px;
height:300px;
background-color:red;
}
.father .son{
position:absolute;
width:150px;
height:150px;
background-color:pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
</body>
<head>
<style>
.banner{
position: relative;
margin: 0 auto;
width:1226px;
height: 600px;
}
.mask {
position: absolute;
left:0;
bottom:0;
/*绝对定位的盒子显示模式具备行内块元素特点：加宽度高度生效,如果没有宽度也没有内容，盒子的宽度尺寸就是0 */
width:100%;
height:150px;
background-color: raba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="banner">
<img src = "./img/bg.jpg">
<!--遮罩-->
<div class="mask">
</div>
</div>
</body>
5.固定定位
5.1介绍：死心眼定位，相对浏览器进行定位已移动
5.2 代码 ：positon : fixed;
5.3 特点：
(1)需要配合方位属性实现移动
(2) 相对浏览器可视区域进行移动
(3) 在页面中不占有位置 > 已经脱标
5.4 应用场景 :
让盒子固定在屏幕中的某个位置
<head>
<style>
.box{
position : fixed;
left:0;
top:0;
width:100%;
height:50px;
background-color:pink;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
6.显示层级
6.1 不同布局方式元素的层级关系：
标准流 < 浮动 < 定位
6.2 不同定位之间的层级关系
(1)相对、绝对、固定默认层级相同
(2)此时HTML中写在下面的元素层级更高，会覆盖上面的元素
<head>
<style>
.one{
position : absolute;
left : 20px;
top : 50px;
background-color:red;
z-index:1;
/*默认情况下，定位盒子 后来者居上,
z-index: 整数; 取值越大，显示顺序越靠上，z-index的默认值是0*/
}
.two {
position : absolute;
left : 50px;
top : 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="one">
</div>
<div clas = "two">
</div>
</body>
十四、CSS进阶
1.垂直对齐方式
1.1认识基线
基线：浏览器文字类型元素排版中纯在用于对齐的基线(baseline)
<head>
<style>
.father{
width:600px;
height:600px;
background-color:pink;
line-height:600px;
}
img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<img src = "../img/1.jpg" >
</div>
</body>
2.光标类型
2.1 使用场景：设置鼠标光标在元素上时显示的样式
2.2 属性名 ：cursor
2. 3 常见的属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
<head>
<style>
div{
width:200px;
height:200px;
background-color: pink;
/*手型*/
cursor:pointer;
/*工字型，表示可以复制*/
cursor:text;
/*十字型,表示可以移动*/
cursor:move;
}
</style>
</head>
<body>
<div>
</div>
</body>
3.圆角边框
3.1 使用场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
3.2 属性名：border-radius
3.3 常见取值： 数字 + px 、 百分比
3.5 原理：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PD7JIT21-1659429805107)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220530150832964.png)]
3.6 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
<head>
<style>
div{
width:200px;
height:200px;
background-color: pink;
/*一个值：表示4个角是相同的*/
border-radius:10px;
/*4值:左上、右上、右下、左下--从左上顺时针转一遍*/
border-radius:10px 20px 40px 80px
}
</style>
</head>
<body>
<div>
</div>
</body>
4.边框圆角的常见应用
4.1 画一个圆
(1)盒子必须是正方形
(2)设置边框圆角为盒子宽高的一半 > border- radius : 50%
4.2 胶囊按钮：
<head>
<style>
div{
width:200px;
height:200px;
background-color: pink;
/*画一个圆*/
border-radius:50%;
}
</style>
</head>
<body>
<div>
</div>
</body>
<head>
<style>
div{
width:400px;
height:200px;
background-color: pink;
/*胶囊状：长方形，border-radius取值是高度的一半*/
/*画一个胶囊*/
border-radius: 100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
5.溢出显示效果
5.1 溢出部分：值的是盒子内容部分所超出盒子范围区域
5.2 使用场景：控制内容溢出部分显示效果，如：显示、隐藏、滚动条…
5.3 属性名：overflow
5.4 常见属性值
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
<head>
<style>
div{
width:400px;
height:200px;
background-color: pink;
/*溢出隐藏*/
overflow:hidden;
/*滚动：无论内容是否超出都显示滚动条的位置*/
overflow : scroll;
/*auto: 根据内容是否超出，判断是否显示滚动条*/
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
我是div，测试溢出显示效果
</div>
</body>
6.显示隐藏
6.1 使用场景：让某元素本身在屏幕中不可见(如：鼠标hover之后元素隐藏)
6.2 常见属性：
(1) visibility：hidden
(2) display：none
6.3 区别
(1) visibility:hidden; 占位隐藏
(2) display : none 不占位隐藏
7.元素整体透明度
7.1 使用场景：让元素整体(包括内容) 一起变透明
7.2 属性名：opacity
7.3 属性值：0 ~ 1 之间的数字
1 : 表示完全不透明
0：表示完全透明
7.4 注意点：
opacity会让元素整体透明，包括里面的内容，如：文字、子元素
div{
width:400px;
height:400px;
background-color:red;
opacity:0.5;
}
8.边框合并
(1)使用场景：让相邻表格边框进行合并，得到细线边框效果
(2) 代码：border-collapse: collapse;
table{
border: 1px solid #0000;
/*注意：一定要加给table标签*/
border-collapse:collapse;
}
9.三角形
-
书写一个盒子
-
盒子添加四个方向的border，颜色设置不同
-
保留其中一个方向的border，其他方向颜色是transparent
div{ width:0; height:0; /*transparent 透明*/ border-top:10px solid transparent; border-right:10px solid transparent; border-left:10px solid pink; border-bottom:10px solid transparent; }
9.焦点伪类选择器
9.1使用场景：用于选中元素获取焦点时状态,常用于表单控件
9.2 选择器语法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MVUq0vM3-1659429805107)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220530161945802.png)]
9.3 效果：
表单控件获取焦点时默认会显示外部轮廓线
10.属性选择器
10.1 使用场景：通过元素上的HTML属性来选择元素,常用于选择input标签
10.2选择器语法：
| 选择器 | 功能 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr=“val”] | 选择具有attr属性并且属性值等于val的E元素 |
<head>
<style>
input[type="text"]{
background-color:pink;
}
input[type="password"]{
background-color:red;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
十五、精灵图
1. CSS经理作用
1.1 使用场景：项目中将多个小图片，合并成一张大图片,这张大图片称之为精灵图
1.2 优点：
减少服务器发送的次数，减轻服务器的压力，提高页面加载速度
2.精灵图的使用步骤
1.创建一个盒子，设置盒子的尺寸和小图片尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图片位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position : x y
span{
display: inline-block;
width:18px;
height:24px;
background-color:pink;
background-image: url(./img/taobao.jpg);
/*背景图位置属性：改变背景图的位置*/
/*水平方向位置 垂直方向的位置*/
background-position: -3px 0;
}
4.背景图的缩放
(1) 作用： 设置背景图片的大小
(2) 语法：background-size：宽度 高度；
(3) 取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
5. background复合写法
5.1 完整连写： background : color image repeate position size;
5.2 注意点 ：
background-size和background连写同时设置时，需要注意覆盖问题
5.3 解决：
(1) 要么单独的样式写连写的下面
(2)要么单的的样式写连写的里面
6.盒子阴影
6.1 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
6.2 属性名： box - shadow
6.3 取值：
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，垂直偏移量。允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
7.过度(重点)
7.1 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
7.2 属性名：transition
7.3 常见取值：
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all : 所有能过渡的属性都过渡 |
| 过渡的时长 | 数字 + s (秒) |
7.4 注意点：
（1）过渡需要：默认状态和hover状态样式不同，才能有过渡效果
(2) transiton属性给需要过渡的元素本身加
(3) transition属性设置在不同状态中，效果不同的
1.给默认状态设置，鼠标移入移出都有过渡效果
2.给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
.box{
width:200px;
height:200px;
background-color:pink;
/*过渡变化*/
transition: all 1s;
}
.box:hover{
width:400px;
background-color:red;
}
1. CSS经理作用
1.1 使用场景：项目中将多个小图片，合并成一张大图片,这张大图片称之为精灵图
1.2 优点：
减少服务器发送的次数，减轻服务器的压力，提高页面加载速度
2.精灵图的使用步骤
1.创建一个盒子，设置盒子的尺寸和小图片尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图片位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position : x y
span{
display: inline-block;
width:18px;
height:24px;
background-color:pink;
background-image: url(./img/taobao.jpg);
/*背景图位置属性：改变背景图的位置*/
/*水平方向位置 垂直方向的位置*/
background-position: -3px 0;
}
4.背景图的缩放
(1) 作用： 设置背景图片的大小
(2) 语法：background-size：宽度 高度；
(3) 取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
5. background复合写法
5.1 完整连写： background : color image repeate position size;
5.2 注意点 ：
background-size和background连写同时设置时，需要注意覆盖问题
5.3 解决：
(1) 要么单独的样式写连写的下面
(2)要么单的的样式写连写的里面
6.盒子阴影
6.1 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
6.2 属性名： box - shadow
6.3 取值：
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，垂直偏移量。允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
7.过度(重点)
7.1 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
7.2 属性名：transition
7.3 常见取值：
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all : 所有能过渡的属性都过渡 |
| 过渡的时长 | 数字 + s (秒) |
7.4 注意点：
（1）过渡需要：默认状态和hover状态样式不同，才能有过渡效果
(2) transiton属性给需要过渡的元素本身加
(3) transition属性设置在不同状态中，效果不同的
1.给默认状态设置，鼠标移入移出都有过渡效果
2.给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
.box{
width:200px;
height:200px;
background-color:pink;
/*过渡变化*/
transition: all 1s;
}
.box:hover{
width:400px;
background-color:red;
}
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
