CSS 基础篇
一、简介
1、CSS 定义
CSS是Cascading Style Sheets的简称,中文称为层叠样式表。
属性和属性值用冒号隔开,以分号结尾。
2、 CSS 引入方式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>引入css</title> 7 <!-- 2.内嵌样式 --> 8 <style> 9 p{color:darkkhaki;} 10 </style> 11 12 <!-- 3.外部引入 --> 13 <link rel="stylesheet" href="./ceshi.css" type="text/css"> 14 </head> 15 <body> 16 <!-- 1.行内样式 --> 17 <div style="color:darkgreen">学习css 层叠样式表</div> 18 <p>这是一段话</p> 19 20 </body> 21 </html>
3、样式应用顺序
- 行内样式优先级最高
- 针对相同的样式属性,不同的样式属性将以合并的方式呈现
- 相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性
-
!important
指定样式规则应用最优先
二、 选择器(Selector)
1、 基本选择器
(1)通用元素选择器
* 表示应用到所有的标签。
* {color: yellow}
(2)标签选择器
匹配所有使用 div 标签的元素(可以匹配所有标签)
div {color: yellow}
(3)类选择器
匹配所有class属性中包含info的元素。
语法:.类名{样式}(类名不能以数字开头,类名要区分大小写。)
.Mycolor {color: yellow} <h3 class="Mycolor">nick</h3>
(4)ID选择器
使用id属性来调用样式,在一个网页中id的值都是唯一的(是W3C规范而不是规则,所以不会报错)。
语法:#ID名{样式}(ID名不能以数字开头)
#Mycolor {color: yellow} <h3 id="Mycolor">Nick.</h3>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>常用选择器</title> 7 <style> 8 /* 通配选择器 *号代表所有标签 */ 9 * 10 {background-color: indianred;} 11 /* 标签选择器 */ 12 h1 13 {color:darkmagenta} 14 15 /* 类选择器 */ 16 .ceshi1 17 {color:darkolivegreen} 18 19 /* ID选择器 */ 20 #ceshi2 21 {color:darkorange} 22 23 /* 组合选择器 */ 24 /* 越具体指定,越详细,优先级就越高 */ 25 h2.ceshi1 26 {color:darkred;} 27 h3#ceshi2 28 {color:darkseagreen} 29 30 h1,h2,h3,h4 31 {background-color: darkviolet;} 32 33 34 </style> 35 </head> 36 <body> 37 <!-- 38 标签选择器 : 具体指定标签种类 39 类选择器 : 具体指定一类标签(用class修饰的类选择器) 40 ID选择器 : 具体指定一个标签(用id修饰的ID选择器) 41 --> 42 43 <h1>一级标签</h1> 44 <h2 class="ceshi1" >二级标签</h2> 45 <h3 id="ceshi2" >三级标签</h3> 46 <h4 class="ceshi1">四级标签</h4> 47 48 49 </body> 50 </html>
2、组合选择器
同时匹配h3,h4标签,之间用逗号分隔。
h3,h4 {color: yellow;} <h3>Nick</h3> <h4>Jenny</h4>
h2.ceshi1{color:darkred;} h3#ceshi2{color:darkseagreen;} <h2 class="ceshi1" >二级标签</h2> <h3 id="ceshi2" >三级标签</h3>
3、关系选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>关系选择器</title> 7 <style> 8 9 /* 包含(后代)选择器 */ 10 ul li 11 {color:tan;} 12 /* 父子选择器 */ 13 ul>li 14 {color:red;} 15 /* 兄弟选择器 特指一堆 */ 16 ol~li 17 {color:yellowgreen;} 18 /* 相邻选择器 特指一个 */ 19 ol+li 20 {color:teal;} 21 22 </style> 23 </head> 24 <body> 25 <ul> 26 <li>梅花</li> 27 <li>三国演义</li> 28 <li>水浒传</li> 29 <ol> 30 <li>羞答答的玫瑰,静悄悄的开</li> 31 <li>钢铁是怎么弄折的</li> 32 <li>盛和稻夫</li> 33 </ol> 34 <li>西游记</li> 35 <li>红楼梦</li> 36 </ul> 37 38 </body> 39 </html>
4、属性选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>属性选择器</title> 7 <style> 8 input[name] 9 {background-color: thistle;} 10 input[name=username] 11 {background-color: teal;} 12 input[type=password] 13 {background-color: violet;} 14 input[abc=nihao] 15 {background-color: yellow;} 16 17 </style> 18 </head> 19 <body> 20 21 <form action="" method=""> 22 用户名: <input type="text" name="username"> 23 <br> 24 密码 <input type="password" name="pwd"> 25 <br> 26 邮箱 <input type="email" name="email"> 27 <br> 28 <!-- input表单框里面可以自定义属性 --> 29 年龄 <input type="text" abc="nihao" > 30 <br> 31 <input type="submit"> 32 33 34 </form> 35 36 </body> 37 </html>
5、伪类选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>伪类选择器</title> 7 <style> 8 /*在鼠标悬停在a标签时,触发代码*/ 9 a:hover 10 {color:yellowgreen;} 11 /* 特指列表中的第一个 */ 12 ul li:first-child 13 {color:blue;} 14 /* 特指列表中的最后一个 */ 15 ul li:last-child 16 {color:brown} 17 /* 特指列表中的某一个 */ 18 ul li:nth-child(6) 19 {color:cornflowerblue;} 20 /* 特指偶数个 */ 21 ul li:nth-child(even) 22 {color:red;} 23 /* 2n 代表偶数个 */ 24 ul li:nth-child(2n) 25 {color:cyan;} 26 27 /* 特指奇数个 */ 28 ul li:nth-child(odd) 29 {color:green;} 30 /* 2n-1 代表奇数个 */ 31 ul li:nth-child(2n-1) 32 {color:tan;} 33 ul li:hover 34 {background-color: crimson;color:white;} 35 </style> 36 </head> 37 <body> 38 <a href="#"> 百度 </a> 39 40 <ul> 41 <li>李琦</li> 42 <li>李雅琪</li> 43 <li>李炯辉</li> 44 <li>薛宇健</li> 45 <li>吴赔偿</li> 46 <li>王雨涵</li> 47 <li>石磊</li> 48 <li>王生福</li> 49 </ul> 50 51 52 </body> 53 </html>
6、伪对象选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>伪对象选择器</title> 7 <style> 8 #ceshi 9 {background-color: darkgreen;color:white} 10 /* 在内容之前插入数据 */ 11 #ceshi::before 12 { 13 content:"请问:"; 14 color:red; 15 } 16 /* 在内容之后插入数据 */ 17 #ceshi::after 18 { 19 content:"对✔"; 20 color:orange; 21 } 22 /* 鼠标选中后的样式 */ 23 #ceshi::selection 24 { 25 background-color:darkslategray; 26 color:dodgerblue; 27 } 28 29 30 </style> 31 32 </head> 33 <body> 34 35 <span id="ceshi">明天是周六,放假,对不对?</span> 36 37 </body> 38 </html>
7、 选择器的优先级
原则: 泛指的标签元素优先级低,特指的元素优先级更高 , 越具体越高
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>选择器的优先级</title> 7 <style> 8 font 9 {color:deeppink} 10 .one 11 {color:forestgreen;} 12 #two 13 {color:gold;} 14 font 15 {color:indianred!important;} 16 17 </style> 18 </head> 19 <body> 20 <!-- 原则: 泛指的标签元素优先级低,特指的元素优先级更高 , 越具体越高 --> 21 <!-- 标签选择器 -> 类选择器 -> id选择器 -> 行内样式 -> !important(强制把优先级提升到最高) --> 22 <font style="color:blue;" class="one" id="two">234234</font> 23 24 </body> 25 </html>
三. 常用属性
1.颜色属性
color:
- HEX(十六进制色:color: #FFFF00 --> 缩写:#FF0)
- RGB(红绿蓝,使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0%))
- RGBA(红绿蓝透明度,A是透明度在0~1之间取值。使用方式:color:rgba(255,255,0,0.5))
transparent :
- 全透明,使用方式:color: transparent;
opacity:
- 元素的透明度,语法:opacity: 0.5;
- 属性值在0.0到1.0范围内,0表示透明,1表示不透明。
2.字体属性
1. font-style: 用于规定斜体文本
- normal 文本正常显示
- italic 文本斜体显示
- oblique 文本倾斜显示
2. font-weight: 设置文本的粗细
- normal(默认)
- bold(加粗)
- bolder(相当于<strong>和<b>标签)
- lighter (常规)
- 100 ~ 900 整百(400=normal,700=bold)
3. font-size: 设置字体的大小
- 默认值:medium
- <absolute-size>可选参数值:xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
- <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值:smaller、 larger
- <percentage>百分比指定文字大小。
- <length>用长度值指定文字大小,不允许负值。
4 . font-family:字体名称
- 使用逗号隔开多种字体(优先级从前向后,如果系统中没有找到当前字体,则往后面寻找)
5 . font:简写属性
- 语法:font:字体大小/行高 字体;(字体要在最后)
- font:italic bold 14px "楷体";
6.自定义字体名字
- @符号是用来制定字体的规则,用来设置自定义的字体文件
@font-face
{
font-family:"王文";
src:url("./font/方正舒体.TTF");
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>字体属性</title> 7 <style> 8 /* @符号是用来制定字体的规则,用来设置自定义的字体文件 */ 9 @font-face 10 { 11 font-family:"王文"; 12 src:url("./font/方正舒体.TTF"); 13 } 14 15 /* ul li:nth-child(1) 16 {background-color: red;} */ 17 #one 18 { 19 background-color: yellow; 20 /* 字体倾斜 */ 21 font-style:italic; 22 /* 字体粗线 */ 23 font-weight: bold; 24 /* 字体大小 */ 25 font-size: 14px; 26 /* 字体类型 : 微软雅黑 黑体 楷体 宋体... */ 27 font-family:"楷体"; 28 } 29 30 #two 31 { 32 background-color: red; 33 font:italic bold 14px "楷体"; 34 } 35 36 #three 37 { 38 background-color: blue; 39 color:white; 40 font:16px/4 "宋体"; 41 } 42 43 #four 44 { 45 font:32px/4 "王文"; 46 } 47 48 ul 49 { 50 /* 去掉列表前面的点 */ 51 list-style: none; 52 /* 改变鼠标样式 */ 53 cursor:cell; 54 } 55 56 57 </style> 58 </head> 59 <body> 60 <ul> 61 <li id="one">设置字体的相关样式1</li> 62 <li id="two">设置字体的相关样式2</li> 63 <li id="three">设置字体的相关样式3</li> 64 <li id="four">设置字体的相关样式4</li> 65 </ul> 66 67 68 </body> 69 </html>
3. 文本属性
1. white-space: 设置元素中空白的处理方式
- normal:默认处理方式。
- pre:保留空格,当文字超出边界时不换行
- nowrap:不保留空格,强制在同一行内显示所有文本,直到文本结束或者碰到br标签
- pre-wrap:保留空格,当文字碰到边界时换行
- pre-line:不保留空格,保留文字的换行,当文字碰到边界时换行
2. text-align: 水平文字居中位置
- left
- center
- right
3.line-height: 文本行高
- height 和 line-height 如果数值相同,代表垂直方法居中
- normal 默认
4. text-decoration 设置上下划线
- none 默认。
- underline 下划线。
- overline 上划线。
- line-through 中线。
5. text-shadow:文本阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个参数是虚化效果
- 第四个参数是颜色
- text-shadow: 5px 5px 5px #888;
6. word-wrap:自动换行
- word-wrap: break-word;
7. text-indent: 文本缩进
em单位 1em = 1个元素的大小, 按照文字比例进行调整
- text-indent: 2em;
- text-indent: 32px;
8.vertical-align: 文本所在行高的垂直对齐方式
- baseline 默认
- sub 垂直对齐文本的下标,和<sub>标签一样的效果
- super 垂直对齐文本的上标,和<sup>标签一样的效果
- top 对象的顶端与所在容器的顶端对齐
- text-top 对象的顶端与所在行文字顶端对齐
- middle 元素对象基于基线垂直对齐
- bottom 对象的底端与所在行的文字底部对齐
- text-bottom 对象的底端与所在行文字的底端对齐
9. letter-spacing: 添加字母之间的空白
10. word-spacing: 添加每个单词之间的空白
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>文本属性</title> 7 <style> 8 /* 1.把公共部分的样式提炼出来,减少冗余代码 */ 9 .common 10 { 11 width:200px; 12 height:200px; 13 font-size:14px; 14 background-color: red; 15 /* em单位 1em = 1个元素的大小, 按照文字比例进行调整 */ 16 /* 设置缩进 text-indent: 32px; */ 17 text-indent: 2em; 18 } 19 20 /* 2.如果是纯英文,不会默认换行 */ 21 .d1 22 { 23 /* 强制换行 */ 24 word-wrap: break-word; 25 } 26 27 /* 3.如果是中文,会默认换行 */ 28 .d2 29 { 30 /* 强制不换行 */ 31 white-space:nowrap ; 32 } 33 34 /* 4.height 和 line-height 如果数值相同,代表垂直方法居中 */ 35 .d3 36 { 37 width:200px; 38 height:50px; 39 line-height:50px; 40 background-color: rosybrown; 41 } 42 43 /* 5.text-align 水平文字居中位置 left / center /right */ 44 .d4 45 { 46 width:500px; 47 height:50px; 48 line-height:50px; 49 background-color: rosybrown; 50 text-align: center; 51 } 52 53 /* 6.text-decoration 设置上下划线 */ 54 .lianjie 55 { 56 /* text-decoration:none; */ 57 /* text-decoration: overline ; 上划线*/ 58 text-decoration:line-through; /*中划线*/ 59 text-decoration: underline ; /*下划线*/ 60 } 61 62 /* 7.vertical-align 文字和图片的上下位置关系 */ 63 .d5 img 64 { 65 /* top middle bottom 百分比*/ 66 vertical-align: -900%; 67 } 68 69 70 /* 71 8.text-shadow 设置文字阴影 72 none: 无阴影 73 <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 74 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 75 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 76 <color>: 设置对象的阴影的颜色。 77 */ 78 .d6 79 {text-shadow:4px 4px 3px black;} 80 </style> 81 82 </head> 83 <body> 84 85 <div class="common d1">sdflsdfjkasdjkfasdjfkasjdkfjalsdfjlaskdjflakjsdlfkasdf</div> 86 <br> 87 <div class="common d2">水电费234水电费水电费水电费234水电费水电费水电费</div> 88 <br> 89 <div class="d3">设置行高</div> 90 <br> 91 <div class="d4">水平居中</div> 92 <br> 93 <a href="" class="lianjie">我是a连接</a> 94 <br> 95 <div class="d5"> 96 <img src="../../images/xiao.gif" alt=""> 97 小孩要喝奶 98 </div> 99 <br> 100 <div class="d6">这是文字阴影效果</div> 101 <br> 102 <br> 103 104 </body> 105 </html>
4.背景属性
1. background-color:背景颜色:
2. background-image 设置图像为背景
- url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 图片地址
- background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果
3. background-position 设置背景图像的位置坐标
- background-position: center center; 图片置中,x轴center,y轴center
- 1px -195px 截取图片某部分,分别代表坐标x,y轴
4. background-repeat 设置背景图像不重复平铺
- no-repeat 设置图像不重复,常用
-
round 自动缩放直到适应并填充满整个容器
- space 以相同的间距平铺且填充满整个容器
5. background-size:背景图片大小
参数1:控制水平方向 参数2:控制垂直方向
- background-size: 100% 100%;
- background-size: 100% auto;
6. background-attachment 背景图像是否固定或者随着页面的其余部分滚动(了解)
7. background 简写
- background: url("o_ns.png") no-repeat 0 -196px;
- background: url("o_ns.png") no-repeat center bottom 15px;
- background: url("o_ns.png") no-repeat left 30px bottom 15px;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>背景属性</title> 7 <style> 8 #c1 9 { 10 width:500px; 11 height:500px; 12 border:solid 1px red; 13 background-color: blue; 14 /* 引入背景图 */ 15 background-image: url("../images/tupian1.png"); 16 /* 设置是否平铺: repeat-x repeat-y no-repeat */ 17 background-repeat: no-repeat; 18 /* 参数1:控制水平方向 参数2:控制垂直方向 */ 19 /* background-position: 200px 50px; */ 20 background-position: 50% 50%; 21 /* 固定背景图片(了解) */ 22 background-attachment: fixed; 23 } 24 25 #c2 26 { 27 width:500px; 28 height:500px; 29 border:solid 1px red; 30 background:url("../images/tupian1.png") no-repeat 50% 50%; 31 background-color:green; 32 } 33 34 </style> 35 </head> 36 <body> 37 <div id="c1"></div> 38 <div id="c2"></div> 39 <div style="height:1000px;"></div> 40 41 42 </body> 43 </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>背景图片引入</title> 7 <style> 8 9 .c1 10 { 11 width:55px; 12 height:50px; 13 border:dotted 5px green; 14 background: url("../images/tag.jpg") no-repeat; 15 background-position: -2px -11px; 16 } 17 18 .c1:hover 19 { 20 background: url("../images/tag.jpg") no-repeat; 21 background-position: -314px -14.7px; 22 } 23 24 .gy 25 { 26 width:500px; 27 height:500px; 28 border:solid 1px red; 29 } 30 31 /* 导入一张背景图 */ 32 .c2 33 { 34 background: url("../images/xiao.gif") no-repeat; 35 /* 参数1:控制水平方向 参数2:控制垂直方向 */ 36 /* background-size: 100% 100%; */ 37 background-size: 100% auto; 38 } 39 40 /* 导入多张背景图 上面的图层优先写,下面的图层最后写,背景图之间用逗号,如果最后写完了用分号结尾;*/ 41 .c3 42 { 43 background: 44 url("../images/game/map_05.gif") no-repeat 100px 100px, 45 url("../images/game/map_05.gif") no-repeat 124px 100px, 46 url("../images/game/map_05.gif") no-repeat 148px 100px, 47 url("../images/game/map_05.gif") no-repeat 174px 100px, 48 url("../images/game/map_05.gif") no-repeat 198px 100px, 49 url("../images/game/map_17.gif") no-repeat 50px 50px, 50 url("../images/game/map_20.gif") no-repeat 200px 200px, 51 url("../images/game/map_03.gif"); 52 } 53 54 </style> 55 </head> 56 <body> 57 <div class="c1"></div> 58 <div class="c2 gy"></div> 59 <div class="c3 gy"></div> 60 61 </body> 62 </html>
5. 列表属性
list-style-type: 列表项标志的类型
- none 去除标志
- decimal-leading-zero; 02.
- square; 方框
- circle; 空心圆
- upper-alph; & disc; 实心圆
list-style-image:将图象设置为列表项标志
list-style-position:列表项标志的位置
- inside
- outside
list-style:缩写
四 .页面布局
1.边框
border-style:边框样式
- solid 默认,实线
- double 双线
- dotted 点状线条
- dashed 虚线
border-color:边框颜色
border-width:边框宽度
border-radius:圆角
- 1个参数:四个角都应用
- 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
- 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
- 4个参数:左上、右上、右下、左下(顺时针)
border: 简写
- border: 2px yellow solid;
- border-top:solid 10px red;
- border-bottom: dotted 10px blue;
- border-left: groove 10px yellow;
- border-right: double 10px green;
box-shadow:边框阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个参数是虚化效果
- 第四个参数是颜色
- box-shadow: 10px 10px 5px #888;
2.盒子模型
一个标准的盒子
padding:用于控制内容与边框之间的距离,注意会增加盒子的宽和高
margin: 用于控制元素与元素之间的距离;
让盒子自动居中: 上下0px 左右自动auto 默认浏览器居中;
margin:0 auto;
padding、margin | 表示上右下左都应用 |
padding-top、margin-top | 上 |
padding-right、margin-right | 右 |
padding-bottom、margin-bottom | 下 |
padding-left、margin-left | 左 |
一个参数,应用于四边。
两个参数,第一个用于上、下,第二个用于左、右。
三个参数,第一个用于上,第二个用于左、右,第三个用于下。
3.position 规定元素的定位类型
static |
默认值,没有定位,遵从正常的文档流 |
relative |
相对定位元素,相对于其正常位置进行定位,遵从正常的文档流 |
absolute |
绝对定位元素,脱离正常文档流 |
fixed | 固定(绝对)定位元素,固定在浏览器某处 |
通过以下四种属性进行定位
- left:50px;
- top:50px;
- right:50px;
- bottom:50px;
- z-index:-1; 控制层叠关系,值越大,越靠上层,反之,越在下层
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>定位:相对定位</title> 7 <style> 8 .gy 9 { 10 width:200px; 11 height:200px; 12 border:solid 1px red; 13 } 14 .d1 15 {background: orchid;} 16 /* 17 position: relative; 是相对定位 18 相对定位: 参考点相对于原来的起始位置进行定位 19 有了定位(相对,绝对,固定)之后,会触发如下几个属性 20 top right bottom left z-index 21 z-index : 控制层叠关系,值越大,越靠上层,反之,越在下层 22 */ 23 .d2 24 { 25 background:palegoldenrod; 26 position: relative; 27 left:20px; 28 top:50px; 29 z-index:-1; 30 } 31 .d3 32 {background:palegreen;} 33 .d4 34 {background:paleturquoise;} 35 </style> 36 </head> 37 <body> 38 <div class="gy d1"></div> 39 <div class="gy d2"></div> 40 <div class="gy d3"></div> 41 <div class="gy d4"></div> 42 </body> 43 </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>定位:绝对定位</title> 7 <style> 8 /* 把所有标签默认添加的距离置0 */ 9 * 10 {margin:0px;padding:0px;} 11 12 .gy 13 { 14 width:200px; 15 height:200px; 16 border:solid 1px red; 17 } 18 .d1 19 {background: red;position: relative;} 20 /* 21 绝对定位:脱离文档流,下面的元素自动补齐 22 绝对定位会参照他的父级做绝对定位,默认参照的浏览器body, 23 也可以通过在页面父级所在的div中加入position:relative作为参照点,做绝对定位 24 如果是兄弟元素,不能够做参考点,使用方式: 25 (1) 把要定位的元素变成absolute 26 (2) 把对应的父级元素变成relative 27 */ 28 29 .d2 30 { 31 background:palegoldenrod; 32 position: absolute; 33 z-index: -100; 34 bottom:0px; 35 right:0px; 36 37 } 38 .d3 39 {background:blue;} 40 .d4 41 {background:paleturquoise;} 42 .bigbox 43 {border:solid 1px red;margin-top:100px;} 44 45 </style> 46 </head> 47 <body> 48 <div class="bigbox"> 49 <div class="gy d1"></div> 50 <div class="gy d2"></div> 51 <div class="gy d3"></div> 52 <div class="gy d4"></div> 53 </div> 54 </body> 55 </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>定位:固定定位</title> 7 <style> 8 .c1 9 { 10 width:500px; 11 height:500px; 12 border:solid 1px red; 13 background: red; 14 position: fixed; 15 } 16 17 /* 18 transition取值:动画过度效果 19 <' transition-property '>: 检索或设置对象中的参与过渡的属性 默认为all 20 <' transition-duration '>: 检索或设置对象过渡的持续时间 21 <' transition-timing-function '>: 检索或设置对象中过渡的动画类型 22 <' transition-delay '>: 检索或设置对象延迟过渡的时间 23 */ 24 25 img 26 { 27 width:100px; 28 height:100px; 29 border:solid 1px red; 30 position: fixed; 31 bottom:0px; 32 right:0px; 33 margin-right:-80px; 34 transition: all 1s ease 0s; 35 } 36 img:hover 37 { 38 margin-right:0px; 39 background-color: green; 40 } 41 42 43 </style> 44 </head> 45 <body> 46 <div>这是滋滋滋滋滋滋滋滋滋滋</div> 47 <div class="c1">固定定位</div> 48 <div style="height:1000px;"></div> 49 <div>这是滋滋滋滋滋滋滋滋滋滋</div> 50 51 <img src="../images/xiao.gif" alt=""> 52 53 </body> 54 </html>
4 .display 转换元素
- none 不显示。
- block 显示为块级元素。
- inline 显示为行内元素。
- inline-block 行内块元素(会保持块元素的高宽)。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>display 转换元素</title> 7 <style> 8 /* display:inline 转换成行内元素 */ 9 div 10 {display:inline;width:100px;height:100px;border:solid 1px red;} 11 /* display:block 转换成块状元素 */ 12 span 13 {display:block;width:100px;height:100px;border:solid 1px red;} 14 /* display:inline-block 转换成行内块状元素 */ 15 a 16 {display:inline-block;width:100px;height:100px;border:solid 1px red;} 17 /* display:none 隐藏元素 */ 18 #yincang 19 {display: none;} 20 21 </style> 22 </head> 23 <body> 24 <div>我是块状元素1</div> 25 <div>我是块状元素2</div> 26 27 <span>我是行内元素1</span> 28 <span>我是行内元素2</span> 29 30 <a href="#">我是连接1</a> 31 <a href="#">我是连接2</a> 32 33 <div id="yincang">我是隐藏元素</div> 34 35 </body> 36 </html>
5. float 浮动
让一行显示两个块级标签,会脱离文档流,后面的内容会自动补齐
- none
- left 左浮动
- right 右浮动
clear 清除浮动,消除浮动产生的影响:
- none : 默认值。允许两边都可以有浮动对象
- left : 不允许左边有浮动对象
- right : 不允许右边有浮动对象
- both : 不允许两边有浮动对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>浮动效果float</title> 7 <style> 8 .gg 9 {width:150px;height:150px;border:solid 1px red;float:left;} 10 .c1{background:greenyellow;} 11 .c2{background: teal;} 12 .c3{background: tomato;} 13 .c4{background: gold;} 14 15 16 17 .content2 18 {width:500px;height:500px;border:solid 1px red;} 19 .content2 .span1 20 {float:left;width:100px;height:100px;border:solid 1px red;} 21 .content2 .span2 22 {clear:both;display:block;width:100px;height:100px;border:solid 1px red;} 23 </style> 24 </head> 25 <body> 26 <!-- 27 float:left 向左浮动 28 float:right 向右浮动 29 在浮动时,都会脱离开文档流,后面的内容会自动补齐 30 作用:就是让块级元素在一行显示; 31 clear:both 作用:清除两边的浮动,消除浮动产生的影响; 32 --> 33 34 <!-- 1.让块状元素浮动 --> 35 <div class="content"> 36 <div class="c1 gg">1</div> 37 <div class="c2 gg">2</div> 38 <div class="c3 gg">3</div> 39 <div class="c4 gg">4</div> 40 </div> 41 42 <!-- 43 2.让行内元素浮动 44 如果让行内元素浮动,默认会升级成行内块状元素,可设置宽高 45 --> 46 <div class="content2"> 47 <span class="span1">行内元素1</span><span class="span2">行内元素2</span> 48 49 </div> 50 51 </body> 52 </html>
6.float带来的问题:内容塌陷(高度没撑开)
子元素浮动时脱离文档流,会导致父级元素高度塌陷
解决方案:在父标签中使用伪对象选择器插入清除浮动效果
.content2::after
{
content:"";
display:block;
clear:both;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>float带来的问题:内容塌陷(高度没撑开)</title> 7 <style> 8 .content1 9 {border:solid 1px red;} 10 .gg 11 {width:150px;height:150px;border:solid 1px red;float:left;} 12 .c1{background:greenyellow;} 13 .c2{background: teal;} 14 .c3{background: tomato;} 15 .c4{background: gold;} 16 17 /* 方法二:动态在内容中插入清除浮动效果 */ 18 .content2 19 {border:solid 1px red;} 20 .content2::after 21 { 22 content:""; 23 display:block; 24 clear:both; 25 } 26 27 </style> 28 </head> 29 <body> 30 <!-- 解决方案1 --> 31 <!-- <div class="content1"> 32 <div class="c1 gg">1</div> 33 <div class="c2 gg">2</div> 34 <div class="c3 gg">3</div> 35 <div class="c4 gg">4</div> 36 <div style="clear:both;"></div> 37 </div> --> 38 39 <!-- 解决方案2 --> 40 <div class="content2"> 41 <div class="c1 gg">1</div> 42 <div class="c2 gg">2</div> 43 <div class="c3 gg">3</div> 44 <div class="c4 gg">4</div> 45 46 </div> 47 48 49 </body> 50 </html>
7.overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
- visible 默认值,内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="zh-cmn-Hans"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>overflow</title> 6 <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> 7 <style> 8 .test { 9 overflow: hidden; 10 width: 200px; 11 height: 100px; 12 background:blue; 13 color:red; 14 text-align: center; 15 /* 让盒子自动居中: 上下0px 左右自动auto 默认浏览器居中; */ 16 margin:0 auto; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="test"> 22 <p>苏打速度</p> 23 <p>苏打速度</p> 24 <p>苏打速度</p> 25 <p>苏打速度</p> 26 <p>苏打速度</p> 27 </div> 28 </body> 29 </html> 30
8.margin-top失效问题
父子结构时,margin-top会失效
如果margin-top失效,在父级盒子上加overflow: hidden;子盒子margin-top恢复使用;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>margin-top失效问题</title> 7 <style> 8 * 9 {margin:0px;padding:0px;} 10 .content1 11 {width:100px;height:100px;background: lawngreen;margin-top:10px;} 12 13 /* 如果margin-top失效,在父级盒子上加overflow: hidden;子盒子margin-top恢复使用; */ 14 .father 15 {width:100px;height:100px;background: magenta;overflow: hidden;} 16 .son 17 {width:50px;height:50px;background:mediumaquamarine;margin-top:10px;} 18 </style> 19 </head> 20 <body> 21 <!-- 单独的一个div --> 22 <div class="content1">我是内容1</div> 23 <div class="father"> 24 <div class="son">子div</div> 25 </div> 26 27 </body> 28 </html>
9.transform、transition 动画效果
transform 转换,变形
- origin 定义旋转基点(left top center right bottom 坐标值) transform-origin: 50px 50px; transform-origin: left;。
- rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数,需要先定义origin。
- skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
- scale 缩放 transform:scale(2,3) 横向放大2倍,纵向放大3倍;transform:scale(2) 横竖都放大2倍。
- translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。
Transition 平滑过渡
- transition-property: 变换的属性(none(没有属性改变)、all(所有属性改变)、具体属性)
- transition-duration: 变换持续时间
- transition-timing-function: 变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))
- transition-delay: 变换延迟时间
- transition: 缩写
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1、color: 通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-color,border-color,color,outline-color等CSS属性;
2、length:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等属性;
3、percentage:真实的数字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等属性;
4、integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset,z-index等属性;
5、number真实的(浮点型)数值,如:zoom,opacity,font-weight等属性;
6、transform list。
7、rectangle:通过x、 y、 width和height(转为数值)变换,如:crop;
8、visibility:离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility;
9、shadow:作用于color、x、y、和blur(模糊)属性,如:text-shadow;
10、gradient:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型(放射状的或是线性的)和相同的停止数值以便执行动画,如:background-image;
11、paint server (SVG):只支持下面的情况:从gradient到gradient以及color到color,然后工作与上面类似;
12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面的规则进行变化,否则无变化;
13、a shorthand property:如果缩写的所有部分都可以实现动画,则会像所有单个属性变化一样变化。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>nick</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 .img-see-2016-7-2 { 9 background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg"); 10 background-size: 660px; 11 background-repeat: no-repeat; 12 height: 300px; 13 width: 600px; 14 15 transition-duration: 30s; 16 transition-timing-function: ease; 17 transition-property: background-size; 18 } 19 .img-see-2016-7-2:hover { 20 background-size: 2000px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="img-see-2016-7-2"></div> 26 </body> 27 </html>