一、继承性

特点：

1、外层元素身上的样式会被内层元素所继承。

2、如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖。

问：是不是所有的样式都能够被继承呢？

答：并不是所有的样式都能够被继承。只有文本与字体样式属性能够被继承。其它的样式属性都不可以被继承。

注意：

         在实际工作中，我们往往会给body标签设置字体大小以及字体颜色。因为body标签是最外层的元素，内层的元素会继承外层的元素的样式。

二、优先级

行内样式>ID选择器>类选择器>标签选择器

一般而言，选择器指向的越准确，优先级就会越高。通常我们会用1来表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示ID选择器的优先级，用1000来表示行内样式。

标签选择器              1

类选择器                  10

ID选择器                  100

行内样式                  1000

值越大表示其优先级越高。

不管是单个选择器还是多个选择器组合它们之前的优先级都可以通过上面这个公式来进行计算。我们将其值称之为权重值。权重值越大就表示其优先级越高。

三、!important属性

important在英文中含义是“重要的”意思

它主要是用来提升属性的权重。其属性的权重值无穷大

语法格式：

属性:值 !important;

• 正确的写法

属性:值 !important;

注意：

1、!important它是提升的属性的权重，而不是提升选择器的权重！

2、!important它不能提升继承过来的权重！

四、一个标签内可以携带多个类名

类名：指的是class的属性值

一个标签内可以携带多个类名，指的是class的属性值可以有多个，每一个属性值之间使用空格分隔。

举例：

         <标签名  class=”值1  值2   值3”></标签名>

多个类名的优点：

1. 减少CSS的代码量
2. 多个类名的样式会叠加到当前元素上面

注意：如果说一个标签内的多个类名，它们设置的样式是一样的话，就会存在样式的冲突！

五、背景样式属性

注意：

background-color：用于给元素设置背景颜色  但是前提这个元素要么有内容，要么有宽度和高度才可以

background-image  用于给元素设置背景图片  图片的地址一定放在url(图片的地址)   但是前提这个元素要么有内容，要么有宽度和高度才可以  背景图片默认是平铺的

background-repeat 是用于设置背景图片是否平铺    repeat(是平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)、no-repeat(不平铺)

background-position 用于设置背景图片的位置  如果要设置背景图片的位置 这个属性就会有两个值 

background-position:水平位置 垂直位置  这两个位置的表示方式有三种  英文单词(top left) 固定值(50px 100px) 百分比(50% 20%)   这三种方式可以混合使用 可以同时使用英文单词或者是固定值或者是百分比

英文单词的表示方式

水平位置：left(居左)、center(居中)、right(居右)

垂直位置：top(居上)、center(居中)、bottom(居下)

固定值的表示方式

百分比的表示方式

background:简写属性 它可以同时设置多个样式  比如背景颜色、背景图片、背景图片是否平铺  水平位置 垂直位置  

background：简写属性 其值的个数不定 顺序也不定 每一个值之前使用空格分隔

六、浮动

需求：

         能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度！

         让多个元素排在同一行：行内元素的特性

         给这些元素设置宽高：块级元素的特性

在标准文档流中的元素只有两种：

元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。

浮动可以让元素脱离标准文档流  就可以实现让多个元素排在同一行 并且可以设置宽高！

浮动它是通过一个浮动属性来实现

float：这个属性有两个值   left(向左浮动) 向左移动 、right(向右浮动)  向右移动

浮动元素的特性：

浮动元素它脱离标准文档流 它不再占用空间了

我们可以把浮动元素理解为“漂”

浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住  

浮动元素它会向左或者向右进行浮动(移动)

浮动元素它遇到了父元素的边框然后就停止了浮动

浮动元素它还会遇到上一个浮动元素后就停止了浮动

浮动元素浮动以后 其父元素不会再包裹着浮动元素

我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素

七、清除浮动

注意：

只要有浮动  那么必须有清除浮动

为什么要清除浮动？

         因为经过浮动了元素 它会影响到它下面的元素的排版布局  还有浮动元素的父元素没有将浮动元素包裹着

只要清除了浮动 不会影响到浮动元素的下面进行排版布局  浮动元素的父元素会将浮动元素从视觉上包裹着

清除浮动有以下三种方法：

给浮动元素的父元素设置一个固定的高度   但是这个方法不建议使用  因为一个元素的高度一般情况下不是手动设置的 它应该是由其自身的内容来撑高的！

使用清除浮动的样式属性  clear   clear这个属性是专用于来清除浮动的  这个属性有三个值  clear:left;清除左浮动  clear:right; 清除右浮动   clear:both;两者都清除

这个属性一般是用在最后 一个浮动元素的下面  在最后一个浮动元素的下面新建一个空白的div 这个div什么都不要放 不要给这个div里面放置内容  它只做一件事件就是清除浮动

