参考:
- 参考:http://css.doyoe.com/
- 参考:http://www.w3school.com.cn/cssref/index.asp
- 参考:https://www.w3cschool.cn/css/css-tutorial.html
- 参考:你未必知道的49个CSS知识点
- 参考:你未必知道的CSS知识点(第二季)
目录:
- 1、层叠样式表的组成
- 2、CSS选择器
- 3、一些常用的样式
- 4、CSS继承
- 5、CSS HTML颜色名/背景颜色
- 6、浮动和定位属性(Positioning)
- 7、盒子模型
- 7.1 盒子模型简介
- (1)什么是盒子模型
- (2)书写内边距与外边距时的规则(TRBL顺序)
- 7.2 属性介绍
- (1)padding内边距
- (2)border边框
- (3)margin外边距
- 7.1 盒子模型简介
- 8、弹性/伸缩盒模型
- 9、字体/内容/文本/尺寸
- 10、过渡/转换/用户界面/动画
根据不同的浏览器内核,css前缀会有所不同。最基本的浏览器有如下四种,其它的内核都是基于此四种进行再研发的。常见的浏览器内核可以分这四种:Gecko、Webkit、Trident、Presto。
- Gecko:前缀为-moz- 火狐浏览器
- Webkit:前缀为-webkit- 也叫谷歌内核,chrome浏览器最先开发使用,safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核,如360极速、世界之窗、猎豹等。
- Trident:前缀为-ms- 也称为IE内核。
- Presto:前缀为-o- 目前只有opera采用。
1、层叠样式表的组成
CSS样式表由选择器和声明两部分组成,其中选择器是通过名字来标识某个元素的(如元素名、类名、ID名)
层叠样式表一共有几种使用(引入)方式?
- 行内样式表style="",如:
1 <p style="color:blue">测试文字</p>
- 内部样式表<style>
1 <style type="text/css"> 2 p {color:blue;} 3 </style> 4 5 <!--或者写成--> 6 <style> 7 p {color:blue;} 8 </style> 9 10 <body> 11 <p>测试文字</p> 12 </body>
- 外部样式表
1 <link rel="stylesheet" href="css/myCSS.css" type="text/css">
- 导入@url("test.css")
1 <style type="text/css">@import url(myCSS.css);</style>
2、CSS选择器
CSS选择器非常丰富,大致可以分为以下几类:
- 基础选择器
- 关系选择器
- 伪类选择器:通过冒号来定义,它定义了元素的状态,如点击按下、点击完等等,我们之前都是直接操作元素的样式,现在可以为元素的状态改样式,使元素看去更“动态”。
- 伪对象选择器:也叫做伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是::weilei,::weiyuansu,而现在为了兼容就的书写方式,用一个冒号引导伪类也是能够被解析的。
伪类一般反映无法再CSS中轻松或者可靠检测到的某个元素的状态或者属性;
伪元素表示DOM外部的某种文档结构,常用伪元素:E::before,E::after。
2.1 CSS基础选择器
CSS基础选择器包括:
- id选择器:#id名 {属性名:属性值;}
- class选择器:.class名 {属性名:属性值;}(一个元素允许有多个class值)
- 标签选择器:标签名 {属性名:属性值;}
优先级顺序:
- 属性style(1000)>ID(100)>CLASS(10)>元素Element(1)>通配符*(通配符*代表所有的元素样式)
- important>内联>ID>类>标签>伪类>属性选择器>伪元素>继承>通配符
1 <style> 2 #name_id {color:blue;} <!--id方式--> 3 .name_class {color:blue;} <!--class方式--> 4 p {color:blue;} <!--element方式--> 5 </style> 6 7 <body> 8 <p id="name_id" class="name_class">测试文字</p> 9 </body>
一个元素允许有多个class值:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 <script type="text/javascript"> 11 </script> 12 <!--配置浮动,使得列表从纵向变为横向:float: left;--> 13 <style type="text/css"> 14 ul li.li1 { 15 float: left; 16 width: 40px; 17 background: blue; 18 list-style: none; 19 margin: 10px; 20 } 21 ul li.li2 { 22 font-size: 20px; 23 } 24 </style> 25 26 </head> 27 28 <body> 29 <ul> 30 <li class="li1 li2">A1</li> 31 <li class="li1">B1</li> 32 <li class="li1">C1</li> 33 <li class="li1">D1</li> 34 <li class="li1">E1</li> 35 </ul> 36 </body> 37 </html>
输出结果:
2.2 CSS3 选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS" 列指示该属性是在哪个 CSS 版本中定义的。(CSS1、CSS2 还是 CSS3。)
选择器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 选择 class="intro" 的所有元素。 | 1 |
#id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |
* | * | 选择所有元素。 | 2 |
element | p | 选择所有 <p> 元素。 | 1 |
element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。 | 1 |
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。 | 2 |
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。 | 2 |
[attribute] | [target] | 选择带有 target 属性所有元素。 | 2 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |
:link | a:link
1 a:link {color:blue;} 2 a:visited {color:blue;} 3 a:hover {color:red;} 4 a:active {color:yellow;} |
选择所有未被访问的链接。 | 1 |
:visited | a:visited | 选择所有已被访问的链接。 | 1 |
:active |
1 a:active {color: red;} 2 p:active {color: yellow;} 3 div:active {color: blue;} 4 <a href="#">百度</a> 5 <p>这是一个段落</p> 6 <div>这是一个div</div> |
选择活动链接。 | 1 |
:hover |
a:hover 1 <style> 2 ul li:hover { <!--ul li {}, 表示对ul下面的li元素(包含关系)进行样式配置--> 3 background-color: red; 4 color: #FFF; 5 } 6 </style> |
选择鼠标指针位于其上的链接。悬停时候样式的状态。 | 1 |
:focus | input:focus | 选择获得焦点的 input 元素。 | 2 |
:first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 | 1 |
:first-line | p:first-line | 选择每个 <p> 元素的首行。 | 1 |
:first-child |
p:first-child,两个条件:
|
选择属于父元素的第一个子元素的每个 <p> 元素。 | 2 |
:before |
p:before 1 <head> 2 <style type="text/css"> 3 div.d1:before { 4 content: "Before content: "; 5 color: red; 6 } 7 div:after { 8 content: " after content."; 9 color: blue; 10 } 11 </style> 12 </head> 13 14 <body> 15 <div class="d1">Block Element</div> 16 <div class="d2">Block Element</div> 17 <div class="d3">Block Element</div> 18 <div class="d4">Block Element</div> 19 <div class="d5">Block Element</div> 20 </body> |
在每个 <p> 元素的内容之前插入内容。 | 2 |
:after | p:after | 在每个 <p> 元素的内容之后插入内容。 | 2 |
:lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2 |
element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | 3 |
[attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | 3 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | 3 |
[attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | 3 |
:first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
:last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
:only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 | 3 |
:last-child | p:last-child
,两个条件:
|
选择属于其父元素最后一个子元素每个 <p> 元素。 | 3 |
:root | :root | 选择文档的根元素。 | 3 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 | 3 |
:target | #news:target | 选择当前活动的 #news 元素。 | 3 |
:enabled | input:enabled | 选择每个启用的 <input> 元素。 | 3 |
:disabled | input:disabled | 选择每个禁用的 <input> 元素 | 3 |
:checked |
input:checked 1 <head> 2 <style type="text/css"> 3 input:checked+span {background: red;} 4 input:checked+span:after {content: "---- I am checked, haha."} 5 </style> 6 </head> 7 8 <body> 9 <form> 10 <input type="radio" name="start"><span>Fanbingbing</span></input> 11 <br /> 12 <input type="radio" name="start"><span>Libingbing</span></input> 13 <br /> 14 <input type="radio" name="start"><span>Hubingbing</span></input> 15 </form> 16 </body> |
选择每个被选中的 <input> 元素。 | 3 |
:not(selector) |
:not(p),匹配不含有selector选择器的元素 1 div:not(.d1) {color: red;} 2 3 <div class="d1">块元素</div> 4 <div class="d2">块元素</div> 5 <div class="d3">块元素</div> 6 <div class="d4">块元素</div> 7 <div class="d5">块元素</div> |
选择非 <p> 元素的每个元素。 | 3 |
::selection | ::selection | 选择被用户选取的元素部分。 | 3 |
3、一些常用的样式
CSS 属性组:
- 动画
- 背景
- 边框和轮廓
- 盒(框)
- 颜色
- 内容分页媒体
- 定位
- 可伸缩框
- 字体
- 生成内容
- 网格
- 超链接
- 行框
- 列表
- 外边距
- Marquee
- 多列
- 内边距
- 分页媒体
- 定位
- 打印
- Ruby
- 语音
- 表格
- 文本
- 2D/3D 转换
- 过渡
- 用户界面
举例说明:
举例1(让段落不进行换行,且元素一行放不下多余的部分隐藏,多余的部分用省略号显示):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 <script type="text/javascript"> 11 </script> 12 13 <style type="text/css"> 14 p { 15 white-space: nowrap; 16 overflow: hidden; 17 text-overflow: ellipsis; 18 } 19 </style> 20 21 </head> 22 23 <body> 24 <p>A text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph, a text paragraph</p> 25 </body> 26 </html>
输出效果:略
4、CSS继承
所谓CSS的继承,是指被包在内部的标签将拥有外部标签的样式性质。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了颜色值属性,也会应用到段落的文本中。
继承的局限性:
在CSS中,继承是非常自然的行为,但是继承也有局限性。有些属性是不能被继承的,比如border属性用来设置边框,它就没有继承性。padding和margin也不能继承。
能被继承的常用属性有哪一些?
color,cursor,font-family,font-size,font-style,font-weight,font,letter-spacing,line-height,list-style,text-align,text-indent。
举例1:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style> 12 * { 13 margin: 0px; 14 padding: 0px; 15 } 16 p { 17 color: red; 18 border: 1px solid blue; 19 padding: 10px; 20 margin: 20px; 21 cursor: pointer; /* 将光标箭头编程小手的样式 */ 22 } 23 </style> 24 </head> 25 26 <body> 27 <p>这是一个段落<i>这是一个i标签的内容</i>></p>> 28 </body> 29 </html>
输出结果:
5、CSS HTML颜色名/背景颜色
5.1 HTML颜色名
提示:仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持,它们是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果使用其它颜色的话,就应该使用十六进制的颜色值。
5.2 背景颜色
属性 | 描述 | CSS | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
background | 在一个声明中设置所有的背景属性。 | 1 | |||||||||||||||
background-attachment |
设置背景图像是否固定或者随着页面的其余部分滚动。
|
1 | |||||||||||||||
background-color |
设置元素的背景颜色。
|
1 | |||||||||||||||
background-image |
设置元素的背景图像。
|
1 | |||||||||||||||
background-position |
设置背景图像的开始位置。
|
1 | |||||||||||||||
background-repeat |
设置是否及如何重复背景图像。
|
1 | |||||||||||||||
background-clip |
规定背景的绘制区域。
|
3 | |||||||||||||||
background-origin |
规定背景图片的定位区域。
|
3 | |||||||||||||||
background-size |
规定背景图片的尺寸。
|
3 |
举例1:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <!-- background: url("ms_picture.jpg") no-repeat center 10px; 10px是设置背景图片距离顶端的距离 --> 12 <style> 13 div.box { 14 display: flex; 15 } 16 div.item { 17 flex-grow: 1; 18 height: 30px; 19 text-align: center; 20 padding-top: 150px; 21 } 22 div.ms { 23 background: url("ms_picture.jpg") no-repeat center 10px; 24 margin-top: 10px; 25 /* background-size: 100%; */ 26 } 27 </style> 28 <!--或者写成: 29 <style> 30 div.box { 31 display: flex; 32 } 33 div.item { 34 flex-grow: 1; 35 height: 30px; 36 text-align: center; 37 padding-top: 140px; 38 } 39 div.ms { 40 background: url("ms_picture.jpg") no-repeat center; 41 margin-top: 10px; 42 background-size: 100px; 43 } 44 </style> 45 -->> 46 </head> 47 48 <body> 49 <div class="box"> 50 <div class="item ms">找美食</div> 51 </div> 52 </body> 53 </html>
输出结果:
6、浮动和定位属性(Positioning)
属性 | 描述 | CSS | ||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移。 | 2 | ||||||||||||||||||||||||||||||||||||||||
clear |
规定元素的哪一侧不允许其他浮动元素。在float属性中介绍清除浮动的三种方式。
|
1 | ||||||||||||||||||||||||||||||||||||||||
clip | 剪裁绝对定位元素。 | 2 | ||||||||||||||||||||||||||||||||||||||||
cursor | 规定要显示的光标的类型(形状)。 | 2 | ||||||||||||||||||||||||||||||||||||||||
display |
规定元素应该生成的框的类型。
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。 |
1 | ||||||||||||||||||||||||||||||||||||||||
float |
规定框是否应该浮动。float是css样式中的定位属性,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中。 html文档流:自窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素。
举例1:浮动+清除浮动方式一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <style> div { width: 200px; height: 200px; } div.d1 { background: red; float: left; } div.d2 { background: blue; float: left; } div.d3 { width: 500px; height: 300px; background: green; } div.clear { width: 0px; height: 0px; clear: both; } </style> </head> <body> <div class="d1"></div> <div class="d2"></div> <div class="clear"></div> <!--作用是用于清除浮动--> <div class="d3"></div> </body> </html> 输出结果:略。 举例2:浮动+清除浮动方式二(较为常用): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <style> div.d1 { width: 200px; height: 200px; background: red; float: left; } div.d2 { width: 200px; height: 200px; background: blue; float: left; } div.d3 { width: 500px; height: 300px; background: green; } div.clear::after { content: ""; display: block; clear: both; } </style> </head> <body> <div class="clear"> <!--作用是用于清除浮动--> <div class="d1"></div> <div class="d2"></div> </div> <div class="d3"></div> </body> </html> 输出结果:略。 举例3:浮动+清除浮动方式三(较为常用,增加父容器属性配置为:overflow: hidden;或者overflow: auto;): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <style> .box { overflow: hidden; /* overflow: auto; */ } .d1 { width: 200px; height: 200px; background: red; float: left; } .d2 { width: 200px; height: 200px; background: blue; float: left; } .d3 { width: 500px; height: 300px; background: green; } </style> </head> <body> <div class="box"> <!--作用是用于清除浮动--> <div class="d1"></div> <div class="d2"></div> </div> <div class="d3"></div> </body> </html> 输出结果:略。 |
1 | ||||||||||||||||||||||||||||||||||||||||
left | 设置定位元素左外边距边界与其包含块左边界之间的偏移。 | 2 | ||||||||||||||||||||||||||||||||||||||||
overflow | 规定当内容溢出元素框时发生的事情。 | 2 | ||||||||||||||||||||||||||||||||||||||||
position |
规定元素的定位类型。指的是本体相对于上级的定位。
举例1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <!--<p>元素的父元素position属性设置为relative--> <!--<p>元素position属性设置为absolute, 此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。--> <style> div { width: 600px; height: 600px; border: 1px solid red; position: relative; } p { width: 100px; height: 100px; background: blue; resize: both; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div class="d1"> <p></p> </div> </body> </html> 举例2(雪人+雪地): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <!--<p>元素的父元素position属性设置为relative--> <!--<p>元素position属性设置为absolute, 此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。--> <style> div { width: 100%; height: 340px; background: pink; position: relative; } div::before { content: ""; width: 70px; height: 70px; background: url("img/snow-people.png") no-repeat; position: absolute; bottom: -5px; right: 150px; } div::after { content: ""; width: 14px; height: 70px; background: url("img/snow.png"); position: absolute; bottom: -8px; } </style> </head> <body> <div> </div> </body> </html> 输出结果:略。 |
2 | ||||||||||||||||||||||||||||||||||||||||
right | 设置定位元素右外边距边界与其包含块右边界之间的偏移。 | 2 | ||||||||||||||||||||||||||||||||||||||||
top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 | 2 | ||||||||||||||||||||||||||||||||||||||||
vertical-align |
设置元素的垂直对齐方式。
|
1 | ||||||||||||||||||||||||||||||||||||||||
visibility | 规定元素是否可见。 | 2 | ||||||||||||||||||||||||||||||||||||||||
z-index |
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素可拥有负的 z-index 属性值。 注释:Z-index 仅能在定位元素上奏效(例如 position:absolute/fixed;)!
举例1(Z-index 可用于将在一个元素放置于另一元素之后。): <!DOCTYPE html> <html> <head> <!--<meta charset="utf-8">--> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <style> img.img1 { width: 400px; height: 400px; position: relative; <!--position: fixed;也可以--> left: 0px; top: 0px; z-index: -1; <!--如果修改为:z-index: +1;,则会,图片覆盖文字内容--> } </style> </head> <body> <h1>这是一个标题</h1> <img class="img1" src="picture1.jpg" alt="Can not open this picture"> <p>默认的 z-index 是 0。z-index -1 拥有更低的优先级。</p> </body> </html> 输出结果: |
7、盒子模型
7.1 盒子模型简介
(1)什么是盒子模型
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域:内容(content)、内边距(padding)、外边框(border)、外边距(margin)。
举例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <!--line-height设置文字行高,后续增加属性--> 12 <!--text-align设置文字对齐方式,后续增加属性--> 13 14 <!--width和height代表内容属性--> 15 <!--padding内边距属性--> 16 <!--margin外边距属性--> 17 <!--border边框属性--> 18 <style> 19 p { 20 width: 150px; 21 height: 40px; 22 23 line-height: 40px; 24 text-align: center; 25 26 padding: 20px; 27 margin: 10px 20px 30px 40px; 28 border: 30px solid red; 29 } 30 </style> 31 </head> 32 33 <body> 34 <p>测试盒子模型</p> 35 </body> 36 </html>
输出结果:
(2)书写内边距与外边距时的规则(TRBL顺序)
实际上,有缺省值时,如只有两个值(上右),剩下的下左会取对面的值。
- 如果有四个参数:四个参数分别表示上右下左:h2{margin: 10px 20px 30px 40px;}
- 如果只有一个参数:表示上右下左四个方向都是这一个值:h2{margin: 10px;}
- 如果有两个参数:第一个参数表示上下,第二个参数表示左右(取对面的值):h2{margin: 10px 20px;}
- 如果有三个参数:表示上右下,左边位置取右边的值:h2{margin: 10px 20px 30px;}
7.2 属性介绍
(1)padding内边距
属性 | 描述 | CSS | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
padding |
在一个声明中设置所有内边距属性。如果设置padding属性1~4个值,则遵循TRBL的顺序及相关规则。
举例1: h1 { padding: 10px 0.25em 2ex 20%; } <!--上述表示等价于--> h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } 输出结果:略。 |
1 | ||||||||||
padding-bottom |
设置元素的下内边距。 注意:给行内元素加顶部和底部的内边距是不起作用的,如下例子会不起作用。 <style> span { padding-top: 10px; padding-bottom: 10px; } </style> <span>这是span</span> <div>这是div</div> 输出结果:略。 |
1 | ||||||||||
padding-left | 设置元素的左内边距。 | 1 | ||||||||||
padding-right | 设置元素的右内边距。 | 1 | ||||||||||
padding-top | 设置元素的上内边距。 | 1 |
(2)border边框
border-radius还可以分别设置四个方向的值(左上角、右上角、左下角、右下角,原理相同)
- 通常设置绝对值(设置为圆角)
- 百分比通常用来设置一个椭圆,因为设置百分比就不再是一个圆的半径,而是指矩形从高和宽的中心点进行变形。通常设置四个值分别是设置四个角的百分比。
举例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <!--border: 10px solid red;等价于以下(三个属性综合)写法:--> 12 <!-- 13 border- 10px; 14 border-style: solid; 15 border-color: red; 16 --> 17 <!----> 18 19 <style> 20 div { 21 width: 100px; 22 height:100px; 23 24 border: 10px solid red; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div></div> 31 </body> 32 </html>
输出结果:略。
属性 | 描述 | CSS | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
border | 在一个声明中设置所有的边框属性。 | 1 | ||||||||||||||||||||||||
border-bottom | 在一个声明中设置所有的下边框属性。 | 1 | ||||||||||||||||||||||||
border-bottom-color | 设置下边框的颜色。 | 2 | ||||||||||||||||||||||||
border-bottom-style | 设置下边框的样式。 | 2 | ||||||||||||||||||||||||
border-bottom-width | 设置下边框的宽度。 | 1 | ||||||||||||||||||||||||
border-color | 设置四条边框的颜色。 | 1 | ||||||||||||||||||||||||
border-left | 在一个声明中设置所有的左边框属性。 | 1 | ||||||||||||||||||||||||
border-left-color | 设置左边框的颜色。 | 2 | ||||||||||||||||||||||||
border-left-style | 设置左边框的样式。 | 2 | ||||||||||||||||||||||||
border-left-width | 设置左边框的宽度。 | 1 | ||||||||||||||||||||||||
border-right | 在一个声明中设置所有的右边框属性。 | 1 | ||||||||||||||||||||||||
border-right-color | 设置右边框的颜色。 | 2 | ||||||||||||||||||||||||
border-right-style | 设置右边框的样式。 | 2 | ||||||||||||||||||||||||
border-right-width | 设置右边框的宽度。 | 1 | ||||||||||||||||||||||||
border-style |
设置四条边框的样式。
|
1 | ||||||||||||||||||||||||
border-top | 在一个声明中设置所有的上边框属性。 | 1 | ||||||||||||||||||||||||
border-top-color | 设置上边框的颜色。 | 2 | ||||||||||||||||||||||||
border-top-style | 设置上边框的样式。 | 2 | ||||||||||||||||||||||||
border-top-width | 设置上边框的宽度。如未设置,默认设置为3px。 | 1 | ||||||||||||||||||||||||
border-width |
设置四条边框的宽度。
|
1 | ||||||||||||||||||||||||
outline | 在一个声明中设置所有的轮廓属性。 | 2 | ||||||||||||||||||||||||
outline-color | 设置轮廓的颜色。 | 2 | ||||||||||||||||||||||||
outline-style | 设置轮廓的样式。 | 2 | ||||||||||||||||||||||||
outline-width | 设置轮廓的宽度。 | 2 | ||||||||||||||||||||||||
border-bottom-left-radius | 定义边框左下角的形状。 | 3 | ||||||||||||||||||||||||
border-bottom-right-radius | 定义边框右下角的形状。 | 3 | ||||||||||||||||||||||||
border-image | 简写属性,设置所有 border-image-* 属性。 | 3 | ||||||||||||||||||||||||
border-image-outset | 规定边框图像区域超出边框的量。 | 3 | ||||||||||||||||||||||||
border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 | 3 | ||||||||||||||||||||||||
border-image-slice | 规定图像边框的向内偏移。 | 3 | ||||||||||||||||||||||||
border-image-source | 规定用作边框的图片。 | 3 | ||||||||||||||||||||||||
border-image-width | 规定图片边框的宽度。 | 3 | ||||||||||||||||||||||||
border-radius |
简写属性,设置所有四个 border-*-radius 属性。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <!-- border-radius的值如果等于高的一半,将会形成一个正的圆角。大于高的一半值将依然是一个正圆角 radius是指半径,它求出的圆,在矩形上的切面。 --> <style> div { width: 200px; height: 40px; background: orange; border-radius: 20px; } p { width: 40px; height: 40px; border-radius: 20px; background: black; } </style> </head> <body> <div> <p></p> </div> </body> </html> 输出结果: |
3 | ||||||||||||||||||||||||
border-top-left-radius | 定义边框左上角的形状。 | 3 | ||||||||||||||||||||||||
border-top-right-radius | 定义边框右下角的形状。 | 3 | ||||||||||||||||||||||||
box-decoration-break | 3 | |||||||||||||||||||||||||
box-shadow | 向方框添加一个或多个阴影。 | 3 |
举例2:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style> 12 h1.h1_class1 { 13 text-align: center; 14 font-size: 50px; 15 } 16 div.cont { 17 width: 1200px; 18 height:1200px; 19 20 margin: 0px auto; 21 } 22 h3 { 23 font-size: 28px; 24 } 25 p { 26 font-size: 18px; 27 color: #818181; 28 width: 360px; 29 } 30 li { 31 border-right: 1px solid #ddd; 32 border-bottom: 1px solid #ddd; 33 width: 500px; 34 height: 250px; 35 } 36 ul { 37 padding-left: 0px; 38 list-style: none; 39 float: left; 40 } 41 .right_top { 42 border-right: none; 43 } 44 .right_botton { 45 border-right: none; 46 } 47 h3{ 48 padding-left: 40px; 49 } 50 p{ 51 padding-left: 40px; 52 } 53 </style> 54 </head> 55 56 <body> 57 <h1 class="h1_class1">关于我们</h1> 58 <div class="cont"> 59 <ul> 60 <li> 61 <h3>预约方便</h3> 62 <p>关注尚学堂官方微信或拨打预约电话,实时回复,无需预约,确认后2小时之内教师上门授课或指导</p> 63 </li> 64 <li> 65 <h3>预约方便</h3> 66 <p>关注尚学堂官方微信或拨打预约电话,实时回复,无需预约,确认后2小时之内教师上门授课或指导</p> 67 </li> 68 </ul> 69 <ul> 70 <li class="right_top"> 71 <h3>预约方便</h3> 72 <p>关注尚学堂官方微信或拨打预约电话,实时回复,无需预约,确认后2小时之内教师上门授课或指导</p> 73 </li> 74 <li class="right_botton"> 75 <h3>预约方便</h3> 76 <p>关注尚学堂官方微信或拨打预约电话,实时回复,无需预约,确认后2小时之内教师上门授课或指导</p> 77 </li> 78 </ul> 79 </div> 80 </body> 81 </html>
输出结果:略。
(3)margin外边距
有以下几个特点:
- 块级元素的垂直相邻边距会合并。以数值大的为准。
- 而行内元素实际上不占上下外边距(即设置上下外边距不起作用)。行内元素的左右外边距不合并。
- 浮动元素的外边距也不会合并。
- 允许指定负的外边距,使用时需要小心。
值 | 描述 |
---|---|
auto | 浏览器计算外边距。 |
length (用户自定义值,可以为负值) |
规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
举例1:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style type="text/css"> 12 p.margin { 13 margin: 2cm 4cm 3cm 4cm; 14 } 15 </style> 16 </head> 17 18 <body> 19 <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p> 20 </body> 21 </html>
输出结果:
举例2:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style> 12 * { 13 margin: 0px; 14 padding: 0px; 15 } 16 div { 17 width: 100px; 18 height: 200px; 19 background: red; 20 margin: 50px; 21 float: left; 22 } 23 p { 24 width: 100px; 25 height: 200px; 26 background: green; 27 margin: 80px; 28 float: left; 29 } 30 </style> 31 </head> 32 33 <body> 34 <div></div> 35 <p></p> 36 </body> 37 </html>
输出结果:
举例3:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style> 12 * { 13 margin: 0px; 14 padding: 0px; 15 } 16 div.d1 { 17 width: 100px; 18 height: 200px; 19 background: red; 20 margin: 50px; 21 float: left; 22 } 23 p { 24 width: 100px; 25 height: 200px; 26 background: green; 27 margin: 50px; 28 float: left; 29 } 30 div.clear { 31 clear: both; 32 } 33 div.d2 { 34 width: 300px; 35 height: 100px; 36 background: blue; 37 margin: 50px; 38 } 39 </style> 40 </head> 41 42 <body> 43 <div class="d1"></div> 44 <p></p> 45 <div class="clear"></div> 46 <div class="d2"></div> 47 </body> 48 </html>
输出结果:
举例4(左右自动对齐的方式)(margin: 0px auto; 下列示例中保留了上边的外边距,左右对齐):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style> 12 * { 13 margin: 0px; 14 padding: 0px; 15 } 16 div.d1 { 17 width: 100px; 18 height: 200px; 19 background: red; 20 margin: 90px auto; 21 } 22 </style> 23 </head> 24 25 <body> 26 <div class="d1"></div> 27 </body> 28 </html>
输出结果:略。
举例5(绘制大街网的底部内容):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style> 12 footer { 13 height: 100px; 14 width: 100%; 15 background: rgba(0, 0, 0, .3); 16 position: fixed; 17 bottom: 0px; 18 } 19 div.wrap { 20 height: 100px; 21 width: 950px; 22 margin: 0px auto; 23 background: yellow; 24 } 25 div.dj-logo, div.dj-phone { 26 float: left; 27 } 28 div.dj-reg { 29 float: right; 30 } 31 div.clear { 32 clear: both; 33 } 34 35 div.dj-logo p{ 36 height: 60px; 37 line-height: 60px; 38 background: url("dj.jpg") no-repeat; 39 background-size: 60px; 40 padding-left: 70px; 41 padding-right: 40px; 42 border-right: 1px solid #ddd; 43 font-size: 16px; 44 color: black; 45 } 46 47 div.dj-phone p { 48 margin-top: 20px; 49 margin-left: 30px; 50 } 51 div.dj-phone p i { 52 color: black; 53 font-style: normal; 54 fond-size: 16px; 55 } 56 57 div.dj-reg a.reg { 58 display: block; 59 width: 135px; 60 height: 40px; 61 background: orange; 62 border-radius: 5px; 63 line-height: 40px; 64 text-align: center; 65 color: black; 66 fond-size: 18px; 67 margin-top: 20px; 68 margin-bottom: 10px; 69 } 70 div.dj-reg a.login { 71 margin-left: 10px; 72 color: black; 73 } 74 75 a { 76 text-decoration: none; 77 } 78 </style> 79 </head> 80 81 <body> 82 <footer> 83 <div class="wrap"> 84 <div class="dj-logo"> 85 <p>年轻人专属的社交网站</p> 86 </div> 87 <div class="dj-phone"> 88 <p> 89 <span>客服电话:</span> 90 <i>400-813-1117</i> 91 </p> 92 <p> 93 <span>客服电话:</span> 94 <i>400-813-1117</i> 95 </p> 96 </div> 97 <div class="dj-reg"> 98 <a href="#" class="reg">快速注册</a> 99 <a href="#" class="login">已有账号,登录</a> 100 </div> 101 <div class="clear"></div> 102 </div> 103 </footer> 104 </body> 105 </html>
输出结果:
8、弹性/伸缩盒模型
8.1 常用属性
8.2 旧的伸缩盒模型
8.3 可伸缩框属性
根据不同的浏览器内核,css前缀会有所不同。最基本的浏览器有如下四种,其它的内核都是基于此四种进行再研发的。常见的浏览器内核可以分这四种:Gecko、Webkit、Trident、Presto。
- Gecko:前缀为-moz- 火狐浏览器
- Webkit:前缀为-webkit- 也叫谷歌内核,chrome浏览器最先开发使用,safari浏览器也使用该内核。国内很多浏览器也使用了webkit内核,如360极速、世界之窗、猎豹等。
- Trident:前缀为-ms- 也称为IE内核。
- Presto:前缀为-o- 目前只有opera采用。
属性 | 描述 | CSS | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
box-align |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> </script> <!-- 通过使用 box-align and box-pack 属性,居中 div 框的子元素 --> <!-- 配置浮动,使得列表从纵向变为横向:float: left; --> <style type="text/css"> div { width:350px; height:100px; border:1px solid black; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari, Chrome, and Opera */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } </style> </head> <body> <div> <p>我是居中对齐的。</p> </div> <p><b>注释:</b>IE 不支持 box-pack 和 box-align 属性。</p> </body> </html> 输出结果:略。 |
3 | |||||||||||||||||
box-direction |
box-direction,规定框的子元素的显示方向。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> </script> <!-- 通过使用 box-align and box-pack 属性,居中 div 框的子元素 --> <!-- 配置浮动,使得列表从纵向变为横向:float: left; --> <style type="text/css"> div { width:350px; height:100px; border:1px solid black; /* Firefox */ display:-moz-box; -moz-box-direction:reverse; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-direction:reverse; /* W3C */ display:box; box-direction:reverse; } </style> </head> <body> <div> <p>段落 1。</p> <p>段落 2。</p> <p>段落 3。</p> </div> <p><b>注释:</b>IE 不支持 box-direction 属性。</p> </body> </html> 输出结果:略。 |
3 | |||||||||||||||||
box-flex |
box-flex,规定框的子元素是否可伸缩。box-flex 属性规定框的子元素是否可伸缩其尺寸。 提示:可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间,可伸缩元素就会扩展来填充这些空间。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> </script> <!-- 通过使用 box-align and box-pack 属性,居中 div 框的子元素 --> <!-- 配置浮动,使得列表从纵向变为横向:float: left; --> <style type="text/css"> div { display:-moz-box; /* Firefox */ display:-webkit-box; /* Safari and Chrome */ display:box; width:300px; border:1px solid black; } #p1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari and Chrome */ box-flex:1.0; border:1px solid red; } #p2 { -moz-box-flex:2.0; /* Firefox */ -webkit-box-flex:2.0; /* Safari and Chrome */ box-flex:2.0; border:1px solid blue; } </style> </head> <body> <div> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> <p><b>注释:</b>IE 不支持 box-flex 属性。</p> </body> </html> 输出结果: |
3 | |||||||||||||||||
box-flex-group | box-flex-group,将可伸缩元素分配到柔性分组。目前没有浏览器支持 box-flex-group 属性。
box-flex-group 属性用于向柔性分组分配可伸缩元素。 提示:可伸缩元素能够随着框的缩小和扩大而伸缩。 |
3 | |||||||||||||||||
box-lines |
box-lines,规定当超出父元素框的空间时,是否换行显示。目前没有浏览器支持 box-lines 属性。
|
3 | |||||||||||||||||
box-ordinal-group |
box-ordinal-group,规定框的子元素的显示次序。box-ordinal-group 属性规定框中子元素的显示次序。值更低的元素会显示在值更高的元素前面显示。 注释:分组值相同的元素,它们的显示次序取决于其源次序。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> </script> <!-- 通过使用 box-align and box-pack 属性,居中 div 框的子元素 --> <!-- 配置浮动,使得列表从纵向变为横向:float: left; --> <style type="text/css"> .box { display:-moz-box; /* Firefox */ display:-webkit-box; /* Safari and Chrome */ display:box; border:1px solid black; } .ord1 { margin:5px; -moz-box-ordinal-group:1; /* Firefox */ -webkit-box-ordinal-group:1; /* Safari and Chrome */ box-ordinal-group:1; } .ord2 { margin:5px; -moz-box-ordinal-group:2; /* Firefox */ -webkit-box-ordinal-group:2; /* Safari and Chrome */ box-ordinal-group:2; } </style> </head> <body> <div class="box"> <div class="ord2">第一个 DIV</div> <div class="ord1">第二个 DIV</div> <div class="ord1">第三个 DIV</div> </div> <p><b>注释:</b>IE 或 Opera 不支持 box-ordinal-group 属性。</p> </body> </html> 输出结果: |
3 | |||||||||||||||||
box-orient |
box-orient,规定框的子元素是否应水平或垂直排列。box-orient 属性规定框的子元素应该被水平或垂直排列。 提示:水平框中的子元素从左向右进行显示,而垂直框的子元素从上向下进行显示。不过,box-direction 和 box-ordinal-group 能够改变这种顺序。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> </script> <!-- 通过使用 box-align and box-pack 属性,居中 div 框的子元素 --> <!-- 配置浮动,使得列表从纵向变为横向:float: left; --> <style type="text/css"> div { width:350px; height:150px; border:1px solid black; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; /* W3C */ display:box; box-orient:horizontal; } </style> </head> <body> <div> <p>段落 1。</p> <p>段落 2。</p> <p>段落 3。</p> </div> <p><b>注释:</b>IE 不支持 box-orient 属性。</p> </body> </html> 输出结果: |
3 | |||||||||||||||||
box-pack |
box-pack,规定水平框中的水平位置或者垂直框中的垂直位置。box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。该属性规定水平框中的水平位置,以及垂直框中的垂直位置。
|
8.4 FlexBox微信订单实例
举例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 11 <style> 12 header{ 13 height: 45px; 14 line-height: 45px; /* line-height 属性设置行间的距离(行高) */ 15 background: #fa486c; 16 color: #fff; 17 position: relative; 18 text-align: center; 19 } 20 header a { 21 text-decoration: none; 22 position: absolute; 23 left: 10px; 24 color: #fff; 25 } 26 header span { 27 font-size: 20px; 28 } 29 .wlxx { 30 display: flex; 31 } 32 .wl1, .wl2 { 33 height: 100px; 34 } 35 .wl1 { 36 flex-grow: 2; 37 background:blue; 38 } 39 .wl2 { 40 flex-grow: 1; 41 background: green; 42 } 43 .hwxx h1 { 44 font-size: 20px; 45 font-weight: normal; 46 border-left: 2px solid #fa486c; 47 margin-left: 15px; 48 padding-left: 15px; 49 margin-bottom: 15px; 50 } 51 .wlxx-main { 52 border-top: 1px solid #ddd; padding-left: 15px; 53 } 54 .wlxx-main p { 55 margin-top: 10px; 56 } 57 .wlxx-main p span { 58 color: gray; 59 } 60 .wlxx-main p i { 61 font-style: normal; 62 } 63 /* 提交订单 */ 64 .tj a { 65 display: block; 66 text-decoration: none; 67 width: 80%; 68 margin: 0px auto; 69 height: 40px; 70 border: 2px solid #dddd; 71 border-radius: 20px; 72 text-align: center; 73 line-height: 40px; 74 font-size: 18px; 75 color: gray; 76 margin-top: 20px; 77 } 78 .tj a:hover { 79 background: #fa486c; 80 color: gray; 81 border: 2px solid #fa486c; 82 } 83 </style> 84 </head> 85 86 <body> 87 <header> 88 <a href="#"><返回</a> 89 <span>订单详情</span> 90 </header> 91 <!-- 物流信息 --> 92 <div class="wlxx"> 93 <div class="wl1">预约成功,背景图片</div> 94 <div class="wl2">箭头,背景图片</div> 95 <div class="wl1">预约成功,背景图片</div> 96 <div class="wl2">箭头,背景图片</div> 97 <div class="wl1">预约成功,背景图片</div> 98 </div> 99 <!-- 货物信息 --> 100 <div class="hwxx"> 101 <h1>货物信息</h1> 102 <div class="wlxx-main"> 103 <p><span>商品名:</span><i>YSL圣罗兰口红</i></p> 104 <p><span>商品编号:</span><i>YSL圣罗兰口红</i></p> 105 <p><span>商品价格:</span><i>YSL圣罗兰口红</i></p> 106 <p><span>收货地址:</span><i>YSL圣罗兰口红</i></p> 107 </div> 108 </div> 109 <!-- 提交订单 --> 110 <div class="tj"> 111 <a href="#">提交订单</a> 112 </div> 113 <footer></footer> 114 </body> 115 </html>
输出结果:
9、字体/内容/文本/尺寸
- CSS 字体属性(Font)
- 内容生成(Generated Content)
- CSS 文本属性(Text)
-
CSS 尺寸属性(Dimension)
9.1 CSS 字体属性(Font)
- 参考:字体大宝库
属性 | 描述 | CSS |
---|---|---|
font | 在一个声明中设置所有字体属性。 | 1 |
font-family | 规定文本的字体系列。 | 1 |
font-size | 规定文本的字体尺寸。 | 1 |
font-size-adjust | 为元素规定 aspect 值。 | 2 |
font-stretch | 收缩或拉伸当前的字体系列。 | 2 |
font-style | 规定文本的字体样式。 | 1 |
font-variant | 规定是否以小型大写字母的字体显示文本。 | 1 |
font-weight | 规定字体的粗细。 | 1 |
使用自定义字体举例:
1 <style> 2 @font-face { 3 font-family: myFont; // 自定义的字体名 4 src: url("res/shufa.ttf"); // 字体存放的路径 5 } 6 p { 7 font-family: myFont; 8 font-size: 10px; 9 } 10 11 </style> 12 13 <body> 14 <p>天长地久</p> 15 </body>
输出结果:略。
9.2 内容生成(Generated Content)
属性 | 描述 | CSS |
---|---|---|
content | 与 :before 以及 :after 伪元素配合使用,来插入生成内容。 | 2 |
counter-increment | 递增或递减一个或多个计数器。 | 2 |
counter-reset | 创建或重置一个或多个计数器。 | 2 |
quotes | 设置嵌套引用的引号类型。 | 2 |
crop | 允许被替换元素仅仅是对象的矩形区域,而不是整个对象。 | 3 |
move-to | 从流中删除元素,然后在文档中后面的点上重新插入。 | 3 |
page-policy | 确定元素基于页面的 occurrence 应用于计数器还是字符串值。 | 3 |
举例:略。
9.3 CSS 文本属性(Text)
属性 | 描述 | CSS |
---|---|---|
color | 设置文本的颜色。 | 1 |
direction | 规定文本的方向 / 书写方向。 | 2 |
letter-spacing | 设置字符间距。 | 1 |
line-height | 设置行高。 | 1 |
text-align | 规定文本的水平对齐方式。 | 1 |
text-decoration | 规定添加到文本的装饰效果。 | 1 |
text-indent | 规定文本块首行的缩进。 | 1 |
text-shadow | 规定添加到文本的阴影效果。 | 2 |
text-transform | 控制文本的大小写。 | 1 |
unicode-bidi | 设置文本方向。 | 2 |
white-space | 规定如何处理元素中的空白。 | 1 |
word-spacing | 设置单词间距。 | 1 |
hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
text-outline | 规定文本的轮廓。 | 3 |
text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
text-shadow | 向文本添加阴影。 | 3 |
text-wrap | 规定文本的换行规则。 | 3 |
word-break | 规定非中日韩文本的换行规则。 | 3 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
举例:略。
9.4 CSS 尺寸属性(Dimension)
属性 | 描述 | CSS |
---|---|---|
height | 设置元素高度。 | 1 |
max-height | 设置元素的最大高度。 | 2 |
max-width | 设置元素的最大宽度。 | 2 |
min-height | 设置元素的最小高度。 | 2 |
min-width | 设置元素的最小宽度。 | 2 |
width | 设置元素的宽度。 | 1 |
举例:略。
10、过渡/转换/用户界面/动画
- 过渡属性(Transition)
- 2D/3D 转换属性(Transform)
- 用户界面属性(User-interface)
- CSS3 动画属性(Animation)
10.1 2D/3D 转换属性(Transform)
属性 | 描述 | CSS | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
transform |
向元素应用 2D 或 3D 转换。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
举例1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <style> div { width: 100px; height: 200px; background: orange; margin: 100px auto; } div:hover { transform: translate3d(0px, -25px, 0px); box-shadow: 0px 15px 30px rgba(0, 0, 0, 5); } </style> </head> <body> <div>测试rotatex</div> </body> </html> 输出结果:略。 举例2: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <style> div { width: 100px; height: 200px; background: orange; margin: 100px auto; } div:hover { transform: translate3d(0px, -25px, 0px); box-shadow: 0px 15px 30px rgba(0, 0, 0, 5); } </style> </head> <body> <div>测试rotatex</div> </body> </html> 输出结果: |
3 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
transform-origin | 允许你改变被转换元素的位置。 | 3 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
perspective | 规定 3D 元素的透视效果。 | 3 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
perspective-origin | 规定 3D 元素的底部位置。 | 3 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
10.2 过渡属性(Transition)
属性 | 描述 | CSS | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
transition |
简写属性,用于在一个属性中设置四个过渡属性。 举例1(鼠标放上去则在2s内<div>元素宽度变为设定值): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <!-- border-radius的值如果等于高的一半,将会形成一个正的圆角。大于高的一半值将依然是一个正圆角 radius是指半径,它求出的圆,在矩形上的切面。 --> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div> <p></p> </div> </body> </html> 输出结果:略。 举例2(鼠标放上去则等待3s后,然后在2s内<div>元素宽度变为设定值): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <!-- border-radius的值如果等于高的一半,将会形成一个正的圆角。大于高的一半值将依然是一个正圆角 radius是指半径,它求出的圆,在矩形上的切面。 --> <style> div { width:100px; height:100px; background:blue; transition:width 2s ease-in 3s; -moz-transition:width 2s ease-in 3s; /* Firefox 4 此为简写,包括css属性、过渡花费事件、过渡曲线、过渡效果何时开始*/ -webkit-transition:width 2s ease-in 3s; /* Safari and Chrome */ -o-transition:width 2s ease-in 3s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div> <p></p> </div> </body> </html> 输出结果:略。 举例3(文字显示效果的改变): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <!-- border-radius的值如果等于高的一半,将会形成一个正的圆角。大于高的一半值将依然是一个正圆角 radius是指半径,它求出的圆,在矩形上的切面。 --> <style> div { width:50px; height:20px; background:#ddd; transition:2s; -moz-transition:2s; /* Firefox 4 */ -webkit-transition:2s; /* Safari and Chrome */ -o-transition:2s; /* Opera */ } div:hover { background:orange; color: aliceblue; } </style> </head> <body> <div> <p>红米3</p> </div> </body> </html> 输出结果:略。 举例4(绘制一个圆圈,鼠标放上去时圆圈样式的改变): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>My test page</title> <script src="jquery-3.3.1.js"></script> <!-- border-radius的值如果等于高的一半,将会形成一个正的圆角。大于高的一半值将依然是一个正圆角 radius是指半径,它求出的圆,在矩形上的切面。 --> <style> div { width:100px; height:100px; border-radius: 50px; border: 3px solid orange; transition: 1s; } div:hover { border: 50px solid palevioletred; } </style> </head> <body> <div></div> </body> </html> 输出效果:略。 |
3 | ||||||||||||||
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 | ||||||||||||||
transition-duration |
定义过渡效果花费的时间。 语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
|
3 | ||||||||||||||
transition-timing-function | 规定过渡效果的时间曲线。 | 3 | ||||||||||||||
transition-delay | 规定过渡效果何时开始。 | 3 |
10.3 用户界面属性(User-interface)
属性 | 描述 | CSS |
---|---|---|
appearance | 允许您将元素设置为标准用户界面元素的外观 | 3 |
box-sizing | 允许您以确切的方式定义适应某个区域的具体内容。 | 3 |
icon |
为创作者提供使用图标化等价物来设置元素样式的能力。 目前没有浏览器支持 icon 属性。 |
3 |
nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 3 |
nav-index | 设置元素的 tab 键控制次序。 | 3 |
nav-left | 规定在使用 arrow-left 导航键时向何处导航。 | 3 |
nav-right | 规定在使用 arrow-right 导航键时向何处导航。 | 3 |
nav-up | 规定在使用 arrow-up 导航键时向何处导航。 | 3 |
outline-offset | 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 | 3 |
resize | 规定是否可由用户对元素的尺寸进行调整。 | 3 |
10.4 CSS3 动画属性(Animation)
属性 | 描述 | CSS | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@keyframes | 规定动画。 | 3 | ||||||||||||||
animation |
所有动画属性的简写属性,除了 animation-play-state 属性。 animation 属性是一个简写属性,用于设置六个动画属性:
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
|
3 | ||||||||||||||
animation-name | 规定 @keyframes 动画的名称。 | 3 | ||||||||||||||
animation-duration |
规定动画完成一个周期所花费的秒或毫秒。 语法:animation-duration: time;
|
3 | ||||||||||||||
animation-timing-function | 规定动画的速度曲线。 | 3 | ||||||||||||||
animation-delay |
规定动画何时开始。 语法:animation-delay: time;
|
3 | ||||||||||||||
animation-iteration-count |
规定动画被播放的次数。 语法:animation-iteration-count: n|infinite;
|
3 | ||||||||||||||
animation-direction |
规定动画是否在下一周期逆向地播放。默认是 "normal"。animation-direction 属性定义是否应该轮流反向播放动画。 如果 animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。 注释:如果把动画设置为只播放一次,则该属性没有效果。 语法:animation-direction: normal|alternate;
|
3 | ||||||||||||||
animation-play-state |
规定动画是否正在运行或暂停。 animation-play-state 属性规定动画正在运行还是暂停。 注释:您可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。 语法:animation-play-state: paused|running;
|
3 | ||||||||||||||
animation-fill-mode |
规定对象动画时间之外的状态。animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。 注释:其属性值是由逗号分隔的一个或多个填充模式关键词。 语法:animation-fill-mode : none | forwards | backwards | both;
|
3 |
动漫,举例1(使用百分比):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 <style> 11 div 12 { 13 width: 100px; 14 height: 100px; 15 background: red; 16 } 17 @keyframes myMove { 18 0% {width: 300px;} 19 50% {width: 200px;} 20 100% {width: 600px;} 21 } 22 div:hover 23 { 24 /* 增加infinite属性标识无限循环 */ 25 /* animation: myMove 2s infinite; */ 26 animation: myMove 2s; 27 } 28 </style> 29 </head> 30 31 <body> 32 <div></div> 33 </body> 34 </html>
输出结果:
举例2(使用from/to):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 <style> 11 div 12 { 13 width: 100px; 14 height: 100px; 15 background: red; 16 position: relative; 17 animation: myMove 5s infinite; 18 -webkit-animation: myMove 5s infinite; /*Safari and Chrome*/ 19 } 20 @keyframes myMove 21 { 22 from {left: 0px;} 23 to {left: 200px;} 24 } 25 26 @-webkit-keyframes myMove /*Safari and Chrome*/ 27 { 28 from {left: 0px;} 29 to {left: 200px;} 30 } 31 </style> 32 </head> 33 34 <body> 35 <div></div> 36 </body> 37 </html>
输出结果:
举例3(CD图片360度旋转):
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 <script src="jquery-3.3.1.js"></script> 10 <style> 11 img { 12 width: 100px; 13 height: 100px; 14 border-radius: 50px; 15 } 16 @keyframes CDTurn 17 { 18 from {transform: rotate(0deg);} 19 to {transform: rotate(360deg);} 20 } 21 22 @-webkit-keyframes CDTurn /*Safari and Chrome*/ 23 { 24 from {transform: rotate(0deg);} 25 to {transform: rotate(360deg);} 26 } 27 img:hover { 28 /* infinite属性标识无限循环 */ 29 animation: 3s linear infinite CDTurn; 30 } 31 </style> 32 </head> 33 34 <body> 35 <img src="dj.jpg" alt="DJ picture."> 36 </body> 37 </html>
输出结果: