CSS知识点总结
CSS笔记-1
一、 初识CSS
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
1.注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
css的三种引入方式
/*1.style标签内部直接书写*/
<style>
h1 {
color: burlywood;
}
</style>
/*2.link标签引入外部css文件(最正规的方式 解耦合)*/
<link rel="stylesheet" href="css文件路径">
/*3.行内式(一般不用)*/
<h1 style="color: green">哈喽</h1>
CSS常见属性
color 文字颜色
font-size 字体大小
background-color 背景颜色
width 宽度
height 高度
'''
语法格式：
<style>
选择器 {
属性名：属性值
}
</style>
'''
二、CSS选择器
2.1 基本选择器
/*id选择器*/
#d1 { /*找到id是d1的标签 将文本颜色变成绿黄色*/
color: greenyellow;
}
/*类选择器*/
.c1 { /*找到class值里面包含c1的标签*/
color: red;
}
/*元素(标签)选择器*/
span { /*找到所有的span标签*/
color: red;
}
/*通用选择器*/
* { /*将html页面上所有的标签全部找到*/
color: green;
}
2.2 结构选择器
/*后代选择器*/
div span {
color: red;
}
/*div标签内所有span标签变成红色*/
/*儿子选择器*/
div>span {
color: yellow;
}
/*div内，第一级别下的span标签）*/
/*毗邻选择器*/
div+span {
color: aqua;
}
/*div标签本身，与之同级别，紧挨着的下面的第一个*/
/*弟弟选择器*/
div~span { /*同级别下面所有的span*/
color: yellowgreen;
}
/*div标签本身，与之同级别下面所有的span*/
在前端 我们将标签的嵌套用亲戚关系来表述层级
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
我们来结合HTML文件来进行理解.
<head>
...
<link rel="stylesheet" href="testcss.css"> <!--引入刚刚写的css文件-->
...
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>div span</span>
<span>div span</span>
</div>
<span>span</span>
<span>span</span>
<p>ppp</p>
<span>span</span>
</body>
最终效果：
1.因为有后代选择器，所以div下的span标签都应该为红色。（包括儿子孙子重孙等，不受层级限制）
2.后因还有儿子选择器，所以div下的儿子标签span由红色，转为了橘色
3.毗邻选择器，div标签同级别紧邻的下面第一个标签，也就是span标签，变成了蓝色
4.后因弟弟选择器，div标签同级别的所有span都变成绿色，所以毗邻选择器刚变成的蓝色，又要变成绿色
2.3 属性选择器
以上是通过id和位置关系的方式来进行选择的。
属性选择器可以实现的查找效果：
- 查找，含有某个属性。
- 查找，含有某个属性并且有某个值。
- 查找，含有某个属性并且有某个值的某个标签。
<!--html文件-->
<body>
<input type="text" username>
<input type="text" username="马六">
<input type="text" username="侯七">
<p username="张三">张三</p>
<div username="李四">李四</div>
<span username="王五">王五</span>
</body>
/*css文件*/
/*将所有含有属性名是username的标签背景色改为红色*/
[username] {
background-color: red;
}
/*找到所有属性名是username并且属性值是侯七的标签*/
[username='侯七'] {
background-color: orange;
}
/*找到所有属性名是username并且属性值是“马六”的input标签*/
input[username='马六'] {
background-color: wheat;
}
附：分组与嵌套
/*逗号表示并列关系,不加表示“儿子”*/
div,p,span {
color: yellow;
}
#d1,.c1,span {
color: orange;
}
2.4 伪类选择器
可以实现的效果：
- 标签展示、选中、点击、跳转之后颜色的配置
- input标签聚焦(选中输入框)之后的颜色
/*css文件*/
body {
background-color: aliceblue; /*背景色，颜色类似于灰白色这种*/
}
/*a标签访问之前的状态*/
a:link {
color: pink;
}
/*鼠标悬浮态，鼠标悬浮在a标签上面时，触发样式效果*/
a:hover{
color: blue;
}
/*鼠标点击不松开的状态 激活态*/
a:active{
color: #4e4e4e;
}
/*访问之后的状态*/
a:visited{
color: black;
}
/*去掉任何线，包括下划线*/
a {
text-decoration: none;
}
#d1 {
color: yellow;
font-size: 50px;
}
#d1:hover { /*鼠标移动到标签之后，颜色将变成红色*/
color: red;
}
input:focus {
color: pink; /*用户输入的文本将是pink粉色*/
background-color: yellow; /*当用户聚焦（选中input框）框内颜色变成黄色*/
}
<a href="https://www.baidu.com">点我有你好看呦</a>
<p id="d1">鼠标移过来我会变色</p>
输入<input type="text">
最终效果：
2.5 伪元素选择器
伪元素，顾名思义就是假的标签，那么它可以实现什么作用呢
作用：可实现在父元素内容的最前和最后添加伪元素
属性名：
::before 在父标签内容前面添加
::after 在父标签内容后面添加
示例代码：
/*补充：首字符开头大写*/
.box1:first-letter {
font-size: 30px;
color: orange;
}
/*在文本开头插入文本内容*/
.box1:before {
content: '中国';
color: red; /*由于写了首字符大写且橘色，所以插入之后也是开头大写变成橘色，除开头外，后面插入的内容为红色*/
}
/*在文本末尾插入文本内容*/
.box1:after {
content: '大学（北京）';
color: blue;
}
<!--伪元素选择器HTML代码-->
<div class="box1">地质</div>
展示效果：
2.5.1 补充
案例：
<style>
*{
margin: 0;
padding: 0;
}
div::before{
content: '从前从前';
}
div::after{
content: '爱你很久';
}
</style>
<!--
第一种，div换行。
-->
<body>
<div>
有个人
</div>
</body>
<!--
第二种，div不换行
-->
<body>
<div>有个人</div>
</body>
展示效果：
现象：
div标签内部换行了，就会导致伪元素选择器生成的标签，和本身的标签，这三个标签的内容直接出现了空格。
而div标签内部没有换行的，则挨在一起。
结论：
浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离
补充：选择器优先级
1.选择器相同，书写顺序不同时。
就近原则:谁离标签更近就听谁的2.选择器不同时
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
如：
<p id="d3" class="test1" style="color: yellowgreen">选择器优先级</p>
直接在行内书写color: yellowgreen时，不管下面怎么调样式，该p标签始终是黄绿色。
/*最后该P标签的颜色还是黄绿色*/
#d3 {
color: yellow;
} /*优先级低于行内*/
.test1 {
color: orange;
} /*优先级低于行内、低于ID*/
2.6 结构伪类选择器
可实现根据元素在HTML中的结构关系来查找标签
格式：
子标签：属性值{}
值：
- X：first-child{} 匹配父元素中的第一个子元素，并且是X元素。
- X：last-child{} 匹配父元素中最后一个子元素，并且是X元素。
- X：nth-child(n){} 匹配父元素中第N个子元素，并且是X元素。
- X：nth-last-child(n){} 匹配父元素中倒数第N个子元素 ，并且是X元素。
代码如下：
<!--
寻找P标签的父标签（div）中，元素位置为正数第3个元素，并且该元素要是p。
-->
<style>
p:nth-child(3){
background-color: pink;
}
</style>
<div>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
<p>第4个</p>
<p>第5个</p>
<p>第6个</p>
</div>
最终效果：
上面提到了nth-child(n)，那么这个N除了指定数字以外还可以怎么使用呢
通过N可以组成常见的公式
偶数：2n、even
奇数：2n+1、2n-1、odd
4的倍数：4n
找到前5个：-n+5
找到从5个往后：n+5 （包括第五个）
示例代码：
<!--
将第三个和第6个的背景色变成粉色
-->
<style>
p:nth-child(3n){
background-color: pink;
}
</style>
2.7 !important
作用：提升指定样式规则的应用优先权，即!important提供了一个增加样式权重的方法，让浏览器首选执行这个语句。
三、字体和文本样式
1.字体样式
font-size 调整字体字号
font-weight 调整粗细
font-style 调整是否倾斜
font-family 调整字体，例如宋体、微软雅黑
3.1 调整字号
<head>
<title>Title</title>
<style>
p {
font-size: 30px;
}
</style>
</head>
<body>
<!-- 默认字号是16 -->
<p>段落文字</p>
</body>
<!--
类似于h1、h2这种，给段落文字放大加粗。
谷歌浏览器默认文字大小是16px，单位px需要设置
-->
3.2 调整文字粗细
<head>
<title>Title</title>
<style>
div {
/* 加粗 */
font-weight: 700;
}
h1 {
/* 不加粗 */
font-weight: 400;
}
</style>
</head>
<body>
<div>这是div</div>
<h1>一级标题</h1>
</body>
</html>
<!--
取值：
1.正常：normal 或者 400
2.加粗：bold 或者 700
-->
3.3 倾斜文字
<head>
<style>
div {
/* 倾斜 */
font-style: italic;
}
em {
/* 正常的, 不倾斜 */
font-style: normal;
}
i{
font-style: normal;
}
</style>
</head>
<body>
<div>我是div看我斜不斜</div>
<em>看我斜不斜就完事了</em>
<i>看我斜不斜就完事了</i>
</body>
<!--
取值：
1.正常：normal
2.倾斜：italic
em标签和i标签，都是让文字倾斜的标签。
实验结果为：依据css的样式为准
当标签为文字倾斜标签时，又通过CSS进行样式调整，那么最终结果依据CSS的为准
-->
3.4 调整字体
<head>
<style>
div {
/* font-family: 宋体; */
/* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 */
/* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */
font-family: 微软雅黑, 黑体, sans-serif;
}
</style>
</head>
<body>
<div>
你看我是什么字体
</div>
</body>
<!--
常见字体系列
➢ 无衬线字体（sans-serif）
1. 特点：文字笔画粗细均匀，并且首尾无装饰
2. 场景：网页中大多采用无衬线字体
3. 常见该系列字体：黑体、Arial
➢ 衬线字体（serif）
1. 特点：文字笔画粗细不均，并且首尾有笔锋装饰
2. 场景：报刊书籍中应用广泛
3. 常见该系列字体：宋体、Times New Roman
➢ 等宽字体（monospace）
1. 特点：每个字母或文字的宽度相等
2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
3. 常见该系列字体：Consolas、fira code
-->
3.5 文本颜色
<style>
p {
/* 层叠性: 后面的覆盖前面的属性 */
/* 覆盖 */
color: red;
color: blue; /*最后为蓝色*/
}
</style>
<!--
样式重叠按照下面的为准
-->
<!--
可利用微信QQ截图获取到颜色的rgb值，随后可以rbg来设置样式
-->
<style>
#d1 {
color: rgb(173 43 38);
}
</style>
<style>
#d1 {
color: #87ceeb;
}
</style>
3.6 font复合样式
<style>
#d1 {
font: italic 100px "微软雅黑 Light" ;
/*倾斜 放大 字体*/
/* 一个属性冒号后面书写多个值的写法 -- 复合属性 */
}
</style>
<div>
<p id="d1">
变大变斜变字体
</p>
</div>
3.7 文字居中
<!--
文字居中 text-align: center
但这仅仅只能实现文字左右居中，那么上下居中要怎么操作呢？
-->
<style>
#d1 {
width: 400px;
height: 400px;
background: red;
text-align: center; /*居中，但是仍置顶*/
line-height: 400px; /*设置行高等于自身高即可*/
font-size: 80px;
}
</style>
<div>
<p id="d1">居中文字</p>
</div>
注意：
- 当div标签，内部嵌套的span标签时，如果想要让span标签的文件在div中水平居中，那么需要将text-align ： center属性作用于父级，而非span
3.7.1 line-height与height的区别
'''
可以把P标签和文字当成是两个框，文字框的高度默认都是文字的高，文字框的宽度默认也都是文字的宽，这样做的好处就是文字的上下起码是居中的。也就是说，当P标签这个框发生了改变之后，文字框只要变得和P标签一样大，那么上下就是居中的，随后使用text-align:center来实现左右居中。
'''
<p style="height: 100px">文字</p>
设置height高度，可以理解为是把“P标签”给调大了，我们的文字还是在右上角。
<p style="line-height: 100px">文字</p>
设置line-height行高，可以理解为是把“文字”所要占用的地方给扩大了（文字的上下行间距扩大了），然后就把P标签给“撑”起来了，因为文字始终是要在自己所在的空间内，所以文本内容始终保持上下居中的。
3.7的案例中，实现居中就是因为先利用的center实现文本左右居中，然后将文本内容所要占用的空间，与P标签的空间一致，所以就实现了上下居中。
3.8 首行缩进
属性名：text-indent
取值：
数字+px
数字+em （推荐：1em = 当前标签的font-size的大小）
例：
<style>
p{
text-indent: 37px;
}
</style>
或：
<style>
p{
text-indent: 2em;
}
</style>
<!--
推荐使用em，需要缩进几个字，就写几个em
-->
3.9 文本水平对齐
属性名：text-align
取值：
left 左对齐
center 居中对齐
right 右对齐
<style>
p{
text-align: center;
}
</style>
3.10 删除下划线
属性名：text-decoration
取值：
underline 下划线
line-through 删除线（中间带杠）
overline 上划线
none 无装饰线（a标签默认会有下划线）
<style>
a{
text-decoration: none;
}
</style>
<div>
<!--取消a标签的默认下划线-->
<a href="https://www.baidu.com" target="_blank">点我，去百度。</a>
</div>
3.11 练习案例
3.11.1 新闻案例
实现下图的案例：
CSS代码
/* 给div标签划定区域，不然文字会铺满全屏 */
div {
width: 800px;
height: 600px;
margin: 0 auto; /*盒子模型，稍后补充*/
}
/* 类选择器设置段落居中 */
.center {
text-align: center;
}
/* 添加颜色样式，以及字体是否加粗 */
.color1 {
color: #808080;
}
.color2 {
color: #87ceeb;
font-weight: 700;
}
/* 取消a标签的默认下划线 */
a {
text-decoration: none;
}
/* 段落内容首行缩进 */
.suojin {
text-indent: 2em;
}
HTML代码
<div>
<h1 class="center">新闻标题新闻标题</h1>
<p class="center">
<span class="color1">2022-07-21 20:46</span>
<span class="color2">**新闻</span>
<a href="">查看评论</a>
</p>
<hr>
<p class="suojin">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
<p class="suojin">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
<p class="suojin">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
<p class="suojin">新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
</div>
3.11.2 物品卡片案例
<style>
/* 可以通过给body标签设置背景颜色完成设置浏览器的背景颜色 */
body {
background-color: #f5f5f5;
}
.box {
width: 250px;
height: 250px;
background-color: #fff;
/* 让内部的img和文本类型的元素水平居中 */
margin: 0 auto;
text-align: center;
}
.pic {
width: 160px;
margin-top: 20px;
margin-bottom: 20px;
}
.product {
height: 25px;
font-size: 14px;
}
.info {
height: 30px;
font-size: 12px;
color: #cccccc;
}
.price {
font-size: 14px;
color: #ffa500;
}
</style>
<body>
<div class="box">
<img src="./images/GPU.jpg" alt="" class="pic">
<div class="product">3090Ti显卡</div>
<div class="info">男人的浪漫</div>
<div class="price">￥19999元</div>
</div>
</body>
最终效果：
四、背景
4.1 背景色
属性名： background-color (可直接打bgc，然后tab补全)
值：颜色 | rgb() | rgba() | 16进制编码
附：rgba()中的a表示透明度，其他的参数都和rgb()都一样。
附：颜色对照表：https://tool.oschina.net/commons?type=3
通过使用rgba来设置透明度，可以透过盒子看到背景色背景图等。
<style>
div{
width: 80px;
height: 80px;
background-color: red;
/*
background-color: rgb(172 62 56);
background-color: #00bbaa;
*/
}
</style>
<body>
<div>
背景色
</div>
</body>
4.1.1 去掉背景色（背景透明）
属性名：background-color
值：transparent
.navbar-default { background-color: transparent; }
4.2 背景图
背景图片属性名：background-image (bgi补全)
值：background-image ： url(“路径”)
<style>
div{
width: 300px;
height: 300px;
background-image: url('');
background-repeat: no-repeat;
}
</style>
默认为平铺，当图片为200x200，而你的div大小为800x800，那么默认会向x轴y轴去平铺。
调整平铺：
-
属性名： background-repeat (bgr)
-
取值：
(1) repeat 默认，平铺
(2) no-repeat 不平铺
(3) repeat-x 沿着水平方向（y轴）平铺
(4) repeat-y 沿着垂直方向（y轴）平铺
4.2.1 调整背景图的位置
通常配合精灵图使用，详情见4.2.3
属性名： background-position (bgp)
-
取值：
-
方位名词
left左边、center水平中心、right右边
top顶部、center垂直中心、bottom底部
-
坐标
如：background-position ： 50px 80px;
（沿着水平方向，向右移动50px，沿着垂直方向，向下移动80px。）
在调整背景图位置时，以图片的左上角为坐标轴的顶点，背景图向左为负数，向上为负数。
第一个值为水平方向，第二个值为垂直方向
-
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.HhsBeNjFWKkOcMPtumF_ZAAAAA?pid=ImgDet&rs=1');
background-repeat: no-repeat;
/*可通过坐标来设定位置*/
/*background-position: 10px 100px;*/
/*此处可以省略一个center，只写一个。*/
background-position: center;
}
</style>
效果展示：
4.2.2 复合属性
属性名：background
值： 背景颜色、路径、是否平铺、位置
除了位置的两个参数不能拆分以外，其他的可任意变动位置。
<style>
div{
width: 400px;
height: 400px;
background: center pink url('https://tse3-mm.cn.bing.net/th/id/OIP-C.HhsBeNjFWKkOcMPtumF_ZAAAAA?pid=ImgDet&rs=1') no-repeat ;
}
</style>
4.2.3 CSS精灵图
1.什么是CSS精灵图？
'''
一个页面中，往往存在着很多的小图，而这些小图如果每次都挨个请求的话，速度啊服务器性能耗损啊，这些多多少少都会有些影响。
那么CSS精灵图，就是将多个小图整个成一个大图。
然后建立一个与图片宽高一样的盒子，通过更改背景图位置的方式，来找到精灵图中对应的小图，然后展示到页面中。
'''
4.2.4 背景图调整大小
属性名： background-size
语法： background-size ：宽度 高度
取值：
- 数字+px
- 百分比
- contain 将背景图等比例缩放，当盒子的宽或高与图片不等比例时，会有留白
- cover 覆盖，将背景图等比例缩放，直到刚好填满没有空白，拉伸覆盖。
五、元素显示模式转换
一、常见的元素显示模式：
块级元素
独占一行，可设置宽高（div、p、h标签等）
行内元素
一行可显示多个，不可设置宽高（a、span标签等）
行内块元素
一行可以显示多个，可设置宽高（input、select标签等）
二、元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
display : block 转换成块级元素
display : inline-block 转换成行内块元素
display : inline 转换成行内元素
六、CSS特性
6.1 继承性
子标签可继承父标签的属性。
可继承的属性为，文字字体、文字样式等。
<style>
div{
color: pink;
font-size: 30px;
}
</style>
<body>
<div>
div
<span>div>span</span>
</div>
</body>
<!--
span标签继承了div标签的样式，所以颜色和大小应该都一样。
-->
打开浏览器验证：
注意：a标签不会继承父标签的属性
6.2 层叠性
特性：
给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上。
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效。
注意点：
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。
七、盒子模型
一个标签可以理解为就是一个盒子，一个盒子又分了好几层。
1.边框border
相当于盒子边框
2.内边距padding
边框距离内容的距离（盒子内部的填充泡沫）
3.外边距margin
盒子与盒子之间的距离（两个盒子之间的距离）
7.1 边框
属性名：border
值：边框像素大小 边框种类 颜色
1.边框像素大小，如：3px、1px等。
2.边框种类：实线solid、虚线dashed、点线dotted
3.颜色：如：red、#ffff
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
border: 2px solid red;
/*
实线solid、虚线dashed、点线dotted
*/
}
</style>
按照方向加边框
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/*顶部*/
border-top: 2px dashed red;
/*右侧*/
border-right: 4px solid green;
/*底部*/
border-bottom: 3px dashed yellow;
/*左侧*/
border-left: 2px dotted blue;
}
</style>
7.2 内边距
作用：设置边框与内容区域之间的距离，相当于现实生活中盒子里的填充泡沫，泡沫越厚，那么里面的实物就越远离盒子边框。
属性名：padding
值：直接跟像素，但是要分情况。
情况一：只有一个值，如10px，那么上下左右都设置为10px
情况二：有两个值，如10px 20px，那么上下为10，左右为20
情况三：有三个值，如10px 20px 30px，那么上为10，左右为20，下为30
情况四：有四个值，那么将按照顺序，顺时针由上、右、下、左的顺序，进行排列。
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/*设置padding为30px（一圈都是30）*/
padding: 30px;
/*
设置padding左右为30px，上下为10px。
padding: 10px 30px;
*/
}
</style>
按照方向进行设置
直接padding-方位名词
顶部padding-top，底部padding-bottom，左侧padding-left，右侧padding-right
7.3 外边距
属性名：margin
值：也是直接跟像素值，也是要分情况，与padding一致。
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
margin: 30px;
}
</style>
<body>
<div>文本内容1</div>
<div>文本内容2</div>
</body>
<!--
可以看到最后两个盒子的前后左右距离都为30px
-->
顶部：margin-top
底部：margin-bottom
左侧：margin-left
右侧：margin-right
7.3.1 版心居中
我们在逛淘宝京东的时候，会发现，他们的页面都是居中在浏览器上的，这个是怎么做到的呢。
答：利用margin。
margin通过调整左右的外边距，来使div卡在页面中间，进而实现版心居中的效果。
一般将设置版心居中的类名叫做 wrapper，这样后续有标签需要版心居中时，可以直接调用wrapper
/*
假设，当前浏览器全屏的大小为1500，我们想居中的盒子宽为1000，那么左右margin应该为250。
但是这样做也很麻烦，手机端访问也不方便，所以左右的margin为相同时，可以简写为auto
*/
div {
width: 800px;
height: 400px;
background-color: pink;
margin: 0 auto;
}
7.4 内减模式
需求：要一个300*300的盒子，边框为10px，内边距为20px
<style>
div{
width: 300px;
height: 300px;
border: 10px solid red;
padding: 20px;
}
</style>
展示效果如下：
我们可以看到最终div盒子的大小为360*360
原因是因为border和padding会撑大盒子，所以我们的解决方案可以为300-(border+padding)*2=240
<!--
这样就是正常的
-->
<style>
div{
width: 240px;
height: 240px;
border: 10px solid red;
padding: 20px;
}
</style>
除了直接加减法之外，还有一种比较智能的方法。
上述的解决方法为“手动内减”，缺点很明显，那就是麻烦，项目中计算量大。
解决方法2：“自动内减”
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
border: 20px solid green;
padding: 20px;
/*
自动进行减法
*/
box-sizing : border-box
}
</style>
7.5 导航条案例
需求：实现以下效果。
<style>
div{
background-color: #ffffff;
height: 40px;
border-top: 3px solid orange;
border-bottom: 1px solid #edeef0;
}
div a{
width: 80px;
height: 40px;
color: black;
font-size: 16px;
text-decoration: none;
line-height: 40px;
display: inline-block;
/*background-color: pink;*/
text-align: center;
}
div a:hover{
color: orange;
background-color: rgb(236 238 239);
}
</style>
<body>
<div>
<a href="">首页</a>
<a href="">分类</a>
<a href="">购物车</a>
<a href="">订单</a>
</div>
</body>
思路：
1.由外到内观察，把这个导航条看成是一个大的div盒子，顶部边框与底部边框先渲染出来。
2.添加A标签，并把显示模式转为行内块，随后去掉下划线，居中，悬浮态。
7.5.1 优化
上述代码还不够灵活，比如将A标签的订单，改成用户个人信息时就成了这样。
问题出现的原因分析：
我们将a标签的宽给写死了，当超过了80px就会变成这样。
我们优化的第一步，先来看看把a表的宽度样式删了看看
<style>
........
div a{
/*width: 80px;*/
height: 40px;
color: black;
font-size: 16px;
text-decoration: none;
line-height: 40px;
display: inline-block;
text-align: center;
}
........
</style>
我们发现，去掉A表标签的宽度样式之后，内容都挨的太近了。
所以我们下一步只需要调整下左右的内边距即可。
<style>
div a{ /*后代选择器*/
padding: 0 15px;
height: 40px;
color: black;
font-size: 16px;
text-decoration: none;
line-height: 40px;
display: inline-block;
/*background-color: pink;*/
text-align: center;
}
</style>
查看效果：
可以发现，最后不管是再长，也都不会再出现之前这种情况。
因为改进之后，a标签的宽度全靠文内内容来撑起来的，而我们又通过调整内边距，实现了间距。
7.6 新闻案例
实现以下效果：
CSS代码：
* {
padding: 0;
margin: 0;
}
.box {
width: 800px;
height: 500px;
margin: 17px;
padding: 15px;
border: 1px solid #cccccc;
box-sizing: border-box;
}
ul li a{
text-decoration: none;
color: #666666;
font-size: 18px;
}
ul li {
list-style: none;
border-bottom: 1px dashed #cccccc;
text-indent: 2em;
padding: 10px 0;
}
h1 {
border-bottom: 1px solid #cccccc;
padding-bottom: 8px;
font-size: 29px;
margin: 0;
}
<div class="box">
<h1>今日新闻</h1>
<ul>
<li><a href="">2022-7-21 21:43:08 新闻1新闻1新闻1新闻1新闻1新闻1新闻1新闻1</a></li>
<li><a href="">2022-7-21 21:36:25 新闻2新闻2新闻2新闻2</a></li>
<li><a href="">2022-7-21 21:19:00 新闻3新闻3新闻3新闻3新闻3新闻3</a></li>
<li><a href="">2022-7-21 21:02:12 新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4新闻4</a></li>
<li><a href="">2022-7-21 20:47:49 新闻5新闻5新闻5新闻5新闻5新闻5新闻5</a></li>
<li><a href="">2022-7-21 20:45:14 新闻6新闻6新闻6</a></li>
<li><a href="">2022-7-21 20:41:24 新闻7新闻7新闻7新闻7新闻7新闻7新闻7新闻7</a></li>
<li><a href="">2022-7-21 20:32:07 新闻8新闻8新闻8新闻8新闻8新闻8新闻8新闻8新闻8</a></li>
<li><a href="">2022-7-21 20:30:17 新闻9新闻9新闻9新闻9新闻9新闻9</a></li>
</ul>
</div>
八、浮动
作用：用于布局，让垂直布局的盒子变成水平布局。
属性名：float
值：left right
浮动的特点：
一、浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中。
二、浮动元素比标准流高半个级别，可以覆盖标准流中的元素
三、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
四、浮动元素有特殊的显示效果
1.一行可以显示多个 2.可以设置宽高
8.1 验证浮动的特点
通过代码验证浮动的特点：
<style>
.test1 {
width: 200px;
height: 100px;
background-color: pink;
}
.test2 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.test3{
width: 1200px;
height: 100px;
background-color: green;
}
</style>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
当前效果：
当前是垂直布局，那么我们怎么利用浮动将粉色和蓝色这两个盒子呈水平布局呢。
添加 float属性
<style>
.test1 {
width: 200px;
height: 100px;
background-color: pink;
}
.test2 {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
.test3{
width: 1200px;
height: 100px;
background-color: green;
}
</style>
当前，我们将蓝色盒子添加了浮动属性，最终的效果为：
可以发现，蓝色盒子并没有实现我们想要的效果，反而绿色盒子倒是“飞”到了粉色盒子的下面，被蓝色盒子压着。
我们将粉色盒子也添加float试试。
<style>
.test1 {
float: left;
width: 200px;
height: 100px;
background-color: pink;
}
.test2 {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
.test3{
width: 1200px;
height: 100px;
background-color: green;
}
</style>
通过上述代码我们可以发现：
一、添加了浮动属性的标签要是两个及以上的，因为第二个以后添加浮动的标签会跟随者上次浮动的标签向左向右浮动，验证了浮动特点的第三条，浮动找浮动
二、添加了浮动属性的标签会飘到空中不再占用位置，所以绿色盒子会从跑到上面，验证了第一条。
三、飘在空中的粉色和蓝色盒子确实盖住了绿色盒子重叠的部分，验证了第二条。
四、第四条的验证在下列的代码中。
验证浮动特点的第四条（1.一行可以显示多个 2.可以设置宽高）
<style>
.test {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.test2 {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<span class="test1"></span>
<span class="test2"></span>
</body>
效果：
浮动元素确实具有一行可以显示多个 、可以设置宽高的特点
那么浮动之后，显示模式就成了行内块。
8.2 浮动案例1
需求：实现以下效果
<style>
*{
margin: 0;
padding: 0;
}
.header {
height: 40px;
background-color: #4f4f4f;
color: #cccccc;
}
.nav {
width: 1226px;
height: 560px;
margin: 0 auto;
}
.nav_top {
height: 100px;
width: 1226px;
background-color: #ffc0cb;
/*margin: 0 auto;*/
}
.nav_left {
width: 234px;
height: 460px;
background-color: #ffa500;
float: left;
}
.nav_right {
width: 992px;
height: 460px;
background-color: #87ceeb;
float: left;
}
</style>
<body>
<div class="header">头部导航条</div>
<div class="nav">
<div class="nav_top">导航条</div>
<div class="nav_left">分类明细</div>
<div class="nav_right">产品大图</div>
</div>
</body>
8.3 浮动案例2
实现以下效果：
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1226px;
height: 614px;
margin: 0 auto;
}
.left {
width: 234px;
height: 614px;
background-color: #800080;
float: left;
}
.right {
list-style: none;
}
.right li{
height: 300px;
width: 234px;
background-color: #87ceeb;
float: left;
margin: 0 0 14px 14px;
}
/*
可选操作：
通过选择器选中4的倍数，也就是第四个和第八个，将右侧的外边距取消掉
通过选中第五个元素往后(包括第五个)，将底部的外边距去掉
*/
.right li:nth-child(4n){
margin-right: 0;
}
.right li:nth-child(n+5){
margin-bottom: 0;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div>
<ul class="right">
<li>手机</li>
<li>电脑</li>
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>包包</li>
<li>女鞋</li>
<li>男鞋</li>
</ul>
</div>
</div>
</body>
8.4 浮动案例3
实现以下效果：
<style>
* {
margin: 0;
padding: 0;
}
.nav {
list-style: none;
}
.nav li,a{
float: left;
width: 80px;
height: 50px;
background-color: pink;
text-align: center;
line-height: 50px;
text-decoration: none;
color: white;
font-size: 16px;
}
.nav li a:hover{
background-color: #008000;
}
</style>
<div>
<ul class="nav">
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
<li><a href="">导航5</a></li>
<li><a href="">导航6</a></li>
<li><a href="">导航7</a></li>
<li><a href="">导航8</a></li>
</ul>
</div>
九、一到八章节问题解决方案
9.1 外边距合并
现象：垂直布局的块级元素，上下的margin会合并
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 50px;
}
</style>
<div>
文字
</div>
<div>
文字
</div>
展示结果：
可以发现，下面那个div的外边距也是50，那么两个标签应该是50+50=100的
但最后结果是两者重叠了还是50。
解决方法：
- 只给其中一个盒子设置margin即可。
9.2 外边距塌陷
现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，从而导致父元素一起往下移动。
解决方法：
给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置 overflow：hidden
转换成行内块元素
设置浮动
上述代码中，是想把绿色的盒子往下走100px，可是最终的结果是，它把父标签也跟着拽了下来。
所以需要给父标签加 border、padding属性，但是如果不需要加边框，不想要行内距，可以按照下面两种方法。
将子标签转成行内块、或者父标签添加 overflow: hidden; 属性。
9.3 清除浮动带来的影响
因为浮动之后的标签是“在空中”的，所以当一个父div标签没设高，且内部的两个子div都浮动了，那么父div将不会被子div撑起来。
当遇到一些不方便给父标签添加高时，可以给父标签添加overflow: hidden; 属性，就像外边距塌陷一样。
<style>
.box1 {
width: 300px;
/*height: 300px;*/
background-color: pink;
overflow: hidden;
}
.box2 {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: red;
float: right;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
展示效果：
可以看到，父标签（box1）并没有设置高度，但是通过给了overflow: hidden 使它能够被浮动的子标签给撑开，这样页面布局就不会混乱。
9.4 去除列表标签前面的点
'''
添加属性list-style
'''
list-style: none;
9.5 调节图片垂直对齐方式
.img {
vertical-align: middle;
}
十、定位
10.1 相对定位
属性名：position （por补全）
值：relative
格式：
<style>
.box2 {
position: relative;
right: 100px; /*定位后标签，距离原本标准流的位置，右侧还差100像素就与原标准流右侧重叠了。*/
bottom: 50px; /*定位后标签，距离原本标准流的位置，底部还差50像素就与原标准流的底部重叠了。*/
/*left: 50px;*/ /*距离标准流的位置，左侧还差50像素*/
/*top: 50px;*/ /*距离标准流的位置，顶部还差50像素*/
}
</style>
案例，当我们需要将一个200x200的盒子利用定位，将它定位在一个300x300的盒子内部时，应该使用left还是right，使用top还是bottom
分析：定位后的盒子，距离标准流，顶部差50像素、左侧差50像素就与标准流的位置重叠了，就回到了原标准流的位置。
那么这里，我们的相对定位就应该采用left和top
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 300px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: skyblue;
position: relative;
left: 50px;
top: 50px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
<span>浮动浮动浮动浮动浮动浮动</span>
</div>
</body>
展示效果：
'''
注意事项：
'''
1. 定位之后的标签，会覆盖原有标签的内容。
2. 当上下左右同时出现时，以左和下为准，最终实际效果为标签向右向下移动。
3. 定位移动之后，原来的位置不会被占用。
10.2 绝对定位
属性名：position （poa补全）
值：absolute
特点：
-
脱标，不占位.
-
相对于父标签的位置进行定位，父标签需要先定位，当父标签没有定位时，将按照浏览器窗口进行定位。
-
查找父级的方式：就近查找，如果查找不到定位过的父级，那么就按照浏览器窗口。
-
一般情况下都是父级相对定位，子级绝对定位。
-
10.2.1 当父标签未定位
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 400px;
width: 400px;
background-color: pink;
}
.son {
width: 300px;
height: 300px;
background-color: red;
}
.grandson {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
right: 50px;
bottom: 50px;
}
</style>
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
展示效果：
因为父标签、爷标签、太爷爷标签一直到body都没有进行定位，所以默认就按照浏览器窗口去进行定位。
因为right为50，bottom为50。
所以就代表着class为grandson的这个标签，右侧边框距离浏览器的右侧边框还差50像素就重叠了，底部也差50像素
10.2.1 正确用法
先给父标签添加定位属性，相对绝对都可以，只要不给left、top这些属性就好。
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 400px;
width: 400px;
background-color: pink;
position: relative;
}
.son {
width: 300px;
height: 300px;
background-color: red;
}
.grandson {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
right: 50px;
bottom: 50px;
}
</style>
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
因为要进行定位的是蓝色盒子，所以就去找父标签看是否有定位，结果红色盒子没有，继续找，发现粉色盒子有。
那么就基于粉色盒子进行绝对定位。
right: 50px; bottom: 50px; 表示定位后的盒子，右侧差50像素，底部差50像素，就和粉色盒子的两条边对齐了。 所以最后呈现出的效果，如果所示。
10.2.3 实现盒子居中
margin：auto可以实现居中，那如何利用定位来实现呢。（注：margin auto不可以与定位同时出现，auto不生效）
思路，先找到中间点。
做法：水平垂直都取50%
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 400px;
background-color: skyblue;
position: absolute;
left: 50%;
top: 50%;
}
</style>
<div class="box"></div>
展示效果：
可以看到，中间点已经找到了，只是盒子并未居中，剩下的只需要将盒子向左向上缩进盒子的一半即可。
盒子间调整距离使用的是margin，所以我们采用margin-left和marigin-top即可，这样可以保证浏览器缩小窗口还能居中。
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 400px;
background-color: skyblue;
position: absolute;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -200px;
}
</style>
<div class="box"></div>
效果：
10.2.4 transform位移
什么情况下需要用到？
- 9.2.3的案例中，虽然我们实现了盒子居中，可是当有一天我们居中的盒子要进行变动，那么我们的margin也要随之变动。
- 可利用transform位移，来帮助我们做计算，类似于本文7.4中的内减模式
transform : translate(-50%,-50%)
<style>
.box {
width: 400px;
height: 400px;
background-color: skyblue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
展示效果略，同上。不管怎么改盒子的宽高，都不会影响居中
10.2.5 案例-1
一、假设现在有个需求，以百度飞桨课程，现在想在课程的右上角加上HOT热门的标志，应该要怎么写。
子标签添加绝对定位，绝对定位脱标不影响布局。
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.box2 {
width: 30px;
height: 20px;
background-color: red;
position: absolute;
right: -7px; /*凸出去要用-7*/
top: 7px; /*没有凸出去，所以还是正数*/
}
</style>
<div class="box">
<div class="box2"></div>
</div>
这样就可以实现类似的效果。
10.2.6 案例-2
底部半透明遮罩，类似于下面的效果：
思路：
- 底部是半透明的，那么首先要想到的就是bgc属性中的rgba这个值，可以设置透明度
- 默认肯定是在父标签的顶部而不是底部，所以利用绝对定位即可，但父标签需要进行定位
这里需要注意一点，底部的盒子必须加宽度，否则半透明遮罩在无文字内容时将不显示，有文字内容时仅文字部分
<style>
.box1 {
margin: 0 auto;
position: relative;
width: 600px;
height: 400px;
background-color: black;
}
.box2 {
width: 600px;
height: 100px;
background-color: rgba(255,228,225,0.5);
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div class="box1">
<div class="box2">内容内容</div>
</div>
10.3 固定定位
应用场景：京东首页，顶部导航条不管怎么滚动滚轮，导航条始终位于浏览器窗口的顶部位置。
效果图如下：
属性名还是：position
固定定位：fixed
特点：
- 脱标，不占位
- 改变位置参考的是浏览器窗口
- 具备行内块的特点，可加宽高，当没有宽时，按照内容的宽度，没有内容时，盒子不显示。
<style>
.box2 {
width: 100px;
height: 30px;
background-color: pink;
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p>
<p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p>
<p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p> <p>111</p>
<!--省略-->
</div>
10.4 Z-index层级权重
作用：设置层级权重，权重越高，就会在图层的上面
先看看下列代码：
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 50px;
top: 50px;
}
.box2 {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
bottom: 70px;
left: 30px;
}
</style>
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
查看效果：
默认情况下，定位的盒子后来者居上，也就是说，类为box2的盒子（蓝色）会改在橙色盒子的上面
那么如何设置，就让橙色盒子盖子上面呢？
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 50px;
top: 50px;
/*设置权重为1，默认是0*/
z-index: 1;
}
</style>
设置z-index属性，值为1，因为默认都是0，当设置了为1时，就可以实现效果了
展示效果：略，最终的效果就是橙色的盒子，压在了蓝色盒子的上面
十一、装饰
11.1 vertical-align垂直对齐
浏览器把行内和行内块标签当做文字处理，默认基线对齐。
基线可以理解为是英文练习册中的四线格，我们在书写单词时，默认按照第三行对齐的，ghklj这些单词会往上凸出来点，或者往下凸出来点。
浏览器默认按照的是，baseline基线对齐，所以就会导致出现一些问题，需要去调整为top或者middle或者bottom
结合案例进行研究
<style>
p img {
height: 200px;
}
</style>
<div>
<p>
<img src="https://static.fotor.com.cn/assets/projects/pages/e99b88e0-c253-11ea-9e05-3fa28dc23426_139795fe-76ea-4f1c-8333-5a3cb569c98a_thumb.jpg" alt="">
<input type="text" >
</p>
</div>
展示效果：
现象：input框与图片并不是对齐的
如何解决行内块与文字、图片之间的对齐问题？ 将默认的基线对齐改为middle、top、bottom。
属性名： vertical-align
值： bottom 底部对齐
middle 居中对齐
top 顶部对齐
另外一种解决方法：
既然浏览器是把行内以及行内块标签当成了文字处理，那么我们可以直接将标签的显示模式改成块级标签。
11.1.1 图片居中
先来看看父子级标签如何实现文字居中
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
line-height: 400px;
}
</style>
<div class="father">
文字
</div>
文字居中的话，通过设置行高的方式，实现文字在盒子中居中的效果，既然浏览器会把图片当做文字来处理，那么line-height是否可以让图片实现垂直居中呢。
当我们将文字换成图片之后，展示效果如下：
可以发现，顶部是没有对齐的，那么先vertical-align调整下。
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
line-height: 400px;
/*既然浏览器把图片当成文字去处理，那么可以使
用文本居中的方式，来实现图片的水平居中
注意，需要将该属性写在父类，然后子类继承
直接给父类text-align属性是不生效的*/
text-align: center;
}
div img {
/*调整对齐方式，实现垂直居中*/
vertical-align: middle;
}
</style>
<div class="father">
<img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8326cffc1e178a82097d06e0f003738da977e829.jpg" alt="">
</div>
最终效果：
11.2 光标类型
鼠标光标类型分为几种：
- 小箭头，默认。
- “工”的形状，提示用户可复制。
- “十”字光标，提示用户可移动。
- 小手效果，提示用于可以点击。
如下图所示：
属性名：cursor
值：
pointer 可点击提示（小手）
text 可复制提示（工字型符号）
move 可移动提示（十字形符号）
代码如下：
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
/*cursor: pointer;*/
/*cursor: text;*/
/*cursor: move;*/
}
</style>
<div>首页</div>
11.3 圆角边框
作用： 可将盒子的四个尖角改成圆角，使其圆润起来，提升用户体验。
属性名： border-radius
值： 数字+px，或者百分比%
注意：属性名取值为圆角的半径值，所以当border-radius的值，与盒子的宽高值的一半，都相等时，那就成了圆形。
（因为为圆角半径，所以直径就和盒子宽高一样了，为了简便，可以使用50%）
测试代码：
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
border-radius: 80px;
}
</style>
<body>
<div></div>
</body>
展示效果：
11.3.1 “胶囊形状”
如果要实现以下形状应该怎么弄呢？
“胶囊”类型的，border-radius的值，需要取盒子最短边的一半，即可。
所以在这个案例中，假设盒子的高为200px，宽为400px，那么borde-radius的值应为200÷2=100px
11.4 overflow
'''
9.2和9.3章节中，有使用到。
在上述案例中呢，我们使用overflow属性的hidden值，来解决外边距塌陷（子标签拖拽父标签），以及浮动的子标签无法撑开没有高度的父标签等问题。
'''
那么这个overflow，到底是什么呢，都有那些值，有什么含义呢。
属性名：overflow
值：
visible 默认值，溢出部分可见
hidden 溢出部分隐藏（最常用）
scroll 无论是否溢出，都显示滚动条
auto 当溢出时，显示滚动条
默认溢出现象
溢出隐藏：
无论是否溢出都有滚动条：
当内容超出时，才展示滚动条：
11.5 隐藏标签
两种方法：
- 第一种，占位隐藏 visibility：hidden
- 第二种，不占位隐藏 display：none
11.6 元素整体透明度
作用：
- 让某元素整体，包括内容一起变透明。
属性名：opacity
值：0-1之间
1：表示不透明
0：表示透明
0.5：半透明
（只要是0-1之间的就好，也可是0.7，70%透明度）
示例代码：
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
opacity: 0.5;
}
</style>
<body>
<div>111</div>
</body>
最终效果：
11.7 文字阴影
可实现什么效果：
如何实现：
属性名： text-shadow
参数：
- h-shadow : 必填，水平偏移量，默认为0靠着左下角，偏移的像素值越高，那么就越靠右，反之负数越小，就越往左偏移。
- v-shadow ： 必填，垂直偏移量，默认为0，阴影的垂直方向与文字一样，偏移的像素值越高，那么就越靠下，反之负数越小，就越往上偏移。
- blur : 可选，模糊度，不写默认为0，表示阴影与文字一样清晰，像素值越大，表示越模糊。
- color ： 可选，表示阴影颜色
示例代码：
<style>
div {
width: 100px;
height: 100px;
text-shadow: 2px 2px 10px blue;
/*
向右下偏移2像素，模糊度为10，颜色为蓝色
*/
}
</style>
<div>111</div>
11.8 盒子阴影
作用：与11.7的文字阴影相同
属性名： box-shadow
参数：
- h-shadow、v-shadow、blur 、color ： 与文字阴影相同，略。
- spread ： 可选，阴影扩大，默认阴影的大小和盒子本身相同，即值为0，负数表示小于盒子本身，正数表示大于。
- insert ： 可选，内部阴影，默认为外部阴影。
示例代码：
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 10px 10px 10px 3px blue;
}
</style>
<body>
<div></div>
</body>
效果展示：
11.9 过渡
作用： 让元素的样式慢慢的变化，通常配合hover使用，增强网页交互体验
属性名： transition
常见取值：
- 过度的属性，all 所有能过度的都过度，或者具体的属性名，如width。
- 过度的时长，数字+单位秒
示例代码：
<style>
.box1 {
width: 100px;
height: 100px;
background-color: pink;
transition: width 1s;
}
.box1:hover {
width: 50%;
}
</style>
<body>
<div class="box1">
<span>变大变小真的奇妙</span>
</div>
</body>
效果展示：
十二、其他
12.1 SEO优化
还有一个关键字，设置关键字的好处在于，搜索购物、零食、生鲜、服装等关键词，也可以找到淘宝京东等电商平台的官网链接。
<!--设置一个网站的搜索关键字-->
<meta name="keywords" content="。。。。。">
<!-- 网站的描述内容-->
<meta name="description" content="。。。。">
<!--网站标签名字-->
<title>。。。。</title>
要提高SEO还有两个技巧，那就是文件尽量都是HTML的，并且使用有语义的布局标签
同时，不同的CSS书写顺序会影响浏览器的渲染性能，推荐使用专业的书写顺序习惯。
12.2 标签页小图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
一般名字就叫做favicon.ico，并且就放在根目录下。
12.3 标签语义化
某元素整体，包括内容一起变透明。
属性名：opacity
值：0-1之间
1：表示不透明
0：表示透明
0.5：半透明
（只要是0-1之间的就好，也可是0.7，70%透明度）
示例代码：
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
opacity: 0.5;
}
</style>
<body>
<div>111</div>
</body>
最终效果：
[外链图片转存中…(img-0iZRW82O-1657440699089)]
11.7 文字阴影
可实现什么效果：
[外链图片转存中…(img-ANsvKpfn-1657440699089)]
如何实现：
属性名： text-shadow
参数：
- h-shadow : 必填，水平偏移量，默认为0靠着左下角，偏移的像素值越高，那么就越靠右，反之负数越小，就越往左偏移。
- v-shadow ： 必填，垂直偏移量，默认为0，阴影的垂直方向与文字一样，偏移的像素值越高，那么就越靠下，反之负数越小，就越往上偏移。
- blur : 可选，模糊度，不写默认为0，表示阴影与文字一样清晰，像素值越大，表示越模糊。
- color ： 可选，表示阴影颜色
示例代码：
<style>
div {
width: 100px;
height: 100px;
text-shadow: 2px 2px 10px blue;
/*
向右下偏移2像素，模糊度为10，颜色为蓝色
*/
}
</style>
<div>111</div>
11.8 盒子阴影
作用：与11.7的文字阴影相同
属性名： box-shadow
参数：
- h-shadow、v-shadow、blur 、color ： 与文字阴影相同，略。
- spread ： 可选，阴影扩大，默认阴影的大小和盒子本身相同，即值为0，负数表示小于盒子本身，正数表示大于。
- insert ： 可选，内部阴影，默认为外部阴影。
示例代码：
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 10px 10px 10px 3px blue;
}
</style>
<body>
<div></div>
</body>
效果展示：
11.9 过渡
作用： 让元素的样式慢慢的变化，通常配合hover使用，增强网页交互体验
属性名： transition
常见取值：
- 过度的属性，all 所有能过度的都过度，或者具体的属性名，如width。
- 过度的时长，数字+单位秒
示例代码：
<style>
.box1 {
width: 100px;
height: 100px;
background-color: pink;
transition: width 1s;
}
.box1:hover {
width: 50%;
}
</style>
<body>
<div class="box1">
<span>变大变小真的奇妙</span>
</div>
</body>
效果展示：
十二、其他
12.1 SEO优化
[外链图片转存中…(img-DDV4dv4f-1657440699089)]
还有一个关键字，设置关键字的好处在于，搜索购物、零食、生鲜、服装等关键词，也可以找到淘宝京东等电商平台的官网链接。
<!--设置一个网站的搜索关键字-->
<meta name="keywords" content="。。。。。">
<!-- 网站的描述内容-->
<meta name="description" content="。。。。">
<!--网站标签名字-->
<title>。。。。</title>
要提高SEO还有两个技巧，那就是文件尽量都是HTML的，并且使用有语义的布局标签
[外链图片转存中…(img-SjvjWEfe-1657440699090)]
同时，不同的CSS书写顺序会影响浏览器的渲染性能，推荐使用专业的书写顺序习惯。
12.2 标签页小图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
一般名字就叫做favicon.ico，并且就放在根目录下。
12.3 标签语义化
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
