這些是我自己在學習過程中總結的一些知識點，這篇文章我將以面試題的形式分享給大家，希望對大家有所幫助，本文篇幅較長，您若認真看完，並且反覆閱讀，我相信對您的學習或者是面試，都會有一定幫助，同時希望大家批評指正！
盒子模型就是元素在網頁中的實際佔位，有兩種：標準盒子模型和IE盒子模型
# 標準(W3C)盒子模型：內容content 填入padding 邊框border 邊界margin
寬高指的是content 的寬高
# 低版本IE盒子模型：內容（content padding border） 邊界margin，
寬高指的是content padding border 部分的寬高
#問題的拓展：##CSS 如何設定這兩種模型？
box-sizing : content-box
box-sizing : border-box复制代码
登入後複製
dom.style.width/height;//设置获取的是内联样式
dom.currentStyle.width/height;//只有IE支持
window.getComputedStyle(dom).width/height;//兼容性好
dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置复制代码
登入後複製
此範例是父子邊距重疊，還有兄弟元素的邊距重疊
<style>
html *{
padding: 0;
margin: 0;
}
#sec{
background: #f00;
overflow: hidden; //创建了一个BFC，块级格式化上下文
}
.child{
height: 100px;
margin-top: 10px;
background: yellow;
}
</style>
<section id="sec">
<article class="child"></article>
</section>复制代码登入後複製
2. box-sizing屬性？
context-box：W3C的標準盒子模型
，設定元素的height/width 屬性指的是content 部分的高/寬border-box：IE 傳統盒子模型。
設定元素的 height/width 屬性指的是 content border padding 部分的高/寬3. 對 BFC 規範(區塊層級格式化上下文：block formatting context)的理解？
一個頁面是由很多個Box 組成的,元素的類型和display 屬性,決定了這個Box 的類型。
不同類型的Box，會參與不同的Formatting Context（決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染，也就是說BFC內部的元素和外部的元素不會互相影響。
BFC 規定了內部的 Block Box 如何佈局。定位方案：
內部的 Box 會在垂直方向上一個接一個地放置。#根元素，即html
4. CSS選擇器有哪些？哪些屬性可以繼承？ CSS優先權演算法如何計算？
CSS選擇符：1. id選擇器（ # myid）
2. 類別選擇器（.myclassname）
3. 標籤(元素)選擇器（p, h1, p）
4. 相鄰選擇器（h1 p）
5. 子選擇器（ul >li）
6. 後代選擇器（li a）
7.通配符選擇器（ * ）
#8. 屬性選擇器（a[rel = "external"]）
9. 偽類選擇器（a:hover, li:nth-child）
偽元素選擇器、分組選擇器。
繼承性：可繼承的樣式：font-size, font-family, color，ul，li，dl，dt，dd;
不可繼承的樣式：border, padding, margin, width, height
優先權（就近原則）：!important > [ id > class > tag ]
!important 比內嵌優先級高優先權就近原則，同權重情況下樣式定義最近者為準
!important>id > ;class>tag
important比內聯優先權高
元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled
:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
:before在元素之前添加内容，也可以用来做清除浮动
:after在元素之后添加内容
水平居中p：
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;复制代码
水平垂直居中一个浮动元素（position定位）
第一种：未知元素宽高
<p class="outer">
<span>我想居中显示</span>
</p>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{ float:left;
position:absolute;
backgroond-color:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>复制代码第二种：已知元素宽高的
<p class="outer">
<span>我想居中显示</span>
</p>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{ float:left;
position:absolute;
backgroond-color:red;
width:150px;
height:50px;
top:50%;
left:50%;
margin:-25px 0px 0px -75px;
}
</style>复制代码如何垂直居中一个img（display : table-cell 或者 position定位）
<p class="outer">
<img src="nz.jpg" alt="">
</p>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid #cccccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
width: 150px;
height: 150px;
}
</style>复制代码绝对定位的p水平垂直居中：
border: 1px solid black; position: absolute; width: 200px; height: 100px; margin: auto; left: 0; right: 0; top:0; bottom:0;复制代码
还有更加优雅的居中方式就是用 flex布局，点击查看我的文章 掌握flex布局，这篇文章就够了
更多的居中问题，点击查看我的文章 p居中的几种方法
| 值 | 描述 |
|---|---|
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| none | 此元素不会被显示（隐藏）。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| table | 此元素会作为块级表格来显示（类似table），表格前后带有换行符 |
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持） 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
css 定位还有一个新增属性，粘性定位 sticky，它主要用在对 scroll 事件的监听上；
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：
#one { position: sticky; top: 10px; }复制代码在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
更多关于 sticky 的介绍，请点击查看 粘性定位介绍
:not(p) 选择每个非p的元素； p:empty 选择每个没有任何子级的p元素（包括文本节点）p{
border:2px solid;
border-radius:25px; //用于设置圆角
box-shadow: 10px 10px 5px #888888; //水平阴影 垂直阴影 模糊距离 阴影颜色
border-image:url(border.png) 30 30 round;// 设置所有边框图像的速记属性。
}复制代码p{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%; //规定背景图的尺寸
background-origin:content-box;//规定背景图的定位区域
}
多背景
body{
background-image:url(img_flwr.gif),url(img_tree.gif);
}复制代码background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码
更多 CSS3 和 HTML5的新特性，请点击 CSS3 和 HTML5 新特性一览
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
更多关于 flex 布局，请点击查看我的文章 你真的了解 flex 布局吗？
首先，需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;复制代码
第一种真正的品字：
第二种全屏的品字布局:
上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。
*{margin:0;padding:0;} 来统一；
display:inline; 将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。{
background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}复制代码a:link {}
a:visited {}
a:hover {}
a:active {}复制代码IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性。
解決方法：（條件註解）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
1. 雙邊距BUG float引起的使用display
2. 3像素問題使用float引起的使用dislpay:inline -3px
3. 超連結hover 點擊後失效使用正確的書寫順序link visited hover active
4. Ie z-index問題為父級添加position:relative
5. Png 透明使用js程式碼改
6. Min-height 最小高度!Important 解決'
7.select 在ie6下遮蓋使用iframe嵌套
8. 為什麼沒有辦法定義1px左右的寬度容器(IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支援!important
#因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒有對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
無論屬於哪一種，都要先找到其祖先元素中最近的position 值不為static 的元素，然後再判斷：
如果都找不到，則為 initial containing block。
補充：
1. static(預設的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute : 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
當一個元素的<strong>visibility</strong> 屬性被設定成<strong>collapse</strong> 值後，對於一般的元素，它的表現跟<strong>hidden</strong> 是一樣的。但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟<strong>display: none</strong> 一樣，也就是說，它們佔用的空間也會釋放。
在Google瀏覽器裡，使用 <strong>collapse</strong> 值和使用 <strong>hidden</strong> 值沒有什麼不同。
在火狐瀏覽器、Opera和IE11裡，使用<strong>collapse</strong> 值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。
display : none 隱藏對應的元素，在文件佈局中不再指派空間（回流重繪）
visibility:hideen 隱藏對應的元素，在文件佈局中仍保留原來的空間（重繪）
使用CSS display:none 屬性後，HTML 元素（物件）的寬度、高度等各種屬性值都會「遺失」;而使用visibility:hidden 屬性後，HTML元素（物件）只是視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。
display 屬性規定元素應該產生的框的類型；position屬性規定元素的定位類型；float屬性是一種佈局方式，定義元素在哪個方向浮動。
類似於優先權機制：position：absolute/fixed優先權最高，有他們在時，float不起作用，display值需要調整。 float 或absolute定位的元素，只能是區塊元素或表格。
出現浮動的原因：
浮動元素碰到包含它的邊框或浮動元素的邊框停留。在CSS規範中，浮動定位不屬於正常的頁面流，而是獨立定位的，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文件流程的區塊框上。
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
浮动带来的问题：
清除浮动的方式：
1、父级p定义height
原理：父级p手动定义height，就解决了父级p无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级p不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
2、结尾处加空 p 标签 clear:both
原理：添加一个空p，利用css提高的clear:both清除浮动，让父级p能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空p，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3、父级 p 定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、父级p定义伪类 :after 和 zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码
(1) 在子元素后添加一个空p p{clear:both;}
(2) 在父元素中{overflow:hidden|auto;zoom:1}
(3) :after伪选择符，在父容器的尾部自动创建一个子元素
.clearfix:after {
content: "\0020";display: block;height: 0;clear: both;
}
.clearfix {
zoom: 1;
}复制代码"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白符，
"height:
0;"是让这个这个空白字符不显示出来，"display:
block; clear: both;"是确保这个空白字符是非浮动的独立区块。:after选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"就行了.
在重合元素外包裹一层容器，并触发该容器生成一个BFC。例子：
<p class="aside"></p>
<p class="text">
<p class="main"></p>
</p>
<!--下面是css代码-->
.aside {
margin-bottom: 100px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;
height: 200px;
background: #fcc;
}
.text{
/*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
overflow: hidden; //此时已经触发了BFC属性。
}复制代码自动变成display:block
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">复制代码
@media only screen and (max-device-width:480px) {
/css样式/}复制代码预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
其它 CSS 预处理器语言：
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
不滥用web字体
对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
-moz-border-radius: 5px;
border-radius: 5px;
}复制代码CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
◆浏览器兼容性问题
在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>复制代码
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}
复制代码-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>复制代码
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬於字符,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字符大小設為0，就沒有空格了。
解決方法：
外層p使用position：relative；高度要求自適應的p使用position: absolute; top: 100px; bottom: 0; left: 0
頁面載入自上而下 當然是先載入樣式。
寫在body 標籤後由於瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style 標籤）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之後重新渲染，在windows的IE下可能會出現FOUC 現象（即樣式失效導致的頁面閃爍問題）
參數是scroll 時候，必會出現捲軸。
參數是 auto 時候，子元素內容大於父元素時出現捲軸。
參數是 visible 時候，溢出的內容出現在父元素之外。
參數是 hidden 時候，溢出隱藏。
CSS Sprites小圖片背景分享技術。它把一堆小的圖片整合到一張大的圖片上。接著利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的效能；CSS Sprites能減少圖片的位元組。
優勢：
1.很好的減少網頁的請求，大大提高頁面的效能；
2.減少圖片的位元組；
3.解決了網頁設計師在圖片命名上的困擾；
4.更換風格方便，維護方便。
劣勢：
1.圖片合併時需預留足夠空間，寬螢幕、高解析度的螢幕下易出現背景斷裂；
2.開發較麻煩，測量繁瑣；（可使用樣式生成器）
3.維護麻煩，背景少許改動有可能影響整張圖片，使得字節增加還要改動css。
第一種回答：
偽類別： :focus、:hover、:active
偽元素：:before、:after
偽類本質上是為了彌補常規CSS選擇器的不足，以便獲取到更多資訊；
偽元素本質上是創建了一個有內容的虛擬容器；
CSS3中偽類和偽元素的語法不同；
可以同時使用多個偽類，而只能同時使用一個偽元素；
第二種回答：
偽類別：偽類別選擇元素基於的是目前元素處於的狀態，或者說元素目前所具有的特性，而不是元素的id、class、屬性等靜態的標誌。由於狀態是動態變化的，所以當一個元素達到一個特定狀態時，它可能會得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文件之外的抽象，所以叫偽類。
:first-child :link: :visitive :hover :active :focus :lang
伪元素：与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
:first-line :first-letter :before :after复制代码
外部样式表，引入一个外部css文件
内部样式表，将css代码放在
标签内部内联样式，将css样式直接定义在 HTML 元素内部
最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -1000
答案：解决各浏览器对 CSS 解释不同所采取的，区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack。
块级元素( block )特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的）。
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、