尚硅谷新版Web前端HTML5+CSS3知识点集合篇【P38-P53】

尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门)

p38(15:28)-P53(23:10)
一、样式的继承
1.定义
-我们为一个元素设置的样式，也会应用到它的后代元素。
-继承是发生在祖先和后代之间的。
-优点：继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式设置到共同的祖先元素上，这样我们只需要设置一次，就可以让所有元素都获取到该样式。
-注意：并不是所有的样式都会被继承，比如背景、布局等相关的这些样式都不会被继承。
二、选择器的权重
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 ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！

三、像素和百分比
1.像素
-像素:屏幕（显示器）实际上是由一个一个的小点构成的。
-不同屏幕的像素大小不同，像素越小的屏幕显示的效果越清晰。
-所以同样的200px在不同设备下的显示效果是不一样的
2.百分比
-也可以将属性值设置为相对于其父元素属性的百分比
-设置百分比可以使子元素跟随父元素的改变而改变
3.em
-em是相对于元素的字体大小来计算的，1em=1font-size（一般浏览器默认的字体大小为16px），em会根据字体大小的改变而改变。
4.rem
-rem是相对于根元素（html）字体大小来计算的

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

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

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

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

3.盒子模型-边框
border-width
-border-width如果省略的话，会有一个默认值（一般是3px）。
-border-width可以有四个值，表示四个方向的边框宽度。
-四个值：上 右 下 左
-三个值：上 左右 下
-两个值：上下 左右
-一个值：上下左右
-除了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。

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

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

6.盒子的水平布局***
-元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定: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为固定的值，那么会将两个外边距设置为相等。所以我们经常使用这个特点，在父元素中水平居中。

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

8.外边距的折叠（重叠）
-相邻的垂直方向外边距会发生重叠的现象
-兄弟元素之间的外边距会取两者之间的较大值（两者都是正值），特殊情况（如果相邻的外边距一正一负，则取两者的和，如果相邻的外边距都是负值，则取两者间绝对值较大的）
-兄弟元素之间外边距的重叠，对于我们开发来说是有利的，所以不需要处理。
-父子元素之间的相邻外边距，子元素的会传递给父元素
-父子外边距的折叠会影响到页面的布局，必须要进行处理。

9.行内元素的盒模型
-行内元素不支持设置宽度和高度。
-行内元素可以设置padding，但是垂直方向不会影响页面的布局。
-行内元素可以设置border和margin，同样垂直方向的border和margin不会影响页面的布局。

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

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

七、默认样式
1.通常情况下，浏览器都会为元素设置一些默认样式。
-默认样式的存在，会影响到页面的布局。通常情况下，我们在编写网页时，我们要去除浏览器的默认样式（主要是PC端）。
-list-style：none （去除项目符号）
-在浏览器中，主要是默认的外边距和内边距影响布局，通常可用*{margin:0; padding:0;}来消除内外边距。
-外部样式表下载地址