1.浮动
float可以控制块级元素浮动
(1)#d1
{
float:left;/*左浮动*/
}
#d2
{
float:left;
}
两个块级元素可以改变默认占一行情况,并排在一行。
(2)上下块的浮动会影响块的布局,可以用
clear:left;/*清除左浮动的影响。*/
2.盒子模型*****
块内间距:
padding:1px;上下左右撑开1px
写四个值得话是按上、右、下、左的顺序设置。
即: padding:10px 15px 20px 25px
外间距(块之间):
用margin设置
行内元素:
padding和margin都起作用。
3.伪类
(1)p:first-child/*父标签的第一个孩子且是p元素*/
p:last-child/*父标签的第一个孩子且是p元素*/
p:first-of-type/*父标签的第一个p标签*/
p:last-of-type/*父标签的最后一个p标签*/
p:nth-child(2)/*父标签的第二个孩子且是p元素*/
p:nth-last-child(2)/*父标签的倒数第二个孩子且是p元素*/
p:nth-of-type(2)/*父标签的第二个p标签*/
p:nth-last-of-type(2)/*父标签的倒数第二个p标签*/
(2)超链接类
a:link{} a:visited{} a:hover{} a:active{}
遵循love hate 原则(l->link;v->visited;h->hover;a->active)
(3)所有禁用
所有禁用标签 :disabled{}
所有可用(input)标签 (input):enable{}
所有被选中的标签 :checked{}
所有获取标签 :foucus {}
所有只读标签 :read-only{}
所有的可读可写:read-write{}
4.伪元素
用两个冒号表示
p::before{}/*之前设置内容*/
p::after{} /*之后设置内容*/
.c1::first-letter/*获取第一个字符*/
::first-line/*获取第一行*/
::selection/*改变鼠标选中时效果*/
5.CSS定位
(1)绝对定位(absolute)
脱离文档流,不会单独占满一行,方位只受到top、left
、buttom、right的影响;
一个块的top、left、buttom、right相对于什么?
如果父元素做了定位,相对于最近的一个父元素。父元素
无定位,相对于body。
(2)相对定位(relative)
没有脱离文档流,会单独占满一行。
top、left、buttom、right相对于最近的一个父元素
(3)固定定位(fixed)
脱离文档流,不会单独占满一行
top、left、buttom、righ始终相对于body
(4)默认定位(static)
没有脱离文档流,会单独占满一行。
top、left、buttom、right不起作用。
总:top、left、buttom、right只有在设置了定位(绝对、相对、固定)的情况才有用。