CSS3 盒子模型全面掌握 -cyy
作者：互联网
元素居中定义与外边距定义：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
article{
border:1px solid #ddd;
}
div{
border:1px solid red;
margin:30px;
padding:50px;
}
</style>
</head>
<body>
<article>
<div>
</div>
</article>
</body>
</html>
边距合并与负值使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
body{
padding:100px;
}
article{
border:1px solid #ddd;
padding:50px 0;
}
div{
border:1px solid red;
/* 设置负值会溢出 */
margin-left:-20px;
margin-right:-20px;
text-align:center;
}
h2{
border:1px solid blue;
/* 上下间距存在合并情况，会取两个边距中最大的那个元素 */
margin-top:30px;
margin-bottom:60px;
}
</style>
</head>
<body>
<h2>h2</h2>
<h2>h2</h2>
<article>
<div>
aaa
</div>
</article>
</body>
</html>
尺寸限制与内边距使用方法：
box-sizing: border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
body{
padding:10px;
}
.div1{
border:10px solid;
margin:20px;
padding:40px;
width:300px;
height:100px;
}
.div2{
border:10px solid;
margin:20px;
padding:40px;
box-sizing: border-box;
width:300px;
height:100px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
元素边框的使用规范：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
body{
padding:10px;
}
.div{
border-style:solid;
border-top-width:10px;
border-right-width:5px;
border-top-color:red;
border-right-color:blue;
margin:20px;
padding:40px;
width:300px;
height:100px;
}
p>em{
border-bottom:1px solid green;
}
</style>
</head>
<body>
<div class="div">div</div>
<p>this is <em>cyy</em></p>
</body>
</html>
圆角控制的详细使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
body{
padding:10px;
}
.div{
border-radius:20px 30px 40px 10px;
border:1px solid red;
margin:20px;
padding:40px;
width:300px;
height:100px;
}
p>em{
border-bottom:5px solid red;
border-radius:50%;
}
</style>
</head>
<body>
<div class="div">div</div>
<p><em>cyy</em></p>
</body>
</html>
轮廓线使用技巧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;padding:0;
}
.div{
/* 轮廓线 */
outline:10px double #ddd;
border:10px solid red;
padding:50px;
width:300px;
}
h1{background:green;}
</style>
</head>
<body>
<div class="div">div</div>
<h1>h1</h1>
</body>
</html>
可以看到轮廓线和边框线的区别：
轮廓线不占空间，边框线占据空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;padding:0;
}
.div{
/* 轮廓线 */
outline:10px double #ddd;
border:10px solid red;
padding:50px;
width:300px;
}
h1{background:green;}
.no_line{
/* 去掉input的轮廓线 */
outline:none;
}
</style>
</head>
<body>
<div class="div">div</div>
<h1>h1</h1>
<input type="text" class="no_line">
<input type="text">
</body>
</html>
元素显示的多种模型控制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
div>a{
text-decoration: none;
display:block;
}
div>a:hover{
color:red;
background:pink;
}
ul>li{
display:inline-block;
width:200px;height:20px;
text-align: center;line-height:20px;
border:1px solid;
}
ul>li:hover{
color:red;
background:pink;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<a href="">html</a>
<a href="">css</a>
</div>
<hr>
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
使用visibility控制元素隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
div{
border:1px solid;
margin:20px;
background:pink;
}
div:first-of-type{
/* display:none;不占空间 */
/* display:none; */
/* visibility和opacity类似，相当于眼睛看不见，但依然占据空间 */
/* visibility:hidden; */
opacity: 0;
}
</style>
</head>
<body>
<div>
div1
</div>
<div>
div2
</div>
</body>
</html>
display:none;不占空间
visibility和opacity类似，相当于眼睛看不见，但依然占据空间
overflow溢出隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
div:first-of-type{
border:1px solid;
margin:20px;
background:pink;
width:200px;
height:100px;
overflow:auto;
}
div:nth-of-type(2){
border:1px solid;
margin:20px;
background:pink;
width:200px;
height:100px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
</div>
<div>
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
</div>
</body>
</html>
fill-available 自动撑满可用空间：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:100%;
height:500px;
background:lightblue;
}
p{
border:1px solid;
background:pink;
width:200px;
height:-webkit-fill-available;
}
</style>
</head>
<body>
<div>
<p>111</p>
</div>
</body>
</html>
fit-content根据内容自适应尺寸：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
div{
background:lightblue;
margin:0 auto;
width:fit-content;
}
</style>
</head>
<body>
<div>111</div>
</body>
</html>
其实我感觉跟display:inline-block;差不多……
max-content & min-content 盒子根据内容尺寸自适应：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="关键词1，关键词2，关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题</title>
<style>
*{
margin:0;
padding:0;
}
article{
/* width:min-content; */
width:max-content;
}
div{
background:lightblue;
margin-bottom:10px;
padding:10px;
}
</style>
</head>
<body>
<article>
<div>
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
</div>
<div>
层叠样式表。
</div>
</article>
</body>
</html>
标签：CSS3,盒子,solid,margin,cyy,padding,width,div,border 来源： https://www.cnblogs.com/chenyingying0/p/13939500.html