盒子模型
边框
div {
border: border-width || border-style || border-color;
}
- 边框合并
div {
border-collapse: collapse;
}
基本示例
边框合并
边框会影响盒子实际大小
基本示例
复合写法
影响盒子大小
不撑开盒子情况
基本示例
外边距合并-相邻块
外边距合并-嵌套块
<!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>
div {
width: 300px;
height: 200px;
border-width: 5px;
border-style: solid;
/* border-style: dashed; */
/* border-style: dotted; */
border-color: pink;
}
/* 复合写法 */
.demo1 {
border: 1px solid black;
}
.demo2 {
border-top: 2px dotted pink;
border-bottom: 3px dashed skyblue;
}
.demo3 {
border: 1px solid blue;
border-right: 3px dotted pink;
}
</style>
</head>
<body>
<div></div>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
</body>
</html>
<!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>
table {
width: 500px;
height: 249px;
}
table,
td,
th {
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近7日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>盘龙</td>
<td>⬇️</td>
<td>1124</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>盘龙</td>
<td>⬇️</td>
<td>1124</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>盘龙</td>
<td>⬇️</td>
<td>1124</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>盘龙</td>
<td>⬆️</td>
<td>1124</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>盘龙</td>
<td>⬆️</td>
<td>1124</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>1</td>
<td>盘龙</td>
<td>⬆️</td>
<td>1124</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<!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>
div {
width: 300px;
height: 200px;
background-color: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>
<div>
安排快車本類教授圖書館出發，下載次數爸爸接到我對對外每一個幫我圖片母親，德國就能模式住了搭配軍事刺激財富懷疑重點一笑以及，大學生兒子歲月車輛天氣住宅天堂新聞，被人體制，我也行為有的他也，那種垃圾，這。
</div>
</body>
</html>
<!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>
div {
width: 200px;
height: 200px;
border: skyblue solid;
background-color: pink;
}
/* 上下左右 */
.demo1 {
padding: 5px;
}
.demo2 {
/* 上下5 左右10 */
padding: 5px 10px;
}
.demo3 {
/* 上5px 左右10px 下20px */
padding: 5px 10px 20px;
}
.demo4 {
/* 上5 右10 下20 左 30 顺时针 */
padding: 5px 10px 20px 30px;
}
</style>
</head>
<body>
<div class="demo1">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. A nisi
molestias, veniam nobis doloribus cupiditate maxime fuga odio sunt
commodi?
</div>
<div class="demo2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque ut quia
omnis necessitatibus enim quaerat itaque, aspernatur consectetur doloribus
quasi.
</div>
<div class="demo3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias iusto
impedit debitis incidunt quo doloribus minima accusamus aliquam cum ab.
</div>
<div class="demo4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam iure,
illum pariatur culpa nobis molestiae et quae quod ducimus officia?
</div>
</body>
</html>
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div>
還要評論指揮請點擊上來欣賞首先，任何人魅力遺憾繼續界面統計確實電視台，是一個出席工業可以年輕睡覺樹林，發佈日期，下載可。
</div>
</body>
</html>
<!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>
h1 {
/* 未指定宽度，padding则不会撑开宽度 */
/* 只要有了width属性就会增加宽度 */
/* width: 20px; */
height: 200px;
background-color: pink;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
margin-bottom: 20px;
}
.two {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
<!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>
.damao,
.ermao {
width: 200px;
height: 200px;
background-color: pink;
}
/* 以最大的为准 */
.damao {
margin-bottom: 100px;
}
.ermao {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</body>
</html>
<!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>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* 只要父元素有边框，子元素就不会塌陷 */
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
清除内外边距
html
<!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>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
</body>
</html>
居中示例
块元素居中
行内或行内块元素居中
<!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>
.header {
width: 400px;
height: 200px;
background-color: pink;
/* 只要左右auto 则水平居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
<!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>
.header {
width: 400px;
height: 200px;
background-color: pink;
/* 行内元素或行内块元素只需要父元素设置 text-align：center 即可居中 */
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
<span>里面的文字</span>
</div>
<div class="header">
<img src="./down.png" />
</div>
</body>
</html>
示例
新浪导航
小米侧边栏
综合示例
常见网页布局
<!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>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">你好呀</a>
</div>
</body>
</html>
<!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>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">你好呀</a>
</div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
margin: 100px auto;
}
.box img {
width: 100%;
}
.review {
height: 70px;
font-size: 14px;
padding: 0 28px;
/* margin-top: 30px; */
}
.appraise {
font-size: 12px;
color: #b0b0b0;
padding: 0 28px;
/* margin-top: 20px; */
}
.info {
font-size: 14px;
padding: 0 28px;
/* margin-top: 15px; */
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info .shuxian {
/* display: inline-block; */
width: 20px;
/* background-color: #ebe4e0; */
color: #ebe4e0;
/* background-color: skyblue; */
margin: 0 6px 0 15px;
}
.info .yuan {
color: #ff6700;
}
/* .info em {
font-style: normal;
color: #eb;
} */
</style>
</head>
<body>
<div class="box">
<img src="./img.jpg" alt="" />
<p class="review">大賽配件一流年代意味着主板眼睛，基金圖。</p>
<div class="appraise">来自于 1112141235 的评价</div>
<div class="info">
<h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
<em class="shuxian">|</em>
<!-- <span class="shuxian">|</span> -->
<!-- <div class="shuxian"></div> -->
<span class="yuan">99.9元</span>
</div>
</div>
</body>
</html>
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
}
.banner {
width: 600px;
height: 50px;
background-color: gray;
margin: 10px auto;
}
.box {
width: 600px;
height: 300px;
margin: 0 auto;
background-color: pink;
}
.box li {
float: left;
width: 140px;
height: 300px;
background-color: gray;
margin-right: 13px;
}
.box .last {
float: right;
margin-right: 0;
}
.footer {
margin-top: 10px;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>