ZhangYang's Blog

CSS基础

发表于 | 分类于

CSS基础

  • CSS全称是Cascading Style Sheets,层叠样式表

引用CSS

内联样式

1
<h1 style="font-size:16px;color:blue"></h1>

内部样式

1
2
3
4
5
6
7
<style type="text/css">
  h1{
    font-size:16px;
    color:blue;
  }
</style>
<h1>你好</h1>

外部样式

第一种方式

1
<link rel="stylesheet" type="text/css" href="index.css"></style>

第二种方式

1
2
3
4
<style>
	@import url("index.css");
	@import "index.css";
</style>

浏览器F12

  • 查看浏览器默认样式
  • 查看设置样式
  • 查看html结构
    css-2.png

CSS书写规范

>>CSS书写规范

CSS选择器

link和@import

  • 这两种方式都是为了加载CSS文件
    • link属于XHTML标签,而@import完全是CSS提供的一种方式;link除了加载CSS还可以定义RSS,定义rel链接属性等等,@import只能加载CSS
    • 加载顺序的差别;link引用的CSS会同时被加载,@import引用的CSS会等到页面全部被下载再被加载
    • 兼容性的差别;@import只有IE5以上才能识别,link浏览器都能识别
    • 使用dom控制样式的差别;当使用js控制dom去改变样式的时候,只能通过link标签,@import不是dom可以控制的
    • 推荐link

class和id选择器的使用场景

  • class名称可以重复,一般用于给多个元素赋予同样的样式;增加一个同名的class类就可以添加同样的样式,简化代码
  • id名称是唯一的,一般用于划分大的区块

CSS常见选择器

  • 基础选择器
  • 组合选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

基础选择器

选择器 名称/含义
* 通用选择器,匹配页面任何元素
#id id选择器,匹配特定id的元素
.class 类选择器,匹配class特定类的元素
element 标签选择器 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    
    span#identified {
      background-color: DodgerBlue;
    }
    
    span.classy {
      background-color: yellow;
    }
    
    span{
      background-color: red;
      color: #fff;
    }
  </style>
</head>
<body>  
  <span id="identified">Here's a span with some text.</span>
  <span>Here's another.</span></br>
  
  <span class="classy">Here's a span with some text.</span>
  <span>Here's another.</span></br>
  
  <span>这里是由 span 包裹的一些文字.</span>
  <p>这里是由p包裹的一些文字</p>
</body>
</html>

css-3.png

组合选择器

选择器 名称/含义
E,F 多元素选择器,用,分隔,同时匹配元素E或元素F
E F 后代选择器,用空格分隔,匹配E元素所有的后代元素F(不只是子元素、子元素向下递归)
E>F 子元素选择器,用>分隔,匹配E元素所有直接子元素
E+F 直接相邻选择器,匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器,匹配E元素之后的同级元素F(无论直接相邻与否)
.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符,.和#本身充当分隔符的元素
.element#id id和class选择器和选择器连写的时候中间没有分隔符,.和#本身充当分隔符的元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h1,h4{
      background-color: yellow;
    }
    
    div p{
      background-color: green;
    }
    
    h2>p{
      background-color: blue;
    }
    
    h5+p{
      background-color: red;
    }
    
    h6~ul{
      background-color: orange;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的主页</h1>
  <h4>我最好的朋友是蜡笔小新</h4>
  
  <div>
    <p>我是唐老鸭</p>
    <p>我住在日本</p>
  </div>
  
  <h2>
    <p>我是米老鼠</p>
    <h3>
      <p>我住在日本</p>
    </h3>
  </h2>
  
  <h5>
    <p>我是皮卡丘</p>
  </h5>
  <p>我住在广东</p>
  <p>我住在东京</p>
  
  <h6>第一段</h6>
  <ul>
    <li>咖啡</li>
    <li>牛奶</li>
  </ul>
  <h6>另一段</h6>
  <ul>
    <li>咖啡</li>
    <li>牛奶</li>
  </ul>
</body>
</html>

css-4.png

属性选择器

选择器 名称/含义
E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr = value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr \= value] 匹配所有属性attr为value或是以value-为前缀开头的元素
E[attr ^= value] 匹配属性attr的值以value开头的元素
E[attr $= value] 匹配属性attr的值以value结尾的元素
E[attr *= value] 匹配属性attr的值包含value的元素 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>    
    span[lang]{
      font-weight:bold;
    }
    
    span[lang="pt"]{
      color:green;
    }
    
    span[lang~="en-us"]{
      color:blue;
    }
    
    span[lang|="zh"]{
      color:red;
    }
    
    a[href^="#"]{
      background-color: gold;
    }
    
    a[href$=".cn"]{
      background-color: red;
    }
    
    a[href*="cnn"]{
      background-color: #ccc;
    } 
  </style>
</head>
<body>
  <div class="hello-example">
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello world!</span>
  </div>
  
  <div class="hello-example">
    <a href="#portuguese">Pottuguese:</a>
    <span lang="pt">Ola Mundo!</span>
  </div>
  
  <div class="hello-example">
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
  </div>
  
  <div class="hello-example">
    <a href="http://example.cnn">Chinese(Traditional):</a>
    <span lang="zh-TW">世界您好!</span>
  </div>
  
</body>
</html>

css-5.png

伪类选择器

  • 状态是动态变化,当一个元素达到一个特定状态的时候,它得到一个伪类的样式,它是基于文档之外的抽象,不会改变DOM的内容,只是插入一些修饰类的元素,对用户可见,对DOM不可见
选择器 名称/含义
E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素
  • n的取值
  • 1，2，3，4，5
  • 2n+1, 2n, 4n-1
  • odd, even
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    span:first-child{
      background-color: lime;
    }
    
    a:link{
      color: lightblue;
    }
    
    a:visited{
      color: green;
    }
    
    a:active{
      color:red;
    }
    
    a:hover{
      color:blue;
    }
    
    .first-name:focus{
      color:red;
    }
    
    div:lang(fr){
      background-color: yellow;
    }
    
    input:enabled{
      color:blue;
    }
    
    input:disabled{
      color:red;
    }
    //只有opera支持checked
    input[type="radio"]:checked{
      color:green;
    }
    
    ::selection{
      color:red;
    }
    
    :root{
      background-color: #ccc;
    }
    
  </style>
</head>
<body>
  <div>
    <span>This span is limed!</span>
    <span>This span is not.:</span>
  </div>
  
  <a href="http://www.baidu.com">link</a></br>
  
  <input class="first-name" type="text" value="I'll be red when focused">
  
  <div lang="fr">我是fr</div>
  
  <form action="#">
    <label for="FirstField">First field(enabled):</label>
    <input type="text" id="FirstField" value="Lorem"></br>
  
    <label for="SecondField">Second field(disabled):</label>
    <input type="text" id="SecondField" value="Ipasum" disabled></br>
    
    <input type="radio" checked="checked" value="male" name="gender" />Male<br>
    <input type="radio" value="female" name="gender" /> Female<br>
    <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
    <input type="checkbox" value="Car" /> I have a car 
  </form>
  <h5>请试着选取页面上的文本</h4>
</body>
</html>

css-6.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    
    p:nth-child(2){
      background-color: red;
    }
    
    p:nth-last-child(2){
      background-color: green;
    }
    
    
  </style>
</head>
<body>
  <h4>这是标题</h4>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
  <p>第四个段落</p>
</body>
</html>

