2022、7、15
css（层叠样式表）
基础认知
CSS：css写在style标签中，style标签一般写在head标签里面，title标签下面
书写方式
选择器 {
属性名：属性值；
}
| css常见属性 | 作用 |
|---|---|
| color | 文字颜色 |
| font-size | 字体大小 |
| background-color | 背景颜色 |
| width | 宽度 |
| height | 高度 |
<head>
<meta charset="UTF-8" />
<title>0715 css属性</title>
<style type="text/css">
p {
color:red;
font-size: 30px;
background-color: skyblue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
引入方式
内嵌式：CSS写在style标签中，作用于当前页面 提示:：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
<!-- 内嵌式 -->
<style type="text/css">
p {
color:red;
font-size: 30px;
background-color: skyblue;
width: 300px;
height: 300px;
}
</style>外联式：CSS写在一个单独的.css文件中，作用于多个页面
提示：需要通过link标签在网页中引入
<!-- 0715属性.html -->
<!-- 外联式 -->
<link rel="stylesheet" type="text/css" href="0715引入.css">//0715引入.css
div {
color:red;
font-size: 30px;
background-color: skyblue;
width: 300px;
height: 300px;
}行内式：CSS 写在标签的style属性中，作用于当前标签
提示：基础班不推荐使用，之后会配合js使用
<!-- 行内式 -->
<p style="color:green;font-size: 50px;">我是一个标签</p>选择器
标签选择器
结构：标签名{ css属性名:属性值;}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意： 1、标签选择器选择的是一类标签，而不是单独某一个
2、标签选择器无论嵌套关系有多深，都能找到对应的标签
p {
color:red;
}类选择器
结构：.类名{ css属性名:属性值;}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意： 1、所有标签上都有class属性，class属性的属性值称为类名（类似于名字)
2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3、一个标签可以同时有多个类名，类名之间以空格隔开
4、类名可以重复，一个类选择器可以同时选中多个标签
<!-- 类选择器 -->
<p class="one big">小白</p>
<p class="two">小红</p>
<p class="two">我也是小红</p>
<p class="three">小蓝</p>.one {
color:white;
}
.two {
color:red;
}
.three {
color:blue;
}
.big {
font-size:50px;
}id选择器
结构: #id属性值{ css属性名:属性值;}
作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点:
1、所有标签上都有id属性
2、id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
3、一个标签上只能写一个id属性值
<!-- id选择器 -->
<p id="red"></p>
<p id="green"></p>/* id选择器 */
#red {
color:red;
}
#green{
color:green;
}通配符选择器
结构： *{ css属性名:属性值;}
作用：找到页面中所有的标签，设置样式
注意点：
1、开发中使用极少，只会在极特殊情况下才会用到
2、在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解)
* {
color:skyblue;
}后代选择器（中间是空格）
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{ css }
结果： 在选择器1所找到标签的后代(儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式
注意点：
1、后代包括:儿子、孙子、重孙子...... 2、后代选择器中，选择器与选择器之前通过空格隔开
<!-- 后代选择器 --> <!-- 需求：只让"长城"变红（不改变html结构） --> <div class="father"> <p>长城</p> <div> <p>瞭望台</p> </div> </div> <p>长征</p>
/* 后代包括:儿子、孙子、重孙子...... */
/* div p 或者 .father p 都可以 */
.father p{
color:red;
}
.father div p{
color:green;
}
子代选择器（>隔开）
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2{ css }
结果： 在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式
注意点： 1、子代只包括:儿子 2、子代选择器中，选择器与选择器之前通过>隔开
<!-- 子代选择器 --> <!-- 需求：只让"长城"变红（不改变html结构） --> <div class="father"> <p>长城</p> <div> <p>瞭望台</p> </div> </div> <p>长征</p>
/* 子代选择器 */
.father>p{
color:red;
}
并集选择器（，分隔）
作用： 同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{ css }
结果： 找到选择器1和选择器2选中的标签，设置样式
注意点：
1、并集选择器中的每组选择器之间通过，分隔
2、并集选择器中的每组选择器可以是基础选择器或者复合选择器
3、并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<!-- 并集选择器 --> <!-- 需求：把div和p,h1,h2标签设置为绿色(节省代码) --> <div>我是div</div> <div>我也是一个div</div> <p>我是p标签</p> <p>我也是p标签</p> <h1 class="h1">我是一个h1标签</h1> <div class="father"> <h2>我是一个h2标签</h2> </div>
/* 并集选择器 */
div,
p,
.h1,
.father h2{
color:green;
}
交集选择器（选择器紧挨着，没有东西分隔）
作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2{ css }
结果：
(既又原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
1、交集选择器中的选择器之间是紧挨着的，没有东西分隔
2、交集选择器中如果有标签选择器，标签选择器必须写在最前面
<!-- 交集选择器 --> <!-- 瞭望台变红(不改变结构）) --> <div class="blue">长征</div> <p>长城</p> <p class="blue">瞭望台</p>
/* 交集选择器 */
p.blue{
color:blue;
}
hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover { css }
注意点： 伪类选择器选中的元素的某种状态
<!-- hover伪类选择器 --> <a href="#">我是一个a标签</a> <div class="box"> </div>
a{
text-decoration:none;
}
/* 伪类选择器 */
a:hover{
color:orange;
text-decoration:underline;
}
.box{
width: 100px;
height:100px;
background-color: skyblue;
}
.box:hover{
width:400px;
height:400px;
background-color: blue;
}
链接伪类选择器
场景： 常用于选中超链接的不同状态
| 语法 | 功能 |
|---|---|
| a：link{} | 选中a链接未访问过的状态 |
| a：visited{} | 选中a链接访问之后的状态 |
| a:hover{} | 选中鼠标悬停的状态 |
| a:active{} | 选中鼠标按下的状态 |
<a href="#">我是a标签</a> <a href="#">我是a1标签</a>
/* 如果需要同时实现以下四种伪类状态效果，需要按以下顺序书写 */
a:link{
color:blue;
}
a:visited{
color:yellow;
}
a:hover{
color: green;
}
a:active{
color:purple;
}
焦点伪类选择器（：focus）
场景： 用于选中元素获取焦点时状态，常用于表单控件
效果： 表单控件获取焦点时默认会显示外部轮廓线
<input type="text" name="">
input:focus{
background-color: grey;
}
属性选择器
场景： 通过元素上的HTML属性来选择元素，常用于选择input标签
| 选择器 | 功能 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr="val"] | 选择具有attr属性并且属性值等于val的E元素 |
<!-- 属性选择器 --> 姓名: <input type="text" name=""><br><br> 密码: <input type="password" name="">
/* 属性选择器 */
input[type]{
background-color: orange;
}
input[type="text"]{
background-color: grey;
}
input[type="password"]{
background-color: skyblue;
}
Emment语法（简写+tab键）
字体和文本相关样式
字体样式
属性（大小、粗细、样式）
| 属性名 | 说明 |
|---|---|
| font-size | 字体大小，谷歌浏览器默认16px |
| font-weight | 属性：（1）正常：normal （2）加粗：bold 无单位，纯数字(100-900的整百数）即可。 |
| font-style | 字体样式。属性：（1)正常：normal （2）倾斜：italic |
p {
font-size:50px;
/* font-weight:700; */
font-weight: normal;
font-style:italic;
}font相关属性的连写
p {
/* 连写有顺序要求：style weight size family */
/* 省略要求：只能省略前两个，后两个不要省略 */
/* 注意点:如果需要同时设置单独和连写形式
要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面 */
font:italic 700 50px 楷体,宋体,sans-serif ;
}字体系列（font-family)
注意点：
1、如果字体名称中存在多个单词，推荐使用引号包裹
2、最后一项字体系列不需要引号包裹
3、网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
无衬线字体(sans-serif)
1、特点:文字笔画粗细均匀，并且首尾无装饰
2、场景:网页中大多采用无衬线字体
3、常见该系列字体:黑体、Arial
衬线字体(serif)
1、特点:文字笔画粗细不均，并且首尾有笔锋装饰
2、场景:报刊书籍中应用广泛
3、常见该系列字体:宋体、Times New Roman
等宽字体(monospace)
1、特点:每个字母或文字的宽度相等
2、场景:一般用于程序代码编写，有利于代码的阅读和编写
3、常见该系列字体:Consolas、fira code
p {
font-size:50px;
/* font-weight:700; */
font-weight: normal;
font-style:italic;
/* 字体系列 */
/* 渲染规则:
1.从左往右按照顺序查找。如电脑中未安装该字体，则显示下一个字体
2如果都不支持。此时会根据操怍系统，显示最后字体系列的默认字体 */
/* windows系统默认微软雅黑；macos默认苹方 */
/* font-family:楷体; */
/* font-family:微软雅黑; */
font-family:甲骨文,隶书,楷体,sans-serif;
}样式的层叠问题
p {
/* 样式层叠：给同一个标签设置了相同的样式，此时浏览器会如何渲染
结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖)，写在最下面的会生效 */
/* 字体最后显示绿色 */
color:red;
color:green;
}文字阴影（text-shadow）
作用：给文字添加阴影效果，吸引用户注意
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v-shadow | 必须，垂直偏移量，允许负值 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
<div>多喝热水</div>
div{
font-size:100px;
font-weight:700;
text-align:center;
line-height:300px;
/* 文字阴影 */
/* 可连写，可有多个阴影 */
text-shadow:10px 10px 9px red,20px 20px 5px green,30px 30px 6px blue;
}
文本样式
文本缩进（text-indent)
p{
/* 文本缩进 */
/* 1、数字缩进：数字+px（比较麻烦） */
/* text-indent:32px; */
/* 2、数字+em 1em=当前标签的font-size的大小 */
text-indent:2em;
}文本水平对齐方式（text-align）
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
<div class="box">
我是一行文本div
</div>.box {
width:400px;
height:400px;
background-color: skyblue;
/* 文本水平对齐方式 */
text-align:right;
}//如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
<body>
我是一行文本
</body>
body{
text-align:center;
}1、text-aligh：center；能让哪些元素水平居中
1、文本 2、span标签 、a标签 3、input标签、img标签
注意：如果需要让以上元素水平居中，text-align：center 给元素所在标签（元素的父元素）设置
2、水平居中 margin： 0 auto；
如果需要让div、p.h(大盒子)水平居中?·可以通过margin : 0 auto;实现
注意点：
1、如果需要让div、p. h(大盒子)水平居中，直接给当前元素本身设置即可
2、margin: 0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素
的宽度
<div class="father">
<div class="son">
</div>.father {
width:400px;
height:400px;
background-color: skyblue;
margin:0 auto;
}
.son {
width:100px;
height:100px;
background-color: orange;
margin:0 auto;
}文本修饰（text-decoration）
注意：开发中会使用text-decoration : none;清除a标签默认的下划线
| 属性值 | 说明 |
|---|---|
| underline | 下划线（常用） |
| line-through | 删除线 |
| overline | 上划线 |
| none | 无装饰线（常用） |
p{
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
text-decoration:none;
}line-height行高
作用：
控制行间距（给一行上下增加间距)
应用：
1、让单行文本垂直居中可以设置line-height :文字父元素高
2、网页精准布局时，会设置line-height : 1可以取消上下间距
行高与font连写的注意点:
如果同时设置了行高和font连写，注意覆盖问题
font : style weight size/line-height family ;
<div class="box">
我是一行文本div <br>
我是换行的div
</div>.box {
/* 行高line-height 取值：（1）数字+px （2）倍数（当前标签font-size的倍数） */
/* 行高：上间距+文本高度+下间距 */
/* line-height:40px; */
/* 1、通过行高设置单行文本的垂直居中效果:行高=盒子高度; */
/* line-height:400px; */
/* 2、在网页精准布局的时候，会设置行高为1取消上下的间距 */
/* line-height:1; */
/* font连写 font:style weight size/line-height: family*/
font:italic 700 20px/400px 楷体;
/* line-height:400px; */
}0715案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>0715案例1</title>
<style type="text/css">
.box{
width:800px;
/* height:1000px; */
background-color: white;
margin:0 auto;
}
h1 {
text-align:center;
}
.info {
text-align:center;
}
.time{
color:#808080;
}
.xin{
color:#87ceeb;
font-weight:bold;
}
.link{
text-decoration:none;
}
p{
text-indent:2em;
}
</style>
</head>
<body>
<div class="box">
<h1>10个计算机项目</h1>
<div class="info">
<span class="time">2022年7月15日</span>
<span class="xin">新浪科技</span>
<a href="#" class="link">收藏本文</a>
</div>
<hr>
<p>SQL分类 1) DDL(Data Definition Language)数据定义语言 用来定义数据库
对象：数据库，表，列等。关键字：create, drop,alter 等 2) DML(Data
Manipulation Language)数据操作语言 用来对数据库中表的数据进行增删
改。关键字：insert, delete, update 等 3) DQL(Data Query Language)数
据查询语言 用来查询数据库中表的记录(数据)。关键字：select, where 等
4) DCL(Data Control Language)数据控制语言(了解) 用来定义数据库的访
问权限和安全级别，及创建用户。关键字：GRANT， REVOKE 等
</p>
<p>以下规约只针对本模块，更全面的文档参考《阿里巴巴Java开发手册》：
五、MySQL数据1、库名与应用名称尽量一致2、表名、字段名必须使用小写字母或数字，禁 止出现数字开头，3、表名不使用复数名词4、表的命名最好是加上“业务名称_表的作用”。 如，edu_teacher
</p>
<p>SQL分类 1) DDL(Data Definition Language)数据定义语言 用来定义数据库
对象：数据库，表，列等。关键字：create, drop,alter 等 2) DML(Data
Manipulation Language)数据操作语言 用来对数据库中表的数据进行增删
改。关键字：insert, delete, update 等 3) DQL(Data Query Language)数
据查询语言 用来查询数据库中表的记录(数据)。关键字：select, where 等
4) DCL(Data Control Language)数据控制语言(了解) 用来定义数据库的访
问权限和安全级别，及创建用户。关键字：GRANT， REVOKE 等
</p>
<p>以下规约只针对本模块，更全面的文档参考《阿里巴巴Java开发手册》：
五、MySQL数据1、库名与应用名称尽量一致2、表名、字段名必须使用小写字母或数字，禁止出现数字开头，3、表名不使用复数名词4、表的命名最好是加上“业务名称_表的作用”。如，edu_teacher
</p>
</div>
</body>
</html>
0715案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>0715案例2</title>
<style type="text/css">
/* .big{
background-color: #f5f5f5;
} */
.box{
width:234px;
height:300px;
margin:0 auto;
background-color: #fff;
text-align:center;
}
.pic {
width:160px;
}
.bike{
line-height:25px;
font-size:14px;
}
.tool{
font-size:12px;
line-height:30px;
color:#cccccc;
}
.price{
font-size:14px;
color:#ffa500;
}
</style>
</head>
<body>
<div class="big">
<div class="box">
<img src="t1.jpg" alt="" class="pic">
<div class="bike">九号平衡车</div>
<div class="tool">大家的代步工具</div>
<div class="price">1999元</div>
</div>
</div>
</body>
</html>
2022、07、16
背景相关属性
背景颜色、图片
| 属性 | 属性名 | 说明 |
|---|---|---|
| 背景颜色 | background-color | 颜色取值:关键字、rgb表示法、rgba表示法、十六进制（默认透明） |
| 背景图片 | background-image:url('路径'); | url中可以省略引号 |
div{
width: 400px;
height: 400px;
/* 默认透明:rgba(0,0,0) transparent */
background-color: green;
/* 背景图片默认是在水平和垂直方向平铺的
背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的，需要设置盒子的高度，宽度*/
background-image:url('bj1.jpg');
}
背景图片大小（background-size）
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相当于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
<div></div> <div></div> <div></div> <div></div> <div></div>
div{
width: 400px;
height: 500px;
border:1px solid #000;
margin:100px auto;
background: url('bj2.jpg') no-repeat;
}
div:nth-child(2){
/* 数字+px 宽 高
图片可能会变形 */
background-size:400px 500px;
}
div:nth-child(3){
/* 相当于当前盒子自身的宽高百分比 */
background-size:60%;
}
div:nth-child(4){
/* 包含，将背景图片等比例缩放，直到不会超出盒子的最大 */
background-size:contain;
}
div:nth-child(5){
/* 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 */
background-size:cover;
}
背景平铺（background-repeat: ）
| 取值 | 效果 |
|---|---|
| repeat | 水平和垂直方向都平铺（默认） |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向（x轴）平铺 |
| repeat-y | 沿着垂直方向（y轴）平铺 |
div{
width: 400px;
height: 400px;
background-color: green;
background-image:url('bj.jpg');
/* 背景平铺 */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
}
背景位置（background-position:）
注意：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
1、属性值：（1）方位名词（最多只表示9个位置）
| 方向 | 属性值 |
|---|---|
| 水平方向 | left、center、right |
| 垂直方向 | top、centeer、bottom |
2、属性值：数字+px（坐标）
| 坐标系 | 说明 |
|---|---|
| 原点（0,0） | 盒子的左上角 |
| x轴 | 水平向右 |
| y轴 | 垂直向下 |
div{
width: 400px;
height: 400px;
background-color: green;
background-image:url('bj.jpg');
/* 背景平铺 */
background-repeat: no-repeat;
/* 背景位置 */
/* background-position: 水平方向位置 垂直方向位置 */
background-position:right top;
background-position:100px 100px;
background-position:100px top;
}
背景相关属性连写（background）
属性值： 单个属性值的合写，取值之间以空格隔开
书写顺序：
推荐:background: color image repeat position/size
省略问题：
可以按照需求省略
特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url();
注意点 如果需要设置单独的样式和连写
（1）要么把单独的样式写在连写的下面
（2）要么把单独的样式写在连写的里面
div{
width: 400px;
height: 400px;
background-color: green;
background-image:url('bj.jpg');
/* 背景平铺 */
background-repeat: no-repeat;
/* 背景位置 */
background-position:center center;
/* 背景相关属性连写 */
background: blue url('bj.jpg') no-repeat center center ;
}
背景透明度
1、opacity:0.7;
2、background-color: rgb(0, 0, 0,.6)；
img标签和背景图片的区别
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二:：div标签＋背景图片
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
元素显示模式
块级元素（display: block）
显示特点： 1、独占一行（一行只能显示一个)
2、宽度默认是父元素的宽度，高度默认由内容撑开
3、可以设置宽高
代表标签： div、p、 h系列、ul、 li、dl、dt、dd、form、header、nav、footer......
行内元素（display: inline）
显示特点： 1、一行可以显示多个
2、宽度和高度默认由内容撑开
3、不可以设置宽高 代表标签： a、span、 b、u、i、 s、 strong、ins、em、del.....
行内块元素（display: inline-block）
显示特点： 1、一行可以显示多个
2、可以设置宽高
代表标签：
input、textarea、button、select.....
特殊情况： img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display: block | 转换成块级元素 | 较多 |
| display: inline-block | 转换成行内块元素 | 较多 |
| display: inline | 转换成行内元素 | 较少 |
<!-- 行内元素 --> <span>我是span</span> <span>我是span</span> <span>我是span</span> <!-- 块级元素 --> <div>我是div</div> <div>我是div</div> <div>我是div</div> <!-- 行内块元素 --> <input type="text" /> <input type="text" /> <input type="text" /> <!-- img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline --> <img src="bj.jpg" alt=""> <img src="bj.jpg" alt=""> <img src="bj.jpg" alt=""> <!-- 元素显示模式转换 --> <!-- a：行内元素转换成块级元素或行内块元素 --> <a href="#">我是一个a标签</a> <a href="#">我是一个a标签</a> <a href="#">我是一个a标签</a>
span{
/* 宽度和高度**默认由内容撑开,不可以设置宽高 */
width:200px;
height:200px;
background-color: red;
}
div{
width:200px;
height:200px;
background-color:blue;
}
input{
width:200px;
height:200px;
background-color: skyblue;
}
img{
width:200px;
height:200px;
}
a{
width:200px;
height:200px;
background-color: orange;
/* 转换成块级元素 */
display:block;
/* 转换成行内块元素 */
display:inline-block;
}
HTML嵌套规范注意点
1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等.....
但是：p标签中不要嵌套div、p、h等块级元素
2、a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签
CSS三大特性
1、继承性
（1）继承性介绍
特性：子元素有默认继承父元素样式的特点（子承父业)
可以继承的常见属性：
1、color
2、font-style、font-weight、font-size、font-family
3、text-indent、text-align
4、line-height
5、…...
注意点：
可以通过调试工具判断样式是否可以继承
<!-- 给.father设置颜色样式，.son会继承.father的样式 --> <div class="father"> 父亲 <div class="son"> 儿子 </div> </div>
.father{
width:200px;
color:red;
background-color: orange;
font-style:italic;
font-family:宋体;
text-align:center;
line-height:100px;
}
（2）继承的应用
好处：可以在一定程度上减少代码常见
应用场景：
1、可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
2、直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
<ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul>
ul{
list-style:none;
}
body{
font-size:20px;
}
（3）继承失效的特殊情况
<div class="father"> <!-- 继承失效的特殊情况 --> <!-- 失效原因：如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式 --> <!-- 1、a标签的文字颜色会继承失效 --> <!-- <a href="#">我是一个a标签</a> --> <!-- 2、h系列标签的font-size 会继承失效 --> <!-- <h1>我是h1标签</h1> --> <!-- 3、div标签的高度不能继承，但是宽度有类似于继承的效果 --> <div class="son"> 儿子 </div> </div>
.father{
width:200px;
height:300px;
background-color: skyblue;
color:red;
font-size:20px;
font-style:italic;
font-family:宋体;
text-align:center;
line-height:100px;
}
.son{
/* width:100px; */
/* height:100px; */
background-color: orange;
}
2、层叠性
特性：
1、给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
2、给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点：
1、当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
<!-- 层叠性 -->
<p class="orange">我是一个字</p>
p{
color:red;
font-size:30px;
font-size:10px;
color:skyblue;
}
.orange{
color:orange;
}
3、优先级
特性: 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
1、!important写在属性值的后面，分号的前面!
2、!important不能提升继承的优先级，只要是继承优先级最低!
3、实际开发中不建议使用!important
<div class="big"> <!-- 6、行内样式 --> <p class="small" id="one" style="color:green">我是一个标签</p> </div>
/* 7、！important */
p{
color:purple !important;
}
/* 5、id选择器 */
#one{
color:gray;
}
/* 4、类选择器 */
.small{
color:orange;
}
/* 3、标签选择器 */
p{
color:skyblue;
}
/* 2、通配符选择器 */
*{
color:blue;
}
/* 1、继承 */
.big{
color:red;
}
权重叠加
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：(每一级之间不存在进位)
复合选择器中：（行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数）
权重计算题解题步骤：
1、先判断选择器是否能直接选中标签，如果不能直接选中→是继承，优先级最低→直接pass
2、通过权重计算公式，判断谁权重最高
比较规则：
1、先比较第一级数字，如果比较出来了，之后的统统不看
2、如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的不看
3.......
4、如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!)
注意点：!important如果不是继承，则权重最高，天下第一!
如果全是继承，则分析它的父元素的优先级（子承父业）
/* 优先级：1>2>3>4 */
/*1、 (0,1,0,1) */
div #one{
color:orange;
}
/* 2、(0,0,2,0) */
.big .small{
color:red;
}
/* 3、(0,0,1,1) */
.big p{
color:skyblue;
}
/*4、 (0,0,0,2) */
div p{
color:pink;
}
盒子模型
1、盒子模型的介绍
盒子的概念
1、页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
2、浏览器在渲染（显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒
子
2.盒子模型
CSS中规定每个盒子分别由内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区
域（margin)构成，这就是盒子模型
记忆：可以联想现实中的包装盒
2、内容区域的宽度和高度（ width / height）
作用：利用width 和height属性默认设置是盒子内容区域的大小
.box{
/* 手动内减 */
/* width:240px;
height:240px; */
/* 自动内减 CSS3中的盒模型：属性名：box-sizing 属性值：border-box*/
width: 300px;
height: 300px;
box-sizing:border-box;
background-color: pink;
border:10px solid black;
padding:20px;
}
3、边框（border）
作用：给设置边框粗细、边框样式、边框颜色效果
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid、虚线dashed、点线dotted |
| 边框颜色 | border-color | 颜色取值 |
div{
width: 300px;
height: 300px;
background-color: skyblue;
/* 单个属性 */
/* 边框需要先设置边框样式style */
border-style:dashed;
border-width:20px;
border-color:black;
/* 连写形式 */
border: 10px solid blue;
/* 3、设置单方向边框：border-方位名词 */
border-top:10px solid red;
border-left:20px dashed green;
}
边框合并（给table设置border-collapse：collapse；）
场景： 让相邻表格边框进行合并，得到细线边框效果
<table> <caption><h3>优秀学生信息表格</h3></caption> <thead> <tr> <th>年级</th> <th>姓名</th> <th>学号</th> <th>班级</th> </tr> </thead> <tbody> <tr> <td rowspan="2">高三</td> <td>张三</td> <td>111</td> <td>三年一班</td> </tr> <tr> <td>李四</td> <td>222</td> <td>三年三班</td> </tr> </tbody> <tfoot> <tr> <td>评语</td> <td colspan="3">你们都很优秀</td> </tr> </tfoot> </table>
table{
width: 400px;
height: 300px;
border: 1px solid #000;
/* 边框合并 */
border-collapse:collapse;
}
th,td{
border:1px solid #000;
}
用CSS画三角形
<!-- css画三角形 --> <!-- 原理：利用盒子边框完成 --> <!-- 1、设置一个盒子 --> <div class="box"></div>
.box{
/* 3、将盒子宽高设置为0，只保留边框 */
height: 0px;
width: 0px;
background-color: white;
/* 2、设置四周颜色不同的边框 */
/* 4、得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明 */
/* 拓展：可以通过调整不同边框的宽度，调整三角形的形态 */
border-top:100px solid transparent;
border-bottom:100px solid red;
border-left:100px solid transparent;
border-right:100px solid transparent;
}
4、内边距（padding）
作用：设置边框与内容区域之间的距离
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | padding：10px； | 上右下左都设置为10px |
| 两个值 | padding：10px 20px； | 上下：10px，左右：20px |
| 三个值 | padding：10px 20px 30px； | 上：10px，左右：20px，下：30px |
| 四个值 | padding：10px 20px 30px 40px； | 上 右 下 左：10 20 30 40 |
div{
width: 100px;
height: 100px;
background-color: skyblue;
border: 1px solid blue;
/* 内边距 */
padding:10px 20px 30px 40px;
/* 单独设置 */
padding-top:20px;
padding-right:50px;
}
5、外边距（margin、不影响盒子大小）
作用：设置边框以外，盒子与盒子之间的距离
| 取值 | 示例 | 含义 |
|---|---|---|
| 一个值 | margin：10px； | 上右下左都设置为10px |
| 两个值 | margin：10px 20px； | 上下：10px，左右：20px |
| 三个值 | margin：10px 20px 30px； | 上：10px，左右：20px，下：30px |
| 四个值 | margin：10px 20px 30px 40px； | 上 右 下 左：10 20 30 40 |
.box{
display:inline-block;
width: 200px;
height: 200px;
background-color: pink;
/* 外边距 */
margin:10px 20px 30px 40px;
/* 单独设置 可让盒子向不同方向移动*/
margin-bottom:60px;
margin-left:60px;
}
div{
width: 300px;
height: 300px;
/* display:inline-block; */
}
.green{
background-color: green;
/* 1、水平方向移动 */
/* margin-left:100px; */
/* margin-right:100px; */
/* 2、垂直方向移动 */
/* margin-top:100px; */
margin-bottom:100px;
}
.blue{
background-color: blue;
}
（1）外边距折叠现象——合并现象
场景： 垂直布局 的 块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：避免：只给其中一个盒子设置margin就好
（2）外边距折叠现象——塌陷现象
场景： 互相嵌套 的 块级元素，子元素的margin-top会作用在父元素上
结果： 导致父元素一起往下移动
解决方法：
1、给父元素设置 border-top或者 padding-top(分隔父子元素的margin-top)
2、给父元素设置 overflow: hidden
3、转换成行内块元素 display:inline-block;
4、设置浮动 float:left;
5、给父元素添加文本
6、双伪元素清除法（清除浮动）
.father{
width: 400px;
height: 400px;
background-color: blue;
/* border-top:10px solid pink; */
/* padding-top:1px; */
/* overflow:hidden; */
/* display:inline-block; */
float:left;
}
.son{
width: 100px;
height: 100px;
background-color: green;
margin-top:100px;
}
(3)行内元素的margin、padding
水平方向有效，垂直方向无效
span{
/* 水平方向：有效 */
/* margin-left:100px; */
/* margin-right:100px; */
/* padding-left:100px; */
padding-right:100px;
/* 垂直方向 ：无效*/
/* margin-top:100px; */
/* margin-bottom:100px; */
/* padding-bottom:100px; */
padding-top:100px;
}
6、盒子阴影（box-shadow）
作用·： 给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v-shadow | 必须，垂直偏移量，允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
<div></div>
div{
width: 300px;
height: 300px;
background-color: pink;
margin:100px auto;
/* 水平 垂直 模糊度 扩大 颜色 内部(可省略) */
box-shadow:12px 12px 9px 9px #000 inset;
}
7、不会撑大盒子的特殊情况（块级元素）
1、如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
2、此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
精灵图
场景： 项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点： 减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用步骤：
创建一个盒子
通过PxCook量取小图片大小，将小图片的宽高设置给盒子
将精灵图设置为盒子的背景图片
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y
<!-- 1、创建一个盒子 --> <div class="aa"></div> <div class="nn"></div> <div class="dd"></div> <div class="yy"></div>
div{
display: inline-block;
/* 3、将精灵图设置为盒子的背景图片 */
background: url('./jlt.jpg') no-repeat;
}
.aa{
/* 2、通过PxCook量取小图片大小，将小图片的宽高设置给盒子 */
width: 108px;
height: 110px;
/* 4、通过测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y */
background-position: 0 -9px;
}
.nn{
width: 112px;
height: 110px;
background-position: -255px -276px;
}
.dd{
width: 97px;
height: 107px;
background-position: -363px -8px;
}
.yy{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
2022、07、17
CSS布局
结构伪类选择器
目标：能够使用结构伪类选择器在HTML中定位元素
作用与优势：
1、作用：根据元素在HTML中的结构关系查找元素
2、优势：减少对于HTML中类的依赖，有利于保持代码整洁
3、场景：常用于查找某父级选择器中的子元素
| 选择器 | 说明 |
|---|---|
| E：first-child {} | 匹配父元素中第一个子元素，并且是E元素 |
| E：last-child {} | 匹配父元素中最后一个子元素，并且是E元素 |
| E：nth-child(n) {} | 匹配父元素中第n个子元素，并且是E元素 |
| E：nth-last-child(n) {} | 匹配父元素中倒数第n个子元素，并且是E元素 |
| E：nth-of-type(n) {} | 只在父元素的同类型(E)子元素范围中，匹配第n个 |
通过n可以组成常见公式
n为0、1、2、3、4、5.........
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前5个 | —n+5 |
| 找到从第五个往后 | n+5 |
<ul> <li>我是第1个li</li> <li>我是第2个li</li> <li>我是第3个li</li> <li>我是第4个li</li> <li>我是第5个li</li> <li>我是第6个li</li> <li>我是第7个li</li> <li>我是第8个li</li> <li>我是第9个li</li> <li>我是第10个li</li> </ul> <ul> <li><a href="#" title="">我是第1个li</a></li> <li><a href="#" title="">我是第2个li</a></li> <li><a href="#" title="">我是第3个li</a></li> </ul>
/* 结构伪类选择器 ——查找单个子元素*/
/* 1、匹配父元素中第一个子元素，并且是li元素 */
/* li:first-child{
background-color: red;
} */
/* 2、匹配父元素中最后一个子元素，并且是li元素 */
/* li:last-child{
background-color:purple;
} */
/* 3、匹配父元素中第3个子元素，并且是li元素 */
/* li:nth-child(3){
background-color: blue;
} */
/* 只在父元素的同类型(E)子元素范围中，匹配第n个 */
li:nth-of-type(3){
background-color: orange;
}
/* 4、匹配父元素中倒数第n个子元素，并且是li元素 */
/* li:nth-last-child(4){
background-color: green;
} */
/* 结构伪类选择器 ——查找多个子元素*/
/* 1、找到偶数个li/ */
li:nth-child(2n){
background-color: orange;
}
/* 2、找到奇数个li */
li:nth-child(odd){
background-color: skyblue;
}
/* 3、找到前3个li */
li:nth-child(-n+3){
background-color: blue;
}
/* 4、找到从第6个往后 */
li:nth-child(n+6){
background-color: green;
}
/* 找到第一个a标签 正确写法 */
li:first-child a{
color:red;
}
伪元素
目标：能够使用伪元素在网页中创建内容
伪元素：一般页面中的非主体内容可以使用伪元素
区别： 1、元素：HTML设置的标签
2、伪元素：由CSS模拟出的标签效果
注意：
1、必须设置content属性才能生效
2、伪元素是行内元素
| 伪元素 | 作用 |
|---|---|
| ：：before | 在父元素内容的最前添加一个伪元素 |
| ：：after | 在父元素内容的最后添加一个伪元素 |
<!-- 伪元素 --> <div class="father"> 我是father </div>
/* 伪元素 */
.father{
width: 300px;
height: 300px;
background-color: skyblue;
}
.father::after{
/* 必须设置**content**属性才能生效 */
content:'我是伪元素';
width: 100px;
height: 100px;
background-color: orange;
/* 伪元素是行内元素 */
display:block;
}
标准流
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1、块级元素：从上往下，垂直布局，独占一行
2、行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
浮动（float）
1、作用
早期：图文环绕
现在：网页布局 （让垂直布局的盒子变成水平布局）
| 属性名 | 效果 |
|---|---|
| left | 左浮动 |
| right | 右浮动 |
<!-- 1、图文环绕 --> <img src="t1.jpg" alt=""> 对于前端开发来说，盒子模型是必须要熟练掌握的内容，不然在后面写页面的时候，你会遇到很多坑。比如我当时遇到给标签设置 width 和 height 不起作用，设置 margin 不起作用，设置 padding 后标签会自动变大等等，这一切问题，归根结底是我对盒子模型没有彻底掌握，今天利用这个机会聊一聊盒子模型。在网页中，你可以把各种标签统统看成盒子，对于不同的盒子表现是不一样的，我们可以利用这些盒子堆叠出各种好看的页面。................ <!-- 2、网页布局->水平布局 --> <div class="left">左护法</div> <div class="right">右护法</div>
img{
float:left;
margin-right: 20px;
}
.left{
width: 300px;
height: 300px;
background-color: skyblue;
float:left;
}
.right{
width: 300px;
height: 300px;
background-color: pink;
float:right;
}
2、特点
1、浮动元素会脱离标准流(简称：脱标)，在标准流中不占位置（相当于从地面飘到了空中）
2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4、浮动元素会受到上面元素边界的影响,因为上面的元素是块级元素，独占一行。若上面的元素时行内元素或
行内块元素，浮动元素不受边界影响
5、浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高
注意：浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中
但浮动元素的内容可以居中
<span>我是一个span</span> <span>我是一个span</span> <div class="red"></div> <div class="green"></div> <div class="blue"></div>
*{
padding:0;
margin:0;
}
div{
width: 200px;
height: 200px;
/* 3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动 */
/* float:right; */
/* float:left; */
}
.red{
/* display:inline-block; */
/* float:right; */
background-color: red;
}
.green{
/* 1、浮动元素会脱离标准流 */
/* 4、浮动元素会受到上面元素边界的影响,因为上面的元素是块级元素，独占一行。
若上面的元素时行内元素或行内块元素，浮动元素不受边界影响*/
/* float:right; */
/* float:left; */
background-color: green;
}
.blue{
/* 2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素 */
/* width: 210px; */
/* height: 210px; */
background-color: blue;
}
/* 5、浮动元素有特殊的显示效果：一行可以显示多个，可以设置宽高 */
span{
width: 200px;
height: 200px;
background-color: orange;
float:left;
border: 1px solid #000;
/* 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中
但浮动元素的内容可以居中 */
text-align:center;
line-height:200px;
}
清除浮动
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因： 子元素浮动后脱标→不占位置
目的： 需要父元素有高度，从而不影响其他网页元素的布局
1、直接设置父元素高度
优点：简单粗暴，方便 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
2、额外标签法
操作：
1、在父元素内容的最后添加一个块级元素
2、给添加的块级元素设置clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
3、伪元素清除法（使用较多）
操作：用伪元素替代了额外标签
优点：项目中使用，直接给标签加类即可清除浮动
4、给父元素设置overflow：hidden
操作：直接给父元素设置overflow：hidden
优点：方便
<div class="father clearfix"> <div class="son"></div> <!-- 2、额外标签法 在父元素内容的最后添加一个块级元素 --> <!-- <div class="clear"></div> --> </div>
.father{
/* 1、直接设置父元素高度 */
/* height: 400px; */
width: 400px;
background-color: pink;
/* 5、给父元素设置overflow：hidden */
overflow:hidden;
}
.son{
width: 100px;
height: 400px;
background-color: blue;
/* 子元素浮动了，此时子元素不能撑开标准流的块级父元素 */
float:left;
}
/* .clear{
2、给添加的块级元素设置clear:both
clear:both;
} */
/* 3、用单伪元素替代了额外标签 */
/* .father::after{
content:'';
display:block;
clear:both;
} */
/* .clearfix::after{
content:'';
display:block;
clear:both;
补充代码：在网页中看不到伪元素(content: '.') 的时候写
height:0;
让当前代码隐藏
visibility:hidden;
} */
/* 4、双伪元素清除法 */
/* .clearfix::before,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
} */
BFC —块格式化上下文(Block Formatting Context)
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区
域。
创建BFC方法:
-
html标签是BFC盒子
-
浮动元素是BFC盒子
-
行内块元素是BFC盒子
-
overflow属性取值不为visible。如: auto、hidden...
-
.…
BFC盒子常见特点：
1、BFC盒子会默认包裹住内部子元素（标准流、浮动)→应用：清除浮动
2、BFC盒子本身与子元素之间不存在margin的塌陷现象→应用：解决margin的塌陷
2022、07、18
CSS定位（position:）
场景： 1、让元素自由摆放，用于盒子之间的层叠情况
——>定位之后的元素层级最高，可以层叠在其他盒子上
2、可以让盒子始终固定在屏幕中的某个位置（如：网页中的导航栏）
设置偏移值：
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
选取的原则一般是就近原则 ( 离哪边近用哪个 )
| 定位方式 | 属性值 |
|---|---|
| 静态定位(默认、标准流) | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
<div class="red"></div> <div class="blue"></div>
/* 目的：使蓝盒子层叠在红盒子的四分之一上 */
.red{
background-color: red;
}
.blue{
/* 1、设置定位方式 */
position:absolute;
/* 2、设置偏移值 */
top:150px;
left:150px;
background-color: blue;
}
相对定位（relative 相对于自己之前的位置移动）
特点：
1、需要配合方位属性实现移动
2、相对于自己原来位置进行移动
3、在页面中占位置→没有脱标
应用场景：
1、配合绝对定位组CP(子绝父相)
2、用于小范围的移动
<div class="red"></div> <div class="blue"></div> <div class="green"></div>
.red{
background-color: red;
}
.blue{
/* 1、设置定位方式 */
/* position:absolute; */
/* (1)静态定位 静态定位就是之前标准流，不能通过方位属性进行移动*/
/* position:static; */
/* (2)相对定位 需要配合方位属性实现移动、相对于自己原来位置进行移动*/
position:relative;
/* （3）绝对定位
1、祖先元素中没有定位→默认相对于浏览器进行移动
2、祖先元素中有定位→相对于最近的有定位的祖先元素进行移动*/
/* position:absolute; */
/* 2、设置偏移值 */
top:150px;
left:150px;
/* 绝对定位的偏移值 */
/* right:0;
bottom:0; */
background-color: blue;
}
/* .green{
background-color: green;
position:absolute;
left:300px;
} */
.green{
background-color: green;
}
绝对定位（absolute 相对于非静态定位的父元素进行定位移动）
特点：
1、需要配合方位属性实现移动
2、默认相对于浏览器可视区域进行移动
3、在页面中不占位置→已经脱标
应用场景：
1、配合绝对定位组CP (子绝父相)
<div class="father"> <div class="son"> <div class="sun"></div> </div> </div>
.father{
/* 相对定位 */
position:relative;
width: 600px;
height: 600px;
background-color: pink;
}
.son{
/* 相对定位 */
position:relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.sun{
width: 200px;
height: 200px;
background-color: blue;
/* 绝对定位 */
position:absolute;
/* 1、祖先元素中没有定位→默认相对于浏览器进行移动->浏览器右下角 */
/* bottom:0;
right:0; */
/* 2、.son、.father元素中有定位→相对于最近的有定位的.son元素进行移动 */
bottom:0;
right:0;
}
子绝父相（对网页布局影响较小）
<div class="father"> <div class="son"> </div> </div>
.father{
/* 让.son在.father中随意移动：子绝父相 */
/* 理由：子绝父绝虽然也可以做到让子元素在父元素内移动，但父元素是绝对定位的话，盒子会脱标，影响网络布局 */
position:relative;
width: 600px;
height: 600px;
background-color: pink;
}
.son{
/* 子绝父相：绝对定位 */
position:absolute;
bottom:0;
right:0;
width: 400px;
height: 400px;
background-color: skyblue;
}
特殊场景
场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可!
原因： 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
固定定位（fixed 相对于浏览器可视区域进行移动）
特点： 1、需要配合方位属性实现移动
2、相对于浏览器可视区域进行移动
3、在页面中不占位置→已经脱标
应用场景：
1、让盒子固定在屏幕中的某个位置
<!-- 固定定位 -->
<img src="t4.jpg" alt="">
好多字（撑开页面，有进度条）
body{
background-color: #eeeeee;
}
img{
/* 固定定位 */
position:fixed;
right:100px;
top:100px;
}
元素层级问题
不同布局：定位 > 浮动 > 标准流
不同定位：相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
更改定位元素层级（z-index）
<div class="red"></div> <div class="blue"></div> <div class="green"></div>
*{
margin:0;
padding:0;
}
div{
width: 300px;
height: 300px;
}
.red{
position:relative;
top:0;
left:0;
/* 数字越大，层级越高 */
/* 层级：blue>green>red 理由：3>2>1 */
z-index:1;
background-color: red;
}
.blue{
position:absolute;
top:100px;
left:100px;
z-index:3;
background-color: blue;
}
.green{
position:fixed;
top:200px;
left:200px;
z-index:2;
background-color: green;
}
子绝父相水平垂直居中（transform:translate(-50%, -50%)）
<!-- 需求:使用子绝父相，让子盒子在父盒子中水平居中(父子元素任意宽度下都能实现) --> <div class="father"> <div class="son"></div> </div>
.father{
width: 600px;
height: 400px;
background-color: pink;
position:relative;
/* 3、再让子盒子往左移动自己的一半 */
}
.son{
width: 200px;
height: 100px;
background-color: blue;
/* 1、子绝父相 */
position:absolute;
/* 2、先让子盒子往右移动父盒子的一半 */
left:50%;
top:50%;
/* 3、再让子盒子往左移动自己的一半 */
/* (1)普通做法: margin-left:负的子盒子宽度的一半
缺点:子盒子宽度变化后需要重新改代码 */
/* margin-left取值的百分比相对于父元素 */
/* margin-left:-100px; */
/* 推荐做法：transform:translateX(-50%);
表示沿着X轴负方向(往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码*/
transform:translateX(-50%);
/* 水平垂直都居中 */
transform:translate(-50%, -50%);
}
装饰
垂直对齐方式（vertical-align）
基线：浏览器文字类型元素排版中存在用于对齐的基线(baseline)
| 属性值 | 效果 |
|---|---|
| baseline | 基线对齐（默认） |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
<!-- 场景:解决行内/行内块元素垂直对齐问题 问题:当图片和文字在一行中显示时，其实底部不是对齐的 --> <img src="bj1.jpg" alt="">前端基础学习，前端基础学习，前端基础学习
img{
/* 针对行内块元素或行内元素 */
vertical-align:baseline;
vertical-align:top;
vertical-align:middle;
vertical-align:bottom;
}
学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
推荐优先使用浮动完成效果
垂直对齐方式解决问题
<!-- 垂直对齐方式解决问题 --> <!-- 1、文本框和表单按钮无法对齐问题 --> <!-- <input type="text" name=""><input type="button" name="" value="百度一下"> --> <!-- 2、input和img无法对齐问题 --> <!-- <img src="bj1.jpg" alt=""><input type="text" name=""> --> <!-- 3、div中的文本框，文本框无法贴顶问题 --> <!-- <div class="father"> <input type="text" name=""> </div> --> <!-- 4、div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题 --> <!-- <div class="father"> <img src="bj2.jpg" alt=""> </div> --> <!-- 5、使用line-height让img标签垂直居中问题 --> <div class="father"> <img src="bj2.jpg" alt=""> </div>
/* input{
height: 50px;
自动内减
box-sizing:border-box;
1、(1)垂直对齐方式
vertical-align:top;
1、(2)、浮动
float:left;
} */
img{
/* 2、垂直对齐方式：优先给img设置或两个都设置底部对齐 */
/* vertical-align:bottom; */
/* 4、（1）垂直对齐方式*/
/* vertical-align:bottom; */
/* 4、(2)转换成块级元素 原因：块级元素没有默认的垂直对齐方式，不受影响*/
/* display:block; */
/* 5、使用line-height让img标签垂直居中问题 */
vertical-align:middle;
}
.father{
width: 600px;
height: 600px;
background-color: pink;
/* 5、使用line-height让img标签垂直居中问题 */
line-height:600px;
}
input{
/* 3、给input设置vertical-align:top */
vertical-align:top;
}
光标类型(cursor)
场景： 设置鼠标光标在元素上时显示的样式
| 属性值 | 效果 |
|---|---|
| default | （默认值）通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
<div class="box"></div> <!-- p标签默认cursor：text 工字型--> <p>我是一个p标签</p> <!-- a标签默认cursor：pointer 小手--> <a href="#">我是一个a标签</a>
.box{
width: 400px;
height: 400px;
background-color: pink;
cursor:default;
cursor:pointer;
cursor:text;
cursor:move;
}
边框圆角(border-radius)
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
取值：数字+px 、 百分比
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
<div class="box"></div> <div class="jiaonang"></div>
.box{
width: 400px;
height: 400px;
background-color: skyblue;
/* 边框圆角 */
/* 一个取值： 四个角都是30px*/
/* border-radius:30px; */
/* 多个取值 顺时针方向，没有赋值的看对角*/
border-radius:30px 50px;
border-radius:30px 50px 100px;
border-radius:30px 50px 100px 150px;
/* 应用1、变成正圆形 */
/* 盒子必须是正方形 ，边框圆角为宽高的一半或50%*/
border-radius:50%;
/* 让正圆和胶囊按钮分开一段距离 */
margin-bottom:100px;
}
.jiaonang{
/* 应用2、胶囊按钮 */
/* 盒子要求是长方形，设置边框圆角为盒子高度的一半 */
width: 400px;
height: 100px;
background-color: orange;
border-radius:50px;
}
溢出部分显示效果(overflow)
溢出部分： 指的是 盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条......
| 属性值 | 效果 |
|---|---|
| visible | 溢出部分可见（默认） |
| hidden | 溢出部分隐藏（清除浮动） |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
<div>我是内容好多字</div>
div{
width: 300px;
height: 300px;
background-color: pink;
overflow:visible;
overflow:hidden;
overflow:scroll;
overflow:auto;
}
元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏
常见属性：
1、visibility：hidden（隐藏元素本身，并且在网页中占位置）
2、display：none （隐藏元素本身，并且在网页中不占位置）
display：block；（显示）
<div class="red"></div> <div class="green"></div> <div class="blue"></div>
div {
width: 300px;
height: 300px;
}
.red{
background-color: red;
/* 隐藏但占位置 */
visibility:hidden;
}
.green{
background-color: green;
/* 隐藏且不占位置 */
display:none;
/* 显示元素 */
display:block;
}
.blue{
background-color: blue;
}
元素整体透明度（opacity）
<div class="box"> <img src="bj2.jpg" alt="">我是文字 </div>
.box{
width: 400px;
height: 400px;
background-color: skyblue;
/* 元素整体透明（包括文字内容） */
/* opacity: 0~1之间的数字 1：完全不透明 0：完全透明 */
opacity:0;
opacity:0.5;
}
过渡（transition）
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
注意点：
1、过渡需要：默认状态和hover状态样式不同，才能有过渡效果
2.、transition属性给需要过渡的元素本身加
3、transition属性设置在不同状态中，效果不同的
给默认状态设置，鼠标移入移出都有过渡效果
给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all：所有能过渡的属性都过渡；具体属性名如：width：只有width能过渡 |
| 过渡的时长 | 数字+s(秒) |
div{
width: 100px;
height: 100px;
background-color: red;
/* 过渡属性 */
/* 给默认状态设置，鼠标移入移出都有过渡效果 */
/* transition:width 2s; */
/* transition:all 2s; */
/* 不同属性有不同的过渡时间 */
transition:width 3s,background-color 5s;
}
div:hover{
/* height: 800px; */
width: 800px;
background-color: green;
/* 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
原因：因为鼠标移除之后：hover就不能选中元素了 */
/* transition:all 2s; */
}
项目前置
字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码
常见字符编码：
1、UTF-8:万国码，国际化的字符编码，收录了全球语言的文字（开发中统一使用）
2、GB2312: 6000+汉字
3、GBK: 20000+汉字
SEO三大标签（搜索引擎优化）
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
1、竞价排名
2、将网页制作成html后缀
3、标签语义化(在合适的地方使用合适的标签)
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
icon图标的设置
场景：显示在标签页标题左侧的小图标，习惯使用 .ico格式的图标
<link rel="icon" href="icon1.ico" type="image/x-icon">
版心
场景：把页面的主体内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容
版心常见类名：container、wrapper、w 等
.container{
width:1240px;
margin:0 auto;
}
CSS书写顺序
衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性)
不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯
注意：
开发中推荐多用类＋后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过3个
| 顺序 | 类别 | 属性 |
|---|---|---|
| 1 | 布局属性 | display 、position 、float 、clear、 visibility 、 overflow |
| 2 | 盒子模型+背景 | width 、height 、margin 、 padding 、 border 、background |
| 3 | 文本内容属性 | color、font 、text-decoration 、text-align 、line-height |
| 4 | 点缀属性 | cursor 、 border-radius 、 text-shadow 、 box-shadow |
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
