伪类选择器与布局

伪类选择器与布局

伪类选择器

使用方法
选择器:状态{样式}
常用状态
hover(鼠标悬停,所有标签都有效)
active(鼠标点击,所有标签都有效)
link(超链接链接未访问状态,只针对a标签有效)
visited(超链接已经访问后对应的状态,只针对a标签有效)
爱(LoVe)恨(HAte)原则:如果同一个a标签要同时设置上面四种状态的样式，需要遵守爱恨原则，否则有些样式可能无效

CSS布局

标准流布局

标签在没有添加布局相关属性的时候，默认的布局方式就是标准流布局。
标准流布局的基本原则
在标准流中，根据标签表现方式的不同，将标签分为三种:块级标签、行内标签、行内块标签

1. 块级标签:一个占一行;设置宽高有效;默认宽度是父标签的宽度，默认高度是内容的高度。
       例如:div,p,ul,h1~h6,…
2. 行内标签:一行可以有多个;设置宽高无效;默认宽度是内容的宽度，默认高度是内容的高度。
       例如:a,span,b,i,label,…

3. 行内块标签:一行可以有多个;设置宽高有效;默认宽度是内容的宽度，默认高度是内容的高度。
       例如:img

display属性
在标准流中,可以通过修改display属性值来改变标签的性质(块级标签,行内标签,行内块标签)
display属性值:
    inline: 行内
    block: 块级
    inline-block: 行内块
    none: 隐藏标签

脱离标准流布局

标签一旦脱流,所有的标签的表现方式都和行内块一样: 一行可以显示多个;设置宽高有效﹔默认大小是内容大小
2.脱流的方法

1）浮动(float属性)

1. 浮动的应用场景
   1）让竖着显示的标签横着来
   2) 文字环绕
   文字环绕：被环绕的标签浮动，提供文字内容的标签不浮动
   2.浮动： float属性
   left - 左浮动
   right - 右浮动

2）定位

.定位 - 通过设置间距来达到定位的目的
定位相关属性有两类：
1)选择参考对象：position
absolute(寻找参考对象) - 将第一个position的值不为默认值(initial/static)的父标签作为距离的参考对象
relative(让自己成为参考对象) - 相对自己在标准流中的位置定位；一般设置relative是为了让自己有能力成为子标签的参考对象
fixed - 相对浏览器定位
2)设置距离：left、right、top、bottom

盒子模型

任何一个可见的标签都是由三个部分组成：content(内容)、padding(内边距)、margin(外边距)
1) content - 设置标签的宽度和高度只影响内容大小；标签的内容和子标签都是显示在内容部分的
2) padding - 有四个方向；是可见的；设置背景会同时作用域padding、content
3) margin - 有四个方向；不可见，但是占位置