Web前端HTML5+CSS3知识点（7）css入门和基本语法（二）

一、样式的继承

1、样式的继承

定义
        我们为一个元素设置的样式，也会应用到它的后代元素。
        继承是发生在祖先和后代之间的。
优点：继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式设置到共同的祖先元素上，这样我们只需要设置一次，就可以让所有元素都获取到该样式。
注意：并不是所有的样式都会被继承，比如背景、布局等相关的这些样式都不会被继承。

2.选择器的权重

解决选择器冲突的问题：
1.当我们通过不同的选择器选中一个相同的元素，并且为相同的样式设置不同的值时，此时发生了样式的冲突。
2.样式发生冲突时，由选择器的优先级决定。
3.选择器的权重：

内联样式，优先级为1，0，0，0

 ID选择器，优先级为0,1,0,0

 类和伪类选择器优先级为0,0,1,0

元素选择器优先级为0,0,0,1 

通配选择器优先级为0,0,0,0

继承的样式没有优先级。

比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级值越高的样式，优先使用。
4.分组选择器的优先级时单独计算的。
5.选择器的累加不会超过其最大的数量级（类选择器累加再高也不能超过ID选择器）
6.如果优先级计算后相同，此时则优先使用靠下的样式
7.可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！

3 像素和百分比

像素
        像素:屏幕（显示器）实际上是由一个一个的小点构成的。
        不同屏幕的像素大小不同，像素越小的屏幕显示的效果越清晰。
逻辑分辨率和物理分辨率

        解释一：俗话说物理分辨率是硬件所支持的，逻辑分辨率是软件可以达到的。物理尺寸是指屏幕的实际大小。大的屏幕同时必须要配备高分辨率，也就是在这个尺寸下可以显示多少个像素. 

        解释二：如同上图所对应的英文单词一样,640*960、640*1136等这些都是物理尺寸或是物理分辨率。

        解释三：从另外的角度来说：分辨率就是屏幕上横、纵的总象素点数. 如果我们设计的时候用单位px，可以说是物理分辨率尺寸。如果我们设计的时候用单位pt，可以说是逻辑分辨率尺寸。

屏幕像素密度ppi：pixels per inch，屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。顺便一提，ppi就是dpi

百分比
        也可以将属性值设置为相对于其父元素属性的百分比
        设置百分比可以使子元素跟随父元素的改变而改变
em
        em是相对于元素的字体大小来计算的，1em=1font-size（一般浏览器默认的字体大小为16px），em会根据字体大小的改变而改变。
rem
        rem是相对于根元素（html）字体大小来计算的

4. 颜色

颜色单位
        在css中，可以使用颜色名来设置各种颜色样式。
RGB值
        通过三种颜色的不同浓度来调配出不同的颜色
        每一种颜色值的范围在0-255(0%-100%)之间。
        可以用FastStone Cature来采集颜色
RBGA
        RBGA在RBG的基础上增加了A（）表示不透明度。
        a的值为1表示完全不透明，0表示完全透明，.5表示半透明。
十六进制的RGB值：
        语法：#红色绿色蓝色
        颜色浓度通过 00-ff来设置
        如果颜色两位两位重复可以进行简写
        #aabbcc --> #abc
HSL
        H 色相(0 - 360) 是一个环。
        S 饱和度，颜色的浓度 0% - 100%
        L 亮度，颜色的亮度 0% - 100%

5. 文档流(normal flow)

布局： 元素放到想放的任何位置。

1.网页是一个层级结构，一层摞着一层。
        通过CSS可以为每一层设置样式。
        作为用户，只能看见网页最顶层，所以是一个平面的效果。
        层级结构的最底层，我们称之为文档流，文档流是网页的基础。
        我们所创建的元素默认都是在文档流中进行排列的。
2.对于我们来说元素主要有两个状态
        在文档流中
        不在文档流中（脱离文档流）
 元素在文档流中有什么特点：
