本文详细探讨了前端布局中的水平和垂直布局原理，包括浏览器如何处理过度约束的情况。此外，还介绍了如何使用`box-shadow`创建阴影效果和`border-radius`实现圆角。同时，讲解了内联元素的盒模型特点，以及外边距重叠的规则。最后，提到了`box-sizing`属性在确定盒子大小时的作用。
目录
1.水平布局
水平方向
margin-left border-left padding-left width padding-right border-right margin-right
浏览器规定 水平方向的七个值相加必须要等于父元素内容区的宽度
0 5px 50px 100px 50px 5px 0 ==500 ?
像以上这种，如果不等于的话，浏览器它就会自己去调整这7个值，让我们的等式成立，这个过程叫过度约束
浏览器如何调整的？
1、如果7个值中没有设置auto，那浏览器就会调整margin-right
0 5px 50px 100px 50px 5px 290px ==500
2、7个值中有3个值可以设置auto margin-left width margin-right
1个auto,其他两个值为固定值
浏览器就会调整这个auto
2个auto，其他1个值为固定值
margin-left width 调整width
width margin-right 调整width
margin-left margin-right 同时margin-left margin-right，各占一半
3个auto
margin-left width margin-right 调整width
<!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: 500px;
height: 300px;
border: 10px solid red;
}
.box1{
width: auto;
height: 100px;
background-color: green;
border: 5px solid orange;
padding: 50px;
margin-left:auto;
margin-right:auto;
/* margin: 0px auto; */
}
</style>
</head>
<body>
<div id="box">
<div class="box1"></div>
</div>
</body>
</html>
2.垂直布局
<!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: 400px;
height: 400px;
border: 3px solid red;
}
/* 块元素 宽度默认是父元素的100%，高度是被内容撑开的 */
.box2 {
width: 200px;
height: 200px;
background-color: palegreen;
overflow: auto;
}
/* overflow属性可以设置溢处的内容
可选值
visible 默认值 内容正常显示
hidden 裁剪多余的内容
scroll 出现双侧滚动条
*/
</style>
</head>
<body>
<div class="box1">
<div class="box2">
是以逝投到才三位，想恨学，答俭韩曰子失传谋他一连是三中国我，姑玉对天气了不人是，得李被死欲白死谓俭他以德艳都，娟名死是妄始天仑同如绛明笔后其亓兮牛，高归然秦土是介后之一葬历你，或没哥仄死，通嗣命畴而和洪心说尤禀回失本等，满后俭要冷了，见李大往仆光得则我己。
也牙仆当都落禀，安水法圣二，怒锐自是瞠。 也牙仆当都落禀，安水法圣二，怒锐自是瞠。
</div>
</div>
</body>
</html>
3.阴影和圆角
/* 知识点1:
box-shadow
用来设置元素的阴影效果，不会影响到页面布局
第一个值：水平偏移量 正->左 负->右
第二个值：垂直偏移量 正->下 负->上
第三个值：模糊半径 默认值0px
第四个值：颜色 默认值是盒子的背景色
*/
}
<!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: 50px auto;
box-shadow:2px 2px 15px rgba(0, 0, 0, 0.5);
.box2 {
width: 200px;
height: 200px;
background-color: #bfa;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
/* border-radius: ; 设置圆角效果
border-radius:50%;设置圆形
*/
}
</style>
</head>
<body>
<!-- 阴影例子 -->
<div class="box1"></div>
<!-- 圆角例子 -->
<div class="box2"></div>
</body>
</html>
4.内联元素的盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* div{
width: 200px;
height: 200px;
} */
span {
width: 200px;
height: 200px;
background-color: red;
/* padding-top: 30px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px; */
/* border: 30px solid green; */
margin-left: 20px;
margin-top: 30px;
margin-bottom: 30px;
margin-right: 50px;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
padding-top: 30px;
border: 20px solid blue;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
/* display: none; */
visibility: hidden;
}
</style>
<!-- 行内元素盒模型
content 不可以直接设置宽高，被内容撑开的
padding 可以内边距，但垂直方向不会挤别人,也就是不会影响页面的布局
border 可以设置边框，但垂直方向不会挤别人，也就是不会影响页面的布局
margin 左右可以设置外边距，垂直方向不可以设置
--></head>
<body>
<!-- 行内元素盒子例子 -->
<span class="s1">我是一个span--s1</span>
<span class="s1">我是一个span--s1</span>
<!-- <br />
<br /> -->
<!-- 对比块元素盒模型 -->
<div class="box1"></div>
<div class="box2"></div>
<span>你看我动不动</span>
</body>
</html>
<!-- visibility 用来设置元素的显示状态
可选值：
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示（隐藏一个元素），位置依然保留
display none 隐藏一个元素 位置不保留
-->
5.外边距的重叠
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
/* div{
width: 200px;
height: 200px;
background-color: red;
} */
.box1{
margin-bottom: 100px;
}
.box2{
background-color: green;
margin-top: -150px;
}
.outer{
width: 300px;
height: 300px;
background-color: pink;
/* 解决父子外边距重叠的方案 */
/* 方案一 */
/* border: 1px solid transparent; */
/* 方案二：开启了元素的BFC属性 */
overflow: hidden;
/* margin-top: 100px; */
}
.inner{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
<!-- 兄弟元素的垂直方向外边距重叠的问题
1、两者都为正值，则谁大听谁的
2、若两者为负者，则谁的绝对值大，听谁的
3、若一正一负，则听两者相加的结果值
一般情况下，兄弟元素的外边距重叠问题，不需要额外的解决，利于我们开发
-->
</head>
<body>
<!-- 兄弟元素 -->
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<!-- 父子元素 -->
<div class="outer">
<div class="inner"></div>
</div>
<span>我是布局</span>
</body>
</html>
6.盒子的大小
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
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 yellowgreen;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
