盒子模型
页面布局要学习三大核心，盒子模型、浮动、定位。
网页布局的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子BOX。
- 利用CSS设置好盒子样式，然后摆放到相应位置。
- 往盒子里装内容。
网页布局的核心本质：利用CSS摆盒子。
盒子模型（BOX Model）组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器。
CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、实际内容。
边框（border）
border-width, border-style, border-color。
border-width: 5px;
border-width: 2px 1.5em;
border-width: 1px 2em 1.5cm;
border-width: 1px 2em 0 4rem;
border-width: inherit;
border-width: thin;
border-width: medium;
border-width: thick;
|
border-style: dashed;
border-style: dotted solid;
border-style: hidden double dashed;
border-style: none solid dotted dashed;
border-style: inherit;
border-style: initial;
|
边框的复合写法
表格的细线边框
border-collapse: collapse;
border-collapse: separate;
|
注意点
边框会影响盒子的实际大小。
内边距（padding）
语法:
padding: 1em;
padding: 5% 10%;
padding: 1em 2em 2em;
padding: 2px 1em 0 1em;
|
注意点
内边距会影响盒子的实际大小。
如果盒子没有指定宽高，padding则不会影响盒子大小
padding 案例
新浪导航栏
<!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;
color: #4c4c4c;
border-top: 3px;
border-top-color: #ff8500;
border-top-style: solid;
border-bottom: 1px;
border-bottom-color: #edeef0;
border-bottom-style: solid;
line-height: 41px;
}
.nav a {
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
display: inline-block;
padding: 0px 20px;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
border-bottom-style: solid;
border-bottom-color: #3a8f57;
}
</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）
用法:
形式语法: [ | | auto ]{1,4}
margin: style 举例： margin: 1em;
margin: vertical horizontal 举例： margin: 5% auto;
margin: top horizontal bottom 举例： margin: 1em auto 2em;
margin: top right bottom left 举例： margin: 2px 1em 0 auto;
|
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度。
- 盒子的左右外边距设置为auto。
margin: 0 auto
注意：上述居中写法是让块级元素水平居中，行内元素或行内块元素水平居中是通过给父级元素添加text-align:center即可。
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义内上边距
- 可以为父元素添加
overflow: hidden;
- 还有其他方法，比如浮动，固定，绝对值定位的盒子不会出现塌陷问题。
清楚内外边距
* {
margin: 0;
padding: 0;
}
|
注意：为了兼顾兼容性，行内元素一般只设置左右内外边距。但是转换为块元素或行内块元素就可以设置。
综合案例
产品卡片
<!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>
body {
background-color: #F5F5F5;
}
.card {
background-color: #FFFFFF;
display: inline-block;
width: 234px;
height: 260px;
text-align: center;
padding: 20px 0;
}
.card img {
width: 160px;
height: 160px;
}
.item {
font-weight: 400;
font-size: 14px;
margin: 0 10px 2px 10px;
}
.des {
display: inline-block;
font-size: 12px;
color: #b0b0b0;
margin: 0 10px 10px 10px;
}
.price {
color: #ff6700;
}
</style>
</head>
<body>
<div class="card">
<img src="mi10.webp" alt="">
<h3 class="item">小米10 至尊版</h4>
<p class="des">120X 变焦/120W秒充/120Hz屏幕</p>
<p class="price">5299元起</p>
</div>
</body>
</html>
|
案例二：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.card {
width: 248px;
height: 163px;
background-color: #fff;
margin: 100px auto;
border: 1px solid #ccc;
}
.title {
height: 32px;
line-height: 32px;
padding: 0 12px 0 12px;
border: 1px dotted #ccc;
padding-left: 15px;
}
.title_text {
font-weight: 400;
font-size: 14px;
}
.info {
padding-top: 7px;
}
.info li {
list-style: none;
font-size: 12px;
line-height: 23px;
padding-left: 20px;
}
.info li a {
text-decoration: none;
color: #666;
}
.info ul li a:hover {
text-decoration: underline;
}
</style>
<body>
<div class="card">
<div class="title">
<h4 class="title_text">品优购快报</h4>
</div>
<div class="info">
<ul>
<li><a href="#">【特惠】 爆款耳机5折秒</a></li>
<li><a href="#1">【特惠】 母亲节，健康好礼低至5折</a></li>
<li><a href="#2">【特惠】 爆款耳机5折秒</a></li>
<li><a href="#4">【特惠】 9.9元洗100张照片</a></li>
<li><a href="#4">【特惠】 爆款耳机5折秒</a></li>
</ul>
</div>
</div>
</body>
</html>
|
圆角边框
border-radius: 1em/5em;
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
|
border-radius: 4px 3px 6px / 2px 4px;
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
|
文字阴影
语法
text-shadow: 1px 1px 2px black;
text-shadow: #fc0 1px 0 10px;
text-shadow: 5px 5px #558abb;
text-shadow: white 2px 5px;
text-shadow: 5px 10px;
|
