display:inline 在同一行,并且宽度就等于文字内容的宽度且设置宽度无用 display:inline-block 既有行级元素的特性,也有块级元素的特性,因此在同一行,能设置宽高,margin,padding
display:block 块级元素会自动换新行,占领一行,可以设置宽高,margin,padding
引入css的2种方式
link 语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" /> 实例 <head><link href="https://i.cnblogs.com/123456.css" rel="stylesheet" type="text/css" /></head>
@import 语法结构 @import + 空格+ url(CSS文件路径地址); 实例 在html中 <style type="text/css">@import url(CSS文件路径地址);</style> 在css中 @import url(CSS文件路径地址);
神奇的伪元素, css有一系列的伪元素,如:before,:after,:first-line,:first-letter等
http://www.cnblogs.com/wonyun/p/5807191.html
:before 标签前面增加 :after 标签后面增加 :first-line 标签内容第一行样式 :first-letter 标签内容第一个字母
CSS选择符以及优先级计算
行内样式(Inline Style),如<span style="color:red">...</span>;
ID选择符(ID selectors),如#myid;
类、属性选择符、伪类(Classes, attributes and pseudo-classes),如 .class {...}、[href$=dudo.org]、:hover;
类型(elements)、伪类型选择符(pseudo-elements),如 p {...}、:first-line {...};
他们的优先级怎么来测量呢?如前所述,它们每一类都有不同的数值表示,其中:
行内样式为:1000
ID选择符为:0100
类选择符为:0010
类型选择符为:0001
这里要指出的是,所有这些数值都不是10进制数字,1000只是代码,它是一个行内样式,
例如,body #wrap p {...},那么它的优先级指数就是 1+100+1=102,而body div #wrap p {...}的优先级指数就是 1+ 1 +100 + 1 =103。
再看一下其它的例子:
* { } 0
li:first-line { } 2 (one element, one pseudo-element)
ul ol+li { } 3 (three elements)
ul ol li.red { } 13 (one class, three elements)
style=”” 1000 (one inline styling)
div p { } 2 (two HTML selectors)
div p.sith { } 12 (two HTML selectors and a class selector)
body #darkside .sith p { } 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)
看这段代码:
<html> <head> <style type="text/css"> #wrap #content {color: blue;} #content {color: red;} </style> </head> <body> <div id="wrap"> <div id="content">this is a text here</div> </div> </body> </html>
代码将显示蓝色。
CSS机制: 继承,层叠,特指
一个简单的记分规则,即对每个选择符都要按下面的 ICE 公式计算三个值:I-C-E(ID-Class-Element)
针对这个公式的计分办法如下:
1.选择符中有一个ID,就在I的位置加1;
2.选择符中有一个类,就在C的位置加1;
3.选择符中有一个元素(标签)名,就在E的位置上加1;
4.得到一个三位数。
P{} //0-0-1 特指度=1
p.largetext{} //0-1-1 特指度=11
p#largetext{} //1-0-1 特指度=101
body p#largetext{} //1-0-2 特指度=102
body p#largetext ul.mylist{} //1-1-3 特指度=113
body p#largetext ul.mylist li{} //1-1-4 特指度=114
查理版简单层叠要点
规则一: 包含 ID 的选择符胜过包含类的选择符,包含类的选择符胜过包含标签名的选择符。
规则二: 如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式。在链接的样式表中,具有相同特指度的样式,后声明的胜过先声明的。
规则三: 设定的样式胜过继承的样式,此时不用考虑特指度(即显式设定优先)。
下面简单解释一下规则三。
比如下面的标记:
<div id="cascade_demo">
<p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p>
</div>
和下面的规则:
div#cascade_demo p#inheritance_fact {color:blue;}
- 2 - 0 - 2 (高特指度)
会导致单词 weak
变成蓝色,因为它从父元素 p 那里继承了这个颜色值。
但是,只要我们再给 em 添加一条规则 em {color:red;}
- 0 - 0 - 1 (低特指度)
em
就会变成红色。因为,虽然它的特指度低(0-0-1),但 em
继承的颜色值,会被为它明确(显式)指定的颜色值覆盖,就算(隐式)遗传该颜色值的规则的特指度高(2-0-2)也没有用。
在style属性后面增加 !important 让该属性持有最高的优先级!
为什么要清除浮动?
.cc{
border: 1px solid green;
//overflow: hidden;
}
<div class="cc">清除浮动的办法<img style="float: left;" src="http://zh.learnlayout.com/images/ilta.png"/></div>
你会发现图片溢出了DIV容器,这时,我们把//overflow: hidden;注释打开,就会发现已经闭合了浮动效果。
bootstrap清除浮动代码
.clearfix:after{ content: ''; display: table; clear: both; } .clearfix{ *zoom:1;/*兼容ie低版本*/ }
<br>的换行样式
br: before{ content: '\00A'; } :before, :after{ white-space: pre-line; }
br中content:'\00A'其实是在元素内容前面加上换行键,因为换行键的ASCII码是0A;然后设置white-space,这个属性是用来设置对于元素中空格和换行的处理方式,pre-line则表示合并多个空格并且保留换行,所以就达到了换行的效果;如果没有white-space属性设置的话,则不能自动换行。
position
relateive: 与自身元素有关
absolute:文档流外,会使inline元素'块'话,定义的top left属性,会递归寻找父元素,如果发现有设置position:relative/absolute/fixed,以这个为参照标准
fixed: 元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化。
<div>1</div> <div style="position: fixed;">2</div> <div>3</div>
<div>1</div> <div>2</div> <div>3</div>
以上2种显示效果,第一种的 2 会和 3 发生重叠,而第2种则依次排列。