css-7.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    
    p:nth-of-type(2){
      background-color: red;
    }
    
    p:last-child{
      background-color: green;
    }
    
    p:first-of-type{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h4>这是标题</h4>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
  <p>第四个段落</p>
</body>
</html>

css-8.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    
    p:last-of-type{
      background-color: red;
    }
    
    h4:only-child{
      background-color: blue;
    }
    
    h3:only-of-type{
      background-color: green;
    }
    
    h2:empty{
      height: 30px;
      background-color: yellow;
    }
    
    h6:not(.classy){
      background-color: gray;
    }
  </style>
</head>
<body>
  <h4>这是标题</h4>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
  <p>第四个段落</p>
  <h4>这是结尾</h4>
  
  <div>
    <h4>这是一个段落</h4>
  </div>    
  <div>
    <span>这是一个span</span>
    <h4>这是一个段落</h4>
  </div>
  
  <div>
    <h3>这是一个段落</h3>
  </div>  
  <div>
    <span>这是一个span</span>
    <h3>这是一个段落</h3>
  </div>
  
  <div>
    <h2></h2>
    <h2>这是一个段落</h2>
  </div>
  
  <h6>你好</h6>
  <h6 class="classx">你好</h6>
  <h6 class="classy">你好</h6>
</body>
</html>

css-9.png

伪元素选择器

  • 伪元素用于向某些选择器设置特殊效果,如果需要加新元素加以标识就选择伪元素
选择器 含义
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h4::first-line{
      background-color: yellow;
    }
    
    h4::first-letter{
      background-color: red;
    }
    
    p::before{
      content:"台词:"
    }
    
    p::after{
      content:"-结尾"
    }
  </style>
</head>
<body>
  <h1>我是标题</h1>
  <h4>曾经在奥巴马身边做过保镖的特工约翰·威尔斯最近就在网上分享了一些奥巴马生活的点滴。在2007年3月至2008年11月期间，威尔斯曾经在奥巴马身边工作。当时，美国特勤局为每位总统候选人都指派了特工负责安保，在大选季期间跟着候选人到处出行，在人群扎堆的地方保护他们的安全。奥巴马当时还是参议员，威尔斯透露，特勤局为他增加了保护人手，因为他是黑人，受到的安全威胁更多。</h4>
  
  <p>我是唐老鸭</p>
  <p>我住在日本</p>
  
</body>
</html>

css-10.png

选择器的优先级

优先级从高到低依次为

  • 在属性后面使用!important,会覆盖页面内任何位置定义的元素样式
  • 作为style属性写在元素标签上的内联样式
  • id选择器
  • 类选择器
  • 伪类选择器
  • 属性选择器
  • 标签选择器
  • 通配符选择器
  • 浏览器自定义
  • 定位的越精准,优先级就越高,优先级高的样式会覆盖优先级低的
  • 未点击(link)
  • 点击完发生链接之后(visited)
  • 鼠标放上去悬浮着(hover)
  • 鼠标点下去不松开(active)
  • 记住lvha,如果顺序写错了,则不会有效果

CSS选择器的命名空间

  • 使用语义化的命名可以使代码容易读懂
  • 便于维护和多人协作
  • 浏览器可能会因为不规范的命名产生不同的样式

列出你知道的伪类选择器

  • E:first-child | E:link | E:visited |E:active |E:hover |E:focus |E:lang(c) |E:enabled |E:disabled |E:checked |E::selection |E:root |E:nth-child(n) |E:nth-last-child(n) |E:nth-of-type(n) |E:nth-last-of-type(n) |E:last-child |E:first-of-type |E:last-of-type |E:only-child |E:only-of-type |E:empty |E:not(selector) |

:first-child和:first-of-type的作用和区别

  • E:first-child首选是E的父元素中的第一个子元素，在这些子元素中选中E标签；E:first-of-type首选是E的父元素的第一个同类型的（E）标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    div:first-of-type{
     color: red;
    }
    div:first-child{
     color: green;
    }
  </style>
</head>
<body>
    <h3>我是标题1</h3>
    <div>我是第一个</div>
    <div>我是第二个</div>
</body>
</html>

css-11.png

code:以下选择器分别是什么意思?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header{
} 
.header{
} 
.header .logo{
} 
.header.mobile{
} 
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header{
}    /* id选择器，选择id名称为header的元素 */
.header{
}   /* class选择器，选择class名称为header的元素 */
.header .logo{
}   /* 后代选择器，选择class名称为header元素的后代元素中class名称为logo的所有元素 */
.header.mobile{
}   /* 类选择器，选择class类同时具有header和mobile的元素 */
.header p, .header h3{
}   /* 多元素选择器，选择header中的p和h3元素 */
#header .nav>li{
}   /* 后代选择器，选择id为header的后代元素中class为nav的直接子元素（也就是nav的最外层子元素，即第一代子元素）li */
#header a:hover{
}   /* 后代元素选择器，选择id为header的所有后代元素a的鼠标悬停的效果 */

code:运行如下代码，解析下输出样式的原因

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .item1:first-child{
    color: red;
  }
  .item1:first-of-type{
    background: blue;
  }
  </style>
</head>
<body>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>  
</body>
</html>

css-12.png

原因

  • 蓝色背景：样式里面设置了first-of-type，也就是第一个类型的元素将应用为蓝色背景，而第一个类型就是p和h3，h3有2个，取第一个
  • 红色字：first-child是指后代中第一个子元素，第一个子元素是p，所以只是p应用了红色字

CSS常见样式

块级元素和行内元素

块级元素（block-level） 行内元素（inline-level）
div em
h1~h6 strong
p script
hr span
form a
ul br
dl img
ol button
pre input
table label
li select
dd textarea
dt code
tr
td
th

区别

