前端CSS知识点
2017-05-22 11:21:04 0 举报AI智能生成
前端CSS知识点
作者其他创作
大纲/内容
拓展知识
命名规则
基于功能
它是用来干什么的
.button/.form/.list/.tab-list/.nav
优先使用
样式与内容无关
基于内容
元素里面放的是什么
.news/.user-info/.help/.contact-me
中小型网站可以给予内容去命名
基于视觉
看起来是什么样？
.round-image/.nowrap
大型网站可以基于视觉去命名
不要使用太具体的样式
现在比流行的命名方式
BEM
块Block
.block
元素Element
.block__element
修饰符Modifier
.block__element--modifer
eg. tab__item--active
文件结构
basic
css reset
设置HTML标签的默认样式
使其在各个浏览器表现基本一致
让默认样式归零
normalize.css
设置HTML标签的默认样式
使其在各个浏览器表现基本一致
保留标签的默认样式
moudles
可复用的css代码段
与模块在HTML中的位置无关
（一般）与使用的HTML标签无关
抽取css模块原则
面向对象
结构和皮肤分离
.btn .btn--primary .btn--info .btn--danger
容器和内容分离
<div class="topic">/* 不推荐这样写 */<br>.header .btn {<br> background: #f66;<br> color: #fff;<br>}</div>
这样就没有遵循与位置无关原则
单一职责
尽可能细的拆分成可独立复用的组件
通过组合方式使用多个组件
比如将布局和其它样式拆分
开闭原则
对扩展开放
对修改关闭
DRY
pages
CSS预处理
Less
Sass
PostCSS
stylus
响应式
媒体查询
基础知识
CSS语法
引用
方法
行内式
<div class="topic">语法：<h1 style="font-size:18px;">xxxx</h1></div>
俗称行内样式，在style属性中设置CSS样式
标记本身定义的style优先于其他所有的样式定义
嵌入式
<div class="topic"><style type="text/css"> h1{font-size:18px;}</style></div>
导入式
<div class="topic"><style type="text/css"> @import"style.css";</style></div>
先加载页面，后加载样式
链接式
<div class="topic"><link href="style.css" rel="stylesheet" type="text/css" /></div>
先加载样式，后加载页面
外部样式表优先级低于内部样式表
CSS中 link 和@import 的区别是
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
CSS选择器
分类
元素选择器
通配选择器* { }
标签选择器(div, h1, p)
id选择器(#id)
类选择器(.class)
关系选择器
后代选择器(E F)
子选择器(E>F)
相邻选择器(E+F)
兄弟选择器(E~F)
选择E元素后面的所有兄弟元素F。
属性选择器
E[att]
选择具有att属性的E元素。
E[att="val"]
选择具有att属性且属性值等于val的E元素。
E[att~="val"]
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"]
选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]
选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]
选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"]
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
伪类选择器
E:link，E:visited，E:hover，E:active
E:focus
设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:not()
匹配不含有s选择符的元素E。
E:first-child
匹配父元素的第一个子元素E
E:last-child
匹配父元素的最后一个子元素E
E:only-child
匹配父元素仅有的一个子元素E
E:nth-child(n)
匹配父元素的第n个子元素E
E:nth-last-child(n)
匹配父元素的倒数第n个子元素E
E:first-of-type
匹配同类型中的第一个同级兄弟元素E
E:last-of-type
匹配同类型中的最后一个同级兄弟元素E
E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
E:empty
匹配没有任何子元素（包括text节点）的元素E
E:checked
匹配用户界面上处于选中状态的元素E
E:enabled
匹配用户界面上处于可用状态的元素E
E:disabled
匹配用户界面上处于禁用状态的元素E
E:target
匹配相关URL指向的E元素
伪元素选择器
E:first-letter/E::first-letter
设置对象内的第一个字符的样式。
E:first-line/E::first-line
设置对象内的第一行的样式。
E:before/E::before
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::selection
设置对象被选择时的颜色
优先级
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高
5.行内样式 > 内嵌样式 > 外部样式
6.ID选择器 > 类选择器 > 标签选择器
属性
盒子模型
1）盒模型： 内容(content)、填充(padding)、 边框(border)、外边距(margin)
2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;
display
inline 强制显示行内级别元素
行内元素会在一条直线上排列，都是同一行，不会换行
block 强制块级元素显示
<div class="topic">块级元素各占据一行，垂直方向排序，块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素<br>属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效</div>
inline-block 行内块级元素
行内块级元素：<span style="color: rgb(75, 75, 75); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.8px;">将对象呈递为内联对象，但是对象的内容作为块对象呈递。</span>
none
隐藏对应的元素，在文档布局中不在给他分配空间，它各边的元素会合拢，当不存在
visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
postion
<div class="topic"><table class="dataintable" style="margin: 10px 0px 0px; padding: 0px; border: 1px solid rgb(170, 170, 170); border-collapse: collapse; width: 709px; color: rgb(0, 0, 0); font-family: Verdana, Arial, 宋体; font-size: 12px; background-color: rgb(249, 249, 249);"><tbody style="margin: 0px; padding: 0px; border: 0px;"><tr style="margin: 0px; padding: 0px; border: 0px;"><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">absolute</td><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><p style="margin: 0px; padding: 0px; border: 0px; line-height: 18px;">生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p></td></tr><tr style="margin: 0px; padding: 0px; border: 0px;"><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">fixed</td><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><p style="margin: 0px; padding: 0px; border: 0px; line-height: 18px;">生成绝对定位的元素，相对于浏览器窗口进行定位。</p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p></td></tr><tr style="margin: 0px; padding: 0px; border: 0px;"><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">relative</td><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);"><p style="margin: 0px; padding: 0px; border: 0px; line-height: 18px;">生成相对定位的元素，相对于其正常位置进行定位。</p><p style="margin: 12px 0px 0px; padding: 0px; border: 0px; line-height: 18px;">因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</p></td></tr><tr style="margin: 0px; padding: 0px; border: 0px;"><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">static</td><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td></tr><tr style="margin: 0px; padding: 0px; border: 0px;"><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">inherit</td><td style="margin: 0px; padding: 6px 15px 6px 6px; border: 1px solid rgb(170, 170, 170); vertical-align: text-top; background-color: rgb(239, 239, 239);">规定应该从父元素继承 position 属性的值。</td></tr></tbody></table></div>
absolute和fixed的区别
<div class="topic"><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">A：共同点：</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1.改变行内元素的呈现方式，display被置为block；</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2.让元素脱离普通流，不占据空间；</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3.默认会覆盖到非定位元素上</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;"><br></div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">B不同点：</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。 </div></div>
float
<div class="topic">浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留<br>1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签<br><span style="color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 19.5px; background-color: rgb(254, 254, 242);">所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动<br></span><div stylr="clear:both"></div><br>2、使用overflow。给包含浮动元素的父标签添加css属性，overflow:auto;zoom:1<br>3、使用after伪对象清除浮动。适合非IE<br><span style="color: rgb(0, 0, 0); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 19.5px; background-color: rgb(254, 254, 242);">所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动：<br></span><div><div></div>::after</div><br><div class="cnblogs_code" style="margin: 5px 0px; padding: 5px; border: 1px solid rgb(204, 204, 204); overflow: auto; color: rgb(0, 0, 0); font-family: 'Courier New' !important; font-size: 12px !important; background-color: rgb(245, 245, 245);"><pre style="margin-top: 0px; margin-bottom: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New' !important; font-size: 12px !important;"><span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(128, 0, 0);">#content:after</span>{<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(255, 0, 0);">content</span>:<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">""</span>;<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(255, 0, 0);">display</span>:<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">block</span>;<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(255, 0, 0);">clear</span>:<span style="margin: 0px; padding: 0px; line-height: 1.5; color: rgb(0, 0, 255);">both</span>;}</pre><div><br></div></div><br></div>
浮动元素引起的问题和解决办法
<div class="topic">父元素的高度无法被撑开，影响与父元素同级的元素<br>与浮动元素同级的非浮动元素会跟随其后<br>若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构<br></div>
<div class="topic">解决办法：<br>使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题<br>对于问题1：<code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">.clearfix:after{</code><code class="css keyword" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">content</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">: </code><code class="css string" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 255) !important; background: none !important;">"."</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code><code class="css keyword" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">display</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">: </code><code class="css value" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">block</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code><code class="css keyword" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">height</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">: </code><code class="css value" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">0</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code><code class="css keyword" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">clear</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">: </code><code class="css value" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">both</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code><code class="css keyword" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">visibility</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">: </code><code class="css value" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">hidden</code><code class="css plain" style="line-height: 18px; white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;}</code><div class="line number2 index1 alt1" style="line-height: 18px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); white-space: pre !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;"><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;"> .clearfix{</code><code class="css keyword" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">display</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">: inline-</code><code class="css value" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">block</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;} </code></div></div>
<div class="topic">使用after伪元素<br>1、使用额外标签法，<div style="clear:both;"></div><br>2、使用after伪元素<br><span style="color: rgb(0, 0, 0); font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; white-space: nowrap; line-height: 18px; background-color: initial;">#parent:after{</span><div class="line number2 index1 alt1" style="line-height: 18px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); white-space: pre !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;"><code class="css spaces" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background: none !important;"> </code><code class="css keyword" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">content</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">:</code><code class="css string" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 255) !important; background: none !important;">"."</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code></div><div class="line number3 index2 alt2" style="line-height: 18px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); white-space: pre !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;"><code class="css spaces" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background: none !important;"> </code><code class="css keyword" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">height</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">:</code><code class="css value" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">0</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code></div><div class="line number4 index3 alt1" style="line-height: 18px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); white-space: pre !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;"><code class="css spaces" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background: none !important;"> </code><code class="css keyword" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">visibility</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">:</code><code class="css value" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">hidden</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code></div><div class="line number5 index4 alt2" style="line-height: 18px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); white-space: pre !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;"><code class="css spaces" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background: none !important;"> </code><code class="css keyword" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">display</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">:</code><code class="css value" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">block</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code></div><div class="line number6 index5 alt1" style="line-height: 18px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); white-space: pre !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;"><code class="css spaces" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background: none !important;"> </code><code class="css keyword" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-weight: 700 !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 102, 153) !important; background: none !important;">clear</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">:</code><code class="css value" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 153, 0) !important; background: none !important;">both</code><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">;</code></div><div class="line number7 index6 alt2" style="line-height: 18px; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; color: rgb(51, 51, 51); white-space: pre !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-size: initial !important; background-origin: initial !important; background-clip: initial !important; background-position: initial !important; background-repeat: initial !important;"><code class="css plain" style="white-space: nowrap; word-wrap: break-word; margin: 0px !important; padding: 0px !important; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">}</code></div>3、浮动外部 元素<br>4、设置overflow为hidden或者auto<br> <br></div>
布局
flexbox
float
变形与动画
transition（过渡）
transform（变换）
2D
translate()
rotate()
scale()
skew()
matrix()
3D
animation（动画）
继承
可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent
不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height
媒体查询 media query
排版
居中浮动元素
设置宽度，margin：0 auto
position：relative；width，height，top，right，margin-left，margin-top
<code style="margin: 0px; padding: 0px;"> 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:<br> L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}</code>
CSS sprites
<div class="topic">将网页中的一些背景图片整合到一张图片文件中<br>利用css：background-image，background-repeat，background-position组合进行背景定位</div>
<div class="topic">这样可以减少很多图片请求的开销，因为请求耗时比较长<br>请求虽然可以并发，但是有限制</div>
CSS hack
CSS 条件 Hack
<code><!--[if <keywords>? IE <version>?]>HTML代码块<![endif]--></code>
CSS 属性 HACK
<section id="syntax" class="g-mod g-attr"> <h3>语法：</h3> <div class="cont"> <p><strong>selector</strong>{<hack>?property:value<hack>?;}</p> </div> </section>
<ul><li>大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。<br></li><li>\9 ：IE6+都支持<br></li><li>_和- ：仅IE6支持<br></li><li>* ：IE6、E7支持<br></li><li>\0 ：IE8、IE9支持，opera部分支持<br></li><li>\9\0 ：IE8部分支持、IE9支持<br></li><li>\0\9 ：IE8、IE9支持<br></li></ul>
例如<br><code>.test{ <br> color:#090\9; /* For IE8+ */ <br> *color:#f00; /* For IE7 and earlier */ <br> _color:#ff0; /* For IE6 and earlier */<br>}</code>
CSS 选择符 HACK
目前最常见的：<br><ul><li>*html *前缀只对IE6生效<br></li><li>*+html *+前缀只对IE7生效<br></li><li>@media screen\9{...}只对IE6/7生效<br></li><li>@media \0screen {body { background: red; }}只对IE8有效<br></li><li>@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效<br></li><li>@media screen\0 {body { background: green; }} 只对IE8/9/10有效<br></li><li>@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效<br></li><li>@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效</li></ul>
参考资料
CSS hack大全&详解
<span>CSS HACKs 大全</span>
BFC块级格式化上下文
原理
应用
与haslayout的区别
速查词典
Gpu加速
0 条评论
下一页
