css选择器、css继承关系、css盒子模型

标签：round   css   :link   过滤   link   设置   enter   font   鼠标移动   

一、摘要

   总结前端部分css选择器、css继承关系、css盒子模型等相关知识，并对容易出错的地方进行分析说明。

二、原因

  在开发前端页面时如果对css选择器、继承关系，层叠，以及padding、margin区别和浮动问题理解不到位，会导致不知道什么时候该用哪种方法来处理问题。此文档是针对这些问题进行说明。

以下是对相关知识点的总结与分析：

三、选择器

1、基本选择器

（1）* 通配符选择器  代表所有元素

 例子： *{ margin：0; padding:0;}     

 （2）标签选择器 代表网页中的所有的该标签

 例子： p{ width：250px; border:1px solid red;}

（3）class选择器  .class名称  

 例子：  .sub{ width:250px;} 代表所有class名为sub的元素

（4）id选择器   # id名称

 例子：#uname{ background:red;}代表id名为uname的唯一元素

2、层次选择器

(1)后代选择器  选择1   选择2

例子: ul li{color：blue;}

 >选择1>选择2  直接子元素选择器

代表li元素的父亲元素（父辈）必须是ul

（2）并列选择器 选择器A，选择器B      

例子:#uname，#upass{ border:1px solid red}    

uname 和upass 都设置一个红色的边框

注意:要想操作一个元素就要用上面的选择器先选择元素 再开始  设置css

3、过滤选择器

（1）基本过滤选择器

:first-letter  第一个字母

:first-line    第一行

（2）子元素过滤选择器

[1]  ul li:first-child    

ul的第一个li元素 （li必须是ul的第一个子元素）

[2]  ul li：nth-child（2）

选择ul 第二个li元素（li必须是ul的第二个子元素）

[3]  ul li：nth-child（2n）/（2n+1）

选择ul 的奇数或偶数个li元素

（3）伪类选择器

   [1]  a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）

[2]  a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）

[3]  a:hover {color:#FF00FF;}/* 鼠标移动到链接上

[4]  a:active {color:#0000FF;} / 选定的链接 /

5、属性选择器

1、选择包含某一属性的元素

a[title]{color:red;} 选择包含title的a标签

四、css的继承

 在css中子元素会继承父亲元素的文字属性

 但是a 不会继承颜色属性和文字装饰属性

 h不会继承文字大小属性和粗细属性

五、盒子模型

1、 对盒子模型的理解

  [1]盒子模型就是一个有高度和宽度的矩形区域，所有html标签都 是盒子模型

[1] 标准盒子模型 由 content+padding+border+margin组成

[2] 一个元素的实际宽度  

width（内容）+padding（内边距）+border（边框的宽度）

设置的width 只是设置了内容的宽度

[3] 边框到自己的内容（文字&子元素）的距离可以用

    a、设置该元素的padding （会增加该元素的宽高，只用写一次）

    b、子元素上面设置margin（不会增加父亲元素的大小，所有的子元素都要设置margin

    c、 父亲元素的padding+子元素的margin  

2、margin写法

margin 元素的边框到别的元素（父亲元素   兄弟元素）距离

（1）、margin简写

（2）、指定方位

        margin-left

        margin-right

        margin-top

        margin-bottom

（3）、文本居中

当一个元素有设置宽度  maring-left  maring-right 为auto  

会自动在它的父亲元素里面水平居中(元素不能设置浮动 float)

例如：.container{ width:1000px; margin:0 auto;}

*区分text-align与margin:0 auto;

p{ text-align：center;}/*p 里面的文字在p的范围内居中*/

p{ width:250px; margin:0 auto;}/*p 元素宽度为250px  并且整个p元素在它的父亲元素的里面居中*/

css选择器、css继承关系、css盒子模型

标签：round   css   :link   过滤   link   设置   enter   font   鼠标移动   

原文地址：http://www.cnblogs.com/xiaoxiao1126/p/6096806.html