块级元素 行内元素
总是在新行上开始 和其他行内元素都在一行上
可以包含块级元素和行内元素 只能包含行内元素和文本
可以设置宽高，宽度默认是它的父容器的100%，除非设定一个宽度 不可设置宽高,默认宽高是自身内容
margin、padding上下左右都生效 margin、padding上下无效，左右有效 
1
2
3
4
5
6
7
8
9
10
11
12
//块级元素总是在新行上开始,和其他行内元素都在一行上
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>这是块级元素</div>
  <span>行内元素1</span><a href="#">行内元素2</a>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//块级元素可以包含块级元素和行内元素,行内元素只能包含行内元素和文本
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="test">
    <p>块元素</p>
    <span>行内元素</span>
  </div>
  <span>行内元素1<a href="#">行内元素2</a></span>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//块级元素可以设置宽高,行内元素不可设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red; 
    }
    
    span{
      width: 100px;
      height: 100px;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div>块元素</div>
  <span>行内元素1</span>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//块级元素margin、padding上下左右都生效,行内元素margin、padding上下无效，左右有效
//设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      margin: 10px;
      padding: 10px;
      background-color: red;
    }
    span{
      padding: 20px;
      margin: 10px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>块级元素</div>
  <span>行内元素</span><a href="#">你好</a>
</body>
</html>

image

CSS继承

  • 后代元素继承祖先元素的属性样式

默认继承属性

  • font-family：规定元素的字体系列
  • font-weight：设置字体的粗细
  • font-size：设置字体的尺寸
  • font-style：定义字体的风格
  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：增加或减少单词间的空白（即字间隔）
  • letter-spacing：增加或减少字符间的空白（字符间距）
  • text-transform：控制文本大小写
  • direction：规定文本的书写方向
  • color：文本颜色
  • list-style: 列表样式

默认不继承属性

  • display：规定元素应该生成的框的类型
  • vertical-align：垂直文本对齐
  • text-decoration：规定添加到文本的装饰
  • text-shadow：文本阴影效果
  • white-space：空白符的处理
  • 盒模型属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
  • 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
  • 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

块级元素、行内元素水平居中

块级元素水平居中

  • 设置margin：0 auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div>块级元素</div>
</body>
</html>

image

块级元素内的文本图片等行内元素水平居中

  • text-aglin:center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box{
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="box">
    <img src="http://note.youdao.com/favicon.ico">
  </div>
</body>
</html>

image

用 CSS 实现一个三角形

  • 用CSS的border属性,可以实现三角形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .div1{
      width: 0;
      border-top: 20px solid blue;
      border-right: 20px solid yellow;
      border-bottom: 20px solid green;
      border-left: 20px solid red;
      margin-bottom: 20px;
    }
    
    .div2{
      width: 0;
      border-top: 20px solid blue;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid transparent;
    }
    
    .div3{
      width: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 20px solid red;
    }
    
    .div4{
      width: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid yellow;
      border-bottom: 20px solid transparent;
      border-left: 20px solid transparent;
    }
    
    .div5{
      width: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid green;
      border-left: 20px solid transparent;
      margin-bottom: 20px;
    }
    
    .div6{
      width: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid red;
      border-left: 20px solid red;
      margin-bottom: 20px;
    }
    
    .div7{
      width: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid green;
      border-bottom: 20px solid green;
      border-left: 20px solid transparent;      
    }
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
  <div class="div7"></div>
</body>
</html>

image

单行文本溢出加…的效果实现

  • 如果对HTML的块级元素设置了宽度，那么当文本太长放不下的时候，它会自动换行，如果我们不想让它换行，我们可以用一下三段代码实现:white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .box>div{
      margin: 20px auto;
    }
    .box-1{
      width: 100px;
      border: 2px solid red;
    }
    .box-2{
      width: 100px;
      border: 2px solid red;
      white-space: nowrap; /* 文本不换行 */
    }
    .box-3{
      width: 100px;
      border: 2px solid red;
      white-space: nowrap; /* 文本不换行 */
      overflow: hidden;    /* 溢出文本隐藏 */
    }
    .box-4{
      width: 100px;
      border: 2px solid red;
      white-space: nowrap; /* 文本不换行 */
      overflow: hidden;    /* 溢出文本隐藏 */
      text-overflow: ellipsis; /* 溢出文本省略 */
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box-1">
      床前明月光,疑是地上霜
    </div>
    <div class="box-2">
      床前明月光,疑是地上霜
    </div>
    <div class="box-3">
      床前明月光,疑是地上霜
    </div>
    <div class="box-4">
      床前明月光,疑是地上霜
    </div>
  </div>
</body>
</html>

image

px, em, rem 有什么区别

  • px:固定像素
  • em:相对单位，相对于父元素字体大小
  • rem:相对单位，相对于根元素（html）字体大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .div1{
      font-size: 20px;
    }
    
    .div2{
      font-size: 20px;
    }
    .div3{
      font-size: 2em;
    }
    
    .div4{
      font-size: 1rem;
    }
  </style>
</head>
<body>
  <div class="div1">你好1</div>
  
  <div class="div2">
    <div class="div3">你好2</div>
  </div>
  
  <div class="div4">你好</div>
</body>
</html>

image

code:解释下面代码的作用?为什么要加引号?字体里\5b8b\4f53代表什么?

1
2
3
body{
  font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
}

explain

  • 给body添加字体大小为12px,行高是字体的1.5倍,顺序查找本地电脑字体库,如果没有则使用默认的字体
  • 引号是因为英文字体中有空格,浏览器容易解析成好几个字体,避免出错
  • \5b8b\4f53达标黑字体的unicode编码

code:实现如下效果

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  div{
    width: 400px;
    margin: 30px auto;
    padding: 20px;
  }
  .div1{
    border: 1px solid pink;
  }
  .div2{
    background-color: pink;
    border-left: 4px solid red;
    border-right: 4px solid red;
  }
  .div3{
    background-color: yellow;
    border-top: 4px solid blue;
    border-bottom: 4px solid blue;
  }
  .div4{
    background-color: gray;
    border: 1px solid red;
    border-bottom: 4px solid green;
  }
  </style>
</head>
<body>
  <div class="div1">自学能锻炼自己的自律收集资料好的能力,更重要的是学会独立思考解决事情的能力,2017转行,加油自己</div>
  <div class="div2">自学能锻炼自己的自律收集资料好的能力,更重要的是学会独立思考解决事情的能力,2017转行,加油自己</div>
  <div class="div3">自学能锻炼自己的自律收集资料好的能力,更重要的是学会独立思考解决事情的能力,2017转行,加油自己</div>
  <div class="div4">自学能锻炼自己的自律收集资料好的能力,更重要的是学会独立思考解决事情的能力,2017转行,加油自己</div>
</body>
</html>

code:完成如下gif效果图

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  div{
    margin-left: 200px;
  }
  button{
    height: 35px;
    font-size: 18px;
    padding: 8px;
    border-radius: 5px;
    margin: 10px 2px;
    color: white;
    cursor: pointer;
    border: none;
    transition: all .8s;
  }
  .gray{
    background-color: gray;
  }
  .yellow{
    background-color: yellow;
    color:black;
  }
  .orange{
    background-color: orange;
    color: black;
  }
  .red{
    background-color: red;
  }
  .green{
    background-color: green;
  }
  button:hover{
    box-shadow: 0px 8px 20px gray;
  }
  </style>
</head>
<body>
  <div>
    <button class="gray">gray</button>
    <button class="yellow">yellow</button>
    <button class="orange">orange</button>
    <button class="red">red</button>
    <button class="green">green</button>
  </div>
</body>
</html>

code:完成如下列表

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  table{
    border-collapse: collapse;
    margin: 40px auto;
    border: 1px solid #ccc;
  }
  table:nth-child(2){
    border: none;
  }
  table > thead > tr > th,
  table > tbody > tr > td{
     width: 150px;
     text-align: left;
     padding: 10px;
  }
  table:first-child > thead > tr > th{
    background-color: green;
    color:white;
  }
  table > tbody > tr:nth-of-type(odd){
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
      </tr>
      <tr>
        <td>Bo</td>
        <td>Nilsson</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>Ross</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>
  
  <table>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
      </tr>
      <tr>
        <td>Bo</td>
        <td>Nilsson</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>Ross</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

code:完成如下效果图

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  div{
    margin: 0 auto;
    border: 1px solid #ccc;
    width: 400px;
  }
  .div1 img{
    width: 400px;
  }
  .div1 h3,.div1 p{
    margin: 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .div2{
    margin-top: 20px;
    text-align: center;
    padding: 20px 0;
  }
  </style>
</head>
<body>
  <div class="div1">
    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1223149641,360401238&fm=26&gp=0.jpg" alt="#">
    <h3>家里蹲哥</h3>
    <p>前端工程师一枚,爱生活,爱和平,爱游戏，不缺钱,不缺自学能力</p>
  </div>
  <div class="div2">
    <p>风景如画</p>
  </div>
</body>
</html>

IE盒模型和W3C盒模型

  • 盒模型是由margin、border、padding、content组成

IE盒模型

  • ie678怪异模式(不添加doctype)使用ie盒模型
  • 它的width实际上是content+padding+border,如图所示

image

W3C盒模型

  • chrome,ie9,ie678(添加doctype)使用W3C盒模型
  • 它的width实际上只是content,如图所示

image

优缺点

  • W3C标准盒模型对content内容宽高设置更加方便,但是当需要设置整个盒子的border宽度时候需要计算
  • IE盒模型对整个盒子的border宽高设置更加方便,但是对content内容设置就需要计算
  • 当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度

image

自定义盒模型类型

  • box-sizing: content-box：w3c标准盒模型
  • box-sizing: border-box：“IE盒模型”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .div1{
    width: 200px;
    height: 200px;
    background-color: green;
    border: 50px solid red;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
    
  .div2{
    width: 200px;
    height: 200px;
    background-color: green;
    border: 50px solid red;
  }
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
</body>
</html>

image

line-height:2和line-height:200%

  • 都表示行高为字体大小的2倍

区别

  • 当设置在父容器中就有区别

line-height:2

  • 写在父容器中,子元素的行高都是自身字体的大小的2倍,是相对大小
  • 子元素的字体大小不同,行高也会不同

line-height:200%

  • 写在父容器中,浏览器根据父容器字体大小先计算出行高的值,然后子元素继承这个行高值,是固定大小
  • 子元素的字体大小不同,行高都是固定某个值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .div1{
    line-height: 2;
    background-color: yellow;
  }
  .div2{
    font-size: 40px;
  }
  
  .div3{
    line-height: 200%;
    background-color: red;
  }
  .div4{
    font-size: 20px;
  }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2">你好</div>
  </div>
  
  <div class="div3">
    <div class="div4">你好</div>
  </div>
</body>
</html>

image

inline-block

特性

  • 既有inline的特征,不占据一整行,宽度由内容撑开,多个元素可以并排
  • 又有block的特征，可以设置width、height、margin、border、padding等盒模型的参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  span{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  </style>
</head>
<body>
  <span>hello world</span>
  <span>你好世界</span>
</body>
</html>

image

去除缝隙

  • 由于HTML代码中两个span中间有一些空格和回车,浏览器将它们解读为一个空白字符(空白折叠现象)
  • 去除方法如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//HTML中把两个span连着写,就没有空格和回车
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  span{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  </style>
</head>
<body>
  <span>hello world</span><span>你好世界</span>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//在CSS中对父容器设置字体为0,对子元素再设置字体大小为正常
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body{
    font-size: 0;
  }
  span{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    font-size: 14px;
  }
  </style>
</head>
<body>
  <span>hello world</span>
  <span>你好世界</span>
</body>
</html>

image

对齐方式

  • 当inline-block的高度不一样的时候,需要设置对齐方式
  • 顶端对齐:vertical-align:top
  • 中部对齐:vertical-align:middle
  • 底部对齐:vertical-align:bottom
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body{
    font-size: 0;
  }
  .span1{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    font-size: 14px;
  }
  .span2{
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid red;
    font-size: 12px;
    vertical-align: top;
  }
  </style>
</head>
<body>
  <span class="span1">hello world</span>
  <span class="span2">你好世界</span>
</body>
</html>

image

CSS sprite(精灵图)

  • 将网页中涉及到的零星图片包含到一张大图中去
  • 不再是每个图片都要发送http请求,提高网页加载性能

image

>>自动合成sprite

元素隐藏

opacity: 0;

  • 将元素(后代元素会继承)的透明度设为0，即完全透明看不见，但它仍然占据空间，别的元素能感知到它的存在。也就是看不见但摸得到

visibility: hidden;

  • 效果和 opacity: 0; 类似，都是从视觉上隐藏了元素，但是能“摸得到”

display: none;

  • 让元素消失，不占据空间，其他元素察觉不到该元素，也就是“看不到也摸不到”

background-color: rgba(0, 0, 0, 0.2);

  • 只是背景色透明(后代元素不会继承)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  div{
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    text-align: center;
  }
  span{
    background-color: green;
  }
  .opacity{
    opacity: 0.3;
  }  
  .visibility{
    visibility: hidden;
  }
  .display{
    display: none;
  }   
  .rgba{
    background-color: rgba(255,0,0,0.3);
  }
  </style>
</head>
<body>
  <div class="opacity">
    <span>你好</span>
  </div>
  <div class="visibility">
    <span>你好</span>
  </div>
  <div class="display">
    <span>你好</span>
  </div>
  <div class="rgba">
    <span>你好</span>
  </div>
</body>
</html>

image

code:使用CSS sprite实现如下gif效果

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo9</title>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei";
  }
  div{    
    width: 40px;
    height: 30px;
    line-height: 25px;
    padding-left: 30px;
    display: inline-block;
    cursor: pointer;
  }
  .div1{
    background: url(http://oqev4hx8u.bkt.clouddn.com/css-42.png) -4px -5px no-repeat;
  }
  .div1:hover{
    background: url(http://oqev4hx8u.bkt.clouddn.com/css-42.png) -6px -126px no-repeat;
    color: rgb(166, 99, 190);
  }
  .div2{
    background: url(http://oqev4hx8u.bkt.clouddn.com/css-42.png) -3px -44px no-repeat;
  }
  .div2:hover{
    background: url(http://oqev4hx8u.bkt.clouddn.com/css-42.png) -7px -171px no-repeat;
    color: rgb(166, 99, 190);
  }
  .div3{
    background: url(http://oqev4hx8u.bkt.clouddn.com/css-42.png) -4px -86px no-repeat;
  }
  .div3:hover{
    background: url(http://oqev4hx8u.bkt.clouddn.com/css-42.png) -3px -213px no-repeat;
    color: rgb(166, 99, 190);
  }
  </style>
</head>
<body>
  <div class="div1">前进</div>
  <div class="div2">开始</div>
  <div class="div3">停止</div>
</body>
</html>

code:使用字体图标实现如下效果图

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ducument</title>
  <link rel="stylesheet" type="text/css" href="font_cs3nfht4v5yfzuxr/iconfont.css">
</head>
<body>
  <i class="iconfont icon-airplane">飞机</i>
  <i class="iconfont icon-bus">公共汽车</i>
  <i class="iconfont icon-subway">高铁</i>
  <i class="iconfont icon-train">火车</i>
</body>
</html>
  • iconfont.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1497433469729'); /* IE9*/
  src: url('iconfont.eot?t=1497433469729#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1497433469729') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1497433469729') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1497433469729#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-airplane:before { content: "\e73d"; }
.icon-bus:before { content: "\e73e"; }
.icon-subway:before { content: "\e73f"; }
.icon-train:before { content: "\e740"; }

CSS浮动、定位

CSS浮动元素

浮动的特征

  • 浮动元素脱离文档流,根据设置的float的属性值而向左或向右移动,直到它的border外边距撞到父容器的内边缘为止
  • 任何元素都可以浮动,行内元素浮动后可以设置宽高和内外边距等等块级元素的特征(默认是不能设置的)
  • 不管块级元素或者行内元素,浮动之后的宽高都是由内容撑起来的(默认块级元素宽是撑满父亲,行内元素是由内容撑起来)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .div1{
    float: left;
    background-color: yellow;
    padding: 20px;
    border: 1px solid red;
  }
  .div2{
    width: 50px;
    height: 50px;
    background-color: green;
  }
  </style>
</head>
<body>
  <span class="div1">
    <div class="div2"></div>
  </span>
</body>
</html>

image

浮动元素对其他元素的影响

对父容器

  • 如果父容器是普通元素，由于浮动元素脱离了文档流，父容器察觉不到子元素的存在，所以父容器的高度就不能被撑开，高度为0，无法包裹住浮动元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    background-color: blue;
  }
  .child{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>
</html>

image

  • 按正常流,子元素撑开父容器,所以父容器的背景颜色应该是蓝色,这里没有看到,说明上面的结论

对其他浮动元素

  • 其他浮动元素能察觉到浮动元素，左右移动的时候，撞到上一个浮动元素的边缘就会停止浮动，如果在本行装不下，后面的浮动元素就会往下移动，直到装下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 250px;
    background-color: blue;
  }
  .child1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .child2{
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .child3{
    float: left;
    width: 100px;
    height: 100px;
    background-color: orange;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</body>
</html>

image

  • 如果前面的浮动元素高度不同，后面的就会在视觉上呈现被卡住的状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 250px;
    background-color: blue;
  }
  .child1{
    float: left;
    width: 100px;
    height: 120px;
    background-color: red;
  }
  .child2{
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
  }
  .child3{
    float: left;
    width: 100px;
    height: 100px;
    background-color: orange;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</body>
</html>

image

对普通元素

  • 普通元素无法察觉到浮动元素，该在哪还是哪，只是在视觉上会被浮动元素遮挡住
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 300px;
    background-color: blue;
  }
  .child1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .child2{
    width: 100px;
    height: 100px;
    background-color: green;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
</html>

image

  • 当第一个元素浮动的时候,第二个元素会当第一个元素不存在,占用它的位置,父容器这时候的高度是由于第一个元素撑开的,所以背景样式蓝色

文本

  • 文本可以察觉到浮动元素，会给浮动元素让出位置，在视觉上呈现环绕的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 300px;
    background-color: blue;
  }
  .child1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .child2{
    width: 100px;
    height: 100px;
    background-color: green;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
    <div class="child2">我是第二个元素的文字,我看到了第一个元素上我的上面</div>
  </div>
</body>
</html>

image

清除浮动

  • 解决浮动元素对父容器和普通元素的影响

浮动元素的影响

  • 对父容器清除浮动:父容器无法察觉到浮动元素，所以高度无法被撑开，没有包裹住浮动的子元素，清除浮动就是为了让父容器撑开高度，包裹住浮动元素
  • 对普通元素清除浮动:普通元素无法察觉到浮动元素，所以普通元素该在哪还是在哪，但是视觉上会被浮动元素遮挡，清除浮动就是为了让普通元素“感知到”浮动元素，从而自身往下移动，不被遮挡

清除浮动的方法

  • 加一个div 设置它的 class 为 clear: both; 这条主要应用在撑开父容器高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    border: solid 5px #0e0;
    width:300px;
  }
  .child1{
    height: 100px;
    width: 100px;
    background-color: Red;
    float:left;
  }
  .child2{
    height: 100px;
    width: 100px;
    background-color: Green;
    float:left;
  }
  .child3{
    height: 100px;
    width: 100px;
    background-color: Yellow;
    float:left;
  }
  .clear{
    clear:both;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="clear"></div>
  </div>
</body>
</html>

image

  • 对父容器加一个伪元素,这条的本质和上一条是一样的，即在父容器的最后加一个不允许左右有浮动的块级元素，这个块级元素会移动到浮动元素的下面，而且这个块级元素能被父容器察觉到，从而父容器就被撑开了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    border: solid 5px #0e0;
    width:300px;
  }
  .child1{
    height: 100px;
    width: 100px;
    background-color: Red;
    float:left;
  }
  .child2{
    height: 100px;
    width: 100px;
    background-color: Green;
    float:left;
  }
  .child3{
    height: 100px;
    width: 100px;
    background-color: Yellow;
    float:left;
  }
  .father:after{
    content: "";
    display: block;
    clear: both;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</body>
</html>

image

  • 对普通元素的 class 加一条clear: both； 这条主要应用在让普通元素往下移动不被浮动元素遮挡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .child1{
    height: 100px;
    width: 100px;
    background-color: Red;
    float:left;
  }
  .child2{
    height: 100px;
    width: 100px;
    background-color: Green;
    clear:both;
  }
  </style>
</head>
<body>
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
</html>

image

  • 利用BFC(Block Format Content)来清除浮动,有三个特性:1、BFC会阻止垂直外边距（margin-top、margin-bottom）折叠;2、BFC不会重叠浮动元素;3、BFC可以包含浮动;我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以
  • BFC形成的方法:display:table-cell|table-caption|inline-block;overflow:hidden|auto|scroll;position:absolute|fixed;float:left|right;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    float: left;
    border: solid 5px #0e0;
    width:300px;
  }
  .child1{
    height: 100px;
    width: 100px;
    background-color: Red;
    float:left;
  }
  .child2{
    height: 100px;
    width: 100px;
    background-color: Green;
    float:left;
  }
  .child3{
    height: 100px;
    width: 100px;
    background-color: Yellow;
    float:left;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</body>
</html>

image

CSS定位

  • static
  • relative
  • absolute
  • fixed

static(默认定位)

  • 正常的普通流布局
  • 一般省略
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 400px;
    height: 400px;
    border: 1px solid red;
  }
  .div1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: static;
  }
  .div2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: static;
  }
  .div3{
    width: 100px;
    height: 100px;
    background-color: green;
    position: static;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
</body>
</html>

image

relative(相对定位)

  • 相对于元素本来的位置定位，参照点是自身原来的位置，移动后视觉位置发生改变，但是它在文档流中的位置不变，对其他元素不产生影响
  • 主要用于微调自己的位置，为子元素的绝对定位提供参考点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 320px;
    height: 320px;
    border: 1px solid red;
  }
  .div1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: static;
  }
  .div2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 20px;
    top: 30px;
  }
  .div3{
    width: 100px;
    height: 100px;
    background-color: green;
    position: static;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
</body>
</html>

image

absolute(绝对定位)

  • 相对于最近的那个已经定位的祖先元素定位（非static定位），如果找不到，就以根元素html(视窗)定位
  • 主要应用：希望以其他元素作为参考点来定位时候
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//父元素没有设置定位元素(视窗为定位)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 320px;
    height: 320px;
    border: 1px solid red;
  }
  .div1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: static;
  }
  .div2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    left: 20px;
    top: 30px;
  }
  .div3{
    width: 100px;
    height: 100px;
    background-color: green;
    position: static;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 320px;
    height: 320px;
    border: 1px solid red;
    position: relative;
  }
  .div1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: static;
  }
  .div2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
  .div3{
    width: 100px;
    height: 100px;
    background-color: green;
    position: static;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
</body>
</html>

image

fixed(固定定位)

  • 以视窗为参考点的定位，当页面上下拉动的时候，fixed定位的元素就视窗上不动
  • 主要应用场景：希望元素一直展现在视窗上不移动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .father{
    width: 320px;
    height: 320px;
    border: 1px solid red;
  }
  .div1{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: static;
  }
  .div2{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: fixed;
    right: 20px;
    bottom: 80px;
  }
  .div3{
    width: 100px;
    height: 100px;
    background-color: green;
    position: static;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
  </div>
</body>
</html>

image

z-index

  • 设置元素的堆叠顺序的属性,拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素的前面
  • z-index仅在定位元素上奏效
  • z-index越高，元素位置越靠上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  img{
    position: absolute;
    left: 100px;
    top: 30px;
    z-index: -1;
  }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <img src="http://note.youdao.com/favicon.ico" />
  <p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>

image

position:relative和负margin

  • position:relative和负margin都可以使元素位置发生变化，但是它们二者是有区别的

position:relative

  • 只是视觉上元素位置发生了变化，而元素在文档流中的位置并有改变，对其他元素没有影响
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
  .box:nth-child(1){
    background: red;
  }
  .box:nth-child(2){
    background: blue;
    position: relative;
    top: 80px;
    left: 40px;
  }
  .box:nth-child(3){
    background: yellow;
  }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>

image

负margin

  • 当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同
  • 当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会上移、左移
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .box{
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
  .box:nth-child(1){
    background: red;
  }
  .box:nth-child(2){
    background: blue;
    margin-top: -40px;
  }
  .box:nth-child(3){
    background: yellow;
  }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

image

BFC

BFC的定义

  • BFC（Block Format Content）块级格式上下文,BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

BFC的生成

1
2
3
4
display: inline-block | table-cell | table-caption;
overflow: hidden | auto | scroll;
position: absolute | fixed;
float: right | left;

BFC的作用

清除浮动

  • 父元素生成BFC可以感知到浮动的子元素，撑开高度(前面BFC已举例)
  • 普通元素生成BFC可以感知到浮动元素，移动位置不被遮挡,可以根据BFC这个作用来实现两栏布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <title>两栏布局</title>
  <style>
  html,body,div{
    margin: 0px;
    padding: 0px;
  }
  body{
    font-size: 20px;
    font-family: Arial;
    margin: 5px;
  }
  #header, #footer{
    height: 50px;
    background: red;
  }
  #content .aside{
    background: blue;
    width: 200px;
    float: left;
  }
  #content .main{
    background: pink;
    overflow: auto;
    padding-left: 10px;
  }
  </style>
</head>
<body>
  <div id="header">header</div>
    <div id="content">
        <div class="aside">aside</div>
        <div class="main"> 
            我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 我是main 
        </div>
    </div>
    <div id="footer"></div>
</body>
</html>

image

解决margin合并问题

  • 处于同一个BFC中的相邻元素，它们的 margin 会合并，如果我们不想让 margin 合并，可以给这两个元素设置不同的BFC

垂直margin合并

  • 两个相邻元素如果处于同一个BFC中，那么它们就会发生垂直margin合并

合并的情况

  • 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

image

  • 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

image

  • 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

image

  • 如果这个外边距遇到另一个元素的外边距，它还会发生合并

image

合并方式

  • 取较大的那个margin值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}
#d1 {
  width:100px;
  height:100px;
  margin-bottom:20px;
  background-color:red;
}
#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）。</p>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}
body{
  border: 1px solid;
}
#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:50px;
}
#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:20px;
}
</style>
</head>
<body>
<div id="outer">
  <div id="inner"></div>
</div>
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="div1"></div>
  <div class="div2">你好</div>
  <p>注意：div1空元素垂直margin也会发生合并,"你好"文字距离顶部是40px;而不是60px</p>
</body>
</html>

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .div0{
    width:100px;
    height: 100px;
    background-color: blue;
    margin-bottom: 40px;
  }
  .div1{
    margin-top: 20px;
    margin-bottom: 40px;
  }
  </style>
</head>
<body>
  <div class="div0"></div>
  <div class="div1"></div>
  <div class="div2">你好</div>
  <p>注意：多个元素垂直外边距合并,这里合并后垂直外边距是40px</p>
</body>
</html>

image

取消外边距合并的方法

  • 将父子元素设置成不同的BFC，常用的是设置display: inline-block
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}
body{
  border: 1px solid;
}
#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:50px;
  display: inline-block;
}
#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:20px;
}
</style>
</head>
<body>
<div id="outer">
  <div id="inner"></div>
</div>
<p>注释：父元素形成BFC，那么内部 div 的上外边距将与外部 div 的上外边距不合并（叠加）</p>
</body>
</html>

image

  • 不让两个外边距直接相邻,中间可以加入border,padding隔开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<style type="text/css">
* {
  margin:0;
  padding:0;
  border:0;
}
body{
  border: 1px solid;
}
#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:50px;
  border: 1px solid;
}
#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:20px;
}
</style>
</head>
<body>
<div id="outer">
  <div id="inner"></div>
</div>
<p>注释：父元素加border隔开子元素，那么内部 div 的上外边距将与外部 div 的上外边距不合并（叠加）</p>
</body>
</html>

image

code:完成如下alert效果

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .wrap{
    width: 600px;
    margin: 0 auto;
  }
  .c-box{
    margin-top: 30px;
    color: #fff;
    padding: 1px 16px;/*1px是防止margin合并*/
    border-radius: 5px;
  }
  .c-box .close{
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
  }
  .c-box h3{
    font-size: 24px;
    margin: 10px 0;
  }
  .c-box.success{
    background-color: #4CAF50;
  }
  .c-box.info{
    background-color: #2196F3;
  }
  .c-box.danger{
    background-color: #f44336;
  }
  .c-box.warning{
    background-color: #ff9800;
  }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="c-box success">
      <span class="close">x</span>
      <h3>恭喜你</h3>
      <p>获得本周冠军,继续加油</p>
    </div>
    <div class="c-box info">
      <span class="close">x</span>
      <h3>通知</h3>
      <p>晚上打球,不要忘了</p>
    </div>
    <div class="c-box danger">
      <span class="close">x</span>
      <h3>天啊</h3>
      <p>为啥很久没来打球了</p>
    </div>
    <div class="c-box warning">
      <span class="close">x</span>
      <h3>警告</h3>
      <p>已经沉迷前端的学习中了</p>
    </div>
  </div>
