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

codest

墨衍会员 · AI 创作全网分发码龄17年

关注

原创 2021-07-04 08:19:59 101 阅读 AI 写同款· GEO 优化 ›

一、盒子的大小

1. 盒子的大小

1.默认情况下，盒子的可见框大小由内容、内边距、边框共同决定。
-box-sizing：用来设置盒子大小的计算方式（设置width和height的作用范围）。

可选值：content-box（默认值，宽度和高度用来设置内容区的大小）

border-box（宽度和高度用来设置整个盒子的可见框大小，width和height指的是内容区、边框、内边距的总大小）

2 轮廓、阴影和圆角

outline
-用来设置元素的轮廓线，用法与border一模一样。轮廓和边块不同点就是轮廓不会影响可见框的大小（盒子的outline不属于盒子的一部分，它画在边框之外、外边距区域之内）。
box-shadow
用来设置元素的阴影效果，阴影也不会影响元页面的布局
例：box-shadow: 0px 0px 50px rgba(0, 0, 0, .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 ，“/”前的数值表示圆角的水平半径，后面的值表示圆角的垂直半径。

3. 浮动

通过浮动、可以使一个元素向其父元素的左侧或右侧移动，使用float设置元素的浮动。
元素设置浮动以后，水平布局的等式便不需要强制成立。元素设置浮动以后，会完全从文档流中脱离。所以设置了float元素下面的还在文档流中元素，会自动向上移动。

2.浮动的基本特点(脚离地了，飘了,挤块不挤文字）
         浮动的元素会完全脱离文档流，不再占据文档流中的位置。
        设置浮动以后，元素会向父元素的左侧或右侧移动。
        浮动元素默认不会从父元素中移出。
        浮动元素向左或向右移动时，不会超过它前面的其他浮动元素。
        如果浮动元素的上边是没有浮动的块元素，则浮动元素无法上移。（注意）
        浮动元素不会超过它上一个的浮动的兄弟元素，最多就是和它一样高。（前面位置再多也不能插队）
简单总结：浮动目前的主要作用，就是让页面中的这些元素可以水平排列，通过浮动可以制作一些水平方向的布局。

3.浮动元素的其他特点（浮动初衷就是文字环绕）

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围。所以我们可以利用浮动，来设置文字环绕图片的效果。
元素设置浮动以后，会从文档流中脱离，元素的一些特点，也会发生改变。
脱离文档流后块元素的特点：块元素不再独占页面的一行、宽度和高度都被内容撑开，相对于display=inline-block
脱离文档流后行内元素的特点：行内元素脱离文档流后、特点和块元素一样。 （（同上）
脱离文档流后，不需要再区分行内和块元素【注意】

4. 高度塌陷和BFC

高度塌陷(生孩子例子)
在浮动的布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失后，底下的元素会自动上移，导致页面布局的混乱。所以，高度塌陷是浮动布局中比较常见的问题，这个问题我们必须要进行处理。
BFC(Block Formatting Context) 块级格式化环境
BFC是CSS中的一个隐含的属性，我们可以为一个元素开启BFC。
开启BFC，该元素会变成一个独立的布局的区域。
元素开启BFC后的特点：

（1）开启BFC的元素，不会被浮动元素覆盖。

（2）开启BFC的元素，子元素和父元素的外边距不会重叠。

（3）开启BFC的元素，可以包含浮动的子元素。
开启BFC的方式：

（1）设置元素的浮动（不推荐）

（2）将元素设置为行内块元素。（不推荐）

（3）将元素的overflow设置为一个非visible的值。常用的方式为元素设置 overflow:hidden开启其BFC，以使其可以包含浮动元素（常用方式）
Clear属性
-如果我们不希望某个元素因为其他元素的浮动而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响。
-作用：clear属性用来清除浮动元素对当前元素所产生的影响.（在自己上面用，且只影响自己，不会影响别人）
-可选值：

（1）clear-left 清除左侧浮动元素对当前元素的影响

（2）clear-right 清楚右侧浮动元素对当前元素的影响

（3）clear-both 清除两侧中最大影响的那侧。（谁大清谁）
原理：清除浮动以后，浏览器会自动为一个元素添加上外边距，以受其位置不受其他元素的影响。

高度塌陷的最终解决方案

-可以在CSS样式中通过after伪元素来解决高度塌陷问题（相当于有生了一个孩子，就不会塌陷，通过css解决表现问题）
-例：.box1::after{
content: ‘’;
display: block;
clear: both;
}
clearfix
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可。
写法：.clearfix::before,
.clearfix::after{
content: “”;
display: table; -----可以解决塌陷和重叠
clear: both;
}