前端(CSS语言-详解）
一、定义CSS样式的三种分类
1.1 行内样式：
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="color: red;"> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html>
1.2 head内部样式：
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { # 找到文档中的所有div选择器进行样式渲染 color: red; } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html>
1.3 通过外部CSS文件渲染：
示例： html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="democss1.css"> # 指定渲染的外部文件 </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html> css文件： div { color: red; }
二、基本选择器
2.1ID选择器：
注意：id值不能重复，一个HTML文档中ID值是唯一的
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { # id选择器使用 color: red; font-size: 50px; # 字体默认16px } </style> </head> <body> <div id="d1"> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html>
2.2 类(class)选择器：
注意：
1.类选择器可以重复，一个html文件中可以存在多个相同的类选择器
2.一个类选择器可以有多个名字,例如：(class="c1 c2")
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { # class选择器使用 color: red; font-size: 50px; } </style> </head> <body> <div class="c1"> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html>
2.3 通用选择器：
注意：通用选择器，指定html文档中的所有内容进行渲染
示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { # 通用选择器使用 color: red; font-size: 50px; } </style> </head> <body> <div class="c1"> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> <div class="c2"> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html>
2.4 组合选择器：
2.4.1 后代(子孙)选择器：
注意：指定某一个选择器中所有的标签渲染(子子孙孙)
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 p{ # 后代选择器使用：指定.c1下的所有的p标签渲染 color: red; font-size: 50px; } </style> </head> <body> <div class="c1"> <p>在苍茫的大海上</p> <div class="c2"> <p>狂风卷集着乌云</p> <div class="c3"> <p>在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> </div> </div> </div> <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的p标签不生效 </body> </html>
2.4.2 后代(儿子)选择器：
注意：指定某一个选择器中下一层指定标签进行渲染
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 > p{ # 儿子选择器使用：指定.c1下的第一层的p标签渲染 color: red; font-size: 50px; } </style> </head> <body> <div class="c1"> <p>在苍茫的大海上</p> <div class="c2"> <p>狂风卷集着乌云</p> # 此处的p标签不生效 <div class="c3"> <p>在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的p标签不生效 </div> </div> </div> <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的p标签不生效 </body> </html>
2.4.3 毗邻选择器：
注意：选择指定的标签紧挨着的标签渲染有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 + p{ # 毗邻选择器使用：指定.c1标签相邻的标签渲染 color: red; font-size: 50px; } </style> </head> <body> <div class="c1"> <p>在苍茫的大海上</p> # 此处的p标签不生效 <div class="c2"> <p>狂风卷集着乌云</p> # 此处的p标签不生效 <div class="c3"> <p>在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的p标签不生效 </div> </div> </div> <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处标签生效 <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处标签不生效 </body> </html>
2.4.4 弟弟选择器：
注意：选择指定的标签下面的所有同级标签渲染有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 ~ p{ # 弟弟选择器使用：指定.c1标签所有p标签渲染 color: red; font-size: 50px; } </style> </head> <body> <div class="c1"> <p>在苍茫的大海上</p> # 此处的p标签不生效 <div class="c2"> <p>狂风卷集着乌云</p> # 此处的p标签不生效 <div class="c3"> <p>在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的p标签不生效 </div> </div> </div> <span>众里寻她千百度，蓦然回首，那人却在灯火阑珊处</span> # 此处的p标签不生效 <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的p标签生效 <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的p标签生效 <span>众里寻她千百度，蓦然回首，那人却在灯火阑珊处</span> # 此处的p标签不生效 </body> </html>
三、属性选择器
3.1 带有指定属性选择器：
注意：指定属性标签有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p[abc] { # 属性选择器的使用：指定属性为abc的标签做渲染 color: pink; font-size: 40px; } </style> </head> <body> <div> <p abc>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的标签生效 <p >在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的标签不生效 </div> </body> </html>
3.2 带有指定属性和值选择器：
注意：指定属性和值的标签有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p[abc = “123”] { # 属性选择器的使用：指定属性为abc的标签且值相同的标签做渲染 color: pink; font-size: 40px; } </style> </head> <body> <div> <p abc="123">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的标签生效 <p abc="1234">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的标签不生效 <p abc="123">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的标签生效 </div> </body> </html>
四、组合选择器
注意：多个标签同时使用，组合使用有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1 p,span,div { # 组合选择器：指定p,span,div标签都有效 color: red; font-size: 40px; } </style> </head> <body> <div id="i1"> <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 此处的标签生效 <span>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</span> # 此处的标签生效 <div>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</div> # 此处的标签生效 </div> </body> </html>
五、伪类选择器
5.1 未访问的链接(a:link)：
注意：只针对超链接(a)标签有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link { # 未访问的链接，初始颜色红色 color: red; font-size: 40px; } </style> </head> <body> <a href="" target="_blank">百度</a> # 访问以后标签颜色改变 </body> </html>
5.2 已访问的链接(a:visited)：
注意：只针对超链接(a)标签有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link { # 未访问的链接，初始颜色红色 color: red; font-size: 40px; } a:visited { # 访问后的链接，颜色黄色 color: yellow; font-size: 40px; } </style> </head> <body> <a href="" target="_blank">百度</a> # 访问以后标签颜色改变 </body> </html>
5.3 鼠标移动到链接或者标签上(a:hover)：
注意：指定所有标签有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:hover { # 指定标签颜色改变 color: pink; } p:hover { color: pink; } </style> </head> <body> <a href="" target="_blank">百度</a> # 鼠标移动至a标签，颜色变成灰色 <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 鼠标移动至a标签，颜色变成灰色 </body> </html>
5.4 选定的链接或者标签(a:active)：
注意：指定所有标签有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:active { # 指定标签颜色改变 color: pink; } p:active { color: pink; } </style> </head> <body> <a href="" target="_blank">百度</a> # 鼠标点击a标签，颜色变成灰色 <p>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</p> # 鼠标点击a标签，颜色变成灰色 </body> </html>
5.5 输入框获取焦点的样式(input:focus)：
注意：此处只针对input输入框使用有效
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div input:focus { # 设置获取焦点样式：设置字体颜色&背景颜色 color: orange; background-color: #3C3C3C; } </style> </head> <body> <div> 用户名：<input type="text"> </div> </body> </html>
六、伪元素选择器
6.1 首字符特殊样式(first-letter)：
注意：给指定标签的字符指定样式
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div:first-letter { # 指定首字符样式 color: orange; font-size: 40px; } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 # 首字符样式改变 </div> </body> </html>
6.2 标签前部增加内容(before)：
注意：指定的标签最前端添加指定元素
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div:before { # 指定段首元素：<< content: "<<"; } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 # 段首添加元素 </div> </body> </html>
6.3 标签尾部添加内容(after)：
注意：指定的标签最末端添加指定元素
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div:after { # 指定段尾元素：>> content: ">>"; } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 # 段尾添加元素 </div> </body> </html>
七、选择器优先级
7.1 CSS继承：
注意：
1. 通过继承属性，子级标签会继承父级标签的属性
2.CSS继承限制：有些不属性不能被继承：例如：border,margin,padding,background
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { # 设置div选择器 color: red; font-size: 40px; } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 # 此处div标签属性有效 <p> 众里寻她千百度，蓦然回首，那人却在灯火阑珊处 # 因为继承关系，此处p标签属性有效 </p> </div> </body> </html>
7.2 选择器优先级(权重):
注意：
1. 选择器样式：html文件中，同一级优先级情况时，谁最后加载谁有效
2. 优先级顺序：improtant > 内联样式(1000) > id选择器(100) > 类选择器(10) > 元素选择器(1) > 继承(0)
3. 优先级不能累加计算，只遵从优先级顺序
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { # 此处设置div选择器样式，内部p继承div样式，优先级为0 color: red; font-size: 40px; } p { # 此处从新设置p的选择器样式，优先级为1 color: pink; font-size: 40px; } p { # 此处从新加载p选择器样式，谁最后加载谁有效 color: purple; font-size: 40px; } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 # red，40px <p> 众里寻她千百度，蓦然回首，那人却在灯火阑珊处 # purple，40px </p> </div> </body> </html>
八、属性相关
8.1 宽高属性：
注意：块级标签才能设置宽度与高度，内联标签 的宽度与高度由内容决定
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { # 设置块级标签的宽高属性 width: 300px; height: 100px; background: green; } span { # 设置内联标签的宽高属性 /*width: 300px;*/ # 设置宽度无效 /*height: 100px;*/ # 设置高度无效 font-size: 100px; # 通过字体大小调节宽高 background: yellow; } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 # 宽高属性有效 </div> <span> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 # 宽高设置无效，通过字体设置有效 </span> </body> </html>
8.2 字体设置：
注意：
1. 设置字体样式，如果浏览器不支持第一个字体，则会尝试下一个字体样式
2. 对齐方式：left(左对齐，默认)，right(右对齐)，center(居中对齐)，justify(两端对齐)
3. 文字装饰：none(标准文本，默认)，underline(文本下划线)，overline(文本上划线)，line-through(穿过文本的一条线)
示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { # 设置字体类型：宋体，最先检测宋体样式 font-size: 100px; font-family: "宋体", "隶书", "行书"; font-weight: bold; # 字重：粗体 } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html>
示例二： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 100px; font-size: 50px; text-align: center; # 设置文本对齐方式：水平居中对齐 text-decoration: underline; # 设置文本装饰：下划线(a标签可以指定为none去除下划线) line-height: 100px; # 此处指定行高同块级标签同高时，文本竖直居中对齐 } </style> </head> <body> <div> 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。 </div> </body> </html>
8.3 背景属性：
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { # 设置背景属性 height: 600px; width: 600px; background: url("2.jpg"); # 背景图片：本地图片，同html文件同一级目录 background-repeat: no-repeat; # 设置图片不平铺 background-position: right top; # 设置图片在右上角 border: 2px solid red; # 设置块级标签的边框属性，便于观察图片位置 border-radius: 50%; # 设置边框效果，50%为圆形 background-attachment: fixed; # 固定背景图片位置，防止滚动，(background-image无此属性) } </style> </head> <body> <div></div> # 指定块级标签 </body> </html>
8.4 边框属性：
注意：
1. 设置相同属性时，后面加载的效果生效
2. 边框样式：none(无边框),dotted(点状虚线边框)， dashed(矩形虚线边框)，solid(实线边框)
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; /*border: 2px solid red;*/ # 组合方式设置边框属性 border-width: 2px; # 设置边框宽度 border-color: yellow; # 设置边框颜色 border-style: solid; # 设置边框样式 border-left: 2px solid red; # 单独设置边框属性 } </style> </head> <body> <div></div> </body> </html>
九、display属性
注意：
1. 改变标签属性，不建议多用，防止标签属性混乱
2. visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
3. display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
属性类型：none(隐藏元素)，block(块属性)，inline(内联标签)，inline-block(内联标签+块级标签属性)
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { border: 2px solid red; display: block; # 改变内联标签(span)属性，变成块级标签 width: 300px; # 设置块级标签后，此出设置处宽高生效 height: 100px; } .c3 { display: inline; # 改变块级标签div属性，变成行内标签，两个c3标签合并到同一行 } .c4 { # 设置内联标签+块级标签属性 border: 2px dotted yellow; height: 200px; width: 300px; display: inline-block; } </style> </head> <body> <span class="c1">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</span> # 独占一行 <span class="c2">在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</span> <br> # 换行 <div class="c3">众里寻她千百度，蓦然回首，那人却在灯火阑珊处</div> <div class="c3">众里寻她千百度，蓦然回首，那人却在灯火阑珊处</div> <div class="c4">衣带渐宽终不悔，为伊消得人憔悴</div> </body> </html>
示例二： display:none与visibility:hidden区别： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1, .c2, .c3 { width: 300px; height: 100px; border: 2px solid red; } .c1 { background-color: red; } .c2 { background-color: green; display: none; # 标签隐藏后，布局空间不保留 visibility: hidden; # 标签隐藏后，布局空间位置任然保留 } .c3 { background-color: pink; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
十、盒子模型
注意：盒子的上下外边框距离以最长的边框距离为准，并不是两者之和
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 2px solid red; # 设置边框属性 padding: 10px 10px; # 设置内边距 margin: 10px 10px; # 设置外边距(上下：10px,左右：10px) background-color: green; } .c2, .c3 { width: 200px; height: 100px; border: 2px solid red; padding: 10px 10px; # 单独设置内边距(padding-left,padding-right,padding-top,padding-bottom) } .c2 { margin: 10px 20px 30px 40px ; # 设置外边距(上：10px,右：20px, 下：30px, 左：40px) background-color: green; } .c3 { margin-top: 50px; # 单独设置上外边距：50px (设置其他边距：margin-right(右)，margin-bottom(下)，margin-left(左)) background-color: deeppink; } </style> </head> <body> <div> 盒子模型 </div> <div class="c2">盒子模型2</div> <div class="c3">盒子模型3</div> </body> </html>
十一、浮动(float)属性
注意：
1. 用于网页布局，要使两个标签在同一行，必须两个标签都采用浮动
2. 标签浮动会导致父级标签坍塌问题，有两种方式处理坍塌
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c2, .c3 { width: 100px; } .c2 { height: 100px; # 设置子标签高度 background-color: green; float: left; } .c3 { height: 150px; # 设置子标签高度 background-color: deepskyblue; float: right; } .c1 { # 处理父级标签坍塌：方式一 height: 150px; # 直接设置父级标签高度撑起标签 } .clearfix:after { # 处理父级标签坍塌，伪元素选择器：方式二 content: ''; # 尾部添加一个空内容 display: block; # 设置.clearfix:after为块级标签 clear: both; # 且规定.clearfix:after左右两侧均不允许浮动元素(清除浮动) } .c4 { height: 200px; background-color: deeppink; } </style> </head> <body> <div class="c1 clearfix"> # 父级标签,class定义两个名字c1,clearfix，名字之间没有优先级关系，设置属性只与html加载顺序有关 <div class="c2"></div> <div class="c3"></div> </div> <div class="c4"></div> </body> </html>
十二、溢出属性(overflow)
注意：溢出属性：hidden(隐藏)，visible(默认)，scroll（滚动），auto(滚动)，inherit（继承）
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; border: 2px solid red; overflow: hidden; # 设置溢出属性：隐藏溢出的部分内容 } </style> </head> <body> <div>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。</div> </body> </html>
十三、定位流(position)
注意：标签设置了定位流则不能再使用浮动流(反之也成立)，relative，static(占据文档流)除外
定位属性：
1. static(无定位):默认值：不能当作绝对定位的参照物，并且设置标签对象的left、top等值不起作用
2. relative(相对定位)：相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物作偏移(不存在父级标签塌陷问题)，通过属性：top,right,bottom,left定位
3. absolute(绝对定位)：设置为绝对定位的元素框从文档流完全删除，(会存在父级标签塌陷的问题)，绝对定位(absolute)通过上层相对定位标签(relative)定位或者不存在相对定位标签(relatice)时，以最初包含块(body)标签作定位，定位后元素生成一个块级标签，通过属性：top,right,bottom,left,z-index定位
4. fixed(固定)：对象脱离正常文档流，以窗口为参考点进行定位，不论窗口是否滚动，它都会固定在这个位置，通过属性：top,right,bottom,left,z-index定位
示例一： • 相对定位： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .c1, .c2, .c3 { width: 100px; height: 100px; } .c1 { background-color: red; } .c2 { background-color: deeppink; position: relative; # 设置当前块级标签为相对位置，position定位是相对与原来位置移动，脱离文档流，不会对其他标签布局造成影响 top: -50px; # 向上移动50px left: 100px; # 向右移动100px /*margin-left: 100px;*/ # 可以通过设置边框属性，得到相同结果，会对别的布局造成影响 /*margin-top: -50px;*/ } .c3 { background-color: gold; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
示例二： • 绝对定位： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .c1, .c2, .c3 { width: 100px; height: 100px; } .c { # 设置父级标签属性 width: 500px; height: 500px; background-color: pink; position: relative; # 父级标签设置为相对定位属性，如果此处不设置relative属性，子标签(.c2)会根据最顶层的body定位移动 left: 100px; top: 50px; } .c1 { background-color: red; } .c2 { background-color: blue; position: absolute; # 设置绝对定位属性，此处的绝对定位相对于父级标签(relative)作定位，此处设置为定位流后，父级标签会塌陷 left: 20px; # 相对父级标签(.c)作绝对定位移动，向右移动20px top: 20px # 相对父级标签(.c)作绝对定位移动，向下移动20px } .c3 { background-color: gold; } .dd { # 最上面的一个测试框 width: 100px; height: 100px; border: 1px solid red; } </style> </head> <body> <div class="dd"></div> <div class="c"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </div> </body> </html>
十四、透明度(opacity)
注意：
1. background-color: rgba():是单独给背景设置颜色属性或者字体单独设置透明度，不能对标签整体设置透明度
2. opacity:是针对标签整体(背景和字体)设置透明度
示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 300px; height: 200px; background-color: rgba(60,30,30,0.5); # 背景设置透明度，文字无效 color: black; } .c2 { width: 300px; height: 200px; background-color: deeppink; color: black; opacity: 0.5; # 标签整体设置透明度 } </style> </head> <body> <div class="c1">在苍茫的大海上</div> <div class="c2">在苍茫的大海上</div> </body> </html>
https://www.cnblogs.com/WiseAdministrator/