</body>
</html>

code:完成如下表单效果

image

explain

  • html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrap{
      width: 600px;
      margin: 0 auto;
    }
    .h-card{
      padding-bottom: 16px;
      box-shadow: 0px 10px 10px 10px #ccc;
    }
    .h-card h2{
      color: #fff;
      background-color: #009688;
      padding: 15px 16px;
    }
    .h-card form{
      margin: 16px;
    }
    .h-card form>div{
      margin-top: 16px;
    }
    .h-card label{
      color: #757575;
      vertical-align: top;
    }
    .h-card input[type="text"],
    .h-card textarea{
      padding: 8px 0;
      display: block;
      border: none;
      border-bottom: 1px solid #808080;
      width: 100%;
    }
    .h-card input[type="text"]:focus,
    .h-card textarea:focus{
      outline: none;
    }
    .clearfix{
      *zoom: 1;
    }
    .clearfix:after{
      content: "";
      display: block;
      clear: both;
    }
    .h-card .half{
      width: 50%;
      float: left;
    }
    .h-card input[type="submit"]{
      padding: 8px 16px;
      border: none;
      background-color: #009688;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="h-card">
      <h2>信息收集表</h2>      
      <form action="#" method="post">  
        <div>
          <label for="name">姓名</label>
          <input type="text" id="name" name="name">
        </div>
        <div>
          <label for="qq">QQ</label>
          <input type="text" id="qq" name="qq">
        </div>    
        <div>
          <label for="words">要说的话</label>
          <textarea name="words" id="words" cols="30" rows="4"></textarea>
        </div>
        <div class="clearfix">
          <div class="half">
            <input type="checkbox" id="milk" name="drinks" checked="checked">
            <label for="milk">Milk</label><br/>
            <input type="checkbox" id="sugar" name="drinks">
            <label for="sugar">Sugar</label><br/>
            <input type="checkbox" id="lemon" name="drinks">
            <label for="lemon">Lemon</label>
          </div>
          <div class="half">
            <input type="radio" id="male" name="sex" value="male" checked="checked">
            <label for="male">Male</label><br/>
            <input type="radio" id="female" name="sex" value="female">
            <label for="female" >Female</label>
          </div>
        </div>
        <div>
          <input type="submit" value="提交">
        </div>
      </form>
    </div>
  </div>
</body>
</html>

code:完成如下模态框效果图

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  body{
    background-color: rgba(0,0,0,0.4);
  }
  .wrap{
    width: 600px;
    margin: 0 auto;
  }
  .panel{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    transform: translate(-50%,-50%);
    background-color: #fff;
    box-shadow: 0 0 10px 5px #666;
  }
  .panel header,.panel footer{
    background-color: #009688;
    padding: 15px 10px;
    color: #fff;
  }
  .panel main{
    padding: 30px 10px;
  }
  .panel .close{
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
  }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>这是页面内容</h1>
    <h1>这是页面内容</h1>
    <h1>这是页面内容</h1>
    <div class="panel">
      <header>
        <span class="close">x</span>
        <h3>头部</h3>
      </header>
      <main>
        <p>这是内容</p>
        <p>这是内容</p>
      </main>
      <footer>
        <p>尾部</p>
      </footer>
    </div>
  </div>
</body>
</html>

code:完成如下导航栏gif效果

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  .wrap{
    width: 600px;
    margin: 10px auto;
  }
  .h-navbar{
    list-style: none;
    background-color: #f1f1f1;
    box-shadow: 0 0 10px 5px #ccc;
  }
  .h-navbar:after{
    content:"";
    display: block;
    clear: both;
  }
  .h-navbar li{
    float: left;
    position: relative;
  }
  .h-navbar li a{
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #666;
  }
  .h-navbar li a:hover{
    color: #000;
    background-color: #ccc;
  }
  .h-navbar .children{
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #fff;
    width: 150px;
    display: none;
  }
  .h-navbar li:hover .children{
    display: block;
  }
  </style>
</head>
<body>
  <div class="wrap">
    <ul class="h-navbar">
      <li><a href="#">首页</a></li>
      <li><a href="#">作品</a></li>
      <li>
        <a href="#">更多</a>
        <div class="children">
          <a href="#">GitHub</a>
          <a href="#">博客</a>
          <a href="#">知乎</a>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

CSS布局

单列布局

  • 最常见布局,头部内容底部构成

image

如何实现

  • 定宽:width:1000px;或max-width:1000px（宽度分为width、min-width、max-width，一般情况下都会用到width，但是如果你有设置min-width和max-width，width超出max-width的之后，就会用到max-width，同理，width小于min-width的话就会用到min-width）
  • 水平居中:margin-left: auto; margin-right: auto;

范例

  • 单列布局(无通栏)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .layout{
  /*   width: 960px; */
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
  </style>
</head>
<body>
  <div id="header"  class="layout">头部</div>
  <div id="content" class="layout">内容</div>
  <div id="footer" class="layout">尾部</div>
</body>
</html>

image

  • 单列布局(有通栏)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .layout{
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 40px;
    background: blue;
  }
  #main{
    height: 400px;
    background: yellow;
  }
  #footer{
    height: 40px;
    background: red;
  }
  </style>
