前端之css入门基础知识
css初体验
一.什么叫css
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2]
二.为什么要使用css
为了修饰html等文件样式,让网页变得花里胡哨的......
三.怎么使用css
css的学习流程
-
先学会找标签
-
学习基本选择器
和学html一样,了解css之前先了解注释怎么写,注释是代码之母
1)css注释
1 单行注释 2 /*单行注释*/ 3 4 5 多行注释 6 /* 7 第一行注释 8 第二行注释 9 */ 10 11 注释的使用 12 css应该是一个独立的文件 13 /*这是某网页首页的css样式文件*/ 14 /*页面通用样式*/ 15 /*顶部导航条样式*/ 16 /*侧边菜单栏样式*/ 17
1 1.在文件外部再写一个css文件,然后通过link标签将其导入即可(这是最正规的写法) 2 举例:先写一个mucss.css文件 3 /*内容如下*/ 4 p { 5 color: blue; 6 } 7 8 <!-- 再写一个html文件--> 9 <!DOCTYPE html> 10 <html lang="en"> 11 <head> 12 <meta charset="UTF-8"> 13 <title>Title</title> 14 15 <!--导入css文件--> 16 17 <link rel="stylesheet" href="mycss.css"> 18 </head> 19 <body> 20 <p>前端之从入门到放弃的艰辛历程</p> 21 </body> 22 </html> 23 24 25 2.head内style标签内部直接书写css代码 26 <!DOCTYPE html> 27 <html lang="en"> 28 <head> 29 <meta charset="UTF-8"> 30 <title>Title</title> 31 32 <!--通过style标签来写入css代码--> 33 34 <style> 35 p { 36 color: brown; 37 } 38 </style> 39 </head> 40 <body> 41 <p>前端之从入门到放弃的艰辛历程</p> 42 </body> 43 </html> 44 45 46 3)在标签内部通过style属性直接书写对应的样式(这个不推荐使用) 47 <!DOCTYPE html> 48 <html lang="en"> 49 <head> 50 <meta charset="UTF-8"> 51 <title>Title</title> 52 </head> 53 <body> 54 55 <!--在标签内直接修改--> 56 <p style="color: chartreuse">前端之从入门到放弃的艰辛历程</p> 57 58 </body> 59 </html>
css的语法结构非常简单
选择器 {属性名:属性值;属性名1,属性值1;属性名2,属性值2}
4)选择器
1.基本选择器
基本选择器包括标签选择器(标签名):该标签都会被修改样式
, 类选择器(.类名):继承该类的标签样式都会被修改
id选择器(#id):有此id号 的标签都会被修改样式
通用选择器(*):全部标签都被修改样式
举例
1 标签选择器 2 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Title</title> 8 <style> 9 /*通用选择器*/ 10 * { 11 color: chocolate; 12 } 13 /*标签选择器*/ 14 span { 15 color: deeppink; 16 } 17 /*标签选择器*/ 18 p { 19 color: aquamarine; 20 } 21 /*id选择器*/ 22 #d1 { 23 color: black; 24 } 25 /*类选择器*/ 26 .c1 { 27 color: blue; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div> 34 <span class="c1"> 35 <p>好好学习,天天向上,</p> 36 </span> 37 </div> 38 39 <div> 40 <span> 41 <p id="d1">不忘初心,牢记使命</p> 42 </span> 43 </div> 44 <div> 45 <span> 46 <p class="c1">人生苦短,我学python</p> 47 </span> 48 </div> 49 </body> 50 </html>
2.组合选择器
后代选择器(选择器a 选择器b):两个标签中间有一个空格,表示前一个选择器a标签内包裹的所有的后一个选择器b标签的样式都被修改,没有层级限制,只要存在即被修改
儿子选择器(选择器a > 选择器b):选择器a内的所有与之直接连系在一起的选择器b都会被修改样式,即存在层级限制
毗邻选择器(选择器a + 选择器b):表示选择器a结束后紧挨的第一个选择器b标签会被修改样式
弟弟选择器(选择器a ~ 选择器b): 表示同一级别的选择器a标签下的所有选择器b标签的样式都被修改,但是注意存在层级限制
1 举例: 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 /*后代选择器*/ 9 /*空格表示div标签内的所有p标签都会被更改样式,不会有层级限制*/ 10 div p { 11 color: blue; 12 } 13 14 /*儿子选择器*/ 15 /*大于号表示div标签内部的所有直接连系的span标签都会被修改样式,有层级限制*/ 16 div > span { 17 color: gold; 18 } 19 20 /*毗邻选择器*/ 21 /*表示div标签紧挨着的下一个span标签的样式被修改,上一个则不会*/ 22 div + span { 23 color: aqua; 24 } 25 26 /*弟弟选择器*/ 27 /*同一级别的div标签下的所有span标签都被修改样式*/ 28 div ~ span { 29 color: blueviolet; 30 } 31 </style> 32 </head> 33 <body> 34 <span>第一个div标签上面的第一个span标签</span> 35 <span>第一个div标签上面的第二个span标签</span> 36 <div> 37 <span>第一个div标签内的第一个span标签</span> 38 <p> 39 <span>第一个p标签内的第一个span标签</span> 40 </p> 41 <span>第一个div标签内的最后一个span标签</span> 42 </div> 43 <span>第一个div标签后的第一个span标签</span> 44 <span>第一个div标签后的第二个span标签</span> 45 <span>第一个div标签后的第三个span标签</span> 46 <div>第二个div标签 47 <p>第二个div标签后的第一个p标签</p> 48 </div> 49 <p>第二个div标签后的第一个p标签</p> 50 <span>第二个div标签后的最后一个span标签</span> 51 </body> 52 </html>
3.属性选择器
补充:html标签可以有默认的属性值,也可以自定义属性值,并且支持多个
[ ]:属性选择器的标志符就是中括弧,里面放标签的属性,可以精确指到某一个属性所在标签的,对此标签所有的内容进行修改
1 举例: 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 /*属性选择器 []*/ 9 /*用[]将属性包起来,会找到页面上所有的具有该属性的标签,将这些标签全部修改样式*/ 10 [username] { 11 color: yellowgreen; 12 } 13 /*会进一步精确到username='张飞'这个属性所在的标签位置,然后修改样式*/ 14 [username='张飞'] {color: blue} 15 16 /*再进一步精确到标签内的username='李四'这个属性所在标签位置,然后修改修改样式*/ 17 input[username="李四"] { 18 background-color: aqua; 19 } 20 21 </style> 22 23 </head> 24 <body> 25 <input type="text" username="张三" > 26 <input type="text" username="李四"> 27 <input type="text" username="王五"> 28 <p username="张飞">大河向东流啊</p> 29 <div username="关羽">天上的星星参北斗啊</div> 30 <span username="李四">说走咱就走啊</span> 31 </body> 32 </html>
将一些选择器相互嵌套和分组使用,怎加查询效率
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*属性选择器 []*/ 8 /*用[]将属性包起来,会找到页面上所有的具有该属性的标签,将这些标签全部修改样式*/ 9 [username] { 10 color: yellowgreen; 11 } 12 /*会进一步精确到username='张飞'这个属性所在的标签位置,然后修改样式*/ 13 [username='张飞'] {color: blue} 14 15 /*再进一步精确到标签内的username='李四'这个属性所在标签位置,然后修改修改样式*/ 16 input[username="李四"] { 17 background-color: aqua; 18 } 19 20 </style> 21 22 </head> 23 <body> 24 <input type="text" username="张三" > 25 <input type="text" username="李四"> 26 <input type="text" username="王五"> 27 <p username="张飞">大河向东流啊</p> 28 <div username="关羽">天上的星星参北斗啊</div> 29 <span username="李四">说走咱就走啊</span> 30 </body> 31 </html>
a链接标签默认链接是蓝色的,但是只要点击过一次这个链接就会变成紫色,浏览器会记住你是否点击过这个网址,这些都可以自定义的
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*未点击时的初始状态*/ 8 a:link { 9 10 color: blue; 11 } 12 /*鼠标悬浮时的状态*/ 13 a:hover { 14 color: aqua; 15 } 16 /*鼠标点击时的状态*/ 17 a:active { 18 color: yellow; 19 } 20 /*点击过后的状态*/ 21 a:visited { 22 color: deeppink; 23 } 24 </style> 25 </head> 26 <body> 27 <a href="https://edu.51cto.com/">点击跳转1</a> 28 <a href="https://www.souhu.com/">点击跳转1</a> 29 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪元素选择器</title> 6 <style> 7 /*设置p标签的第一个字符的颜色和大小*/ 8 p:first-letter { 9 color: deeppink; 10 font-size:480px ; 11 } 12 /*在p标签语句的前面加上指定语句,这些语句不可被指定*/ 13 p:before { 14 content: '这么帅的我'; 15 color: blue; 16 } 17 18 p:after { 19 content: '?'; 20 color: chocolate; 21 } 22 </style> 23 </head> 24 <body> 25 <p>无敌的我是多么的寂寞</p> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>锄禾日当午</p> 14 </body>
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式
1 p { 2 color: green; 3 }
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等
-
优先级
1.选择器相同
就近原则
2.选择器不同
补充:除此之外还可以通过添加 !impotrant 的方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
万不得已可以使用!important
五.css属性设置
1)长和宽的设置
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置长宽度,行内标签的宽度由内容来决定,无法设置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 width:200px; 9 height:300px; 10 } 11 span { 12 width:300px; 13 heigth:500px; 14 } 15 </style> 16 </head> 17 <body> 18 <div> 19 老子天下第一 20 </div> 21 <span> 22 前端有啥难的 23 </span> 24 </body>
2)文字的字体,大小,粗细属性
-
font-family
可以把多个字体名称作为一个 “回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
-
字体大小
font-size
可以设置字体的大小
-
font-weight
用来设置字体的体重(即粗细)
值 | 描述 |
---|---|
normal | 默认值,标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
100~900 | 设置具体粗细,400等同于normal,而700等同于bold |
inherit | 继承父元素字体的粗细值 |
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p { 8 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; 9 10 font-weight: bold; 11 /*font-size: 30px;*/ 12 font-size: inherit; 13 } 14 15 </style> 16 </head> 17 <body> 18 <p> 19 学好数理化,走遍天下都不怕 20 </p> 21 </body> 22 </html>
3)文本颜色
设定颜色有四种方式
-
颜色的名称:如red,yello等
-
一个RGB值(三基色红绿蓝):如rgb(81,195,50)指的就是绿色
-
十六进制值:#51C332也表示绿色
-
rgba:rgba(81,195,50,0.9)这个0.3指定了色彩的透明度,范围在0.0~1.o之间
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p { 8 color: green; 9 color: rgb(81,195,50); 10 color: #51C332; 11 color: rgba(81,195,50,0.9); 12 13 14 } 15 16 </style> 17 </head> 18 <body> 19 <p> 20 学好数理化,走遍天下都不怕 21 </p> 22 </body>
4)文字对齐,装饰,缩进属性
-
文字对齐
值 描述 left 左边对齐 默认值 right 右对齐 center 居中对齐 justify 两端对齐
-
文字装饰
text-decoration 属性用来给文字添加特殊效果。
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
inherit | 继承父元素的text-decoration属性的值。 |
当我设置a标签的时候会默认有一条下划线,可以通过设置
text-decoration: None;
的方式来去掉下划线
-
首行缩进
text-indent:可以设置段落的第一行缩进值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #d1 { 8 text-indent: 32px; 9 text-align: left; 10 text-decoration: underline; 11 } 12 #d2 { 13 text-align: right; 14 text-decoration: overline; 15 } 16 #d3 { 17 text-align: center; 18 text-decoration: line-through; 19 } 20 #d4 { 21 text-align: justify; 22 text-decoration: none; 23 } 24 </style> 25 </head> 26 <body> 27 <p id="d1">大家好</p> 28 <p id="d2">大家下午好</p> 29 <p id="d3">大家早上好</p> 30 <p id="d4">晚上好</p> 31 </body> 32 </html>
5)背景属性(background)
-
line-height: 1.5; orphans: 4; margin-top: 1rem; margin-bottom: 1rem; font-size: 1.125rem; white-space: pre-wrap; position: relative; color: rgb(51, 51, 51); font-family: Merriweather, "PT Serif", Georgia, "Times New Roman", STSong, serif;">注意:background-color只改变背景的颜色,不改变文本颜色,而color可以改变文本颜色
-
background-img: url('1.jpg');可以放本地文件也可以放链接
背景重复
background-repeat: repeat;
-
repeat(默认):背景图片平铺排满整个网页
-
repeat-x:背景图片只在水平方向上平铺
-
repeat-y:背景图片只在垂直方向上平铺
-
no-repeat:背景图片不平铺
背景位置
background-position: left top;
background-position: 200px 200px;
-
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 background-image: url("111.jpg"); 9 /*background-color: yellow;*/ 10 /*color: green;*/ 11 background-repeat: repeat; 12 width: 800px; 13 height: 1000px; 14 } 15 </style> 16 </head> 17 <body> 18 <div>书中自有颜如玉</div> 19 </body> 20 </html>
1 background:#336699 url('1.png') no-repeat left top;
6)背景图片的应用
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #d1 { 8 background-image: url("111.jpg"); 9 background-attachment: fixed; 10 } 11 #d2 { 12 background-image: url("32.jpg"); 13 background-attachment: fixed; 14 } 15 </style> 16 </head> 17 <body> 18 <div style="height: 600px; background-color:red" ></div> 19 <div style="height: 600px;" id="d2" ></div> 20 <div style="height: 600px; background-color:green" ></div> 21 <div style="height: 600px;" id="d1"></div> 22 <div style="height: 600px; background-color:blue" ></div> 23 </body>
边框属性
-
border-width 边框宽
-
border-style 样式
-
border-color 颜色
#i1 {
border-width: 2px;
border-style: solid;
border-color: red;
}
通常使用简写方式:
#i1 {
border: 2px solid red;
}
边框样式
值 | 描述 |
---|---|
none | 无边框。 |
dotted | 点状虚线边框。 |
dashed | 矩形虚线边框。 |
solid | 实线边框 |
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p { 8 border-style: dashed;/*边框样式*/ 9 border-color: red ; /*边框颜色*/ 10 border-width: 5px;/*边框粗细*/ 11 border-left: dotted #ff744e;/*左边框线修改颜色样式*/ 12 border-right: dashed green; 13 border-top: solid blue; 14 border-bottom: dashed deeppink;/*下边框线修改颜色样式*/ 15 } 16 /*当方向边框只出现一个的时候会同时表示相对应的另一个边框样式*/ 17 18 </style> 19 </head> 20 <body> 21 <p> 22 好好学习,天天向上 23 </p> 24 </body> 25 </html>
8)画圆
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 height: 200px; 9 width: 200px; 10 border-radius: 50%; 11 background-image: url("111.png"); 12 background-repeat: no-repeat; 13 } 14 </style> 15 </head> 16 <body> 17 <div></div> 18 </body> 19 </html>
9).display属性
用于控制HTML元素的显示效果。
值 | 意义 |
---|---|
display:"none" | HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
display:"block" | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:"inline" | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别:
visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #d1 { 8 height: 100px; 9 /*width: 50px;*/ 10 background-color: blue; 11 display: block; 12 } 13 #d4 { 14 height: 100px; 15 width: 100px; 16 background-color: deeppink; 17 display: block; 18 } 19 #d2 { 20 height: 100px; 21 width: 100px; 22 background-color: green; 23 24 display: none; 25 } 26 #d6 { 27 height: 100px; 28 width: 100px; 29 background-color: brown; 30 31 display: inline; /*有疑问*/ 32 } 33 #d5 { 34 height: 100px; 35 width: 100px; 36 background-color: green; 37 38 visibility: hidden; 39 } 40 #d3 { 41 height: 50px; 42 width: 100px; 43 background-color: yellow; 44 display: inline-block; 45 } 46 47 48 </style> 49 </head> 50 <body> 51 <div id="d1"> 52 第一句话 53 </div> 54 <span id="d4"> 55 第四句话 56 </span> 57 <div id="d2"> 58 第二句话 59 </div> 60 <div id="d3"> 61 第三句话 62 </div> 63 <div id="d5"> 64 第三句话 65 </div> 66 <div id="d6"> 67 第三句话 68 </div> 69 70 </body> 71 </html>
10.盒子模型
-
margin: 用于标签与标签之间的距离;margin的最基本用途就是控制标签周围空间的间隔,从视觉角度上达到相互隔开的目的。
-
padding: 用于控制标签内部文本内容到边框之间的距离;
-
Border(边框): 围绕在内边距和内容外的边框。
-
Content
margin:
body标签默认自带8px的距离,可以通过
body { margin: 0; /*取消body标签自带的8px的外边距*/}
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
推荐使用
.margin-test {
margin: 5px 10px 15px 20px;
}
顺序:上右下左
常用居中方式
margin: 0 auto;
padding
内填充,控制标签内文件到标签的距离
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序:上右下左
补充padding的常用简写方式:
提供一个,用于四边;
提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
提供四个参数值,将按上-右-下-左的顺序作用于四边;
11.浮动(float)
在 CSS 中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素,另外浮动的元素是脱离正常文档流的 自身多大就会占多大 不再有独占一行的概念
关于浮动的两个特点:
-
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
-
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left:向左浮动
right:向右浮动
none:默认值,不浮动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 .c1 { 11 height: 100px; 12 width: 100px; 13 background-color: red; 14 float: left; 15 } 16 .c2 { 17 height: 100px; 18 width: 100px; 19 background-color: green; 20 float: right; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="c1"></div> 26 <div class="c2"></div> 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .left-menu { 8 background-color: #4e4e4e; 9 width: 20%; 10 height: 1000px; 11 float: left; 12 } 13 .right-menu { 14 background-color: wheat; 15 width: 80%; 16 height: 2000px; 17 float: right; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="left-menu"></div> 23 <div class="right-menu"></div> 24 </body> 25 </html>
clear:
clear属性规定元素的哪一侧不允许其他浮动元素。
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
注意:clear属性只会对自身起作用,而不会影响其他元素。
清除浮动的副作用(父标签塌陷问题)
主要有三种方式:
-
固定高度
-
伪元素清除法
-
overflow:hidden
伪元素清除法(使用较多):
1 .clearfix:after { 2 content: ""; /*设置一个空的内容标签*/ 3 display: block; 4 clear: both; 5 }
12.overflow溢出属性
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
-
overflow(水平和垂直均设置)
-
overflow-x(设置水平方向)
-
overflow-y(设置垂直方向)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 height: 50px; 9 width: 50px; 10 border: 1px solid black; 11 overflow: auto; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="c1"> 17 遵循社会主义核心价值观 18 遵循社会主义核心价值观 19 遵循社会主义核心价值观 20 遵循社会主义核心价值观 21 遵循社会主义核心价值观 22 遵循社会主义核心价值观 23 遵循社会主义核心价值观 24 </div> 25 </body> 26 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title>Title</title> 9 <style> 10 body { 11 margin: 0; 12 background-color: antiquewhite; 13 } 14 .c1 { 15 height: 100px; 16 width: 100px; 17 border-radius: 50%; 18 border: 5px solid white; 19 /*background-image: url("111.png");*/ 20 /*background-repeat: no-repeat;*/ 21 overflow: hidden; 22 } 23 img { 24 max-width: 100%; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="c1"> 30 <img src="111.jpg" alt=""> 31 </div> 32 </body> 33 </html>
14.定位(position)
static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。
relative(相对定位)
相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。
absolute(绝对定位)
定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。
另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绝对定位</title> 6 <style> 7 .c1 { 8 height: 100px; 9 width: 100px; 10 background-color: red; 11 float: left; 12 } 13 .c2 { 14 height: 50px; 15 width: 50px; 16 background-color: #ff6700; 17 float: right; 18 margin-right: 400px; 19 position: relative; 20 21 } 22 .c3 { 23 height: 200px; 24 width: 200px; 25 background-color: green; 26 position: absolute; 27 top: 50px; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="c1"></div> 33 <div class="c2"> 34 <div class="c3"></div> 35 </div> 36 37 </body> 38 </html>
fixed(固定)
在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>返回顶部示例</title> 8 <style> 9 * { 10 margin: 0; 11 } 12 13 .d1 { 14 height: 1000px; 15 background-color: red; 16 } 17 18 .scrollTop { 19 background-color: blue; 20 padding: 10px; 21 text-align: center; 22 position: fixed; 23 right: 10px; 24 bottom: 20px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="d1">111</div> 30 <div class="scrollTop">返回顶部</div> 31 </body> 32 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <style> 8 .c1 { 9 height: 50px; 10 width: 100px; 11 background-color: dodgerblue; 12 } 13 .c2 { 14 height: 100px; 15 width: 50px; 16 background-color: orange; 17 position: relative; 18 left: 100px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="c1"></div> 24 <div class="c2"></div> 25 <div style="height: 100px;width: 200px;background-color: black"></div> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <style> 8 .c1 { 9 height: 50px; 10 width: 100px; 11 background-color: red; 12 position: relative; 13 } 14 .c2 { 15 height: 50px; 16 width: 200px; 17 background-color: green; 18 position: absolute; 19 left: 50px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="c1">购物车 25 <div class="c2">空空如也~</div> 26 <div style="height: 50px;width: 100px;background-color: deeppink"></div> 27 </div> 28 29 </body> 30 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 </head> 8 <body> 9 <div class="c1" style="height: 50px;width: 500px;background-color: black"></div> 10 <div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div> 11 <div class="c3" style="height: 10px;width: 100px;background-color: green"></div> 12 13 </body> 14 </html>
上述例子可知:
脱离文档流:
绝对定位
固定定位
不脱离文档流:
相对定位
#i2 {
z-index: 999;
}
设置对象的层叠顺序。
-
z-index 值表示谁压着谁,数值大的压盖住数值小的,
-
只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
-
z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
-
从父现象:父亲怂了,儿子再牛逼也没用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .modal { 8 background-color: #808080; 9 position: fixed; 10 left: 0; 11 top: 0; 12 bottom: 0; 13 right: 0; 14 z-index: 999; 15 opacity: 0.4; 16 } 17 .form { 18 background-color: white; 19 height: 200px; 20 width: 100px; 21 position: fixed; 22 top: 50%; 23 left: 50%; 24 z-index: 1000; 25 margin-top: -100px; 26 margin-left: -50px; 27 } 28 </style> 29 </head> 30 <body> 31 <div>我是最底下的那个</div> 32 <div class="modal"></div> 33 <div class="form"></div> 34 </body> 35 </html><!DOCTYPE html> 36 <html lang="en"> 37 <head> 38 <meta charset="UTF-8"> 39 <meta http-equiv="x-ua-compatible" content="IE=edge"> 40 <meta name="viewport" content="width=device-width, initial-scale=1"> 41 <title>自定义模态框</title> 42 <style> 43 .cover { 44 background-color: rgba(0,0,0,0.65); 45 position: fixed; 46 top: 0; 47 right: 0; 48 bottom: 0; 49 left: 0; 50 z-index: 998; 51 } 52 53 .modal { 54 background-color: white; 55 position: fixed; 56 width: 600px; 57 height: 400px; 58 left: 50%; 59 top: 50%; 60 margin: -200px 0 0 -300px; 61 z-index: 1000; 62 } 63 </style> 64 </head> 65 <body> 66 67 <div class="cover"></div> 68 <div class="modal"></div> 69 </body> 70 </html>
用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 background-color: rgba(128,128,128,0.4); 9 } 10 .c2 { 11 background-color: rgb(128,128,128); 12 opacity: 0.4; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="c1">阿萨德撒大家都</div> 18 <div class="c2">阿萨德撒大家都</div> 19 </body> 20 </html>
6)背景图片的应用
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响: