1. 首页

你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)

1.CSS盒模型,在不同浏览器的差异

css 标准盒子模型

css盒子模型 又称为框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如下图:

你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)

图中的内层是content依次是padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分,如果border设置颜色的时候会显示boder颜色当boder颜色是透明时会显示background-color的颜色。而该元素的子元素的是从content开始的。而外边距是透明的,不会遮挡其他元素。  

元素框的总宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right; 

元素框的总高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom; 

IE盒子模型

IE盒子模型如下图:

你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)

图中的内层是content依次是content padding border。通常我们设置背景时就是内容、内边距、边框这三部分。而外边距是透明的,不会遮挡其他元素。

 元素框的总宽度=width(padding-left+padding-right+border-left+border-right);

 元素框的总高度=height(padding-top+padding-bottom+border-top+border-bottom);

两个模型宽度和高度的计算(是不一样的)  

w3c中的盒子模型的宽:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height;  

iE中的盒子模型的width:包括border+padding+width; 

上面的两个宽度相加的属性是一样的。 因此我们应该选择标准盒子模型,在网页的顶部加上 DOCTYPE 声明。

2.CSS所有选择器及其优先级、使用场景,哪些可以继承,如何运用at规则

css选择器种类有:

通用选择器:*

id选择器:#header{}

class选择器:.header{}

元素选择器:div{}

子选择器:ul > li{}

后代选择器:div p{}

伪类选择器::hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a:hover{}

伪元素选择器:  :after、:before等,例如:li:after

属性选择器: input[type=”text”]

组合选择器:E,F/E F(后代选择器)/E>F(子元素选择器)/E+F(直接相邻元素选择器—-匹配之后的相邻同级元素)/E~F(普通相邻元素选择器—-匹配之后的同级元素)

层次选择器:p~ul 选择前面有p元素的每个ul元素

css选择器优先级:

  • 选择器优先级由高到低分别为:
    !important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器(* 应少用)>浏览器自定义;

  • 当比较多个相同级别的CSS选择器优先级时,它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级:
    1、位于标签里的