</head>
<body>
  <div id="header">
    <div class="layout">head</div>
  </div>
  <div id="main" class="layout">main</div>
  <div id="footer">
    <div class="layout">footer</div>
  </div>
</body>
</html>

image

双列布局

  • 一列固定宽度，另外一列自适应宽度

image

如何实现

  • 浮动元素 + 普通元素margin

范例

  • 侧边栏在左,固定宽度,主内容在右边自适应宽度,页面元素渲染顺序正常
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #content:after{
    content: '';
    display: block;
    clear: both;
  }
  .aside{
    width: 200px;
    height: 500px;
    background: yellow;
    float: left;
  }
  .main{
    margin-left: 210px;
    height: 400px;
    background: red;
  }    
  #footer{
    background: #ccc;
  } 
  </style>
</head>
<body>
  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>
</body>
</html>

image

  • 侧边栏在右,固定宽度,主内容在左边自适应宽度,原理一样,只是页面元素渲染顺序不同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #content:after{
    content: '';
    display: block;
    clear: both;
  }
  .aside{
    width: 200px;
    height: 500px;
    background: yellow;
    float: right;
  }
  .main{
    margin-right: 210px;
    height: 400px;
    background: red;
  }    
  #footer{
    background: #ccc;
  }
  </style>
</head>
<body>
  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>
