[toc]
# 继承
> 基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。
> 例如，如果向一个 h1 元素应用一个颜色，那么这个颜色将应用到 h1 中的所有文本，甚至应用到该 h1 的子元素中的文本
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>
hello
<span>world</span>
</h1>
</body>
</html>
```
继承对无序列表也适用
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
ul {
color: red;
}
</style>
</head>
<body>
<ul>
<li>this is li 0</li>
<li>this is li 1</li>
<li>this is li 2</li>
<li>this is li 3</li>
<li>this is li 4</li>
<li>this is li 5</li>
<li>this is li 6</li>
<li>this is li 7</li>
</ul>
</body>
</html>
```
关于继承和优先级
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
color: yellow;
}
ul {
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>this is li 0</li>
<li>this is li 1</li>
<li>this is li 2</li>
<li>this is li 3</li>
<li>this is li 4</li>
<li>this is li 5</li>
<li>this is li 6</li>
<li>this is li 7</li>
</ul>
</div>
</body>
</html>
```
所有属性均可继承?
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.div1 {
border: 10px solid red;
width: 300px;
height: 300px;
background: #000;
}
.div2 {
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="div1"><div class="div2"></div></div>
</body>
</html>
```
> 如果边框能继承，文档会变得非常混乱，除非另外花功夫去掉继承的边框
大多数框模型属性（包括外边距、内边距、背景和边框）都不能继承，其原因是一样的。
_继承的值根本没有特殊性，甚至连 0 特殊性都没有_
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
color: red;
}
h1#name {
color: black;
}
</style>
</head>
<h1 id="name">
云和
<em>数据</em>
</h1>
<p>欢迎来到前端的世界!</p>
</html>
```
清除默认样式, 应该这么写
```css
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
```
## 层叠
如果特殊性相等的两个规则同时应用到同一个元素会怎么样呢？浏览器如何解决这个冲突
```css
h1 {
color: red;
}
h1 {
color: blue;
}
```
按顺序, 越后出现, 权重却大(覆盖)
为什么内部样式, 优先级高于外部样式?(一般情况下)
> 如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后
**但是, 需要注意, 谁近, 谁的优先级越高**
## 颜色的三种定义方式
1. RGB
2. 16 进制
3. 单词命名
透明度
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.div1 {
width: 200px;
height: 200px;
background: rgba(197, 240, 4, 0.5);
z-index: 100;
float: left;
position: absolute;
}
.div2 {
width: 100px;
height: 100px;
z-index: 0;
float: left;
position: absolute;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">hello world</div>
</body>
</html>
```
## 文本水平对齐
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
border: 1px red solid;
text-align: center;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
```
## 文本垂直对齐
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
border: 1px red solid;
text-align: center;
height: 200px;
}
p {
line-height: 200px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div><p>hello world</p></div>
</body>
</html>
```
# CSS 布局奇技淫巧之--各种居中
## margin:auto
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
/* 相对定位不影响居中, 绝对定位和浮动会影响居中 */
position: relative;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
border: 1px solid red;
/* 最重要, 左右 auto */
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
/* 需要写在父级, ie6,7 不限制 */
text-align: center;
}
div {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
/* 需要写在父级, ie 5, 6, 7 不限制 */
text-align: center;
}
div {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
## 使用 line-height 让单行的文字垂直居中(注意: 只能垂直居中一行)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
border: 1px red solid;
text-align: center;
height: 200px;
}
p {
line-height: 200px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptate, repellat dolore quidem sunt quaerat tempore quis
aperiam neque nostrum commodi deserunt fuga tenetur atque maxime
velit modi ad laboriosam officia? Quam commodi tempore iure!
Animi, deserunt dolore! Nam, praesentium molestiae? Aut deleniti
labore error, iusto quis nam vero, repellendus, nemo
voluptatibus porro architecto! Assumenda consectetur impedit,
consequatur minima hic quam! Deleniti doloremque alias veritatis
perferendis nemo placeat a tempore qui possimus recusandae
blanditiis odit, quia sit temporibus quod voluptatem similique.
Vero aperiam harum aut accusantium unde hic, consequuntur
accusamus culpa. Molestias sunt odit, similique odio id
voluptatum velit fugiat inventore dicta consequuntur eaque, ipsa
laboriosam, ipsam sed sequi reprehenderit illo aliquid hic. A
iste minus nisi accusantium. Minus, rem rerum? Cumque expedita
exercitationem unde, possimus aperiam ratione ad, iure qui sed
error nemo alias temporibus adipisci fugit. Sapiente adipisci ab
amet? Enim, nam repellat distinctio nostrum voluptatibus
voluptatum blanditiis delectus? Ut cupiditate voluptates ipsum
eius omnis iusto est quod facilis! Saepe, totam pariatur optio
delectus esse aperiam ad eveniet, voluptatum veniam repudiandae
maiores necessitatibus similique? Consectetur maiores ex
accusamus nesciunt? Minima itaque ipsam magnam doloremque iusto
dolorum explicabo quaerat molestias accusantium, repellendus
consectetur repellat quibusdam quis sunt rem quisquam
consequatur atque rerum enim in incidunt! Repudiandae inventore
a nesciunt reiciendis! Quis similique modi doloribus rem nostrum
laudantium? Totam voluptas quaerat, iure, tempore nobis earum
voluptatibus veritatis, sapiente eveniet reiciendis accusamus
non deserunt incidunt culpa alias et delectus doloribus natus
nulla. Perferendis voluptate odio repellat similique, commodi
facere debitis labore non vero et suscipit illo dicta esse
cumque error omnis harum quidem deleniti impedit sit excepturi
veniam iusto. Harum, quo soluta. Deserunt molestias
necessitatibus unde atque! Corrupti, id saepe maiores delectus
illo eos et nesciunt, molestiae ut ipsa adipisci odio optio
cumque voluptatibus repellendus dolorem architecto reprehenderit
beatae quidem? Vitae, assumenda?
</p>
</div>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
td {
height: 200px;
width: 200px;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
background: #000;
/* display: inline-block; */
}
</style>
</head>
<body>
<table>
<tr>
<td align="center"><div></div></td>
</tr>
</table>
</body>
</html>
```
使用 table 的水平居中和垂直居中
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.div1 {
width: 200px;
height: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.div2 {
width: 50px;
height: 50px;
background: #000;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1"><div class="div2"></div></div>
</body>
</html>
```
# css 布局
`display` 是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 `display` 值，这与元素的类型有关。
对于大多数元素它们的默认值通常是 `block` 或 `inline` 。一个 `block` 元素通常被叫做块级元素。一个 `inline` 元素通常被叫做行内元素。
## block
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。
其他常用的块级元素包括 p 、 form 和 HTML5 中的新元素： header 、 footer 、 section 等等。
## inline
span 是一个标准的行内元素。一个行内元素可以在段落中 `<span> 像这样 </span>` 包裹一些文字而不会打乱段落的布局。
a 元素是最常用的行内元素，它可以被用作链接。
## none
另一个常用的 display 值是 none 。
一些特殊元素的默认 display 值是它，例如 script 。
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
script {
display: block;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
<script>
window.onload = function() {
alert("hello world");
};
</script>
</html>
```
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，
但是设置成 visibility: hidden; 还会占据空间。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.span1 {
visibility: hidden;
}
</style>
</head>
<body>
<span class="span1">hi world</span>
<span>hello world</span>
</body>
</html>
```
每个元素都有一个默认的 `display` 类型。不过我们可以随时随地的重写它！
常见的例子是：把 li 元素修改成 inline，制作成水平菜单。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li>this is li tag 0</li>
<li>this is li tag 1</li>
<li>this is li tag 2</li>
<li>this is li tag 3</li>
</ul>
</body>
</html>
```
## `margin: auto;` div 水平居中
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。
元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
```css
#main {
max-width: 600px;
margin: 0 auto;
}
```
在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
这点在移动设备上显得尤为重要
顺便提下， 所有的主流浏览器包括 IE7+在内都支持 max-width ，所以放心大胆的用吧。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
max-width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
## 盒模型
当设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.normal {
width: 500px;
margin: 20px auto;
background: #f00;
}
.plus {
width: 500px;
margin: 20px auto;
padding: 50px;
border: 10px #00f solid;
background: #00f;
}
</style>
</head>
<body>
<div class="normal">我小一些</div>
<div class="plus">我比它大!!!</div>
</body>
</html>
```
以前有一个代代相传的解决方案是通过数学计算。
CSS 开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。
值得庆幸地是你不需要再这么做了...
## box-sizing
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的 CSS 属性。
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.normal {
width: 500px;
margin: 20px auto;
background: #f00;
}
.plus {
width: 500px;
margin: 20px auto;
padding: 50px;
border: 10px #00f solid;
background: #00f;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="normal">现在一样大了</div>
<div class="plus">万岁!!!!!!!!!!!</div>
</body>
</html>
```
既然没有比这更好的方法，一些 CSS 开发者想要页面上所有的元素都有如此表现。
所以开发者们把以下 CSS 代码放在他们页面上：
```css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
```
这样可以确保所有的元素都会用这种更直观的方式排版。
不过 box-sizing 是个很新的属性，推荐使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持 IE8+的。
## position
一切皆为框
div、h1 或 p 元素常常被称为块级元素。
这意味着这些元素显示为一块内容，即“块框”。
与之相反，span 和 strong 等元素称为“行内元素”，
这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。
这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 `<a>` 元素）表现得像块级元素一样。
还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
为了制作更多复杂的布局，我们需要讨论下 position 属性。
### static
```css
.static {
position: static;
}
```
```html
<div class="static"></div>
```
static 是默认值。任意 position: static; 的元素不会被特殊的定位。
一个 `static` 元素表示它不会被“positioned”，一个 `position` 属性被设置为其他值的元素表示它会被“positioned”。
### relative
```css
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
<div class="relative1">
```
relative 表现的和 static 一样，除非你添加了一些额外的属性。
在一个相对定位（position 属性的值为 relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
> 注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
### fixed
一个固定定位（position 属性的值为 fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。
和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
```css
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background: #000;
height: 200px;
}
```
一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
### absolute
absolute 是最棘手的 position 值。
absolute 与 fixed 的表现类似，但是它不是相对于 body 而是相对于最近的“positioned”祖先元素。
如果绝对定位（position 属性的值为 absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素
设置为绝对定位的元素框从文档流完全删除，就好像该元素原来不存在一样。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：
```css
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.relative {
position: relative;
width: 600px;
height: 400px;
background: black;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="relative"><div class="absolute"></div></div>
</body>
</html>
```
父元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于 body 元素定位。
## 浮动
> 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
> 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
- 每日单词
- JavaScript 入门
- JavaScript 基础
- JavaScript 基础回顾
- JavaScript 函数
- 匿名函数,多维数组,数据类型转换
- JavaScript 类型转换, 变量作用域
- js 运算符(一)
- js 运算符(二)
- js 流程控制语句
- JavaScript 扫盲日
- JavaScript 牛刀小试(一)
- JavaScript 牛刀小试(二)
- JavaScript 再谈函数
- JavaScript-BOM
- JavaScript-定时器(一)
- JavaScript-定时器(二)
- 番外-轮播图源码
- JavaScript 轮播图和 DOM 简介
- JavaScript-DOM 基础-NODE 接口-属性
- JavaScript-DOM 基础-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 节点
- CSS 复习与扩展(一)
- CSS 复习与扩展(二)
- 走进 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高级
- jquery 备忘清单-1
- jquery 备忘清单-2
- 聊聊 json
- jquery 备忘清单-3