学习笔记-前端开发-004_CSS层叠样式表
前端三剑客可以理解是html是骨骼框架，css是外观，js是动作，我们已经将骨骼学会，并不能做出一个好看的框架，需要css对它进行美化
1 CSS简介
CSS就是Cascading Style Sheet的缩写，中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分
那么接下来，继续看下，使用CSS有什么好处吧。
-
使用CSS样式可以有效地对页面进行布局，更加灵活多样
-
使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确控制，同时对它们的修改和控制变得更加快捷，更加强大
-
站点中所有的网页风格都使用一个CSS文件进行统一控制，达到一改全改。还可以快速切换主题，我们可以把HTML比作是骨架，CSS是衣服。同一个HTML骨架结构，不同CSS样式，所得到的美化布局效果不同。
-
CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等
-
CSS可以将网页的表现与结构分离，使页面载入得更快,更利于维护，这也是我们的最终目的
1.1 CSS基本语法
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
}
CSS的基本语法由选择器、属性、属性的值组成，如果选择符有多个属性，由分号隔开
注意，这里的代码都是英文格式，例如花括号、冒号和分号
1.2 CSS注释
css只有一种注释方式，即被/**/包含的地方就是注释
/*注释*/
通常会使用CSS注释来划定样式区域
/*首页样式表文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
2 CSS引入方式
CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式
2.1 行内样式
行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。
使用style属性直接写入行内
<div style="color: white;background-color: #369;text-align: center">行内设置</div>
2.2 嵌入式
嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用内部样式表
使用style写入div标签中，让页面所有div标签都应用上
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>title</title>
<meta charset="utf8">
<style>
div{
color: white;
background-color: #369;
text-align: center
}
</style>
</head>
<body>
<div> 嵌入式</div>
</body>
</html>
2.3 链接式
链接式，就是把CSS样式写在HTML文档的外部，一个后缀为.css的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观
使用linke rel 引入外部文件css，css中有div属性，所以html文件的所有div标签都会应用
common.css
div{
color: white;
background-color: #369;
text-align: center
}
html文件
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>title</title>
<meta charset="utf8">
<link rel="stylesheet" href="common.css">
</head>
<body>
<div>链接式</div>
</body>
</html>
3 选择器
对一个元素进行操作之前，首先要选中那个元素，但是如果每一个都像上文一样使用标签做选择，就会发现完全不够用。不过CSS为我们提供了各式各样的选择器
3.1 标签选择器
通过标签的名字来找到应用的位置，凡是使用该标签的全部应用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
div{
color: red;
}
li{
color:green;
}
</style>
</head>
<body>
<div>这里应该是红色</div>
<div>这里应该是红色</div>
<div>这里应该是红色</div>
<ul>
<li>这里是绿色</li>
<li>这里是绿色</li>
<li>这里是绿色</li>
</ul>
</body>
</html>
3.2 id选择器
标签选择器最大的问题就是一定义，所有同标签都会被修改
所以诞生了id选择器，即通过id查找目标点进行应用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
/* id选择器 前面要加#做标识 */
#div1{
color: red;
}
#div2{
color:blue;
}
#div3{
color:black;
}
</style>
</head>
<body>
<div id="div1">这里应该是红色</div>
<div id="div2">这里应该是蓝色</div>
<div id="div3">这里应该是黑色</div>
</body>
</html>
3.3 class选择器
id承担的并不只是选择器，还有锚点的作用，这就有可能导致冲突了
于是乎，css又选择了类选择器
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
.div1{
color: yellow;
}
</style>
</head>
<body>
<div class="div1">这里应该是红色</div>
<div class="div1">这里应该是红色</div>
<div class="div3">这里应该是红色</div>
</body>
</html>
一个html标签，可以赋予多个类
kinght
3.4 通配选择器
通配选择器是指将所有的标签都匹配上，通常情况他是和后代选择器联合使用的
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
/*通配选择器*/
*{
color:darkmagenta
}
</style>
</head>
<body>
<div id="div1">通配选择器</div>
<div id="div2">通配选择器</div>
<div id="div3">通配选择器</div>
<ul>
<li>通配选择器</li>
<li>通配选择器</li>
<li>通配选择器</li>
</ul>
</body>
</html>
3.5 后代选择器
如果需要在发生了嵌套关系的标签中找到自己想要的
例如：如果我只想要找到item3，使用.b，基本选择器就会同时找到item1和item3，这时就不太符合要求
<div class="a1">
<div class="b">itme1</div>
<div class="c">item2</div>
</div>
<div class="a2">
<div class="b">item3</div>
<div class="c">item4</div>
</div>
3.5.1 后代选择器
后代选择器是指.选择器名1 .选择器名2，来找到选择器1名对应标签下嵌套的选择器2对应标签
选择器：
.class1 .class2{
color:red
}
对应标签：
<div class='class1'>
<div class='class1'></div>
<div class='class2'>被选中的对象标签</div>
</div>
案例应用1：
<!DOCTYPE html>
<html>
<head>
<title>后代选择器</title>
<meta charset="utf-8">
<style>
/*后代选择器可以进行嵌套的标签的选择*/
.a2 .b{
color:red;
}
</style>
</head>
<body>
<div class="a1">
<div class="b">itme1</div>
<div class="c">item2</div>
</div>
<div class="a2">
<div class="b">item3</div>
<div class="c">item4</div>
</div>
</body>
</html>
案例应用2：
<!DOCTYPE html>
<html>
<head>
<title>后代选择器</title>
<meta charset="utf-8">
<style>
/*后代选择器会选择所有的后代*/
/*此案例中会选择item1和item5，虽然item5在下一层嵌套，但是后代选择器依旧能够选择到*/
/*如果只选择item5，则需要 .a1 .d .b{} 进行选择*/
.a1 .b{
color:red;
}
</style>
</head>
<body>
<div class="a1">
<div class="b">item1</div>
<div class="c">item2</div>
<div class="d">
<div class="b">item5</div>
</div>
</div>
<div class="a2">
<div class="b">item3</div>
<div class="c">item4</div>
</div>
</body>
</html>
3.5.2 子代选择器
子代选择器只能选择下一代，而不是后代全部被选择
<!DOCTYPE html>
<html>
<head>
<title>后代选择器</title>
<meta charset="utf-8">
<style>
/*子代选择器只选择后一代*/
/*只选择item1，而不选择item5*/
.a1>.b{
color:red;
}
</style>
</head>
<body>
<div class="a1">
<div class="b">item1</div>
<div class="c">item2</div>
<div class="d">
<div class="b">item5</div>
</div>
</div>
<div class="a2">
<div class="b">item3</div>
<div class="c">item4</div>
</div>
</body>
</html>
3.6 与选择器
同级标签中，同时满足多个基础选择器的
<!DOCTYPE html>
<html>
<head>
<title>与选择器</title>
<meta charset="utf-8">
<style>
/*与选择器*/
/*两个被选择参数之间不能有空格*/
/*标签名类名*/
div.c1{
color: red;
}
/*标签名id名*/
div#div3{
color: blue;
}
/*类名id名*/
.c1#div3{
color:green;
}
</style>
</head>
<body>
<div class="c1">item1</div>
<p class="c1" id="div3">item2</p>
<div id="div3">item3</div>
</body>
</html>
3.7 或选择器
<!DOCTYPE html>
<html>
<head>
<title>或选择器</title>
<meta charset="utf-8">
<style>
/*或选择器同时可以选择多个不同的标签*/
/*同时选择了类为p1、p标签*/
p,.p1{
color:aqua
}
</style>
</head>
<body>
<div class="p1">item1</div>
<div class="p2">item2</div>
<p class="p3">item3</p>
</body>
</html>
3.8 兄弟选择器
所谓兄弟标签就是同级挨着的标签，并且需要记住的是，html是从上往下读取，所以，兄弟标签只能是挨着的往下找的标签
<div class="c1">item</div>
<div class="c2">item</div>
<div class="c3">item</div>
<div class="c4">item</div>
<div class="c5">item</div>
也就是说找c2的兄弟标签，c3、c4、c5都是它的兄弟标签，
<!DOCTYPE html>
<html>
<head>
<title>兄弟选择器</title>
<meta charset="utf-8">
<style>
/*兄弟选择器*/
/*它后面挨着的带有div标签都会被选择*/
.c2 ~ div{
color: orange;
}
</style>
</head>
<body>
<div class="c1">item</div>
<div class="c2">item</div>
<div class="c3">item</div>
<div class="c4">item</div>
<div class="c5">item</div>
</body>
</html>
并且c3由于挨着c2，也叫做毗邻标签，可以使用毗邻选择器选择
<!DOCTYPE html>
<html>
<head>
<title>毗邻选择器</title>
<meta charset="utf-8">
<style>
/*毗邻选择器*/
/*只有挨着的兄弟标签中，选择有div的标签*/
/*如果.c2 + .c4，而c2和c4不挨着，就不会生效*/
/*注意：虽然c2与c1也挨着，但HTML代码是顺序渲染，不能改变已渲染的内容*/
.c2 + div{
color: orange;
}
</style>
</head>
<body>
<div class="c1">item</div>
<div class="c2">item</div>
<div class="c3">item</div>
<div class="c4">item</div>
<div class="c5">item</div>
</body>
</html>
3.9 属性选择器
属性选择器有一个固定的用法搭配 E为标签名 att为属性 val为属性值
[att] 匹配所有具有att属性的标签，不考虑它的标签名和值
[att=val] 匹配所有具有att属性，值为val的标签，不考虑它的标签名
E[att] 匹配所有具有att属性的E元素，不考虑它的值。(注意：E在此处可以省略。
比如“[cheacked]”。以下同。) p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
3.9.1 通过属性查找标签
<!DOCTYPE html>
<html>
<head>
<title>属性选择器1</title>
<meta charset="utf-8">
<style>
/*让所有type属性的边框全都变成红色*/
[type]{
border: solid red;
}
/*让密码框的属性设置成1px大小红色*/
[type='password']{
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>
3.9.2 通过标签名加属性查找标签
<!DOCTYPE html>
<html>
<head>
<title>属性选择器2</title>
<meta charset="utf-8">
<style>
/*以.jpg结尾*/
[href$='.jpg']{
color: aqua;
}
/*href中包含gif的标签*/
[href*='gif']{
background-color: brown;
}
/*href值中有amd的标签*/
[href~='amd']{
background: green;
}
</style>
</head>
<body>
<div class="c1">
<a href="png-a1.png">click1</a>
<a href="gif-a2.jpg">click1</a>
<a href="png-a3.png">click1</a>
<a href="gif-b1.png">click1</a>
<a href="png-b2.jpg amd">click1</a>
<a href="png-b3.png">click1</a>
</div>
</body>
</html>
3.10 选择器分组
p{
color:red;
}
div{
color:red;
}
span{
color:red;
}
多个选择器拥有同样的属性时，可以使用逗号进行分组，表示并列关系
p,div,span{
color:red;
}
3.11 伪类选择器
3.11.1 anchor伪类 专用于控制链接的显示效果
| 标签类型 | 使用方法 | 作用 |
|---|---|---|
| :link | a:link | 选择所有未被访问的链接。 |
| :visited | a:visited | 选择所有已被访问的链接。 |
| :active | a:active | 选择活动链接。(点击不松开) |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 |
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器anchor</title>
<meta charset="utf-8">
<style>
a:link{
color:red;
}
a:visited{
color: coral;
}
a:hover{
color: blue;
}
a:active{
color: rebeccapurple;
}
</style>
</head>
<body>
<a href="111.png">目标图片</a>
</body>
</html>
3.11.2 input focus
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:focus{
background: red;
}
</style>
</head>
<body>
<input type="" name="">
</body>
</html>
当鼠标点击input框时input focus触发，input框底色变为红色
3.11.3 before after伪类
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。
| 标签类型 | 使用方法 | 作用 |
|---|---|---|
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 元素。 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 元素。 |
| :before | p:before | 在每个 元素的内容之前插入内容。 |
| :after | p:after | 在每个 元素的内容之后插入内容。 |
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器before after</title>
<meta charset="utf-8">
<style>
/* c1类下 第一个标签 */
.c1 :first-child{
color:red;
}
/*c1类下 第一个标签 如果是p标签就应用*/
.c1 p:first-child{
color:green;
}
</style>
</head>
<head>
<div class="c1">
<div>item1</div>
<p>item2</p>
<div>item3</div>
<p>item4</p>
</div>
</head>
</html>
:before和:after可以用于生成伪html效果，但是CSS添加的文本样式，无法被鼠标选中
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器before after</title>
<meta charset="utf-8">
<style>
div:after{
content: "之后"; /*文本类似*/
color: red; /*文本颜色*/
display: block; /*内联*/
}
div::before{
content: "之前"; /*文本类似*/
color: red; /*文本颜色*/
display: block; /*内联*/
}
</style>
</head>
<head>
<div>这是一个div标签</div>
</head>
</html>
3.12 样式继承
CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。
在上图中，可以看到，body的子元素有三个，h1、p和ul，ul也有几个子元素，p也有1个子元素，那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性，结果，body下面所有的后代元素都可能享受到，这就是样式继承。就像一句俗语一样，“龙生龙，凤生凤，老鼠的儿子会打洞”。样式继承，可以给我们的网页布局带来很多的便利，让我们的代码变得更加简洁，但是，如果不了解，或者使用不当，也有可能会给我们带来很多不必要的麻烦。
因此，如果了解了哪些样式是会继承到后代元素的，那么就可以避免这些问题的发生了。
| 文本相关属性 | |||
|---|---|---|---|
| font-family | font-size | letter-spacing | line-height |
| font-style | font-variant | text-align | text-indent |
| font-weight | font | text-transform | word-spacing |
| color | direction | ||
| 列表相关属性 | |||
| list-style-image | list-style-position | list-style-type | list-style |
| 表格和其他相关属性 | |||
| border-collapse | border-spacing | caption-side | empty-cells |
| cursor |
3.13 选择器优先级
在介绍优先级之前，得声明四个不讲道理的家伙
3.13.1 继承优先级最低
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中
body{color:red;} <p>helloyuan</p>
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0
p{color:green}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。 此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等
3.13.2 !important声明高于一切
!important不参与优先级比较，这是人工设置的优先级最高，如果!important声明冲突，才比较优先权
<!DOCTYPE html>
<html>
<head>
<title>important声明</title>
<meta charset="utf-8"/>
<style>
#div1{
/*!important 比行内优先级都高*/
color:orange !important;
}
</style>
</head>
<body>
<div id="div1" style="color:brown">猜猜这里是什么颜色！</div>
</body>
</html>
3.13.3 行内优先级是选择器优先级中最高的
这一点很好理解，直接就写在标签行内
<!DOCTYPE html>
<html>
<head>
<title>important声明</title>
<meta charset="utf-8"/>
<style>
#div1{
color:orange;
}
</style>
</head>
<body>
<div id="div1" style="color:brown">猜猜这里是什么颜色！</div>
</body>
</html>
3.13.4 id优先级在标签外引入的优先级中最高
<!DOCTYPE html>
<html>
<head>
<title>important声明</title>
<meta charset="utf-8"/>
<style>
#id1{
color:orange;
}
.a2{
color: green;
}
</style>
</head>
<body>
<div id="id1" class="a2">猜猜这里是什么颜色！</div>
</body>
</html>
3.13.5 其他的优先级计算方式
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
统计选择符中的CLASS属性个数。 .class 优先级比分：10
统计选择符中的HTML标签名个数。 标签名 优先级比分：1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
}
#i1{
color: coral;
}
div{
color: greenyellow;
}
.c2 .c4 span{
color: blue;
}
.c2 .c3 .c5{
color: rebeccapurple;
}
.c2 .c4 .c5{
color: darkcyan;
}
</style>
</head>
<body>
<!-- id -->
<div class="c1" id="i1">item1</div>
<div class="c2">
<div class="c3">
<div class="c4">
<!-- .c2 .c4 span = 10+10+1 -->
<!-- .c5 .c3 .c2 = 10+10+10 -->
<!-- .c2 .c4 .c5 = 10+10+10 由于在最下方故使用此css选择器 -->
<span class="c5">item2</span>
</div>
</div>
</div>
</body>
</html>
4 css属性操作
4.1 文本属性
4.1.1 font-style(字体样式风格)
/*
属性值：
normal：设置字体样式为正体。默认值。
italic：设置字体样式为斜体。这是选择字体库中的斜体字。
oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。
*/
<div style="font-style:italic">文本字体</div>
4.1.2 font-weight(字体粗细)
/*
属性值：
normal：设置字体为正常字体。相当于数字值400
bold：设置字体为粗体。相当于数字值700。
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900
注意：
font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
*/
<div style="font-weight: 900">文本字体</div>
4.1.3 font-size(字体大小)
/*
font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。
字体单位有像素(px)、字符(em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定)、百分比(%)，磅[点](pt)。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。
*/
<div style="font-size: 80px;">文本字体</div>
4.1.4 font-family(字体族)
/*
font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候，默认：
中文： 宋体 [ win7以后默认是 微软雅黑 ]
英文： Arial
*/
<div style="font-family: '楷体';">文本字体</div>
4.1.5 color(字体颜色)
// 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。
html颜色代码表
https://m.runoob.com/html/html-colors.html
<style>
.c1{
color: red;
}
.c1{
color: #369;
}
.c1{
color: RGB(0,0,255);
}
</style>
另外要注意，使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写来表达。
4.1.6 text-align(文本对齐方式)
/*
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left
居中对齐center
右对齐right
*/
<div style="text-align: center;">文本字体</div>
/*
两端对齐justify
即左右文本内容行的左右两端对齐
*/
<!DOCTYPE html>
<html>
<head>
<title>道德经</title>
<meta charset="utf-8">
<style>
p{
text-align: justify;
}
</style>
</head>
<body>
<p>道可道，非常道；名可名，非常名。
无名，天地之始，有名，万物之母。
故常无欲，以观其妙，常有欲，以观其徼。
此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。</p>
</body>
</html>
4.1.7 line-height(字体行高)
// 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。
行高 = 字体大小 + 上半行距 + 下半行距(通常情况下上下半行行距是相等的)
如果需要文本高度居中，则直接将设置line-height为div的高度
但是需要注意，如果文字过多可能导致溢出问题
<!DOCTYPE html>
<html>
<head>
<title>line-height</title>
<meta charset="utf-8">
<style>
.c1{
width: 120px;
height: 120px;
background-color: aqua;
/* 文本居中 */
text-align: center;
line-height: 120px;
}
</style>
</head>
<body>
<div class="c1">居中效果演示</div>
</body>
</html>
4.1.8 vertical-align
<img src="https://skystarry-1251157247.cos.ap-chengdu.myqcloud.com//blog/20201012102822386_1637764831748.gif"><span>yuan</span>
默认导入图片和文字，会发现图片的底部没有对准文字的底线，而是对准的基线
vertical-align 属性设置元素的垂直对齐方式
img{
/* 方式1
top 顶线
middle 中线
baseline 基线
bottom 底线
*/
vertical-align: bottom;
/* 方式2
也可以设置数值
数值越大 文本相对越在文字上方
数值为负 文本就会在文字下方
*/
vertical-align: 10px
}
注意:这里设置的是图片，用图片去对其文字
4.1.9 text-decoration
使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的
常用的值有
none
underline
overline
line-through
<a href="" style="text-decoration: none;">下划线样式</a>
<a href="" style="text-decoration: underline;">下划线样式</a>
<a href="" style="text-decoration: overline;">下划线样式</a>
<a href="" style="text-decoration: line-through;">下划线样式</a>
样式演示：
4.1.10 text-indent 首行缩进
a{
font-size:16px; /*字体大小为16px*/
text-index:32px; /*32px为首行缩进2格*/
}
4.2 背景属性
4.2.1 background-color(背景颜色)
页面的背景颜色有四种属性值表示，分别是transparent(透明)，RGB十进制颜色表示，十六进制颜色表示和颜色单词表示。
属性使用：
/*
background-color: transparent; // 透明
background-color: rgb(255,0,0); // 红色背景
background-color: #ff0000; // 红色背景
background-color: red; // 红色背景
*/
案例
<!DOCTYPE html>
<html>
<head>
<title>背景颜色</title>
<meta charset="utf-8">
<style>
.bg1{
width: 800px;
height: 600px;
background-color: #616161;
}
</style>
</head>
<body>
<div class="bg1">背景颜色</div>
</body>
</html>
4.2.2 background-image(背景图片)
background-image可以引入一张图片作为元素的背景图像。默认情况下，background-image放置在元素的左上角，并在垂直和水平方向重复平铺。
语法：
// background-image: url('图片地址')
当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到，或者不能完全铺满元素时，就会显示背景颜色。
<!DOCTYPE html>
<html>
<head>
<title>背景颜色</title>
<meta charset="utf-8">
<style>
.bg1{
width: 800px;
height: 600px;
background-image: url(https://skystarry-1251157247.cos.ap-chengdu.myqcloud.com/img/preview.jpg);
background-color: #616161;
}
</style>
</head>
<body>
<div class="bg1">背景图片</div>
</body>
</html>
4.2.3 background-repeat(背景平铺方式)
CSS中，当使用图像作为背景了以后，都是默认把整个页面平铺满的，但是有时候在很多场合下面，页面并不需要这种默认的效果，而可能需要背景图像只显示一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。
background-repeat专门用于设置背景图像的平铺方式，一般有四个值，默认是repeat(平铺)，no-repeat(不平铺)，repeat-x(X轴平铺)，repeat-y(Y轴平铺)。
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
4.2.4 background-position(背景定位)
CSS中支持元素对背景图像的定位摆放功能，就是利用background-position属性来实现，以页面中元素的左上角为原点(0，0)，把元素的内部区域当成一个坐标轴(上边框为X轴，越往左X的值越大，左边框为Y轴，越往下Y轴的值就越大，反之亦然)，然后计算出背景图片的左上角与圆点的距离(x轴和y轴的距离)，然后把背景图片放入到指定的位置上，对背景图片的位置进行精确的控制和摆放。
background-position的值分成两个，使用空格隔开，前面一个是背景图片左上角的x轴坐标，后面一个是背景图片左上角的y轴坐标。两个值都可以是正、负值。
语法：
/*background-position: x轴坐标 y轴坐标*/
background-position：100px 200px
/*直接居中*/
background-position：center center;
背景定位的值除了是具体的数值以外，还可以是左(left)、中(center)、右(right)
在找不准坐标定位的时候，可以借助浏览器的调试功能进行查找
4.2.5 background(三合一简写)
和字体属性一样，多个不同背景样式属性也是可以同时缩写的，不过不需要像字体那样按照一定的顺序，背景样式的缩写属性的顺序是不固定的，可以任意编排。
语法：
// background: 背景颜色 背景图片 背景平铺方式 背景定位;
background: url(https://skystarry-1251157247.cos.ap-chengdu.myqcloud.com/img/preview.jpg) no-repeat center;
4.3 边框属性
4.3.1 border-style(边框风格)
定义边框的风格，值可以有
/*
none：没有边框，当border的值为none的时候，系统将会忽略[border-color]
hidden：隐藏边框，低版本浏览器不支持。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双实线边框，两条单线与其间隔的和等于border-width值。
*/
border-style的值可以缩写的：
/*
只有一个值的时候表示同时控制上下左右的边框风格。
只有两个值的时候表示分别控制上下、左右的边框风格。
有三个值的时候表示分别控制上、左右、下的边框风格。
有四个只的时候表示分别控制上、右、下、左的边框风格。
*/
border-style还可以单独指定不同方向：
/*
border-top-style 设置上边的边框风格
border-bottom-style 设置下边的边框风格
border-left-style 设置左边的边框风格
border-right-style 设置右边的边框风格
*/
4.3.2 border-width(边框宽度)
使用border-width可以定义边框的厚度，值可以是medium，thin，thick和指定数值的宽度。 同时，border-width也可以进行缩写：
/*
只有一个值的时候表示同时控制上下左右的边框宽度。
只有两个值的时候表示分别控制上下、左右的边框宽度。
有三个值的时候表示分别控制上、左右、下的边框宽度。
有四个只的时候表示分别控制上、右、下、左的边框宽度。
*/
border-width也可以单独指定不同方向：
/*
border-top-width 设置上边的边框宽度
border-bottom-width 设置下边的边框宽度
border-left-width 设置左边的边框宽度
border-right-width 设置右边的边框宽度
*/
4.3.3 border-color(边框颜色)
定义边框的颜色，值表示的方式可以是十六进制，RGB十进制和单词表示法。
同上，border-color的缩写：
/*
只有一个值的时候表示同时控制上下左右的边框颜色。
只有两个值的时候表示分别控制上下、左右的边框颜色。
有三个值的时候表示分别控制上、左右、下的边框颜色。
有四个只的时候表示分别控制上、右、下、左的边框颜色。
*/
border-color也可以单独指定不同方向：
/*
border-top-color 设置上边的边框颜色
border-bottom-color 设置下边的边框颜色
border-left-color 设置左边的边框颜色
border-right-color 设置右边的边框颜色
*/
4.3.4 边框样式缩写
还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写：语法：
// border: 边框宽度 边框样式 边框颜色;
注意，border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。
4.4 列表属性
CSS中提供了一些列表属性可以用来：
(1)设置不同的列表项标记为有序列表
(2)设置不同的列表项标记为无序列表
(3)设置列表项标记为图像
4.4.1 list-style-type(系统提供的列表项目符号)
li {
/*将系统默认符号设置为消失*/
list-style-type: none;
}
4.4.2 list-style-image(自定义的列表项目符号)
li {
list-style-image:url('qq.gif');
}
4.5 dispaly属性
display可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素
语法：
/*
display: block; // 声明当前元素的显示模式为块状元素 (独占一行 可以设置宽高)
display: inline; // 声明当前元素的显示模式为行内元素 (内联属性 按内容占比 不可以设置宽高)
display: inline-block; // 声明当前元素的显示模式为行内块状元素
display: none; // 声明当前元素的显示模式为隐藏
*/
4.5.1 display: block;和display:inline;
这两个是最基础的dispaly标签
<!DOCTYPE html>
<html>
<head>
<title>display属性</title>
<meta charset="utf-8">
<style>
span{
width: 200px;
height: 200px;
background-color: #616161;
/* 默认设置的宽高是不生效的，背景色也只有文字处才有 */
/* 按块级标签展示元素 等效div标签 就可以设置宽高了 */
display: block;
}
div{
width: 200px;
height: 200px;
background-color: aqua;
/* 默认可以设置宽高 */
/* 按内联标签进行展示 等效span标签 宽高全部失效 */
display: inline;
}
</style>
</head>
<body>
<span>alvin</span>
<div>yuan</div>
</body>
</html>
4.5.2 display: none;
这是display标签中比较常用的一个标签，他常见于选择页面
例如：在很多网页中存在点击上方标题栏，切换下方页面的情况
他的实现逻辑其实是使用div标签将所有的待切换页面全部加载到html网页中，默认display:none，他就会消失不显示
.png)
使用JavaScript控制CSS标签取消掉display:none，就会显示那一个div标签的内容，因为none在生效的时候是不占用任何空间的
<!DOCTYPE html>
<html>
<head>
<title>display none</title>
<meta charset="utf-8">
<style>
div{
width: 100px;
height: 100px;
}
.c1{
background-color: red;
display: none;
}
.c2{
background-color: orange;
display: none;
}
.c3{
background-color: yellow;
display: none;
}
.c4{
background-color: green;
display: none;
}
.c5{
background-color: purple;
display: none;
}
</style>
</head>
<body>
<div class="c1">商品介绍</div>
<div class="c2">规格与包装</div>
<div class="c3">售后保障</div>
<div class="c4">商品评价</div>
<div class="c5">本店好评商品</div>
</body>
</html>
4.5.3 display: inline-block;
display: inline-block;和float属性很像，他们都是为了解决布局问题
布局的核心问题？ 如何能够让多个可以设置长宽的元素在一行显示
目前的情况是，div可以设置长宽，但是他们不能在一行显示，span一行显示，但是不能设置长宽
所以出现了inline-block，它兼具span标签的不独占一行，div标签的可设置长宽
<!DOCTYPE html>
<html>
<head>
<title>display none</title>
<meta charset="utf-8">
<style>
div{
width: 100px;
height: 100px;
}
.c1{
background-color: red;
display: inline-block;
}
.c2{
background-color: orange;
display: inline-block;
}
.c3{
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
display:inline-block默认是由间隙的，这个间隙与浏览器的默认值相关，可以通过添加css属性解决
/*加载后面方块的css中*/
/*不同浏览器的间隙不同，不一定是-5*/
margin-left:-5px;
4.6 盒子模型
对于一个块级标签而言，它可以控制的其实是有3层，随便定义一个div标签，打开F12选中它，我们可以很清楚的看到在style里面有这么一张图，它就是用于展示盒子模型的，这些盒子由元素的content(内容)、padding(内边距)、border(边框)、margin(外边距)组成
4.6.1 content内容区域
最里面的蓝色部分是定义的内容显示区域
<div>显示内容</div>
它使用width: 200px; height: 200px;进行定义
4.6.2 padding内边距
内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值默认为0，不能是负值，相当于table标签的cellpadding属性
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta charset="utf-8">
<style>
.c1{
width: 200px;
height: 200px;
background-color: aqua;
/* padding: 50px; 当padding只有一个值的时候表示同时控制上下左右的内边距*/
/* 设置多个值应用范围 */
/* padding: 50px 0; 当padding只有两个值的时候表示分别控制上下、左右的内边距*/
/* padding: 50px 20px 0; 当padding有三个值的时候表示分别控制上、左右、下的内边距 */
/* padding: 50px 40px 30px 20px; 当padding有四个只的时候表示分别控制上、右、下、左的内边距 */
/* 也可以直接指定哪一个方向 */
padding-top: 50px; /*设置上边的内边距*/
padding-right: 40px; /*设置右边的内边距*/
padding-bottom: 30px; /*设置下边的内边距*/
padding-left: 20px; /*设置左边的内边距*/
}
.c2{
width: 200px;
height: 200px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="c1">hello world</div>
<div class="c2">hello brother</div>
</body>
</html>
4.6.3 margin外边距
外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值
我们在display:inline-block中使用过margin-left:-5px，那是因为浏览器横向默认为5px的间距，所以可以通过负数抵消掉
在外边距中，实际上控制的区域也是属于目标标签所属
这是两个div标签以及他们各自的所属范围，默认情况下外边距是0，我们可以通过修改margin的值，来控制它
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<meta charset="utf-8">
<style>
.c1{
width: 200px;
height: 200px;
background-color: aqua;
margin: 10px;
}
.c2{
width: 200px;
height: 200px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="c1">hello world</div>
<div class="c2">hello brother</div>
</body>
</html>
通过修改<div class='c1'></div>的实际控制范围就变成了，他会把其他的标签给挤开，从而形成空白区域
它的用法和padding标签类似，同样可以独立控制上下左右
.c1{
/* margin: 50px; 当margin只有一个值的时候表示同时控制上下左右的外边距*/
/* 设置多个值应用范围 */
/* margin: 50px 0; 当margin只有两个值的时候表示分别控制上下、左右的外边距*/
/* margin: 50px 20px 0; 当margin有三个值的时候表示分别控制上、左右、下的外边距 */
/* margin: 50px 40px 30px 20px; 当margin有四个只的时候表示分别控制上、右、下、左的外边距 */
/* 也可以直接指定哪一个方向 */
margin-top: 50px; /*设置上边的外边距*/
margin-right: 40px; /*设置右边的外边距*/
margin-bottom: 30px; /*设置下边的外边距*/
margin-left: 20px; /*设置左边的外边距*/
}
4.6.4 浏览器默认存在外边距
浏览器的框架是默认存在外边距的情况，我们使用块状标签导入一下内容的时候就能很明确的感知到白色边框的存在
我们可以使用css将body的边框给去掉
body{
margin: 0;
}
4.6.5 通过margin:auto实现左右居中
对于块状标签而言，外边距通常直接就会占据一整行的空间，所以，我们可以通过设置左右auto完成在上层框架内的居中
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style>
*{
/* 内外边距设置为0 */
margin:0;
padding: 0;
}
.c1{
/* 宽度占据百分之八十 */
width: 80%;
/* c1 外边距上下100px 左右居中 */
margin:100px auto;
/* 边框 1px 红色实线 */
border: 1px solid red;
}
.c2{
width: 50%;
border: 1px solid black;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
4.6.6 案例：简易页面顶部导航栏
<!DOCTYPE html>
<html>
<head>
<title>盒子模型顶部选择栏案例</title>
<meta charset="utf-8">
<style>
*{
/* 把默认值初始化 */
margin: 0;
padding: 0;
}
.c1{
width: 80%;
/* 上下外边距 100px 左右居中 */
margin: 100px auto;
border: 1px solid red;
}
.c1 .J_categoryList{
/* 将系统默认符号设置为消失 */
list-style: none;
}
.c1 .J_categoryList li{
/* 既要让他们在同一行 也需要让他们有宽高方便点击 */
display: inline-block;
/* 字体外边距10px */
margin: 10px;
}
.c1 .J_categoryList li a{
/* 设置字体样式 */
font-size: 16px;
color: #333;
/* 设置可点击范围 */
padding: 20px;
border: 1px solid rebeccapurple;
text-decoration: none;
}
</style>
</head>
<body>
<div class="c1">
<ul class="J_categoryList">
<li><a href=""><span>红米</span></a></li>
<li><a href=""><span>电视</span></a></li>
<li><a href=""><span>笔记本</span></a></li>
<li><a href=""><span>家电</span></a></li>
<li><a href=""><span>小米手机</span></a></li>
</ul>
</div>
</body>
</html>
4.7 float属性
4.7.1 文档流
在浮动进行学习之前，我们必须明白一个概念叫做文档流
文档流简单理解就是浏览器对于文档有一个加载顺序，默认情况下是自上而下，自左而右的
① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置
② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title></title>
<style>
div{ border: 1px solid #f00; margin: 4px; }
.d3{ width: 100px; }
</style>
</head>
<body>
<div>d1</div>
<div>d2</div>
<div class="d3">
<span>span1</span>
<a>a1</a>
<a>a2</a>
<span>span2</span>
</div>
</body>
</html>
4.7.2 浮动模型
浮动属性是网页布局最常用的属性，他可以很好的实现网页布局，尤其是依靠他来制作导航栏等页面
什么是浮动呢？
我们可以理解为浏览器显示为画布，正常的文档流输出是在第一层画布上进行涂鸦，而浮动则是在第一层画布上方再添加了一层画布，将浮动元素置于上层画布中
当一个元素被设置浮动后，将具有以下特性：
-
任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性
-
假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
<!DOCTYPE html> <html> <head> <title>demo1</title> <meta charset="utf-8"> <style> .c1{ width: 100px; height: 100px; background-color: aqua; float: left; } .c2{ width: 150px; height: 100px; background-color: rgb(65, 187, 106); float: left; } .c3{ width: 200px; height: 100px; background-color: rgb(248, 85, 85); float: left; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
-
如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐
<!DOCTYPE html> <html> <head> <title>demo1</title> <meta charset="utf-8"> <style> .c1{ width: 100px; height: 100px; background-color: aqua; /* float: left; */ } .c2{ width: 150px; height: 100px; background-color: rgb(65, 187, 106); float: left; } .c3{ width: 200px; height: 100px; background-color: rgb(248, 85, 85); float: left; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
-
向左浮动：在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化(在下图中红色部分再标准文档流中，被浮在上方的绿色遮挡了部分)
<!DOCTYPE html> <html> <head> <title>demo1</title> <meta charset="utf-8"> <style> .c1{ width: 100px; height: 100px; background-color: aqua; /* float: left; */ } .c2{ width: 150px; height: 100px; background-color: rgb(65, 187, 106); float: left; } .c3{ width: 200px; height: 100px; background-color: rgb(248, 85, 85); /* float: left; */ } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
-
向右浮动，同样遵循向左浮动的规则，在画布上方建立一个新的画布，只不过，浮动是贴在了画布的右侧
<!DOCTYPE html> <html> <head> <title>demo1</title> <meta charset="utf-8"> <style> .c1{ width: 100px; height: 100px; background-color: aqua; } .c2{ width: 150px; height: 100px; background-color: rgb(65, 187, 106); float: right; } .c3{ width: 200px; height: 100px; background-color: rgb(248, 85, 85); } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
-
如果水平方向上没有足够的空间容纳浮动元素，则转向下一行
-
浮动元素只能浮动至左侧或者右侧
-
浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素
4.7.3 字围效果
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
<meta charset="utf-8">
<style>
.c1{
width: 100px;
height: 100px;
background-color: aqua;
/* float: left; */
}
.c2{
width: 150px;
height: 100px;
background-color: rgb(65, 187, 106);
float: left;
}
.c3{
width: 200px;
height: 100px;
background-color: rgb(248, 85, 85);
/* float: left; */
}
</style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">c2</div>
<div class="c3">c3</div>
</body>
</html>
我们看此模型，由于c2是向左浮动的，所以c3会被覆盖在c2的下方被遮挡，但我们发现实际文本没有被遮挡，这其实就是自围效果
<!DOCTYPE html>
<html>
<head>
<title>自围效果</title>
<meta charset="utf-8">
<style>
.c1{
width: 600px;
border: 1px solid red;
}
img{
float: left;
}
</style>
</head>
<body>
<div class="c1">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw337h211%2F20180120%2F3c1d-fyqtwzv0794121.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668672419&t=38c027d559056027beba5bd4e2220fad" alt="老子">
<span>道可道，非常道；名可名，非常名。
无名，天地之始，有名，万物之母。
故常无欲，以观其妙，常有欲，以观其徼。
此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
天下皆知美之为美，斯恶已，皆知善之为善，斯不善已。
故有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随。
是以圣人处无为之事，行不言之教，万物作焉而不辞，生而不有，为而不恃，功成而弗居。
夫惟弗居，是以不去
不尚贤，使民不争；不贵难得之货，使民不为盗；不见可欲，使民心不乱。
是以圣人之治，虚其心，实其腹，弱其志，强其骨，常使民无知无欲。
使夫知者不敢为也。
为无为，则无不治。
</span>
</div>
</body>
</html>
为了更加只管的展示字围效果，我们使用一张图来进行演示，让图片进行一个浮动
我们发现，使用div对文字和图片进行框住，图片向左浮动，文字并没有被图片遮挡住，而是对他进行包围
4.7.4 浮动的问题
在网页布局中，最常用的便是浮动模型，但由于浮动会破坏原有的文档流，就可能导致页面产生改动
4.7.4.1 父级塌陷问题
最常见的就是父级塌陷问题，在主流浏览器下，如果没有设置height，元素默认高度为auto，即父级的宽度为当前行整行，父级的高度，为子元素的高度之和
<!DOCTYPE html>
<html>
<head>
<title>父级塌陷</title>
<meta charset="utf-8">
<style>
.box{
border: 1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: #336688;
}
.c2{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="footer"></div>
</body>
</html>
但如果子元素进行浮动，与父元素就不在同一文档流，在这种情况下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响(甚至破坏)布局的情况，叫浮动溢出
<!DOCTYPE html>
<html>
<head>
<title>父级塌陷</title>
<meta charset="utf-8">
<style>
.box{
border: 1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: #336688;
/*子元素浮动*/
float: right;
}
.c2{
width: 100px;
height: 100px;
background-color: orange;
/*子元素浮动*/
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="footer"></div>
</body>
</html>
甚至会影响后面的元素正常显示
<!DOCTYPE html>
<html>
<head>
<title>父级塌陷</title>
<meta charset="utf-8">
<style>
.box{
border: 1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: #336688;
/*子元素浮动*/
float: right;
}
.c2{
width: 100px;
height: 100px;
background-color: orange;
/*子元素浮动*/
float: right;
}
.footer{
width: 500px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="footer"></div>
</body>
</html>
4.7.4.2 父级设置高度解决塌陷
其实解决它有很多的办法，例如给.box设置高，但是如果子元素被修改，他不修改同样可能会被遮挡
<!DOCTYPE html>
<html>
<head>
<title>父级塌陷</title>
<meta charset="utf-8">
<style>
.box{
border: 1px solid red;
height: 100px; /*给父级设置高度*/
}
.c1{
width: 200px;
height: 100px;
background-color: #336688;
float: right;
}
.c2{
width: 100px;
height: 100px;
background-color: orange;
float: right;
}
.footer{
width: 500px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="footer"></div>
</body>
</html>
4.7.4.3 第三方标签清除浮动解决塌陷
clear的三个值left/both/right规定了他们的左、左右、右不能有浮动元素，但html不能修改已渲染完成的代码，所以.clear_fix就会移动到第二行，将整个父级标签撑起来
<!DOCTYPE html>
<html>
<head>
<title>父级塌陷</title>
<meta charset="utf-8">
<style>
.box{
border: 1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: #336688;
float: right;
}
.c2{
width: 100px;
height: 100px;
background-color: orange;
float: right;
}
.footer{
width: 500px;
height: 200px;
background-color: yellow;
}
.clear_fix{
/*引入第三方标签清楚他的左右浮动*/
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
<div class="clear_fix"></div>
</div>
<div class="footer"></div>
</body>
</html>
4.7.4.4 第三方标签使用css生成
如果将第三方标签直接写在html中，可能导致在代码维护的时候不清楚该标签功能，以致于误删除的情况，所以建议直接使用CSS生成该标签
此方法为通用解决塌陷的方法，并且默认规定标签名即为clearfix
<!DOCTYPE html>
<html>
<head>
<title>父级塌陷</title>
<meta charset="utf-8">
<style>
.box{
border: 1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: #336688;
float: right;
}
.c2{
width: 100px;
height: 100px;
background-color: orange;
float: right;
}
.footer{
width: 500px;
height: 200px;
background-color: yellow;
}
/*清除父级塌陷的样式*/
/*在class=clearfix的标签内部末端加入一个块状元素*/
.clearfix:after{
content: ""; /*标签内容为空*/
display: block; /*块级元素*/
clear: both; /*清除左右浮动*/
visibility: hidden; /*可见度设置为隐藏*/
}
</style>
</head>
<body>
<!-- 只要塌陷了，就添加clearfix -->
<div class="box clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="footer"></div>
</body>
</html>
4.7.5 清除浮动
在详细介绍清除浮动的clear标签之前，我们首先要明白，html和css的加载是自上而下进行渲染的，也就是说上方已经被渲染过的标签，是无法被影响的，并且自身渲染完成之后，也是无法影响后续的标签的
clear常用属性
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
首先我们看一个正常向左浮动的案例
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<meta charset="utf-8">
<style>
.demo1{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.demo2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.demo3{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
</body>
</html>
对demo2清除左浮动
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<meta charset="utf-8">
<style>
.demo1{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.demo2{
width: 100px;
height: 100px;
background-color: green;
float: left;
/*清除左浮动*/
clear:left;
}
.demo3{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
</body>
</html>
需要注意的事情是，清楚左浮动是他的左边不能有浮动元素，但他的左边已经有.demo1浮动并且占位了，所以他只能将自身移动到第二行
对demo2清除左右浮动
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<meta charset="utf-8">
<style>
.demo1{
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.demo2{
width: 100px;
height: 100px;
background-color: green;
float: left;
/*清除左右浮动*/
clear: both;
}
.demo3{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
</body>
</html>
需要注意的事情是，每个元素的CSS只能影响自己本身，在加载demo3的时候，demo2已经完成落位，而demo3并没有说自己左边不能有浮动，所以他还是会贴住demo2
那么left和right的区别在哪？
在于上方元素是左浮动还是右浮动
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<meta charset="utf-8">
<style>
.demo1{
width: 100px;
height: 100px;
background-color: aqua;
/*元素为右浮动*/
float: right;
}
.demo2{
width: 100px;
height: 100px;
background-color: green;
float: left;
/*清除左浮动*/
clear: left;
}
.demo3{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
</body>
</html>
4.8 position
就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局
定位属性position有4个值，分别是静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed) 默认就是static
demo{
position: static;
position: relative;
position: absolute;
position: fixed;
}
元素设置了定位以后，还要依靠4个方位属性来进行定位摆放
方位属性：
/*
top：让元素相对于指定目标的顶部偏移指定的距离。
例如： top：10px; 表示距离顶部10像素
right：让元素相对于指定目标的右边偏移指定的距离。
例如： right：10px; 表示距离顶部10像素
bottom：让元素相对于指定目标的底部偏移指定的距离。
例如： bottom：10px; 表示距离顶部10像素
left：让元素相对于指定目标的左边偏移指定的距离。
例如： left：10px; 表示距离顶部10像素
*/
4.8.1 相对定位
相对定位根据自身原始属性摆放位置的作为基准，在正常文档流中的定位
<!DOCTYPE html>
<html>
<head>
<title>相对定位</title>
<meta charset="utf-8">
<style>
.demo1{
width: 100px;
height: 100px;
background-color: red;
}
.demo2{
width: 100px;
height: 100px;
background-color: green;
/*使用相对定位*/
position: relative;
/*距离原始左边100px 上面100px*/
left: 100px;
top: 100px;
}
.demo3{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
</div>
</body>
</html>
距离左边100px即向右移动100px，具体上面100px即向下移动100px，所以移动到了新的位置，但由于还在原来的文档流中，文档流的位置还在原来的地方，所以黄色方块放于原来的位置
4.8.2 绝对定位
绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位
<!DOCTYPE html>
<html>
<head>
<title>绝对定位</title>
<meta charset="utf-8">
<style>
.a1{
width: 100px;
height: 100px;
background-color: rgb(29, 70, 255);
/* 绝对定位 由于父级没有定位属性 所以以body左上角为基准 */
/* 绝对定位是完全脱离文档流的 所以下方的元素会往上补 */
position: absolute;
left: 130px;
top: 130px;
}
.a2{
width: 100px;
height: 100px;
background-color: rgb(0, 248, 248);
}
.b{
width: 300px;
height: 300px;
background-color: green;
/* 父级元素有定位属性 */
position: absolute;
left: 200px;
top: 200px;
}
.b1{
width: 100px;
height: 100px;
background-color: rgb(255, 5, 67);
}
.b2{
width: 100px;
height: 100px;
background-color: rgb(243, 117, 78);
position: absolute;
/* 由于父级元素b有定位属性，所以以父元素左上角定位做基准 */
left: 130px;
top: 130px;
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="b">
<div class="b1"></div>
<div class="b2"></div>
</div>
</body>
</html>
4.8.3 轮播图案例
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style>
*{
margin: 0px;
padding: 0px;
}
/* 设置轮播图宽高 590*470 */
.lunbotu{
width: 590px;
height: 470px;
border: 1px solid red;
margin: 100px auto; /* 高度100左右居中 */
position: relative; /*父级元素相对定位方便子元素绝对定位*/
}
.lunbotu ul{
/*列表样式关闭*/
list-style: none;
}
.lunbotu .imgs li{
/*子元素绝对定位 让图片全部重合 在轮播图范围内*/
position: absolute;
}
.lunbotu .btn li{
/* 该标签在图片标签之下,所以会在图片标签之后渲染 层级比图片高 */
/* 但是如果放在正常文档流会被挡住，所以也要使用绝对定位脱离正常文档流，才能显示 */
position: absolute;
top: 50%;
}
.lunbotu .btn .left-btn{
/* 左按钮 靠左 left 0*/
left: 0;
}
.lunbotu .btn .right-btn{
/* 右按钮 靠右 right 0*/
right: 0;
}
.lunbotu .btn div{
width: 30px;
height: 60px;
background-color: #616161;
color: white;
/* 水平垂直居中 */
text-align: center;
line-height: 60px;
/* 边框圆润度 */
/*border-radius: 5%;*/ /*整体圆润*/
border-bottom-right-radius: 50%; /*边框右下角圆润度百分之五十*/
border-top-right-radius: 50%; /*边框右上角圆润度百分之五十*/
/* 文本变大 */
font-size: 20px;
/* 由于top 50% 的垂直居中基准是上缘线，所以其实整体偏下 */
/* 需要再上移30像素 */
margin-top: -30px;
}
</style>
</head>
<body>
<div class="lunbotu">
<ul class="imgs">
<li><a href=""><img src="png\1.jpg" alt=""></a></li>
<li><a href=""><img src="png\2.jpg" alt=""></a></li>
<li><a href=""><img src="png\3.jpg" alt=""></a></li>
<li><a href=""><img src="png\4.jpg" alt=""></a></li>
</ul>
<ul class="btn">
<li class="right-btn"><div>></div></li>
<li ckass="left-btn"><div><</div></li>
</ul>
</div>
</body>
</html>
4.8.4 固定定位
固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了
例如京东的这个部分，无论怎么滚动页面，他始终固定在页面的这个位置
注意：固定定位也是完全脱离文档流 参照物为浏览器窗口
<!DOCTYPE html>
<html>
<head>
<title>固定定位</title>
<meta charset="utf-8">
<style>
body{
margin: 0;
}
.c1{
width: 100%;
/* 让页面可以滚动起来 方便演示 */
height: 2000px;
background-color: antiquewhite;
}
.c2{
/* 设置宽高 背景色 */
width: 200px;
height: 60px;
background-color: yellowgreen;
/* 设置文本居中大小 */
text-align: center;
line-height: 60px;
/* 设置固定定位 */
position: fixed;
/* 距离右边20px */
right: 20px;
/* 距离下底部20px */
bottom: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
4.9 溢出
<!DOCTYPE html>
<html>
<head>
<title>溢出</title>
<meta charset="utf-8">
<style>
#demo1{
height: 100px;
width: 250px;
background-color: rgb(0, 255, 0);
/* 溢出部分的文字会直接消失 */
overflow: hidden;
}
#demo2{
height: 100px;
width: 250px;
background-color: rgb(255, 0, 0);
/* 设置为滚动条模式 不换行 */
overflow: scroll;
}
#demo3{
height: 100px;
width: 250px;
background-color: rgb(0, 183, 255);
/* 上下滚动条模式 自动换行 */
overflow: auto;
}
#demo4{
height: 100px;
width: 250px;
background-color: rgb(255, 0, 0);
/* 默认状态 溢出部分的文字可见 */
overflow: visible;
}
</style>
</head>
<body>
<p id="demo1">文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字</p>
<p id="demo2">文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字</p>
<p id="demo3">文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字</p>
<p id="demo4">文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字</p>
</body>
</html>
头像框案例
<!DOCTYPE html>
<html>
<head>
<title>头像边框案例</title>
<meta charset="utf-8">
<style>
body{
margin:0;
background-color: #4e4e4e;
}
#d1{
height: 200px;
width: 200px;
/* 让边框成为圆形 */
border-radius: 50%;
border: 5px solid white;
margin: 0 auto;
/* 隐藏图片超出边框的部分 */
overflow: hidden;
}
/* 让图片适应边框的大小 */
#d1>img{
width: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="1.jpg" alt="">
</div>
</body>
</html>
4.10 z-index模态框
在很多登录的情况下，会在网页中弹出一个登录框，将下方的页面给屏蔽掉，达到朦胧的效果，这个叫做模态框
<!DOCTYPE html>
<html>
<head>
<title>模态框</title>
<meta charset='utf-8'>
<style>
body{
margin:0;
}
.cover{
position:fixed;
left: 0;
top:0;
right: 0;
bottom: 0;
/* 需要透明度 使用rgba 0.5透明度 */
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal{
background-color: white;
height: 200px;
width: 400px;
/* 定位符动到最上层 */
position:fixed;
left: 50%;
top:50%;
z-index: 100;
/* 由于定位点默认在左上，所以需要调整定位到高度和宽度的一半 */
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>最底层内容区域</div>
<div class="cover"></div>
<div class="modal">
<h1>登录页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p><input type="submit"></p>
</div>
</body>
</html>
4.11 opacity透明度
它不单单可以修改颜色的透明度，也可以修改字体的透明度
<!DOCTYPE html>
<html>
<head>
<title>透明度</title>
<meta charset="utf-8">
<style>
#d1{
/* rgba只能影响背景颜色 */
background-color: rgba(0,0,0,0.5);
}
#d2{
background-color: rgb(0,0,0);
/* opacity可以影响字体 */
opacity: 0.5;
color: red;
}
</style>
</head>
<body>
<p id="d1">111</p>
<p id="d2">222</p>
</body>
</html>
5 案例作业
github地址
https://github.com/kinghtxg/home_work/tree/main/Python/%E5%89%8D%E7%AB%AF%E4%BD%9C%E4%B8%9A-%E5%8D%9A%E5%AE%A2%E5%9B%AD%E9%A1%B5%E9%9D%A2%E6%90%AD%E5%BB%BA
代码
index.html
<!DOCTYPE html>
<html>
<head>
<title>博客园</title>
<meta charset="utf-8">
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="png/1.jpg" alt="">
</div>
<div class="blog-title">
<p>kinght's blog</p>
</div>
<div class="blog-info">
<p>什么都没有留下！</p>
</div>
<div class="blog-link">
<!-- 快捷输入ul>li*3>a -->
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#web打点</a></li>
<li><a href="">#内网渗透</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article">
<div class="article-title">
<span class="title">论开车重要性</span>
<span class="time">2023/01/29</span>
</div>
<div class="article-body">
<p>kinght从来不开车，非常正儿八经</p>
</div>
<div class="article-bottom">
<span>#python</span>
<span>#javascript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车重要性</span>
<span class="time">2023/01/29</span>
</div>
<div class="article-body">
<p>kinght从来不开车，非常正儿八经</p>
</div>
<div class="article-bottom">
<span>#python</span>
<span>#javascript</span>
</div>
</div>
<div class="article">
<div class="article-title">
<span class="title">论开车重要性</span>
<span class="time">2023/01/29</span>
</div>
<div class="article-body">
<p>kinght从来不开车，非常正儿八经</p>
</div>
<div class="article-bottom">
<span>#python</span>
<span>#javascript</span>
</div>
</div>
</div>
</body>
</html>
blog.css
/* 这是博客园首页的样式文件 */
/* 通用样式 */
body{
/* 去除背景边框 */
margin:0;
/* 修改背景颜色 防止白色刺眼 */
background-color: #eeeeee;
}
a{
/* 去掉a标签下划线 */
text-decoration: none;
}
ul{
/* 去掉列表的图形 */
list-style-type: none;
/* 列表自带40px的padding-left */
padding: 0;
}
/* 左侧样式 */
.blog-left{
float: left;
width: 20%;
height: 100%;
position:fixed;
background-color: #4e4e4e;
}
/* 头像 */
.blog-avatar{
height: 200px;
width: 200px;
border-radius: 50%;
border: 5px solid white;
/* 位置上下20px 左右居中 */
margin: 20px auto;
overflow: hidden;
}
.blog-avatar>img{
width: 100%;
}
/* 修改title和info */
.blog-title,.blog-info{
color:darkgray;
font-size: 18px;
text-align: center;
}
/* 修改title和link字体 */
.blog-link,.blog-tag{
font-size: 24px;
}
.blog-link a,.blog-tag a{
color: darkgray;
}
.blog-link a:hover,.blog-tag a:hover{
color: white;
}
.blog-link ul,.blog-tag ul{
text-align: center;
margin-top: 100px;
}
/* 右侧样式 */
.blog-right{
float: right;
width: 80%;
height: 100%;
}
.article{
background-color: white;
margin: 20px 40px 10px 10px;
/* 盒子添加阴影 */
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
/* 调整标题 */
.article-title>.title{
font-size: 36px;
}
/* 调整时间 */
.article-title>.time{
font-size: 18px;
float: right;
margin: 20px;
font-weight: bolder;
}
/* 标题边框 */
.article-title{
/* 为标题边框左侧 添加红色边框线 */
border-left: 5px solid red;
/* 标题缩进 1em等于1个字符大小*/
text-indent: 1em;
}
/* 正文区域 */
.article-body{
font-size: 18px;
text-indent: 2em;
/* 分隔线 */
border-bottom: 1px solid black;
}
/* 标签区域 */
.article-bottom{
padding-left: 30px;
padding-bottom: 10px;
}
本文来自博客园，作者：kinghtxg，转载请注明原文链接：https://www.cnblogs.com/kinghtxg/articles/17158156.html
