Note/css-point.html at master · lonelymoon/Note · GitHub

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>requireJS</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
body{
  background: #e3e3e3;
  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
}
header{
  position: relative;
  height: auto;
  padding: 100px 0px;
  text-align: center;
  margin-bottom: 65px;
}
.column{
  background: #fff;
  position: relative;
  height: auto;
  padding: 35px;
  margin-bottom: 35px;
}
.content{
  position: relative;
  height: auto;
  padding-top: 20px;
  line-height: 1.7!important;
}
</style>
</head>
<body>
<header class="bg-primary">
  <h1>CSS知识点复习</h1>
</header>
<div class="container-fluid">
  <div class="row">
  	<div class="col col-md-6 col-xs-12">
  		<div class="column">
  			<h3>介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？</h3>
  			<div class="content">
  				1. 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin<br/>
          2. 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
  			</div>
  		</div>
      <div class="column">
        <h3>box-sizing属性？</h3>
        <div class="content">
          用来控制元素的盒子模型的解析模式，默认为content-box<br/>
          context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽<br/>
          border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽
        </div>
      </div>
      <div class="column">
        <h3>CSS优先级算法如何计算？</h3>
        <div class="content">
          !important声明的样式优先级最高，如果冲突再进行计算。<br/>
          如果优先级相同，则选择最后出现的样式。<br/>
          继承得到的样式的优先级最低。
        </div>
      </div>
      <div class="column">
        <h3>display有哪些值？说明他们的作用?</h3>
        <div class="content">
          inline（默认）--内联<br/>
          none--隐藏<br/>
          block--块显示<br/>
          table--表格显示<br/>
          list-item--项目列表<br/>
          inline-block<br/>
          flex,boxer,table-cell
        </div>
      </div>
      <div class="column">
        <h3>用纯CSS创建一个三角形的原理是什么？</h3>
        <div class="content">
          width: 0;<br/>
          height: 0;<br/>
          border-top: 40px solid transparent;<br/>
          border-left: 40px solid transparent;<br/>
          border-right: 40px solid transparent;<br/>
          border-bottom: 40px solid #ff0000;
        </div>
      </div>
      <div class="column">
        <h3>一些兼容性问题？</h3>
        <div class="content">
          Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。<br/>
          超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}<br/>
          设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。<br/>
          IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
        </div>
      </div>
      <div class="column">
        <h3>为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？</h3>
        <div class="content">
         浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。<br/>
          浮动带来的问题：<br/>
          1. 父元素的高度无法被撑开，影响与父元素同级的元素<br/>
          2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后<br/>
          3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。<br/>
          清除浮动的方式：<br/>
          1. 父级div定义height<br/>
          2. 最后一个浮动元素后加空div标签 并添加样式clear:both。或者伪类操作<br/>
          3. 包含浮动元素的父标签添加样式overflow为hidden或auto。<br/>
          4. 父级div定义zoom
        </div>
      </div>
  	</div>
  	<div class="col col-md-6 col-xs-12">
  		<div class="column">
  			<h3>CSS选择器有哪些？哪些属性可以继承？</h3>
  			<div class="content">
  				CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）<br/>
          可继承的属性：font-size, font-family, color<br/>
          不可继承的样式：border, padding, margin, width, height<br/>
          优先级（就近原则）：!important > [ id > class > tag ] !important 比内联优先级高
  			</div>
  		</div>
      <div class="column">
        <h3>CSS3新增伪类有那些?</h3>
        <div class="content">
          p:first-of-type 选择属于其父元素的首个元素<br/>
          p:last-of-type 选择属于其父元素的最后元素<br/>
          p:only-of-type 选择属于其父元素唯一的元素<br/>
          p:only-child 选择属于其父元素的唯一子元素<br/>
          p:first-child 选择属于其父元素的第一个子元素<br/>
          p:last-child 选择属于其父元素的最后一个子元素<br/>
          p:nth-child(2) 选择属于其父元素的第二个子元素<br/>
          :enabled :disabled 表单控件的禁用状态。<br/>
          :checked 单选框或复选框被选中。
        </div>
      </div>
      <div class="column">
        <h3>请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？</h3>
        <div class="content">
          该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。<br/>
          试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
        </div>
      </div>
      <div class="column">
        <h3>为什么要初始化CSS样式</h3>
        <div class="content">
          因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
        </div>
      </div>
      <div class="column">
        <h3>display:none与visibility：hidden的区别？</h3>
        <div class="content">
          display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）<br/>
          visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
        </div>
      </div>
      <div class="column">
        <h3>position跟display、overflow、float这些特性相互叠加后会怎么样？</h3>
        <div class="content">
          display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。
        </div>
      </div>
  	</div>
  </div>
</div>
</body>
</html>