块元素在文档流中，块元素会在页面中独占一行(自上向下垂直排列），默认宽度是父元素的全部（会把父元素撑满），默认高度是被内容撑开（子元素）。
行内元素在文档流中不会独占页面的一行，只占自身大小，自左向右水平排列。如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列(和书写习惯一致)。行内元素的默认宽度和高度都是被内容撑开。

6. 盒子模型

定义
        盒模型又可以叫盒子模型、框模型（box model）。
        css将页面中所有的元素都设置成了矩形的盒子。将元素设置为盒子以后，对页面的布局就变成了将不同的盒子摆放到不同的位置。布局就是摆盒子。

盒子的组成部分
 内容（content）：元素中所有的子元素和文本内容都在内容区中排列。内容区的大小由width和height两个属性来设置，width设置内容区的宽度，height设置内容区的高度（元素中的所有的元素和文本内容）
边框（border）：边框属于盒子的边缘，边框里属于盒子内部，出了边框属于盒子外部。需要设置边框，最少需要设置三个样式，border-size(边框大小）,border-color（边框颜色），border-style（边框样式）。边框的大小会影响盒子的大小。
内边距（padding）：泡沫,决定了大小。
外边距（margin）：决定了位置。

盒子模型-边框：属于盒子边缘,布局时候注意内容+border
border-width
-border-width如果省略的话，会有一个默认值（一般是3px）。
-border-width可以有四个值，表示四个方向的边框宽度。
        四个值：上 右 下 左
        三个值：上 左右 下
        两个值：上下 左右
        一个值：上下左右

border-width:10px; // 全部
border-width:10px 20px;上下 左右
border-width:10px,20px,30px 上 左右 下
border-width:10px 20px 30px 40px; 上右下左 顺时针方向
border-color:orange // 也可以同上 默认黑色。
border-style:solid;

除了boder-width，还有一组boder-xxx-width，xxx可以是：top、right、bottom、left。
border-color
border-color同样可以有四个值，用来指定四个方向的边框颜色，规则与border-width一样。
-border-color也可以省略不写，如果省略，会自动显示color所设置的颜色。
border-style
-solid表示实线
-dotted表示点状虚线
-dashed表示虚线
-double表示双线
-border-style的默认值是none
简写属性
-例如border:solid 10px red; 用的最多。
-除了border以外还有四个border-xxx，border-right、border-left、border-bottom、border-top。

盒子模型-内边距
 内容框和边框之间的距离是内边距
一共有四个方向的内边距，分别是padding-top,padding-right,padding-bottom，padding-left。
内边距的设置会影响到盒子的大小（特别注意）
注意：背景颜色样式会延伸到内边距中。
一个盒子的可见框大小，是由内容区、内边距和边框三部分组成的。所以计算一个盒子的大小，要将这三部分加到一起计算。
padding的简写规则和border一样。

盒子模型-外边距
外边距不会影响盒子可见框的大小，但是会影响盒子的位置。
一共有四个方向的外边距，分别是margin-top（设置一个正值，元素会向下移动）、margin-right（默认情况下，不会产生任何效果）、margin-bottom（设置一个正值，其下边的元素会向下移动）、margin-left（设置一个正值，元素会向右移动）。
注意：元素在页面中是自左向右排列，所以默认情况下我们设置的左外边距和上外边距会移动元素自身（常用于移动自身，实际使用中仅需要设置左上即可），而设置下或右外边距，会移动其他元素。
-margin也可以设置负值，负值则是往相反的方向走
-margin四个方向可以简写，简写规则和padding一样。
-margin会影响到盒子实际占用空间的大小，不影响可见空间。

盒子的水平布局

元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定:margin-left、 border-left、 padding-left、width、 padding-right、border-right、margin-right。
-一个元素在其父元素中，水平布局必须要满足以下的:

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）
以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整。
调整的情况：如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足。
这七个值中有三个值可以设置为auto：width、margin-left、margin-right。如果某个值为auto，则会自动调整为auto的那个值以使等式成立。width的值默认是auto。
-如果将一个宽度和一个外边距设置为auto，则宽度会调整为最大，设置为auto的那个外边距会自动为0。
-如果将三个值都设置为auto，则宽度为最大，另外两个外边距都为0。
-如果将两个外边距设置为auto，而width为固定的值，那么会将两个外边距设置为相等。所以我们经常使用这个特点，在父元素中水平居中(重要)。

盒子垂直方向的布局

默认情况下，父元素的高度被内容撑开
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
-使用overflow属性来设置父元素如何处理溢出的子元素。overflow有多个值（visible：默认值 子元素会从父元素中溢出，在外部的位置显示。 hidden：溢出的内容将会被裁剪,一剪梅。scroll：生成两个滚动条，通过滚动条来查看完整的内容。auto：根据需要生成滚动条）
-overflow-x,overflow-y分别是设置横轴和纵轴上的滚动条。

外边距的折叠（重叠）

注意，知识垂直方向布局才会折叠。
相邻的垂直方向外边距会发生重叠的现象：
-兄弟元素之间的外边距会取两者之间的较大值（两者都是正值），特殊情况（如果相邻的外边距一正一负，则取两者的和，如果相邻的外边距都是负值，则取两者间绝对值较大的）
兄弟元素之间外边距的重叠，对于我们开发来说是有利的，所以不需要处理(兄弟之间）
-父子元素之间的相邻外边距，子元素的会传递给父元素（margin-top）有问题。最好不用，用padding临时处理。
-父子外边距的折叠会影响到页面的布局，必须要进行处理：解决思路：内+padding ,减小height.  加一个border 1px就不会重叠,但是要处理（拆东墙补西墙）后面可以用定位解决。

行内元素的盒模型

行内元素不支持设置宽度和高度，width和height设置没用，用过内容撑起。
-行内元素可以设置padding，但是垂直方向不会影响页面的布局。
-行内元素可以设置border和margin，同样垂直方向的border和margin不会影响页面的布局。

典型应用： a 标签 ，超链接不能设置宽度和高度。

display
-用来设置元素显示的类型
-可选值：inline（将元素设置为行内元素） block（将元素设置为块元素） inline-blcok(将元素设置为行内块元素，既可以设置宽度和高度，又不会独占一行） table（将元素显示为一个表格） none（元素不在页面中显示，用来隐藏一个元素）

visibility
-用来显示元素的显示状态
-可选值：visible（默认值，元素在页面中正常显示） hidden（元素在页面中隐藏）

区别：是否占据位置 ，display：none不占位置。

7. 默认样式

1.通常情况下，浏览器都会为元素设置一些默认样式。
-默认样式的存在，会影响到页面的布局。通常情况下，我们在编写网页时，我们要去除浏览器的默认样式（主要是PC端）。不同的浏览器可能不一样，很坑，直接去掉。
-list-style：none （去除项目符号）针对ul->li的项目符号
-在浏览器中，主要是默认的外边距和内边距影响布局，通常可用*{margin:0; padding:0;}来消除内外边距。

reset.css 去掉了所有样式 。normalize.css对默认样式进行了统一了