</body>
</html>

image

三列布局

  • 两侧两列固定宽度，中间列自适应宽度
  • 这个是常见的三列布局,主要内容在dom最后

image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #content:after{
    content: '';
    display: block;
    clear: both;
  }
  .menu{
    width: 100px;
    height: 500px;
    background: pink;
    float: left;
  }
  .aside{
    width: 200px;
    height: 500px;
    background: yellow;
    float: right;
  }
  .main{
    margin-left: 110px;
    margin-right: 210px;
    height: 400px;
    background: red;
  }
  #footer{
    background: #ccc;
  }
  </style>
</head>
<body>
  <div id="content">
    <div class="menu">menu</div>
    <div class="aside">aside</div>
    <div class="main">main</div>
  </div>
  <div id="footer">footer</div>
</body>
</html>

image

圣杯布局

  • 是三列布局，两边固定宽度，中间自适应
  • 中间内容元素在 dom 元素次序中优先位置
  • 原理大致:采用负边距使得浮动元素达到预设的位置后,再使用padding使得两侧留出空白区域待左、右边距占用,然后再使用相对定位使得左右边距能够流向预定的位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  <style>
  #content:after{
    content: '';        /*8*/
    display: block;     /*8*/
    clear: both;        /*8*/
  }
  #content{
    padding-left: 100px;  /*5*/
    padding-right: 150px; /*5*/
  }
  .aside, .main, .extra{
    float: left;         /*2*/
  }
  .aside{
    width: 100px;        /*1*/
    height: 300px;       /*1*/
    background: red;     /*1*/
    margin-left: -100%;  /*4*/
    position: relative;  /*6*/
    left: -100px;        /*6*/
  }
  .extra{
    width: 150px;        /*1*/
    height: 300px;       /*1*/
    background: yellow;  /*1*/
    margin-left: -150px; /*5*/
    position: relative;  /*7*/
    left: 150px;         /*7*/
  }
  .main{
    height: 350px;       /*1*/
    background: blue;    /*1*/
    width: 100%;         /*3*/
  }
  </style>
</head>
<body>
  <div id="content">
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>
</body>
</html>

image

  • 缺点:.main的最小宽度不能小于.aside的宽度

双飞翼布局

  • 原理也是采用浮动元素负边距的特性使相关元素达到预定的要求后再设置响应的margin使得左、右边距正好处于margin的空间中
  • 区别在于main里面的内容用wrap包裹着,减少了实现的步骤,对圣杯布局的缺点进行改良
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #content:after{
    content: '';        /*8*/
    display: block;     /*8*/
    clear: both;        /*8*/
  }
  .aside, .main, .extra{
    float: left;         /*2*/
  }
  .aside{
    width: 100px;        /*1*/
    height: 300px;       /*1*/
    background: red;     /*1*/
    margin-left: -100%;  /*4*/
  }
  .extra{
    width: 150px;        /*1*/
    height: 300px;       /*1*/
    background: yellow;  /*1*/
    margin-left: -150px; /*5*/
  }
  .main{
    /* background: blue;  */   /*第1步添加，第7步注释掉*/
    /* height: 350px;  */      /*第1步添加，第7步注释掉*/
    width: 100%;         /*3*/
  }
  .wrap{
    margin-left: 100px;  /*6*/
    margin-right: 150px; /*6*/
    background: blue;    /*7*/
    height: 350px;       /*7*/
  }
  </style>
</head>
<body>
  <div id="content">
    <div class="main">
      <div class="wrap">main</div>
    </div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>
</body>
</html>

image

  • 负边距形成三栏布局的条件:1、需要左右侧边栏及主内容均为浮动的块级元素;2、主内容需在最前面;3、左侧边栏需设置margin-left为-100%,右侧边栏需设置margin-left为它本身宽度的负值

等边距排列

  • 使用负边距还可以变大父元素,从而装下原本装不下的子元素达到等边距排列的效果

  • html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="layout">
    <div id="header">风景列表</div>
    <div id="main">
      <ul>
        <li>
          <div class="img"></div>
          <p>风景如画</p>
        </li>
        <li>
          <div class="img"></div>
          <p>风景如画</p>          
        </li>
        <li>
          <div class="img"></div>
          <p>风景如画</p>          
        </li>
        <li>
          <div class="img"></div>
          <p>风景如画</p>          
        </li>
        <li>
          <div class="img"></div>
          <p>风景如画</p>          
        </li>
        <li>
          <div class="img"></div>
          <p>风景如画</p>          
        </li>
      </ul>
    </div>
  </div>
</body>
</html>
  • CSS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ul:after{
  content: "";
  display: block;
  clear: both;
}
.layout{
  width: 640px;
  margin: 0 auto;
  text-align: center;
}
#header{
  padding: 5px;
  color: #666;
  font-size: 2rem;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
ul,li{
  list-style: none;
  margin: 0;
  padding: 0;
}
li{
  width: 200px;
  height: 200px;
  float: left;
  margin-left: 20px; 
  margin-top: 20px;
  box-shadow: 
    0 8px 10px 0px rgba(0, 0, 0, 0.2),
    0 16px 20px 0 rgba(0, 0, 0, 0.16);
}
ul{
  margin-left: -20px;
}
li .img{
  width: 200px;
  height: 150px;
  background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2367512334,2722777786&fm=26&gp=0.jpg) ; 
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.75;
}

image

CSS浏览器兼容性

CSS hack

  • 同一份代码，有的浏览器效果正常，有的不正常,需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果

CSS hack的表现形式

  • CSS属性前缀法(即类内部Hack)
  • 选择器前缀法(即选择器Hack)
  • IE条件注释法（即HTML头部引用if IE）

处理兼容问题的思路

  • 产品的需求(产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
  • 做到什么程度(让哪些浏览器支持哪些效果)
  • 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS)
  • 根据兼容需求选择技术框架/库(Bootstrap (>=ie8)，jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9) Vue (>= ie9))
  • 条件注释、CSS Hack、js 能力检测做一些修补

渐进增强和优雅降级

  • 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  • 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

常见浏览器兼容的写法

  • IE条件注释
  • 属性选择器
  • 选择器前缀法
  • 使用兼容工具
  • js 修补

IE条件注释(即HTML条件注释Hack)

  • 条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码
  • IE10+已经不再支持条件注释

image

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--[if IE 6]> 
  <p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!--> 
 <script>alert(1);</script> 
<!--<![endif]-->
<!--[if IE 8]>
 <link href="ie8only.css" rel="stylesheet"> 
<![endif]-->
<!-- 浏览器符合哪一条，那条就生效 -->

属性选择器(即类内部Hack)

  • IE6能识别下划线和星号,IE7能识别星号,但不能识别下划线,IE6~IE10都认识”\9”,但firefox前述三个都不能认识
1
2
3
4
5
6
.box{
  color: red;
  _color: blue;        /*ie6*/
  *color: pink;        /*ie67*/
  color: yellow\9;     /*ie/edge 6-8*/
}

选择器前缀法(即选择器Hack)

  • 原理与属性前缀法法类似，在选择器前面加下划线或星号，区分开能否识别它们的浏览器
