P4-CSS的特点-选择器的权重-复合选择器-长度单位-颜色单位-盒子模型-边框-内边距-外边距-盒子大小计算-水平布局

CSS的特点继承

• 后代元素会继承到祖先元素的样式，继承的存在大大的简化了我们的开发。
• 可以在一个祖先元素上设置一些公共的样式，这样其所有的后代元素都会同时具有该样式。
• 但是并不是所有的样式都会被继承，例如背景(background)和布局（border、width、height）相关的则不会被继承。

案例：

选择器的权重

• 当我们使用不同的选择器选择了相同的元素，且又为其同一个样式设置了不同的值，此时就发生了样式的冲突。
• 发生样式冲突时，显示哪个样式，由选择器的权重决定，权重高的优先显示。
• 其中内联样式的优先级是最高的，一旦设置则无法在样式表中修改。
• 如果为一个样式添加了!important，则该样式会获得最高的优先级，将会优先于所有的样式显示。(慎用)

各种选择器的权重

选择器名字	优先级
内联样式	1000(1,0,0,0)
id选择器	100(0,1,0,0)
类和伪类	10(0,0,1,0)
元素选择器	1(0,0,0,1)
统配选择器	0(0,0,0,0)
继承来的样式	没有优先级

复合选择器

• 对于复合选择器来说，需要将所有的选择器的优先级相加然后再比较。
• 优先级计算时不会超过其最大的数量级。（再多个元素选择器相加也不会超过10）（优先级原本是要上述括号中那样写，用逗号将每位隔开的意思是说不会跨数量级，元素变成11那也是前3位是0，第四位是11不会进位）
• 分组选择器（并集选择器）中的优先级是独立计算的。
• 如果两个选择器的优先级相同，则使用靠下的样式。

案例：（!important）

案例：（复合选择器 元素+类 / 类）

分析：
复合选择器优先级的计算：分别按照数量级进行计算；
例如：两个id选择器，三个类选择器 最后的优先级为 (0,2,3,0)，因为id选择器的数量级是100，而类选择器的数量级是10
案例：（继承来的样式是没有优先级的）

案例：（优先级相同，则采用书写靠后的）

单位-长度、颜色

长度单位

像素(px)

定义：显示器上的图像是由一个一个发光的小点点构成，这一个个小点就是一个像素（物理像素）
像素分为两种：CSS像素、物理像素 （代码中设置的是CSS像素）
说明：

• 我们常说的分辨率 1366*768，就说的是像素。
• 默认情况下，在PC中CSS像素和物理像素是相同的。
• 在不同的显示器下，像素的大小也不尽相同（有的显示器像素点大、有的显示器像素点小）（点越小越清晰）
• 一些高清屏，会将像素放大，使一个CSS像素可以对应多个物理像素（一般在iphone手机中一个CSS像素对应3个物理像素），但在PC端大部分情况是一样的。

百分比（%）

会根据包含块（父元素）指定的值来计算当前元素的值；
一般会在响应式的开发中使用到百分比；
包含块 ：就是离当前元素最近的块级祖先元素

颜色单位

直接使用颜色名来设置颜色

red green blue yellow orange…

可以使用RGB值来表示颜色

• RGB值可以通过三种颜色不同的浓度来调配出其他的颜色
  语法：rgb（red，green，blue）
  值的范围是0-255(也可以写百分数)
• 通过快速编辑ctrl+e（鼠标选中rgb）
• rgba比rgb多了一个关于透明度的项，1表示不透明，0.5半透明，0完全透明；

使用十六进制的rgb值

• 语法：#红色绿色蓝色（例子#112233）
  需要使用两位十六进制的数字来表示每种颜色的浓度（红色两位十六进制）
  范围：00-ff
• 像#aabbcc这种两两重复的颜色，可以简写（#abc）

使用hsl()表示颜色

• 工业中设置颜色的方式；
• 语法：hsl（x%，y%，z%）
  解释：其中x表示h（色相）、y表示s（饱和度）、z表示l（亮度）
  h色相（0-360）：所有的颜色都被放到一个圆中，h表示角度（可以通过鼠标点击hsl、ctrl+e快速编辑查看）60度一份（彩虹颜色排了一圈）；
  s饱和度（0%-100%）：表示颜色的纯度（值越大色越正，值越小色越灰）；
  l亮度（0%-100%）：不管什么颜色，0%都是黑色，100%都是白色。
  
• hsla加了一个透明度

盒子模型（框模型 box model）

• 浏览器在渲染页面时，它会将页面中的每个元素都想象成一个矩形的盒子。
• 想象成盒子以后，对于页面的布局就变成了如何摆放盒子。
• 每一个盒子从内到外都会有以下几个部分组成：

组成部分	说明
内容区 content	内容区决定这个盒子可以装多少东西（子元素）
内边距 padding	内容区和边框之间的距离
边框 border	盒子的边框
外边距 margin	盒子距离其他盒子的距离

