本文介绍了网页布局的基本原则，如块元素如何被内容撑开，父元素如何处理溢出的子元素，以及overflow属性的用法。同时，探讨了内外边距的相互作用，特别是垂直外边距的重叠规则。在实际开发中，了解这些概念对于创建响应式和整洁的网页布局至关重要。作业部分展示了CSS在实际网页设计中的应用，包括列表项的样式和鼠标悬停效果。
一般情况下，我们一般不会设置固定高度，都是让他被内部撑开，父元素的高度是被子元素撑开的，块元素宽高是被内容撑开的，如果父元素宽高设置，小于内容区，则内容回溢出。
若父元素设置了，就是设置多少就是多少。子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
使用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>
扫一扫
2977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