1
2
3
4
5
6
7
8
9
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), 
  (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

使用兼容工具

  • html5shiv.js
  • respond.js
  • css reset
  • normalize.css
  • Modernizr
  • postCSS

js 修补

  • 一些简单的兼容问题，可以自己写一段 js 代码去实现该功能

其它处理兼容方法(积累)

  • CSS块级兼容
1
2
3
4
5
.target{
  display: inline-block;
  *display:inline;
  *zoom:1;
}
  • 清除浮动
1
2
3
4
5
6
7
8
9
.clearfix:after{
  content:"";
  display:block;
  clear:both;
.clearfix{
    *zoom:1;<!-- 仅对ie67有效 -->
  }
}

浏览器兼容工具 / 名词

条件注释

  • 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码

IE Hack

  • IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识”\9”
  • 不同版本的 IE 浏览器有各自的 bug，基于这些bug，我们能针对性的写代码

js 能力检测

  • 不去看浏览器的版本和种类，而是直接去检测浏览器支不支持该功能，得出结论后再去针对性的解决兼容问题

html5shiv.js

  • IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，可以使用该工具

respond.js

  • IE6-8等老版本的浏览器不支持CSS3的媒体查询功能，那么就可以用这个工具，用 js 去实现响应式

css reset

  • 对浏览器的默认样式全部重置，全部推倒重来

normalize css

  • 标准化CSS，让不同浏览器的CSS样式统一

Modernizr

  • Modernizr使你可以方便地为各种情况编写JavaScript和CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
  • Modernizr会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在html元素加入方便你调整 CSS的class名

postCss

  • 它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码

>>查兼容

>>查hack写法

CSS编码规范

CSS命名规则

  • 语义化标签优先
  • 基于功能命名、基于内容命名、基于表现命名
  • 简略、明了、无后患

命名的范例

  • 语义化标签优先
1
2
3
4
5
6
<!-- 不好  -->
<div class="article">
  <div class="article_title">编码规范</div>
  <div class="the_content">今天自学的内容是编码规范
     <div class="darkbold">小明</div> @goole</div>
</div>
1
2
3
4
5
6
<!-- 好 -->
<article>
  <h1>编码规范</h1>
  <p>今天字儿学的内容是编码规范
     <b>小明</b> @goole</p>
</article>
  • 基于功能命名、基于内容命名、基于表现命名
1
2
3
4
5
<!-- 不好  -->
<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>
1
2
3
4
<!-- 好 -->
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>
  • 简略、明了、无后患
1
2
3
<!-- 不好 -->
<article class="blue">...</article>
<article class="redBg mt30 bigText">...</article>
1
2
3
<!-- 好 -->
<article class="movies">...</article>
<article class="news">...</article>

命名范例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1.所有命名都使用英文小写
推荐：`<div class="main"></div> `
不推荐： `<div class="Main"></div> `
2.命名用引号包裹
推荐：`<div id="header"></div> `
不推荐： `<div id=header></div> `
3.用中横线连接
推荐：`<div class="mod-modal"></div> `
不推荐： `<div class="modModal"></div> `
4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
推荐：`<div class="text-lesser"></div>`
不推荐： `<div class="light-grey"></div>`

命名的单词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.wrap或.wrapper -- 用于外侧包裹
.container或 .ct -- 包裹容器
.header -- 用于头部
.body -- 页面 body
.footer -- 页面尾部
aside、sidebar -- 用于侧边栏
.content -- 和header footer 对应，用于主要内容
.navigation -- 导航元素
.pagination -- 分页
.tabs > .tab -- tab 切换
.breadcrumbs -- 导航列表、面包屑
.dropdown -- 下拉菜单
.article -- 文章
.main -- 用于主体
.thumbnail -- 头像，小图像
.media -- 媒体资源
.panel -- 面板
.tooltip -- 鼠标放置上去的提示
.popup -- 鼠标点击弹出的提示
.button、.btn -- 按钮
.ad -- 广告
.subnav -- 二级导航
.menu -- 菜单
.tag -- 标签
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登录
.register -- 注册
.username -- 用户名
.password -- 密码
.banner -- 广告条
.copyright -- 版权
.modal或者 .dialog -- 弹窗

CSS书写规范

  • tab 用两个空格表示
  • css的 :后加个空格， {前加个空格
  • 每条声明后都加上分号
  • 换行，而不是放到一行
  • 颜色用小写，用缩写, #fff
  • 小数不用写前缀, 0.5s -> .5s；0不用加单位
  • 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}
/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}
/* Not recommended: missing space */
#video{
  margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* Recommended */
#video {
  margin-top: 1em;
}
/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
/* Always put a blank line (two line breaks) between rules. */
html {
  background: #fff;
}
body {
  margin: auto;
  width: 50%;
}
/* Not recommended */
@import url("//www.google.com/css/maia.css");
html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);
html {
  font-family: 'open sans', arial, sans-serif;
}

>>boostrap的编码规则

垂直居中的实现方式

设置上下padding相等(文本垂直居中)

  • 假如父容器的高度(未设定)由内容撑开，可以设置上下padding一样来达到垂直居中的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .layout {
    width: 300px;
    border: 1px solid;
    font-size: 40px;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  </style>
</head>
<body>
  <div class="layout">你好</div>
</body>
</html>

image

设置line-height(文本垂直居中)

  • 当父容器设置宽度时,设置line-height=height,能实现垂直居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .layout {
    width: 300px;
    height: 140px;
    line-height: 140px;
    border: 1px solid;
    font-size: 40px;
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="layout">你好</div>
</body>
</html>

image

设置伪元素(文本垂直居中)

  • 假如父容器的高度是确定的，可以添加一个伪元素.middle::before
  • 构造一个高度撑满父容器，垂直居中的元素，对它垂直居中，那么就是对父容器垂直居中了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .box {
    width: 300px;
    height: 200px; 
    border: 1px solid;
    font-size: 40px;
    text-align: center;
  }
  .box:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle; 
  }
  </style>
</head>
<body>
  <div class="box">你好</div>
</body>
</html>

image

设置table-cell(文本垂直居中)

  • 假如父容器的高度是确定的，可以将父容器的 display 属性设置成 table-cell，再添加 vertical-align: middle;来达到垂直居中的效果
  • 优点：简单方便。
  • 缺点：这样改变了父容器的display属性，可能会有副作用，而且IE6、IE7不支持display:table-cell,IE8及以后的版本才能用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .layout {
    width: 300px;
    height: 200px;
    border: 1px solid;
    font-size: 40px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  </style>
</head>
<body>
  <div class="layout">你好</div>
</body>
</html>

image

设置绝对定位(元素垂直居中)

  • 假如父容器的宽高是确定的，就可以用绝对定位来达到居中的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .layout{
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px solid;
  }
  .children{
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
  }
  </style>
</head>
<body>
  <div class="layout">
    <div class="children"></div>
  </div>
</body>
</html>

image

设置CSS3 transform(元素垂直居中)

  • 假如父容器的高度(未设定)由内容撑开,如果按绝对定位设置,不知道margin-top的具体值,可以使用CSS3 transform实现垂直居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .layout{
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px solid;
  }
  .children{
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
  }
  </style>
</head>
<body>
  <div class="layout">
    <div class="children"></div>
  </div>
</body>
</html>

image

code:tooltip的如下效果图

image

explain

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .tooltip-1,
  .tooltip-2,
  .tooltip-3 {
    display: block;
    margin: 50px;
    padding: 10px;
    width: 200px;
    height: 100px; /* 实际中高度由内容撑开 */
    border: 1px solid #aaa;
    position: relative; 
    top: 50px; 
    background: #fff;   
  }
  .tooltip-1:before,
  .tooltip-2:before,
  .tooltip-3:before {
    content: "";
    display: block;
    position: absolute; 
  }
  /* .tooltip-1:before {
    width: 20px;
    height: 20px;
    background: #f00;
    transform: rotate(45deg); 
    left: 10px;
    top: -10px;
    z-index: -1;
  }  */
  .tooltip-1:before {
    width: 0;
    height: 0;
    border: 10px solid #aaa;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: rotate(45deg); 
    left: 10px;
    top: -10px;
  } 
  .tooltip-2:before {
    border: 10px solid #f00;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    left: 100%;
    transform: translate(-100%,-10px);
  }
  .tooltip-3:before {
    border: 1px solid #aaa;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    background: #fff;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    left: 10px;
    top: -11px;
  }
  </style>
</head>
<body>  
  <div class="tooltip-1"></div>
  <div class="tooltip-2"></div>
  <div class="tooltip-3"></div>
</body>
</html>

学习