盒子模型图示：

总结分析：内容区content+内边距padding+边框border 决定盒子的大小。
外边距margin决定盒子的位置。

边框

• 默认情况下，width和height指的是元素的内容区的大小；
• 默认情况下，内边距padding、边框border、外边距margin都是0，只有在设置了之后才会显示；
• 边框是盒子边界的外部。
• 边框相关的样式有三个：border-color边框颜色、border-style边框样式、border-width边框宽度。

边框三个样式设置四周边样式规则如下：

参数个数	设置具体边框
四个	上，右，下，左
三个	上，左右，下
两个	上下，左右
一个	上下左右

边框颜色border-color

注意：不指定颜色，borde-color的默认值是字体颜色，并且会跟着字体颜色变化而变化。
案例：给盒子边框设置颜色、样式、宽度

注意：一个盒子的两条边框的交界处不是直线，而是倾斜的。（不明白为什么？）

边框样式border-style

参数介绍：

参数值	说明
solid	实线
dotted	点状虚线
dashed	虚线
double	双线

案例说明：

注意：不指定样式，border-style默认值是none

边框宽度border-width

注意：不指定宽度，borde-width默认只是3px。

边框的简写属性border

• 通过该属性可以同时设置四个方向边框的宽度、颜色、样式，并且没有顺序要求。
  也就是 border：颜色 样式 宽度 / 样式 宽度 颜色 … 同时设置边框的四个方向。
• 同样border-right、border-left、border-top、border-bottom 这三个属性 也是像border一样，设置边框的三个属性颜色、样式、宽度没有顺序要求。

内边距 padding

• 盒子的可见框大小由内容区content、内边距padding和边框border共同决定。
  假如说设置一个300×300的盒子，指的是盒子的可见框大小为300×300。
• 边框和内容区之间的距离叫做内边距（padding）。参数值只是xx像素（px）。
• 一共有四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left
• 还可以通过padding来同时设置四个方向的内边距，设置规则和border一样，具体规则如下：

参数个数	设置具体内边距
四个	上，右，下，左
三个	上，左右， 下
两个	上下，左右
一个	上下左右

注意：
关于查看编写的网页的代码，建议通过html文件直接打开查看，而不是利用软件的实时显示来看。（因为软件查看的内容是浏览器又添加过的而不是原本的了）（目前为止没有案例可以说明这个情况）

外边距margin

• 当前盒子和其他盒子之间的距离称为外边距
• 外边距不会影响盒子的可见框的大小，但是外边距会影响到盒子实际占地的大小，影响盒子的位置。
• 有四个方向的外边距：margin-top、margin-right、margin-bottom、margin-left，参数值是xx像素(px)。
• 简写属性，margin可以同时设置四个方向的外边距，规则和border、padding一样。
  注意：
• 由于在浏览器中默认情况下，元素是靠左靠上排列的，设置上和左外边距时，会移动元素自身；而设置下和右外边距时，会移动其他元素；
• 设置上外边距会导致盒子下移、设置左边外边距会导致盒子右移；
• 外边距可以是负值，如果是负值则元素会向相反方向移动；例如：margin-right设置为-10px，则盒子会向右移动10px，原本正值会向左移动10px；

关于盒子大小的计算width、height

• 默认情况下，width和height指定的是盒子内容区的大小
• 可以通过box-sizing来修改盒子大小的计算方式（允许你以某种方式定义某些元素，以适应指定区域）
• 可选值介绍：

可选值	说明
content-box 默认值	width和height指的是内容区content的大小（内容盒子）
border-box	width和height指的是整个盒子的大小，包括padding和border的宽度
inherit	指定bor-sizing属性的值，应该从父元素继承

案例：

• 1 实现两个div盒子水平排列放置，因为div是块元素，会每一个块独占一行，采用box-sizing = “border-box”，可以实现两个盒子并排放置；
  
  2 外边距margin的图示
  
  3 box-sizing默认情况是content-box，则width和height是盒子内容区的大小
  

水平布局

• 子元素在父元素中的位置是 父元素的内容区content
• 子元素在父元素中的水平方向的布局，必须满足如下等式：
  margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width

解释说明

• 如果七个值的和相加不等于父元素的宽度，则属于过度约束，则浏览器会自动调整右外边距的值。
  
• 在水平方向，有三个值可以设置为auto，分别是margin-left、width、margin-right。
• 某属性设置为auto后，浏览器会根据其他属性值自动计算该属性的值。
• 当margin-left 、width 、margin-right都设置为auto的时候，具体实现则是margin-left=0，width=父元素宽度，margin-right=0。
  
• 如果将margin-left 或 margin-right的一侧设置为auto，则该侧会设置尽量大的值。
  
• 如果left和right都设置为auto，则会将两侧外边距设置相等的值，从而导致子元素在元素中水平居中。