一般情况下,我们一般不会设置固定高度,都是让他被内部撑开,父元素的高度是被子元素撑开的,块元素宽高是被内容撑开的,如果父元素宽高设置,小于内容区,则内容回溢出。
若父元素设置了,就是设置多少就是多少。子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素,则子元素会从父元素中溢出。
使用overflow属性设置父元素如何处理溢出的子元素。
可选值:
visible 默认值 子元素会从父元素中溢出,在父元素外部的位置显示
hidden 溢出的内容将会被裁剪不会显示
scroll 生成两个滚动条,通过滚动条来查看完整的内容
auto 根据需要生成滚动条
任务如何去除滚动条样式!
额外两个属性,了解一下
overflow-x:;auto 单独设置水平方向的溢出内容
overflow-y:;auto 蛋到户设置垂直方向溢出的内容
垂直外边距的重叠
兄弟元素
如果外边距都是正值,外边距谁大听谁的。
如果一正一负,外边距的设置,两者相加。
如果两个都是负值,则外边距的设置,绝对值大听谁的。
注意:兄弟元素的外边距一般不需要我们处理,方便我们开发的:
-父子元素
如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素,从而导致页面布局混乱。
从以下几点分析:内容区、内边距 、边框 、外边距。
行内元素的盒模型
1,内容区:
默认情况下,不可以自定义内容区的大小
2.内边距
默认情况下,可以正常设置内边距,但垂直方向不会影响到这个页面布局
3,边框 *
默认情况下。、,可以设置边框,但垂直方向边框大小,不影响页面布局
4,外边距
默认情况下·,我们垂直方向的外边距,不可设置,水平方向可以设置,且水平方向外边距不会重叠。
display 设置元素类型
可选值
none 影藏元素
block 将元素转成块元素
inline-block 元素转成行内块元素
table 将元素转换成表格
flex 转换为弹性元素
visibility;;设置元素影藏
行内元素的盒模型
1: 不能设置width和height,被内容撑开
2: 可以设置padding,但垂直方向padding不会影响页面的布局,不会挤别人
3: 可以设置边框,但是垂直的边框不会影响到页面的布局,不会挤别人
4: 可以设置水平方向的外边距,水平方向的相邻外边距不会重叠,而是求和,但不支持垂直外边距
*
display 用来设置元素显示的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块块元素(即可以设置宽高,又不会独占一行)
table 将元素设置为一个表格
none 元素不在页面中显示(隐藏一个元素)
visibility 用来设置元素的显示状态
可选值:
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示(隐藏一个元素),位置依然保留。
作业1
<!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>
* {
padding: 0;
margin: 0;
}
.box2 {
color: white;
font-size: 25px;
width: 400px;
height: 50px;
background-color: rgb(233, 24, 90);
line-height: 2;
}
li {
width: 400px;
background-color: white;
list-style: none;
border-bottom: 2px dashed gray;
}
.box3 {
width: 400px;
}
a:hover {
color: rgb(233, 24, 90);
}
a {
text-decoration: none;
color: gray;
}
</style>
</head>
<body>
<div class="box3">
<div class="box2">
<span> 大家都喜欢买的美容品</span>
<div class="box3">
<ul>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
1 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">雅诗兰黛即时修护眼部精华霜15ml</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
2 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">伊丽莎白雅顿显效复合活肤霜 75ml</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
3 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">OLAY玉兰油多效修护霜 50g</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
4 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">巨型一号丝瓜水320ML</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
5 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">倩碧保湿洁肤水2号 200ml</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
6 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">比度克细肤淡印霜 30g</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
7 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
8 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">SK-II护肤精华露 215ml</a> </span>
</li>
<li>
<span
style="border-radius: 50%; height: 30px; width: 30px; display: inline-block; background: black; vertical-align: middle;">
<span
style="display: block; color: white; height: 30px; line-height: 30px; text-align: center">
9 </span>
</span>
<span style="color: gray; font-size: 15px;"> <a href="#">欧莱雅青春密码活颜精华肌底液</a> </span>
</li>
</ul>
</div>
</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>
* {
padding: 0;
margin: 0;
}
.box1{
width: 300px;
background-color: rgb(133, 209, 250);
border: 1px solid gray;
}
.box2{
color: white;
font-size: 20px;
width: 400px;
padding: 10px;
border-bottom: 5px solid white;
}
img{
vertical-align: middle;
}
li{
font-size: 20px;
list-style: none;
border-bottom: 1px dashed gray;
}
.k1{
width: 0;
height: 0;
border-left: 5px solid rgb(239, 96, 1);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
display: inline-block;
}
.box3{
line-height: 2;
padding: 10px;
}
a {
text-decoration: none;
color: gray;
}
a:hover {
color: rgb(233, 24, 90);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<img src="./bg.gif" alt="">
<span> 中心开班信息 </span>
</div>
<div class="box3">
<ul>
<li><div class="k1"></div> <a href="#">8月12日:学历+技能班</a> </li>
<li><div class="k1"></div> <a href="#">8月16日:高考特招班</a> </li>
<li><div class="k1"></div> <a href="#">8月23日:Java精英班</a> </li>
<li><div class="k1"></div> <a href="#">8月31日:学士后强化班</a> </li>
<li><div class="k1"></div> <a href="#">9月5日:大学生就业班</a> </li>
<li><div class="k1"></div> <a href="#">9月9日:企业定向委培班</a></li>
<li><div class="k1"></div> <a href="#">9月16日:网络营销强化班</a> </li>
</ul>
</div>
</div>
</body>
</html>