本文介绍了如何利用CSS来实现网页布局，包括盒子模型的组成：边框、内边距、外边距和实际内容。通过设置border、padding和margin属性，可以调整元素的外观和位置。此外，还讲解了如何实现盒子水平居中、外边距合并以及创建圆角边框和阴影效果。示例中展示了导航栏的样式设计，包括颜色、边框和hover状态的改变。
利用CSS来摆放盒子，更好地实现网页布局；
盒子模型组成：边框border、内padding、外边距margin、实际内容content；
边框：
- border-width：边框粗细 px
- border-style：none | hidden | solid | dotted | dashed
- border-color:
- border-top（bottom | left | right）
- border-collapse：collapse表格细线边框，合并相邻边框
- 复合写法：border：1px solid red(无顺序）
内边距：
- padding-left | right | bottom | top
- padding-：一个值（上下左右），两个值（上下、左右）、三个值（上、左右、下）、四个值（上、下、左、右）
- padding影响本身盒子大小（有高宽）
外边距：
- margin-left | right | bottom | top
- margin：一个值（上下左右），两个值（上下、左右）、三个值（上、左右、下）、四个值（上、下、左、右）
- margin影响本身盒子大小（有高宽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #fcfffc;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
display: inline;
padding: 0 20px;
}
a:hover {
background-color: rgb(190, 18, 18);
color: rgb(187, 40, 162);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">电脑端</a>
</div>
</body>
</html>
盒子水平居中：块级（margin：0 auto）；行内（给父元素添加text-align：center）
外边距合并：相邻盒子（上有top，下有bottom取较大值）嵌套盒子（塌陷 1.为父元素定义上边框2.为父元素定义内边框3.为父元素添加overflow：hidden）
但网页元素有默认的内外边框，首先应消除网页元素的内外边距，*{margin ：0；padding：0；}，行内元素尽量只设置内外边距
圆角边框：
- border-radius：数值/百分比
- border-top-left-radius、border-top-right-radius
盒子阴影：
- box-shadow：h-shadow、v-shadow、blur（阴影模糊距离）
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
