前端知识点
2016-11-07 18:47:13 0 举报AI智能生成
CSS（层叠样式表）是一种用于描述网页外观和格式的标记语言。它通过选择器和属性来定义网页元素的样式，如颜色、字体、大小、布局等。CSS可以将样式与内容分离，使网页更易于维护和更新。通过使用CSS，可以实现网页的动态效果，如动画、过渡等。CSS还支持响应式设计，使网页能够适应不同设备和屏幕尺寸。总之，CSS是构建现代网页的重要工具，它提供了丰富的功能和灵活性，使设计师能够创造出吸引人的视觉效果。
作者其他创作
大纲/内容
css规范
visual formatting model
视觉格式化模型：用户代理user agent如何在视觉媒体visual Media 下处理文档树Document tree
在文档树种每一个元素根据盒模型box model 产生零个或多个盒
内容控制方法
盒的尺寸和类型
定位体系positioning scheme，常规流、浮动和绝对定位
文档树种元素之间的关系
外部信息（如视口大小、图片的固定尺寸）
CSS
引用
方法
直接标记的style属性
标记本身定义的style优先于其他所有的样式定义
放在style的任何其他样式规则前面
定义内部样式表
嵌入外部样式表
style @import
链接外部样式表
link
外部样式表优先级低于内部样式表
<span style="color: rgb(125, 125, 125); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 16px; line-height: 30.4px;">CSS中 link 和@import 的区别是</span>
<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">(1) link属于HTML标签，而@import是CSS提供的; </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;">(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;</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;">(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; </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;">(4) link方式的样式的权重 高于@import的权重.</div>
<table><tbody><tr><td class="line-content"><span class="html-tag"><style <span class="html-attribute-name">type</span>="<span class="html-attribute-value">text/css</span>">@import url("style.css");</style></span></td></tr><tr><td class="line-number" value="5"><br></td><td class="line-content"><br></td></tr></tbody></table>
初始化样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
初始化样式会对seo有一定的影响，力求影响最小的情况下初始化
属性
盒子模型
<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)</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;">2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;</div>
display
inline
行内元素会在一条直线上排列，都是同一行，不会换行
block
块级元素各占据一行，垂直方向排序，块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素<br>属性不同，主要在盒模型上 行内 width、height无效，margin上下无效、padding上下无效
inline-block
display：block转化块级
flex
none
隐藏对应的元素，在文档布局中不在给他分配空间，它各边的元素会合拢，当不存在
visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间
postion
<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>
<span style="color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 22.1px;">absolute：</span><span style="color: rgb(34, 34, 34); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 22.1px;">只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）</span>
absolute和fixed的区别
<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>
CSS sprites
将网页中的一些背景图片整合到一张图片文件中<br>利用css：background-image，background-repeat，background-position组合进行背景定位
这样可以减少很多图片请求的开销，因为请求耗时比较长<br>请求虽然可以并发，但是有限制
float
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留<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>
浮动元素引起的问题和解决办法
父元素的高度无法被撑开，影响与父元素同级的元素<br>与浮动元素同级的非浮动元素会跟随其后<br>若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构<br>
解决办法：<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>
使用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>
子主题
绘制
动画
css选择器
分类
<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1.id选择器(# myid)</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2.类选择器(.myclassname)</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3.标签选择器(div, h1, p)</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">4.相邻选择器(h1 + p)</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">5.子选择器(ul > li)</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">6.后代选择器(li a)</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">7.通配符选择器( * )</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">8.属性选择器(a[rel = "external"])</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">9.伪类选择器(a: hover, li:nth-child)</div>
新增的伪类
<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">:enabled :disabled 控制表单控件的禁用状态。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">:checked 单选框或复选框被选中。</div>
优先级
<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1.优先级就近原则，同权重情况下样式定义最近者为准;</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.!important > id > class > tag </div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">4.important 比 内联优先级高，但内联比 id 要高</div>
继承
<span style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px; background-color: rgb(211, 244, 239);">可继承的样式：</span>
<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1.font-size</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2.font-family</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3.color</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">4.text-indent</div>
<span style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px; background-color: rgb(211, 244, 239);">不可继承的样式：</span>
<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1.border</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2.padding</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3.margin</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">4.width</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">5.height</div>
排版
居中浮动元素
设置宽度，margin：0 auto
position：relative；width，height，top，right，margin-lift，margin-top
<pre style="margin-top: 0px; margin-bottom: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; color: rgb(0, 0, 0); font-size: 13.92px; line-height: 20.88px;"><span style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei';"><code style="margin: 0px; padding: 0px;"> 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}</code></span></pre>
0 条评论
下一页
