本文详细介绍了CSS盒子模型中的垂直布局、外边距折叠、内联元素的盒子特性以及默认样式、盒子大小的概念，还探讨了如何使用box-sizing属性和实现阴影、圆角效果。
目录
一、垂直布局
使用overflow属性设置父元素如何处理溢出的子元素：
可选值：
visible 默认值 文本正常显示
hidden 裁剪掉多余的内容
scroll 生成双向的滚动条，可以通过滚动条查看完整的内容
auto 根据实际的内容出现滚动条
overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成。
overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!--
使用overflow属性设置父元素如何处理溢出的子元素
可选值：
visible 默认值 文本正常显示
hidden 裁剪掉多余的内容
scroll 生成双向的滚动条，可以通过滚动条查看完整的内容
auto 根据实际的内容出现滚动条
overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成
overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成
-->
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* overflow:auto; */
overflow-x: hidden;
}
p{
width: 300px;
}
</style>
<!-- 块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开
在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开
-->
</head>
<body>
<div class="box1">
<p></p>
知关舟自者高气骂今。
论以起娟死出仇李知投他第金人，着只中给后呼要才那她仆在回助侯杨死使，主命纯瞠变对，极韩廿罪不胆衣卡你耐二动秦言德今的一我，不他畴德惜吞真韩到次小厄让君就，融临耳作不得来王恶不慷徒疾守严，不谓杨，种太和郭娘小杨才无特怎不了光血，说商则听月笔用者准归是法手导游量他，求要入六仇无，并一知慨竟恩老当徒五马有故可惶一谢，尺冇上他到洪仍可自，韩可向杀了，上自也是读没人是临自不俭死无下举方对，大后不，他韩蒲切。
</div>
</body>
</html>
二、外边距的折叠
垂直外边距的重叠：
兄弟元素：
如果两个值都是正值，谁大听谁的。
如果两个值是负值，谁小听谁的（绝对值谁大听谁的）。
如果是一正一负，那最终的值，两者相加 。
父子元素：
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,导致父元素的位置发生变化，会影响到父元素下面的布局，所以这个问题必须要解决。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!--
垂直外边距的重叠
-兄弟元素
如果两个值都是正值，谁大听谁的
如果两个值是负值，谁小听谁的（绝对值谁大听谁的）
如果是一正一负，那最终的值，两者相加
-父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,
导致父元素的位置发生变化，会影响到父元素下面的布局，
所以这个问题必须要解决
-->
<!--面试题： 如何解决父子外边距重叠的问题？ -->
<!--作业： 如何设置圆形 border-radius -->
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
margin-top: -30px;
}
.outer {
width: 200px;
height: 200px;
background-color: yellow;
/* margin-top: 50px; */
}
.inner {
width: 100px;
height: 100px;
background-color: yellowgreen;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 兄弟元素 -->
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<!-- 父子元素 -->
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
三、内联元素的盒子
从这几点分析：
内容区 :行内元素盒子模型不可以设置内容区的大小,它的内容区的大小都是被内容撑开
内边距 ：行内元素盒子模型可以设置内边距，而且垂直方向的内边距不会影响其他的元素的位置。
边框 :行内元素盒子模型可以设置边框，而且垂直方向的边框也不会影响其他的元素的位置
外边距：水平方向的外边距可以设置成功的，而且水平方向的外边距不会重叠
垂直方向的外边距不可以设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*从这几点分析：
内容区 :行内元素盒子模型不可以设置内容区的大小,它的内容区的大小都是被内容撑开
内边距 ：行内元素盒子模型可以设置内边距，而且垂直方向的内边距不会影响其他的元素的位置
边框 :行内元素盒子模型可以设置边框，而且垂直方向的边框也不会影响其他的元素的位置
外边距：水平方向的外边距可以设置成功的，而且水平方向的外边距不会重叠
垂直方向的外边距不可以设置
*/
.s1{
background-color: pink;
/* width: 100px;
height: 100px; */
/* padding: 20px; */
/* border: 20px solid blue; */
/* margin-left: 50px; */
/* margin-right: 50px; */
/* margin-top: 50px; */
margin-bottom: 50px;
}
p{
background-color: red;
}
div{
width: 100px;
height: 100px;
background-color: green;
/* padding: 20px; */
/* border: 10px solid orange; */
}
.box1{
background-color: grey;
}
.s2{
/* margin-left: 50px; */
}
</style>
</head>
<body>
<!-- 行内元素盒子例子 -->
<span class="s1">我是一个span--s1</span>
<span class="s2 s1">我是一个span--s2</span>
<!-- 对比块元素盒模型 -->
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<!-- 行内元素转块元素 -->
<!-- <a href="##" class="a1">超链接</a>
<a href="##">超链接2</a> -->
<p>罪仑娟而于联，说思。</p>
</body>
</html>
<!--
visibility 用来设置元素的显示状态
可选值：
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示（隐藏一个元素），位置依然保留
-->
四、默认样式
默认样式：
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
方式一：手动去除，这种方式一般情况只适用一些小的案例，小的项目
1:清除浏览器的默认样式
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
方式二：
2:引入重置样式表
这个表就是网上的大神列举出来的所有的标签的默认样式
reset.css,normal.css
我们使用的时候，只需要引入到对应的html文件内就可以
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- 引入重制样式表
注意：
1、引入重制样式表前提是你要有这个reset.css文件
2、引入重制样式表必须要在你写的样式前面，
否则会重置你写的样式
-->
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./index.css">
<style type="text/css">
/* 默认样式：
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
*/
/* 方式一：手动去除，这种方式一般情况只适用一些小的案例，小的项目
1:清除浏览器的默认样式
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
方式二：
2:引入重置样式表
这个表就是网上的大神列举出来的所有的标签的默认样式
reset.css,normal.css
我们使用的时候，只需要引入到对应的html文件内就可以
*/
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>
五、盒子的大小
面试题：简单说一下box-sizing的使用？
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
设置width，height特指内容区的宽高
box-sizing 用来设置盒子尺寸的计算方式 用来规定width，height指的谁
可选值：
content-box width，height指的是内容区宽高，默认值
border-box width，height指的就是内容区，内边距，边框加起来的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
border: 10px solid green;
padding: 10px;
box-sizing: border-box;
}
/*
面试题：简单说一下box-sizing的使用？
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
设置width，height特指内容区的宽高
box-sizing 用来设置盒子尺寸的计算方式 用来规定width，height指的谁
可选值：
content-box width，height指的是内容区宽高，默认值
border-box width，height指的就是内容区，内边距，边框加起来的大小
*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
六、阴影和圆角
知识点1:
box-shadow
用来设置元素的阴影效果，不会影响到页面布局
第一个值：水平偏移量 正->右 负->左 必写
第二个值：垂直偏移量 正->下 负->上 必写
第三个值：模糊半径 选写，默认值是0
第四个值：颜色 选写，默认值是黑色
知识点2:
1、border-radius 用来设置圆角
可以同时设置多个值，规则跟我们之前归纳的border-width一样
2、单独设置某一角的圆角
border-top-left-radius:;
border-top-right-radius:;
border-bottom-left-radius:;
border-bottom-right-radius:;
3、设置圆形
border-radius: 50%。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #f60;
margin: 0 auto;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
/* 知识点1:
box-shadow
用来设置元素的阴影效果，不会影响到页面布局
第一个值：水平偏移量 正->右 负->左 必写
第二个值：垂直偏移量 正->下 负->上 必写
第三个值：模糊半径 选写，默认值是0
第四个值：颜色 选写，默认值是黑色
*/
}
.box2 {
width: 300px;
height: 300px;
background-color: #bfa;
/* border-radius: 10px 40px; */
border-top-left-radius: 50%;
border-top-right-radius: 50%;
/* border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px; */
/*
知识点2:
1、border-radius 用来设置圆角
可以同时设置多个值，规则跟我们之前归纳的border-width一样
2、单独设置某一角的圆角
border-top-left-radius:;
border-top-right-radius:;
border-bottom-left-radius:;
border-bottom-right-radius:;
3、设置圆形
border-radius: 50%;
*/
}
</style>
</head>
<body>
<!-- 阴影例子 -->
<div class="box1"></div>
<!-- 圆角例子 -->
<div class="box2"></div>
</body>
</html>
扫一扫
3878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
