文章目录
1 什么是CSS
CSS:层叠样式表，用来设计网页风格，例如：字体的颜色，大小等。
（一）CSS（Cascading Style Sheets）
- CSS 指层叠样式表
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 外部样式表可以极大提高工作效率，通常存储在 CSS 文件中
- 多个样式定义可层叠为一
- 样式对网页中元素位置的排版进行像素级精确控制
（二）什么是样式层叠？
样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
（三）样式层叠次序是怎么样的和用一个HTML元素定义了多个样式时，应该使用哪个样式？
- 内联样式（在 HTML 元素内部）
- 内部样式表（位于 标签内部）
- 外部样式表
- 浏览器缺省设置
2 CSS怎么用
有4种。行内样式、内部样式、外部样式、导入样式。
2.1 行内样式
将属性写在标签内的形式。
<h2 style="color:blue">内部样式</h2>
2.2 内部样式
<head lang="en">
<meta charset="UTF-8">
<title>CSS之行内样式</title>
<!--补充代码-->
<style type="text/css">
h2,p{
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<h2>内部样式</h2>
<p>我是p标签里面的文字，字体大小是30px，字体颜色是蓝色</p>
</body>
2.3 外部样式
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS样式表</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>
用外部样式给div里面的位子设置样式，字体颜色是红色
</div>
</body>
</html>
index.css的内容如下
div{color:red;}
2.4 导入样式
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<titleCSS参考手册_web前端开发参考手册系列</title>
<style>
@import url("style.css") screen, print;
</style>
</head>
<body>
<div>我是内容</div>
</body>
</html>
style.css文件内容如下：
div{color:red;}
2.5 CSS每种方法的对比
| 类别 | 引入方法 | 位置 | 加载 |
|---|---|---|---|
| 行内样式 | 开始标签内style | html文件内 | 同时 |
| 内部样式 | <head>中<style>内 | html文件内 | 同时 |
| 链入外部样式 | <head>中<link>引用 | .css文件，与html分离 | 页面加载时，同时加载CSS样式 |
| 导入式@import | 从样式代码最开始处 | .css文件，与html分离 | 读取完html文件之后加载 |
推荐使用外部样式。
3 CSS选择器（重点）
- 1、元素选择器
- 2、类选择器
- 3、ID选择器
- 4、属性选择器
- 5、派生选择器
3.1 元素选择器“:”
属性名:属性值;
在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。
用法十分简单，例如：
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。
每条声明以分号”;”结尾。**如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。**另外请注意不要忘记每条声明后面的分号。
此外，我们也可以同时对多个html元素进行声明：
h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}
这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。
如果我们希望一锅粥地选取所有的元素，可以使用通配符”*”：
* { font-size: 20px;}
这样所有的元素都将被选中，虽然font-size属性对于某些元素是无效的，那么它将被忽略。
3.2 类选择器“.”
3.2.1 单类选择器
要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:
<p class="deadline">...</p>
<h2 class="deadline">...</h2>
这样我们就可以用以下方式使用类选择器了：
p.deadline { color: red;}
h2.deadline { color: red;}
**点号”.”加上类名就组成了一个类选择器。**以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。
如果我们省略.deadline前面的元素名，那么所有包含该类的元素都将被选中：
.deadline { color: red;}
通常情况下，我们会组合使用以上2者得到更加有趣的样式：
.deadline { color: red;}
span.deadline { font-style: italic;}
以上代码首先会对所有的包含deadline的元素字体设置为红色，同时会对span元素中的文本添加额外的斜体效果。这样，如果你希望某处文本拥有额外的斜体效果将它们放在<span></span>中就可以了。
3.2.2 多类选择器
在实践的做法中，元素的calss属性可能不止包含一个单词，而是一串单词，各个单词之间用空格隔开。
比如某些元素包含一个”warning”类，某些元素包含一个”important”类，某些元素同时包含”warning important”类。属性名出现的顺序没有关系：
class = "warning important"
class = "important warning"
以上2者是等价的。
我们希望包含warning类的元素有一个醒目的红色字体，包含important属性的元素有一个加粗的字体显示，而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了)，我们可以使用以下的css代码：
.warning { color: red;}
.important { font-weight: bold;}
.warning.important { background: blue;}
当然，第三条你也可以写成：
.important.warning { background: blue;}
和词序没有关系。
说明一下，.warning会匹配所有包含warning属性的元素，不管该元素还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时包含以上2种属性的元素，不管该元素还包含多少其他的类，也不管他们在类列表中出现的顺序，只要其中含有这2个属性，则会被选择进来！
同样地，多于多类选择器，在前面加上元素名，则会匹配包含指定类名的指定元素，例如：
p.warning.important {}
将会匹配同时包含warning和important属性的p元素，其他同样包含以上2类的元素则不会被选中。
3.2.3 一个例子
html：
<div class="total">
<div class="classSelectors">
<p>我是类选择器</p>
</div>
<div class="box classSelectors">
<p>我也是</p>
</div>
<p>有效地使用类选择器能够有效的减少一些冗余性的代码,不要试图去用一个类将页面写完，一个标签要携带多个类，共同设置样式，每个类要尽量的小，要有公共概念</p>
</div>
css：
.total{
background-color: #5bc0de;
height: 340px;
width: 600px;
}
.classSelectors{
margin-top: 10px;
width: 500px;
height: 100px;
background: #95ff48;
color: white;
}
.box{
border: 2px slategrey solid;
}
3.3 ID选择器“#”
#ID {}
3.3.1 概要
ID选择器和类选择器有些类似，但是差别又十分显著。
同一个页面中的id不能重复，任何标签都可以设置id,id命名规范要以字母，可以有数字，下划线大小写严格要区分
首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。
类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：
<p id="top-para">...</p>
<p id="foot-para">...</p>
使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如下：
#top-para {}
#foot-para {}
这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。
3.3.2 一个例子
<div id="tatle">
<p>这是id选择器的应用</p>
<p>同一个页面中的id不能重复，任何标签都可以设置id,id命名规范要以字母，可以有数字，下划线大小写严格要区分</p>
</div>
#tatle{
margin-top: 10px;
width: 500px;
height: 100px;
background: #ff5e46;
color: white;
}
3.4 属性选择器“[]”
属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：
3.4.1 简单属性选择器“[]”
元素名[属性名] 或 *[属性名]
*：通用选择器
比如我们希望选择带有alt属性的所有img元素：
img[alt] { ...}
选择带有title属性的所有元素：
*[title] { ...}
同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：
a[href][title] { ...}
3.4.2 具体属性值选择器“=”
=
如果我们希望更加精确地根据属性值来选择元素，我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为http://www.baidu.com的锚元素：
a[href="http://www.baidu.com"] { font-weight: bold;}
要特别注意的是，这里的具体值匹配实质上是一个字符串匹配，所以在这里对于class属性而言，词条的顺序是有关系的！
p[class="warning important"] { ...}
将不会匹配到<p class="important warning"></p>，也不会匹配到<p class="warning important mini-type">，这里就是一个生硬的字符串匹配。
另外，想要同时匹配多个属性的值也是可以的：
p[class="warning"][title="para"] { ...}
将匹配到类为warning(仅有warning)，title属性为para的p元素。
3.4.3 部分属性值选择器“~=”
~=
根据属性值来匹配元素无疑比简单的属性匹配更加精细化了，但是似乎有些精细化过头了，字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中出现了某个关键字的元素，不妨再次以class属性为例，我们希望选择所有包含了warning类的p元素，属性值匹配将无法做到，好在还是有办法的，我们可以使用以下的部分值匹配选择器：
p[class~="warning"] { ...}
该选择器在等号”=”前面添加了一个波浪号~，含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。为了更加清楚地说明问题，它和以下的选择器是等价的：
p.warning { ...}
当然~=不仅仅只是用在class属性上，这只是一个示例。
再比如说，我们的文档中包含一系列人物介绍的div元素：
<div title="intro 1">...</div>
<div title="intro 2">...</div>
<div title="intro 3">...</div>
我们可以使用以下的方式选择所有人物简介div：
div[title~="intro"] { ...}
不过遗憾的是<div title="animal intro">也将会被选择进来，这是需要我们特别注意的地方。
关于部分值选择器也有其局限性，它匹配的是由空格分隔的单词，如果我们将上面的div写成下面的样子就会匹配失败：
<div title="intro-1">...</div>
<div title="intro-2">...</div>
<div title="intro-3">...</div>
3.4.4 子串匹配属性选择器“^=、$=、*=”
对于这种情况，我们可以使用子串匹配属性选择器。规则如下：
div[title^="intro"] {...} //title以intro开头的div元素
div[title$="intro"] {...} //title以intro结尾的div元素
div[title*="intro"] {...} //title中包含"intro"子串的div元素
举例来说：
a[href*="google."] {...}
将包含所有链接中包含”google.”的a元素。
div[title$="y"] {...}
将包含以下所有div元素：
<div title="cloudy">...</div>
<div title="snowy">...</div>
<div title="rainy">...</div>
可以看出部分值属性选择器的功能是十分强大的。
3.4.5 总结
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
3.5 派生选择器
又名上下文选择器，它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了，但为了更加清楚地说明问题，我们这里给出一个DOM树作为参考：
3.5.1 后代选择器(descendant selector)“ ”
使用后代选择器,限定了选择区间，哪个div下的哪个标签。限定了独立的逻辑区 。布局规范上来说元素嵌套一般不要超过8层为好,最大嵌套层数为256层,超出的话选择器会失效
如上图，如果想要选择body元素的所有li子元素，方法如下：
body li { ...}
这里会选择所有的li后代，也就是图中的body下的所有li，不论他们之间相隔的代数有多少。
同理，如果想要选择h1元素下的span，可以使用以下代码：
h1 span { ...}
如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：
.warning li { ...}
当然，如果希望只选择拥有warning类的div元素的li后代，可以写作：
div.warning li { ...}
由上面的例子不难看出，后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为：…的后代。多个选择器的情况如下：
ul li li { ...}
这样，就会选择所有ul下包含在li元素下的所有li元素了，听起来十分拗口，参考我们的DOM树，会选择到文档树种最后一排li元素。
一个例子
<div class="father">
<p>son</p>
<div>
<p>son son</p>
</div>
<p>使用后代选择器,限定了选择区间，哪个div下的哪个标签。限定了独立的逻辑区 。布局规范上来说元素嵌套一般不要超过8层为好,最大嵌套层数为256层,超出的话选择器会失效</p>
</div>
.father{
width: 500px;
height: 150px;
margin-top: 20px;
background-color: #deacd8;
color: white;
}
.father p{
color: red;
}
.father div p{
color: slategrey;
}
3.5.2 子元素选择器(child selector)“>”
>
子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取，用法如下：
ul > li { ...}
两个子元素中间用一个大于号>连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元素都是ul的子元素。
但是，以下代码将不会选中任何元素：
h1 > span { ...}
由于span是h1的”孙子元素”，h1没有直接的span子元素，因而上面的代码将不会选到任何结果。其他方面和后代元素类似，需要特别注意的就是子元素选择器不能隔代选取。
一个例子
<div class="bigBox">
大盒子
<div class="smallBox">
小盒子
</div>
<p>如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器</p>
</div>
.bigBox{
margin-top: 20px;
border: blue 2px solid;
width: 500px;
height: 400px;
}
.bigBox>.smallBox{
border: solid 2px silver;
width: 220px;
height: 300px;
}
3.5.3 相邻兄弟选择器(Adjacent sibling selector)“+”
相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。
相邻兄弟选择器在实践中有比较不错的应用，例如，你想在一个h2标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。
它的用法如下：
li + li { ...}
以上代码会选择所有作为li相邻元素的li元素，听起来又有点拗口，参考DOM树，它会选择除了排在第一个li元素的其余4个li元素，因为2个排在第1的li元素没有更靠前的兄弟元素来选择它。
再比如：
h1 + p { ...}
会选择所有紧跟h1后面的p兄弟元素。
h1.warning + p { ...}
会选择所有有用warning类的h1元素后面紧跟的p兄弟元素。
一个例子
<div class="box" >
我是爸爸
<div class="child-box1">
我是大哥
</div>
<div class="child-box2">
我是二弟
</div>
<div class="child-box2">
我是二弟
</div>
<div id="child-box3">
我是三弟
</div>
<p>我是打酱油的</p>
<p>
紧接在另一元素后,二者有相同父元素
</p>
</div>
.box{
margin-top: 20px;
width: 500px;
/*height: 600px;*/
font-size: 20px;
background: cyan ;
}
.child-box1+.child-box2{
font-size: 40px;
color: #671fff;
text-align: center ;
}
#child-box3+p{
font-size: 60px;
color: brown;
text-align: right ;
}
3.5.4 通用兄弟选择器： “~”
两个元素之间有别的元素,二者有相同父元素
<div class="big_box">
<div class="child_box1">大哥</div>
<div class="child_box2">二哥</div>
<div class="child_box3">三哥</div>
<div class="child_box4">四弟</div>
<p>两个元素之间有别的元素,二者有相同父元素</p>
</div>
.big_box{
background-color: #91a9ae;
margin-top: 20px;
width: 500px;
height: 300px;
color: white;
}
.child_box1~.child_box3{
color: #81acfa;
font-size: 40px;
}
4 美化网页
4.1 span和div
**span标签的作用：**能让某几个文字或者某个词与凸显出来，是行内元素
**div标签：**是块级元素，选择的是网页中一块地方，可为这块地方设置高度，背景颜色，字体颜色、大小等等
<!--span标签-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-size: 50px;
color: red;
font-weight: bold;
}
#right{
font-size: 30px;
color: blue;
font-weight: bold;
}
span[class="there"]{
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<p>你最后看到了这里</p>
<p>你先看到了<span>这里,</span>,<span id="right">对吧?</span></p>
<p>然后往<span class="there">这看</span></p>
</body>
</html>
4.2 文体样式和文本样式和文本阴影
4.2.1 文本样式
| 属性名 | 含义 | 举例 |
|---|---|---|
| font-family | 设置字体类型 | font-family:“隶书”; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体的属性 | font:italic bold 36px “宋体”; |
4.2.2 文本属性：
| 属性 | 含义 | 举例 |
|---|---|---|
| color | 设置文本颜色 | color:#00C |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline |
| vertical-align | 设置文本对齐 | vertical-align:middle |
4.2.3 文本阴影
text-shaow:color x-offset y-offset blur-radius
| 属性 | 描述 |
|---|---|
| color | 阴影颜色 |
| x-offset | 水平阴影位移量 |
| y-offset | 垂直阴影位移量 |
| blur-radius | 阴影模糊半径 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style1.css">
</head>
<p>
<h1>公司简介</h1>
发布人:<span id="panda"> 熊猫的cookie</span> 时间:<span id="time">2020-09-01</span>
<p class="mi">北京小米科技有限责任公司成立于2010年3月3日 [1] ，是一家专注于智能硬件和电子产品研发的移动互联网公司，同时也是一家专注于高端智能手机、互联网电视以及智能家居生态链建设的创新型科技企业。</p>
<p class="mi">“为发烧而生”是小米的产品概念。小米公司创造了用互联网模式开发手机操作系统、发烧友参与开发改进的模式。小米还是继苹果、三星、华为之后第四家拥有手机芯片自研能力的科技公司。</p>
<p class="mi">“让每个人都能享受科技的乐趣”是小米公司的愿景。小米公司应用了互联网开发模式开发产品的模式，用极客精神做产品，用互联网模式干掉中间环节，致力让全球每个人，都能享用来自中国的优质科技产品。</p>
</body>
</html>
CSS链接：
#panda{
font-family: 楷体;
}
#time{
font-family: italic;
}
/*设置首行缩进*/
.mi{
text-indent: 2em;
}
h1{
text-shadow: orange -1px 1px 10px;
}
4.3 超链接伪类
| 伪类名称 | 含义 | 示例 |
|---|---|---|
| a:link | 未单机访问时超链接样式 | a:link{color:#9ef5f9;} |
| a:visited | 单击访问后超链接样式 | a:visited{color:#333;} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
| a:active | 鼠标单击未释放的超链接样式 | a:active{color:#999;} |
设置伪类顺序
a:link->a:visited->a:hover->a:active
案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Style2.css">
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.bilibili.com">Bilibili</a>
<a href="https://www.mi.com/">MI</a>
<a href="https://blog.csdn.net/qq_40763549">java知识大全</a>
<a href="https://www.qq.com">QQ</a>
</body>
</html>
/*未单击访问过的时候超链接样式*/
a:link{
color: blue;
}
/*单机访问过后的超链接样式*/
a:visited{
color: green;
}
/*鼠标悬浮在其上的超链接样式*/
a:hover{
color: cyan;
}
/*鼠标点击后还未释放之前的超链接样式*/
a:active{
color: mintcream;
}
4.4 列表样式
list-style-type
list-style-image
list-style-position
list-style:none //去除列表小黑点
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Style3.css">
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>linux</li>
</ul>
</body>
/*分开试，不然会覆盖*/
ul li{
list-style-type: circle;
list-style-image: inherit;
list-style-position: outside;
list-style: circle;
list-style:none;
}
4.5 网页背景
背景颜色:background-color
背景图片:background-image
背景定位:background-position
背景重复方式:background-repeat
背景尺寸
backrtound-size
| 属性值 | 描述 |
|---|---|
| auto | 默认值，保持背景图片保持原样 |
| percentage | 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算 |
| cover | 整个背景图片放大填充了整个元素 |
| contain | 让背景图片保持本身的宽高比例，将背景图片缩放到宽度宽度或者高度正好适应所定义背景的区域 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Style4.css">
</head>
<body>
</body>
</html>
body{
background-color: #fff7b5;
background-image: url("../111.jpg");
background-repeat: no-repeat;
}
4.6 渐变
线性渐变：
颜色沿着一条直线过度：从左到右，从右到左，从上到下等
linear-gradient ( position, color1,color2...)
径向渐变：
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 600px;
background: linear-gradient(to left,red,black);
background-repeat: no-repeat;
background-color: #9be6ff;
}
</style>
</head>
<body>
</body>
</html>
5 盒子模型
5.1 什么是盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
- Margin(外边距) - 清除边框外的区域，外边距是透明的
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
其中 padding、margin 又细分为上、右、下、左四个方向：
Padding：
Padding-top：上内边距
Padding-right：右内边距
Padding-bottom：下内边距
Padding-left：左内边距
Margin：
Margin-top:上外边距
Margin-right:右外边距
Margin-bottom:下外边距
Margin-left:左外边距
对于padding、margin的取值 （注意：不允许取负值）
一、不赋值
默认情况下为0，也就是不会有内外边距
二、赋值
1. 一个值时
Padding：10px； 四个内边距都为10px
两个值时
Padding：10px 20px; 上下内边距为10px，左右内边距为20px
三个值时
Padding：10px 20px 30px；上10px,左右20px，下30px
四个值时
Padding：10px 20px 30px 40px;上右下左分别为10 20 30 40
5.2 边框颜色
- border-top-color 上边框颜色 border-top-color:#369;
- border-right-color 右边框颜色 border-right-color:#369;
- border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
- border-left-color 左边框颜色 border-left-color:#efcd56;
- border-color
- 四个边框为同一颜色 border-color:#eeff34;
- 上、下边框颜色：#369 左、右边框颜色：#000 border-color:#369 #000;
- 上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 border-color:#369 #000 #f00;
- 上、右、下、左边框颜色： #369、#000、#f00、#00f border-color:#369 #000 #f00 #00f;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">实线红色边框</p>
<p class="two">实线绿色边框</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
5.3 边框粗细
属性值：
- thin
- medium
- thick
- 像素值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
p.one
{
border-style:solid;
border-width:thick;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>
5.4 边框样式
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
</html>
5.5 边框简写
同时设置边框的颜色 ， 粗细和样式，设置顺序可以随便
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>边框简写</p>
</body>
</html>
5.6 外边距（margin）
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
属性值：
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
p
{
background-color:greenyellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>
5.7 内边距（padding）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
属性值：
- upadding-left
- padding-right
- padding-top
- padding-bottom
- padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>
</html>
5.8 盒子模型尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
5.9 圆角边框（border-radius）
四个属性值按顺时针排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
</body>
</html>
5.10 盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6 浮动（float）
HTML页面的标准文档流(默认布局)是：
从上到下，从左到右，遇块(块级元素)换行。
6.1 浮动层
给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。
Float有4个值：
left：元素向左浮动。
right ：元素向右浮动。
none ：默认值。
inherit ：从父元素继承float属性。
浮动后的div宽度会变成0，但是其内边框可能撑起它的宽和高。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.outside{
font-size:12px;
font-family: Arail;
padding:10px;
background-color:#fffcd3;
border:1px solid black;
width:50%;
}
.inside1{
padding:10px;
border:1px dashed black;
background:#a9d6ff;
margin:5px;
float:left;
/* 1.div1向左漂浮之后，宽度为0
2.div1移到父元素的左边
3.div1的原始位置被空出来，由后面的html元素来补上。
*/
}
.inside2{
padding:10px;
border:1px dashed black;
background:#ffacd3;
}
</style>
</head>
<body>
<div class="outside">
<div class="inside1">内部div</div>
<div class="inside2">内部div</div>
</div>
</body>
</html>
6.2 div浮动对html元素的影响
***如果浮动的div*前面有同级别html元素，该浮动的div会排在html元素后面浮动，不会覆盖html元素
***总结：div*的浮动对前面的html元素没影响，对后面的html元素有影响。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div浮动</title>
<style type="text/css">
.outside{
font-size:12px;
font-family: Arail;
padding:10px;
background-color:#fffcd3;
border:1px solid black;
width:50%;
}
.inside1{
padding:10px;
border:1px dashed black;
background:#a9d6ff;
margin-bottom:5px;
}
.inside2{
padding:10px;
border:1px dashed black;
background:#ffacd3;
margin:5px;
float:left;
/*
如果浮动的div在前面有相同的div，直接排在同级的div的下面浮动，
不会超越上面同级的div。
总结：
div的浮动对前面的html元素每影响，对后面的html元素有影响。
*/
}
</style>
</head>
<body>
<h1>div浮动</h1>
<div class="outside">
<div class="inside1">内部div</div>
<div class="inside2">内部div</div>
<div class="inside1">内部div</div>
</div>
</body>
</html>
6.3 CSS中多个div浮动
多个同级块元素同时在一个方向浮动，则从该方向上水平依次排列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div浮动</title>
<style type="text/css">
.outside{
font-size:12px;
font-family: Arail;
padding:10px;
background-color:#fffcd3;
border:1px solid black;
width:50%;
}
.inside1{
padding:10px;
border:1px dashed black;
background:#a9d6ff;
margin-bottom:5px;
}
.inside2{
padding:10px;
border:1px dashed black;
background:#ffacd3;
margin:5px;
float:left;
}
</style>
</head>
<body>
<h1>div浮动</h1>
<div class="outside">
<div class="inside1">内部div1</div>
<!--
如果多个同级html元素同时浮动，这几个html元素就会从左到右浮动排列
脱离了div的自动换行
-->
<div class="inside2">内部div2</div>
<div class="inside2">内部div3</div>
<div class="inside2">内部div4</div>
<div class="inside2">内部div5</div>
<div class="inside1">内部div6</div>
</div>
</body>
</html>
6.4 clear
消除div漂浮的影响
前面div的浮动会影响后面的div的布局，如果想消除该影响可以使用
clear:left | right | both
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.outside{
font-size:12px;
font-family: Arail;
padding:10px;
background-color:#fffcd3;
border:1px solid black;
width:50%;
}
.inside1{
padding:10px;
border:1px dashed black;
background:#a9d6ff;
margin:5px;
float:left;
/* 1.div1向左漂浮之后，宽度为0
2.div1移到父元素的左边
3.div1的原始位置被空出来，由后面的html元素来补上。
*/
}
.inside2{
padding:10px;
border:1px dashed black;
background:#a9d6ff;
margin:5px;
float:right;
}
.inside3{
padding:10px;
border:1px dashed black;
background:#ffacd3;
clear:both;
/* left消除左边漂浮的影响
right消除右边漂浮的影响
both消除两边漂浮的影响
*/
}
</style>
</head>
<body>
<div class="outside">
<div class="inside1">内部div1</div>
<div class="inside2">内部div2</div>
<div class="inside3">内部div3</div>
</div>
</body>
</html>
7 定位（position）
7.1 position 属性的作用
position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。
staticrelativefixedabsolutesticky
下面就依次介绍这五个值。最后一个sticky是2017年浏览器才支持的，本文将重点介绍。
7.2 static 属性值
static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。
7.3 relative，absolute，fixed
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。
这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。
absolute：对象脱离正常文档流，使用left、right、top、bottom等属性进行定位，其层叠可通过css z-index属性定义，此时对象不具有margin边距，但仍有补白和边框border。absoulte定位虽然号称“绝对”，但是它的功能却更接近于“相对”一词，因为使用absoulte定位的元素脱离文档流后，就只能根据祖先类元素（父类及以上）进行定位，而这个祖先类还必须是以postion非static方式定位的， 举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的直系祖先类元素，直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位，和元素相差9px左右。
relative：对象遵循正常文档流，相对于对象左上角位置（移动前）进行定位，移动后仍占据原空间，对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。
fixed：对象脱离正常文档流，使用top、right、bottom、left等属性以窗口左上角为参考点进行定位，当出现滚动条时，对象不会随着滚动，其层叠通过z-index属性定义。
<!doctype html>
<style>
html{border:1px dashed green;}
body{border:1px dashed yellow;}
#first{
width:200px;
height:200px;
border:1px solid red;
position: relative;
color:red;
}
#second{
width:200px;
height:200px;
color:blue;
border:1px solid blue;
position: absolute;
top:0;
left:0;
}
</style>
<body>
<div id="first">relative</div>
<div id="second">absolute</div>
</body>
</html>
7.4 sticky 属性值
sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。
页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。
等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）
#toolbar {
position: -webkit-sticky; /* safari 浏览器 */
position: sticky; /* 其他浏览器 */
top: 20px;
}
上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离。页面继续向下滚动，父元素彻底离开视口（即整个父元素完全不可见），#toolbar恢复成relative定位。
7.5 sticky 的应用
sticky定位可以实现一些很有用的效果。除了上面提到"动态固定"效果，这里再介绍两个。
7.5.1 堆叠效果
堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。下面是一个图片堆叠的例子，下方的图片会随着页面滚动，覆盖上方的图片（查看 demo）。
HTML 代码就是几张图片。
<div><img src="pic1.jpg"></div> <div><img src="pic2.jpg"></div> <div><img src="pic3.jpg"></div>
CSS 代码极其简单，只要两行。
div { position: sticky; top: 0; }
它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里。
5.2 表格的表头锁定
大型表格滚动的时候，表头始终固定，也可以用sticky实现（查看 demo）。
CSS 代码也很简单。
th { position: sticky; top: 0; }
需要注意的是，sticky必须设在<th>元素上面，不能设在<thead>和<tr>元素，因为这两个元素没有relative定位，也就无法产生sticky效果。详细解释可以看这里。
References
侵权立删。。
发现一个问题，为什么某菜鸟教程的javascript教程和某W3C的那样像啊，咱也不敢问。
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
