一、垂直布局
<!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 裁剪掉多余的内容
scoll 生成双向的滚动条,可以通过滚动条查看完整的内容
auto 根据实际内容生成滚动条
overflow-x 对水平方向溢出的内容进行设置,垂直方向根据实际需要自动生成
overflow-y 对垂直方向溢出的内容进行设置,水平方向根据实际需要自动生成
-->
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/* overflow: scroll; */
/* overflow-x: hidden; */
}
p{
width: 300px;
}
</style>
<!-- 块元素默认情况下,宽度是父元素的100%,高度是被内容撑开
在垂直布局中,一般情况下,我们是不设置高度的,让元素被内容撑开
-->
</head>
<body>
<p></p>
<div class="box1">
李下君快国气者哉,死评罪生要是,对颜服倒卞王起
</div>
</body>
</html>
二、外边距的折叠
<!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>
<!--
垂直外边距的重叠
-兄弟元素
如果两个值都是正值,谁大听谁
如果两个值都是负值,谁小听谁(绝对值谁大听谁的)
如果是一正一负,那最终的值是两者相加
-父子元素
如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素,导致父元素的位置发生变化,会影响到父元素下面的布局,
所以这个问题必须要解决
-->
<!-- 面试题:如何解决父子外边距重叠的问题? -->
<!-- 如何设置圆形? border-radius -->
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 80px;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
/* margin-top: 150px; */
}
.outer{
width: 200px;
height: 200px;
background-color: yellow;
}
.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>
</body>
</html>