css相关基础

css的基本选择器（三种）

　　1、标签选择器

　　　　* 使用标签名作为选择器的名称

　　　　　　　div{

　　　　　　　　　　background-color:blue;

　　　　　　　　　　color:white;

　　　　　　　　}

　　2、class选择器

　　　　<div class="cmlx">tiankongmeiyouchibangdehenji</div>

　　　　.cmlx {

　　　　　　　　background-color:blue;

　　　　　　　　color:white;

　　　　}

　　3、id选择器

　　　　<div id="zq">erwoyijingfeiguo</div>

　　　　#zq {

　　　　　　background-color:red;

　　　　　　color:black;

　　　　}

　　* css基本选择器的优先级

　　　　style > id选择器 > class选择器 > 标签选择器

　　4、css的扩展选择器

　　　　（1） 关联选择器

　　　　　　* <div><p>fsfse</p></div>

　　　　　　* 设置div标签里面的p标签的样式，嵌套标签里的样式

　　　　　　* div p {

　　　　　　　　background-color:green;

　　　　　　}

　　　　　（2）组合选择器

　　　　　　   * <div>kkkkk</div>

　　　　　　　  <p>ssssss</p>

　　　　　　　* 把div和p标签设置成相同的样式，把不同标签设置成相同的样式

　　　　　　　*  div,p {

　　　　　　　　　　background-color:blue;

　　　　　　　　}

　　　　　　(3)伪元素选择器

　　　　　　　　* css里面提供一些定义好的样式，可以直接使用

　　　　　　　　* 超链接状态

　　　　　　　　　　**  原始状态      鼠标放上去的状态      点击      点击之后

　　　　　　　　　　　　:link　　　　　　:jover　　　　:active　　:visited

盒子模型

　　** 在进行布局前需要把数据封装到一块一块的区域内

　　　　（1）边框

　　　　　　border：2px  solid  blue;

　　　　　　统一设置

　　　　　　border-top、border-bottom、border-left、border-right

　　　　（2）内边距

　　　　　　padding：20px;

　　　　　　使用padding统一设置，也可以分别设置上下左右四个内边距

　　　　（3）外边距

　　　　　　margin：20px

　　　　　　使用margin统一设置，也可以分别设置上下左右四个外边距

css的布局漂浮

　　float：

　　　　- left：文本流向对象的右边

　　　　- right：文本流向对象的左边

css布局的定位

　　position：

　　　　- absolute：

　　　　　　** 将对象从文档流中拖出，可以用top、bottom等属性定位

　　　　- relative

　　　　　　** 不会把对象从文档流中拖出，可以用top、bottom等属性定位