本文详细介绍了前端布局中的水平布局、垂直布局、外边距折叠、内联元素盒子模型以及盒子大小和阴影圆角的实现与注意事项。通过实例展示了浏览器如何处理过度约束、如何进行垂直布局、如何避免外边距重叠以及内联元素的特性。同时，讨论了CSS中的box-sizing属性和阴影、圆角的使用方法，为前端开发者提供了实用的布局和样式技巧。
目录
一、水平布局
什么是过度约束，浏览器如何调整？
浏览器规定一个元素水平方向的7个值相加必须要等于其父元素内容区的宽度，如果不等于的话，浏览器就会强制调整这7个值，让你相等。我们管这个过程叫过度约束
margin-left border-left padding-left width padding-right border-right margin-right
0 10 0 100 0 10 0 == 600
120 =？ 600
如何调整的
1、如果水平方向7个值当中没有auto，那么浏览器自动调整就是margin-right
0 10 0 100 0 10 380 == 600
2、水平方向7个值当中，有三个值可以被设置为auto，width、margin-left、margin-right
有1个auto ,谁是auto就调整谁
width为auto
0 10 0 580 0 10 0 == 600
margin-left
480 10 0 100 0 10 0 == 600
margin-right
0 10 0 100 0 10 480 == 600
有2个auto width、margin-left；width、margin-right；margin-left、margin-right
width、margin-left 为auto 调整的是width
width、margin-right 为auto 调整的是width
margin-left、margin-right 为auto margin-left、margin-right各占一半，把元素挤到中间
有3个auto
width、margin-left、margin-right都为auto，调整的是width
总结：有auto的话
width>margin-left、margin-right
代码展示：
<!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>
.outer {
width: 600px;
height: 400px;
border: 10px red solid;
}
.inner {
width: auto;
height: 100px;
background-color: #bfa;
border: 10px solid orange;
padding: 0px;
margin-left: auto;
margin-right:auto;
/* margin: 0px auto; */
}
h1{
text-align: center;
}
/* 主要是针对图文垂直对齐方式，或者表格垂直对齐方式 */
/* vertical-align: middle; */
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<h1>怒帅办皇。</h1>
</body>
</html>
二、垂直布局
块元素的高度默认情况是被内容撑开的，那如果设置，设置多少是多少
一般情况，我们不给父元素设置固定的高度，
让它根据子元素的内容自动调整高度
垂直布局
overflow属性
可选值：
visible 默认值 正常显示
hidden 剪裁多余
auto 自动根据内容显示是否出现滚动条
scroll 生成双向滚动条
代码展示
<!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;
border: 10px solid #bfa;
overflow:scroll;
}
p{
width: 300px;
}
</style>
</head>
<body>
<div class="box1">
<p>
是以逝投到才三位，想恨学，答俭韩曰子失传谋他一连是三中国我，姑玉对天气了不人是，得李被死欲白死谓俭他以德艳都，娟名死是妄始天仑同如绛明笔后其亓兮牛，高归然秦土是介后之一葬历你，或没哥仄死，通嗣命畴而和洪心说尤禀回失本等，满后俭要冷了，见李大往仆光得则我己。
</p>
</div>
</body>
</html>
三、外边距的折叠
垂直外边距的重叠
兄弟元素
如果两个都是正值，谁大听谁的
如果两个都是负值，绝对值谁大听谁的
如果一正一负，两者相加，听最终结果
总结：兄弟元素的外边距重叠，对我们开发来讲，
一般是有利，所以不用做特殊调整
父子元素
父子外边距重叠，它会影响页面其他元素，所以必须要调整
如何调整
1、不用margin-top，给父元素用padding-top，同时减小父元素的高度
2、在父子之间用边框隔开
3、开启元素的BFC（隐含属性）
overflow:hidden;
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
/* margin-top: 200px; */
}
.outer {
width: 200px;
height: 200px;
background-color: red;
/* overflow:hidden; */
/* border: 1px solid transparent; */
/* padding-top: 100px; */
/* margin-top: 100px; */
}
.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>
<p>联助知韩五落，仇生。</p> -->
</body>
</html>
四、内联元素的盒子
行内元素的盒子模型
内容区 不能设置宽高，是被内容撑开
内边距 可以设置，但垂直方向不会改变页面的布局，也就是不会挤别人
边框 可以设置，但垂直方向不会改变页面的布局，不会挤别人
外边距 垂直方向不能设置外边距，水平方向可以设置，而且水平方向外边距不会重叠
display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块块元素（即可以设置宽高，又不会独占一行）
table 将元素设置为一个表格
none 元素不在页面中显示（隐藏一个元素）
visibility 用来设置元素的显示状态
可选值：
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示（隐藏一个元素），位置依然保留
面试题：
隐藏元素有几种方式，几者区别是什么
1、display：none； 删除了元素，元素位置不保留
2、visibility：hidden； 元素位置保留
3、将元素变为透明 元素位置保留
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*
行内元素的盒子模型
内容区 不能设置宽高，是被内容撑开
内边距 可以设置，但垂直方向不会改变页面的布局，也就是不会挤别人
边框 可以设置，但垂直方向不会改变页面的布局，不会挤别人
外边距 垂直方向不能设置外边距，水平方向可以设置，而且水平方向外边距不会重叠
*/
span{
background-color: pink;
/* padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px; */
/* padding: 10px 20px 30px 40px; */
/* border: 10px solid orange; */
margin-left: 30px;
}
div{
width: 100px;
height: 100px;
background-color: red;
}
.box1{
padding: 20px;
border: 10px solid blue;
}
.box2{
/* background-color: transparent; */
/* padding: 20px; */
/* display: none; */
visibility: hidden;
}
.s1{
margin-right: 20px;
}
.s2{
margin-left: 20px;
}
.box3{
background-color: orange;
}
</style>
</head>
<body>
<!-- 行内元素盒子例子 -->
<span class="s1">我是一个span--s1</span>
<span class="s2">我是一个span--s2</span>
<!-- 对比块元素盒模型 -->
<div class="box1 "></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!--
display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块块元素（即可以设置宽高，又不会独占一行）
table 将元素设置为一个表格
none 元素不在页面中显示（隐藏一个元素）
visibility 用来设置元素的显示状态
可选值：
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示（隐藏一个元素），位置依然保留
-->
<!-- 面试题：
隐藏元素有几种方式，几者区别是什么
1、display：none； 删除了元素，元素位置不保留
2、visibility：hidden； 元素位置保留
3、将元素变为透明 元素位置保留
-->
五、盒子的大小
面试题：说一说box-sizing，有几种情况
默认情况下：盒子可见框的大小由内容区，内边距，边框共同决定
box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
代码展示
<!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 transparent; */
box-sizing: border-box;
}
.box:hover{
border: 10px solid yellowgreen;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
六、阴影和圆角
知识点1:
box-shadow
用来设置元素的阴影效果，不会影响到页面布局
第一个值：水平偏移量 正->左 负->右 ，必选
第二个值：垂直偏移量 正->下 负->上 ，必选
第三个值：模糊半径 默认0px，可选
第四个值：颜色 默认是黑色，可选
知识点2:
border-radius 用来设置圆角 以10px为半径画圆
border-radius: 50%; 设置圆形
borde-top-right-radius
border-top-left-radius
border-bottom-left-radius
border-bottom-right-radius
代码展示
<!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: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
.box2 {
width: 200px;
height: 200px;
background-color: #bfa;
/* border-radius: 50%; */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
</style>
</head>
<body>
<!-- 阴影例子 -->
<div class="box1"></div>
<!-- 圆角例子 -->
<div class="box2"></div>
</body>
</html>
1329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
