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

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

p58(07:42)-
一、盒子的大小
1.默认情况下，盒子的可见框大小由内容、内边距、边框共同决定。
-box-sizing：用来设置盒子大小的计算方式（设置width和height的作用范围）。可选值：content-box（默认值，宽度和高度用来设置内容区的大小）、border-box（宽度和高度用来设置整个盒子的可见框大小，width和height指的是内容区、边框、内边距的总大小）

二、轮廓、阴影和圆角
1.outline
-用来设置元素的轮廓线，用法与border一模一样。轮廓和边块不同点就是轮廓不会影响可见框的大小（盒子的outline不属于盒子的一部分，它画在边框之外、外边距区域之内）。
2.box-shadow
-用来设置元素的阴影效果，阴影也不会影响元页面的布局
-例：box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;第一个值，水平偏移量，设置阴影的水平偏移量，正值向右移动，负值向左侧移动。第二个值，垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动。第三个值，为阴影的模糊半径。第四个值，为阴影的颜色设置。
3.border-radius
-用来设置圆角，圆角设置的圆半径大小。分别有四个角：border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius。
-border-radius，可以分别指定四个角的圆角，一般情况下四个值顺序分别是左上、右上、右下、左下。三个值顺序分别是左上、右上/左下、右下。两个值顺序是左上/右下、右上/左下。
-border-radius:50%；，可以将盒子模型设置为一个圆
-border-radius：30px / 40px ，“/”前的数值表示圆角的水平半径，后面的值表示圆角的垂直半径。

三、浮动
一、
1.通过浮动、可以使一个元素向其父元素的左侧或右侧移动，使用float设置元素的浮动。
-元素设置浮动以后，水平布局的等式便不需要强制成立。元素设置浮动以后，会完全从文档流中脱离。所以设置了float元素下面的还在文档流中元素，会自动向上移动。
2.浮动的基本特点
-浮动的元素会完全脱离文档流，不再占据文档流中的位置。
-设置浮动以后，元素会向父元素的左侧或右侧移动。
-浮动元素默认不会从父元素中移出。
-浮动元素向左或向右移动时，不会超过它前面的其他浮动元素。
-如果浮动元素的上边是没有浮动的块元素，则浮动元素无法上移。
-浮动元素不会超过它上一个的浮动的兄弟元素，最多就是和它一样高。
-简单总结：浮动目前的主要作用，就是让页面中的这些元素可以水平排列，通过浮动可以制作一些水平方向的布局。
3.浮动元素的其他特点
-浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围。所以我们可以利用浮动，来设置文字环绕图片的效果。
-元素设置浮动以后，会从文档流中脱离，元素的一些特点，也会发生改变。
-脱离文档流后块元素的特点：块元素不再独占页面的一行、宽度和高度都被内容撑开
-脱离文档流后行内元素的特点：行内元素脱离文档流后、特点和块元素一样。
-脱离文档流后，不需要再区分行内和块元素。

四、高度塌陷和BFC
1.高度塌陷
-在浮动的布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，底下的元素会自动上移，导致页面布局的混乱。所以，高度塌陷是浮动布局中比较常见的问题，这个问题我们必须要进行处理。
2.BFC(Block Formatting Context) 块级格式化环境
-BFC是CSS中的一个隐含的属性，我们可以为一个元素开启BFC。
-开启BFC，该元素会变成一个独立的布局的区域。
-元素开启BFC后的特点：（1）开启BFC的元素，不会被浮动元素覆盖。（2）开启BFC的元素，子元素和父元素的外边距不会重叠。（3）开启BFC的元素，可以包含浮动的子元素。
-开启BFC的方式：（1）设置元素的浮动（不推荐）（2）将元素设置为行内块元素。（不推荐）（3）将元素的overflow设置为一个非visible的值。常用的方式为元素设置 overflow:hidden开启其BFC，以使其可以包含浮动元素。
3.Clear属性
-如果我们不希望某个元素因为其他元素的浮动而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响。
-作用：clear属性用来清除浮动元素对当前元素所产生的影响.
-可选值：（1）clear-left 清除左侧浮动元素对当前元素的影响（2）clear-right 清楚右侧浮动元素对当前元素的影响（3）clear-both 清除两侧中最大影响的那侧
-原理：清除浮动以后，浏览器会自动为一个元素添加上外边距，以受其位置不受其他元素的影响。
4.高度塌陷的最终解决方案
-可以在CSS样式中通过after伪元素来解决高度塌陷问题
-例：.box1::after{
content: ‘’;
display: block;
clear: both;
}
5.clearfix
-clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可。
-写法：.clearfix::before,
.clearfix::after{
content: “”;
display: table;
clear: both;
}