使用overflow:hidden 这个属性来清除浮动  overflow是一个属性  

overflow:hidden 它原意是用来将溢出的部分进行隐藏  但是它还可以用于清除浮动

overflow:hidden 它一般主要是用来将列表的浮动给清除。

八、盒子模型

什么是盒子？

         盒子是用来存储物品

思考一下：一个盒子是由哪些部分进行组成！

我们可以将一个盒子理解为一个快递的包裹：

         有内容+有填充物+纸盒子

那我们如何去理解CSS中的盒子呢？ 

在CSS中一个盒子的组成部分：内容(content)+内填充(padding)+边框(border)+外边距(margin)

一个盒子中的主要属性：width、 height、padding、border、margin

width：指“宽度”的意思  但是这里的宽度指的盒子里面的内容的宽度  而不是盒子的宽度

height：指“高度”的意思  但是这里的高度指的盒子里面的内容的高度  而不是盒子的高度

padding：是“内填充”的意思，指的盒子里面的内容到盒子边框的距离 

border：是“外边框”的意思  指的盒子的边框

margin：是“外边距”的意思  指的是盒子与盒子之间的间距

问：请回答如何计算一个盒子的总宽度？

一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线

一个盒子的总高度=盒子里面内容的高度+上下两边的填充+上下两边的边框线

注意：一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度它应该是由其内容来决定的。

九、padding

padding是“内填充”的意思 指的是盒子中间的内容到边框的这一段距离

padding是有4个方向的 所以我们能够分别的描述这4个方向的padding

方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性

小属性：

padding-top：上内填充

padding-right：右内填充

padding-bottom：下内填充

padding-left：左内填充

简写属性：

• padding：这个属性是有方向的  可以同时表示四个方向  这个属性的方向是有顺序的  顺序是顺时针方向  也就是：上、右、下、左  这个顺序
• padding:20px  表示上右下左这四个方向的内填充都为20像素
• padding:10px 20px; 表示上下为10像素  左右为20像素
• padding:10px 20px 30px;表示上为10 左右为20  下为30
• padding:10px 20px 30px 40px;表示上为10 右为20 下为30 左为40

十、margin

margin它表示“外边距”的意思 它是指盒子与盒子之间的距离

margin它也是有4个方向的 所以我们也能够通过4个方向对其进行描述

方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性

小属性：

margin-top：上外边距

margin-right：右外边距

margin-bottom：下外边距

margin-left：左外边距

简写属性：

• margin：简写属性它是有方向的 这里的方向是一个顺时针的方向  它的方向是的顺序是：上、右、下、左
• margin:10px;表示上右下左这四个方向的外边距都是10像素
• margin:10px 20px;表示上下这两个方向的外边距为10像素  左右两个方向的外边距为20像素
• margin:10px 20px 30px;表示上外边距为10像素 左右外边距为20像素 下外边距为30像素
• margin:10px 20px 30px 40p;表示上外边距为10像素 右外边距为20像素 下外边距为30像素 左外边距为40像素

十一、margin的注意事件

margin有塌陷现象

什么是margin的塌陷现象

1、在标准的文档流中 竖直方向的margin值不会叠加 它会取较大的值

2、横着方向是没有margin的塌陷现象

3、浮动元素它是没有margin的塌陷现象的

margin居中

margin的值可以是auto   auto表示“自动”的意思  当左外边距与右外边距的值都是auto时那么这个盒子就会水平居中

注意：

• 使用margin来实现水平居中时 一定要有固定的宽度(给这个盒子设置一个宽度)  只有块元素可以实现水平居中  行内元素是不能实现居中的

• 只有标准文档流中的盒子才可以使用margin来实现水平居中

• margin属性是用来实现盒子的水平居中 而不是文本的水平居中 
• text-align这个属性它是用于实现文本的对齐方式  如果其值为center就表示文本水平居中  但是它不能实现盒子的水平居中

十二、CSS3

结构伪类

伪元素

文本阴影

text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色

描述：

文字阴影可以有多组值，多组之间用逗号隔开就可以

水平阴影正值阴影在右边 负值在左边

垂直阴影正值在下边，负值在上边

模糊强度，值越大越模糊

盒子阴影

box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸  阴影颜色 内/外阴影

水平阴影和垂直阴影必须的写，其余的是可以省略不写

盒子阴影可以有多组值，多组之间用逗号隔开就可以

水平阴影正值阴影在右边 负值在左边

垂直阴影正值在下边，负值在上边

模糊尺寸，值越大越模糊

CSS知识点梳理（二）

原文地址：http://www.cnblogs.com/rechenai/p/7471831.html