5.1盒模型的定义
盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：
1. 内容区域（Content）： 显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。
2. 内边距（Padding）： 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。
3. 边框（Border）： 包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整，且会增加元素的总宽度和高度。
4. 外边距（Margin）： 元素外部与其他元素之间的距离。外边距不会被背景颜色或图片覆盖，它纯粹是用于控制元素之间的空隙。
盒模型的总宽度和高度计算公式为：
总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
理解盒模型是掌握网页布局的关键，因为它直接影响元素的排列和页面的整体设计
5.2 CSS元素的高度和宽度
1.盒模型的宽度
width : 400px;
盒模型的宽度=左外边距(margin-left)+左边框(border-left)+左内边距(padding-lef)+内容宽度(width)+右内边距(padding-right)+右边框(border-night)+右外边距(margin- right)。
2.盒模型的高度
height: 300px;
盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(paddingtop)+内容高度(height)+下内边距(padding-bottom)+下边框(border-botom)+下外边距(margin-bottom)。
5.3 边距设置和边框设置
5.3.1 外边距设置
5.3.1.1 上外边距
margin-top
5.3.1.2 右外边距
padding-right
5.3.1.3 下外边距
margin-bottom
5.3.1.4 左外边距
margin-lef
5.3.1.5 外边距
5.3.2 外边距的合并
5.3.2.1 行级元素外边距合并
display:imline;
行级元素的外边距合并行为不同于块级元素。通常情况下，行级元素之间的垂直外边距不会合并。然而，如果将 display: inline-block; 应用到行级元素上，那么这些元素的上下外边距可能会发生合并。例如，相邻的 inline-block 元素如果有垂直外边距，它们之间只会显示较大的那个外边距值。
5.3.2.2 块级元素外边距合并
相邻兄弟元素：当两个垂直排列的块级元素有相邻的外边距时，比如第一个元素的 margin-bottom 和第二个元素的 margin-top，这两个外边距会合并为两者中较大的一个。例如，如果第一个元素的 margin-bottom 是 20px，而第二个元素的 margin-top 是 30px，那么最终这两个元素间的距离将是 30px，而不是 50px
父子元素：当一个块级元素内部包含另一个块级元素，并且没有内边距、边框或者浮动来分隔它们时，父元素的 margin-top 与子元素的 margin-top 会发生合并。同样的情况也适用于 margin-bottom。在这种情况下，合并后的外边距取较大者
例如，父元素有一个 40px 的 margin-top，而其子元素有一个 60px 的 margin-top，那么实际呈现出来的顶部外边距将会是 60px 而不是 100px。
空元素：即使是一个空的块级元素，只要它设置了上下外边距，这些外边距也会发生合并。这意味着一个空的 <div> 如果同时设置了 margin-top 和 margin-bottom，它们将合并成一个外边距，高度为两者中的较大值
5.3.3 内边距设置
内边距（Padding）是CSS盒模型中的一个重要属性，它定义了元素内容与边框之间的空白区域。通过调整内边距，可以控制内容在元素内的布局，并且有助于提高可读性和美观性。内边距可以通过四个方向来单独设置，也可以使用简写形式一次性设置所有方向的内边距。
单独设置内边距
padding-top：设置元素顶部的内边距。padding-bottom：设置元素底部的内边距。
padding-left：设置元素左侧的内边距。padding-right：设置元素右侧的内边距。
5.3.4 边框设置
1.上边框
语法:border-top:border-stylelborder-widthlborder-color参数:该属性是复合属性。需要通过参数设置来实现。
2.右边框
语法:border-right:border-stylelborder-widthlborder-color参数:该属性是复合属性。需要通过参数设置来实现。
3.下边框
达:border-bottom:border-stylelborder-widthlborder-color参数:该属性是复合属性。需要通过参数设置来实现。
4.左边框
语法:border-left:border-style lborder-width lborder-color
5.3.4.5 边框样式
5.3.4.6 边框宽度
5.3.4.7 边框颜色
示例：
border: thick double #ff0000 ;/*5.3 边距设置和边框设置（实线虚线）颜色solid dashed dotted double*/
5.3.5 新增边框属性
5.3.5.1圆角边框
border-radius:25px;/*5.3.5.1圆角边框*/
5.3.5.2阴影边框
box-shadow:-15px 20px 50px #00ff00;/*5.3.5.2阴影边框 左偏移量 上偏移量 模糊距离 颜色*/
5.3.5.3图片绘制边框
5.4 CSS元素的定位
5.4.1 static 定位
定义：这是所有元素默认的定位方式。使用静态定位的元素按照文档流正常排列，不受top、right、bottom、left等偏移属性的影响。
特点：不改变元素在正常文档流中的位置，因此不能通过定位属性来移动元素。
应用场景：当不需要对元素进行特殊定位时使用。
position:static;
.static {
position: static;
}
5.4.2 relative定位
定义：相对定位会相对于元素原本应该出现的位置进行定位。设置相对定位后，可以通过top、right、bottom、left属性来调整元素的位置。
特点：元素仍然占据原来的空间，不会影响其他元素的布局。但是，它的视觉位置可以被移动。
应用场景：常用于需要轻微调整元素位置但又不想影响整体布局的情况。
.relative {
position: relative;
top: 20px;left: 30px;
}
5.4.3 absolute定位
定义：绝对定位的元素会被完全从文档流中移除，然后根据最近的非static定位的祖先元素进行定位；如果没有这样的祖先元素，则基于初始包含块（通常是视口）。
特点：绝对定位的元素不再占用文档流中的空间，所以它可以覆盖其他元素。如果设置了宽度和高度，那么元素尺寸会由内容决定。
应用场景：适合创建弹出层、工具提示等独立于文档流的元素。
.absolute {
position: absolute;
top: 20px;right: 30px;
}
5.4.3.1 相对浏览器绝对定位
position;albsolute;
top:10px;right:30px;5.4.3.1 相对浏览器绝对定位
5.4.3.2 相对父盒子绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8"/>
<iide>示例 5.17</iide>
<style >
.father{
background-color:#FFCCFF;
border : 2px solid red ;
padding :5px ;
}
.father div{
width : 100px;height :20px ;padding :10px ;
margin :10px;
border :2px dashed blue ;
background-color :#CCFFFF;
}
.father p{
border :2px dotted green ;
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class = " father" >
<h2>父盒子</h2>
<div style="float:right;">右浮动盒子</div>
<div >标准流盒子 2</div>
<div >标准流盒子 3</div>
<p>css中,有一个oa!属性,默认为 none,也就是标准流通常的情况。若果将noat 属性的值置为le或 npht,元素就会向其父级元素的左侧或右侧靠近,同时默认的情况下,盒子的宽度不再伸展,而根据盒子里面的内容的宽度确定。</p>
</div>
</body>
</html>
5.4.4 fixed定位
定义：固定定位的元素与绝对定位类似，但它相对于浏览器窗口而不是最近的已定位祖先元素。无论用户如何滚动页面，固定定位的元素都会保持在屏幕上的同一位置。
特点：固定定位同样会使元素脱离文档流，且该元素的位置不受滚动条的影响。
应用场景：适用于导航栏、广告横幅等需要始终显示在屏幕上某个位置的元素。
5.5 CSS元素的浮动
CSS中的float属性是一个强大的布局工具，它允许块级元素向左或向右移动，并且周围的文本和其他内容会环绕这个浮动的元素。最初，float是为了让文字可以围绕图片而设计的，但后来它被广泛应用于创建复杂的网页布局。
5.5.1 盒子的浮动添加
定义：float属性指定一个元素应该沿着其容器的左侧或右侧放置，允许文本和内联元素环绕它。浮动元素从正常的文档流中移除，但仍然保持部分流动性（与绝对定位不同）。
特点：浮动元素不会影响前面的内容，但是会影响后面的内容。后面的元素会重新排列以适应浮动元素的位置。
应用场景：常用于多列布局、图像环绕文本等场景。
left：元素向左浮动。right：元素向右浮动。
none：默认值，表示元素不浮动。inherit：继承父元素的float属性。
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}
.float-inherit {
float: ingerit;
}5.5.2 盒子的浮动清除
由于浮动会导致某些布局上的问题，例如包含浮动元素的父元素高度塌陷，因此需要使用清除浮动的方法来解决这些问题。常见的清除浮动方法包括：
额外标签法：在最后一个浮动元素后添加一个空的HTML元素，并设置clear:both;。
父级添加overflow属性：给包含浮动元素的父元素添加overflow: hidden;或overflow: auto;。
伪类清除：使用:after伪元素配合content, display, clear等属性来实现。
BFC (Block Formatting Context)：通过创建一个新的BFC环境来包裹浮动元素，通常可以通过设置overflow: hidden;或其他触发BFC的方式实现。
.clearfix::after {
content: "";
display: table;clear: both;
}
5.6 综合案例——昵心美食空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>昵心美食空间</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
background-color: #fff999;
}
a {
color: red;
text-decoration: none;
}
.all {
width: 700px;
height: 650px;
margin: 10px auto;
padding: 5px;
background-image: url('bg1.jpg');
background-size: cover;
}
.banner, .menu, .bottom {
width: 100%;
height: 70px;
}
.menu {
height: 40px;
}
.main {
width: 700px;
height: 450px;
margin: 5px 0;
position: relative;
overflow: hidden;
}
.left, .right {
width: 150px;
height: 440px;
border: 1px solid #999;
float: left;
overflow: hidden;
}
.middle {
width: 384px;
height: 450px;
margin: 0 5px;
float: left;
font-size: 20px;
font-family: "楷体";
font-weight: 700;
color: #0000ff;
}
.one {
width: 380px;
height: 155px;
border: 1px solid #999;
padding: 10px;
box-sizing: border-box;
}
.two {
width: 255px;
height: 100px;
border: 1px solid #999;
margin: 20px 0;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.three {
width: 380px;
height: 135px;
border: 1px solid #999;
padding: 10px;
box-sizing: border-box;
}
.bottom {
width: 700px;
height: 70px;
text-align: center;
font-family: "楷体";
}
</style>
</head>
<body>
<div class="all">
<div class="banner">
<img src="img/banner.jpg" width="700" height="70" alt="Banner"/>
</div>
<div class="menu">
<img src="img/menu.jpg" width="690" height="40" alt="Menu"/>
</div>
<div class="main">
<div class="left">
<marquee direction="up">
<img src="img/mm_1.jpg" width="150" height="140" alt="Image"/>
<img src="img/mm_2.jpg" width="150" height="140" alt="Image"/>
<img src="img/mm_3.jpg" width="150" height="140" alt="Image"/>
</marquee>
</div>
<div class="middle">
<div class="one">
<img src="img/font.jpg" width="25" height="25" alt="Icon"/> 为您推荐
<br/><br/>
<img src="img/x_1.jpg" width="80" height="40" alt="Recommendation"/>
<img src="img/x_2.jpg" width="80" height="40" alt="Recommendation"/>
<img src="img/x_3.jpg" width="80" height="40" alt="Recommendation"/>
<img src="img/x_4.jpg" width="80" height="40" alt="Recommendation"/>
<img src="img/x_5.jpg" width="80" height="40" alt="Recommendation"/>
<img src="img/x_6.jpg" width="80" height="40" alt="Recommendation"/>
</div>
<div class="two">
<h1>昵心美食空间</h1>
</div>
<div class="three">
<img src="img/font.jpg" width="25" height="25" alt="Icon"/>
<br/>
<a href="#">1. 火锅团购</a><br/>
<a href="#">2. 烧烤团购</a><br/>
<a href="#">3. 自助餐团购</a><br/>
<a href="#">4. 新春特惠</a><br/>
</div>
</div>
<div class="right">
<marquee direction="up">
<img src="img/good_1.jpg" width="150" height="140" alt="Image"/>
<img src="img/good_2.jpg" width="148" height="140" alt="Image"/>
<img src="img/good_3.jpg" width="148" height="140" alt="Image"/>
</marquee>
</div>
</div>
<div class="bottom">
<hr color="#0000ff">
版权所有©昵心美食空间<br/>
地址:江门市大学路XXX号 邮编:500000 电话:0750-9999999
</div>
</div>
</body>
</html>
扫一扫
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
