标签:距离 class cal bottom ref span pos tom pen
一、盒子模型
盒子模型:可以把页面上的每一个元素看成一个盒子,这是一个抽象的概念
、
三要素:solid(样式) 1px(粗细)red(颜色)
1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width: 200px; height: 200px; border:1px solid red; } </style> </head> <body> <div class="box"></div> </body> </html>
2. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width: 200px; height: 200px; border-top:20px solid red; border-right:20px double skyblue; border-bottom:20px dotted purple; border-left:20px dashed green; } </style> </head> <body> <div class="box"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width: 200px; height: 200px; border:5px solid red; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; } </style> </head> <body> <div class="box">很高兴认识你</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width: 200px; height: 200px; border:5px solid red; /*四个参数:上右下左*/ padding:20px 30px 40px 50px; } </style> </head> <body> <div class="box">很高兴认识你</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width: 200px; height: 200px; border:5px solid red; /*三个参数:上右下,左=右*/ padding:20px 30px 40px; } </style> </head> <body> <div class="box">很高兴认识你</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width: 200px; height: 200px; border:5px solid red; /*二个参数:上=下,左=右*/ padding:20px 30px; } </style> </head> <body> <div class="box">很高兴认识你</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box { width: 200px; height: 200px; border:5px solid red; /*一个参数:上=下=左=右*/ padding:20px; } </style> </head> <body> <div class="box">很高兴认识你</div> </body> </html>
盒子与盒子之间的距离,必须四面都要有参照物
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .box{ background:green; /*margin-top:100px;*/ /*margin-right:100px;*/ /*margin-bottom:100px;*/ /*margin-left:100px;*/ /*div居中*/ margin:0 auto; } .box1{ height:200px; width:200px; background:indianred; } </style> </head> <body> <div class="box"> 昨夜星辰昨夜风,画楼洗盘四呃呃和 深刻还是动合视觉系徐好的u扽昨夜星辰昨夜风,画楼洗盘四呃呃和 深刻还是动合视觉系徐好的u扽 </div> <div class="box1">参照物</div> </body> </html>
注意四点:
A:盒子模型要牢记;
B:padding调整外部div内边距,它调整的是自身大小,所以如果不希望破坏外观,则尽量使用margin布局(padding有可能撑大外盒子,但如果是margin过大,则盒子内容会被挤出,但不会改变盒子本身大小);
C:内部div和外部div定位时需要找到边界,外部div如没有设置border,则内部div的margin设置时会一直往上找,直到找到边界位置。
D:内部相邻div间的margin,取值为两个div各自设置margin的最大值,而不是相加值。
padding调整外部div内边距,它调整的是自身大小,所以如果不希望破坏外观,则尽量使用margin布局(padding有可能撑大外盒子,但如果是margin过大,则盒子内容会被挤出,但不会改变盒子本身大小);
padding调整外部div内边距,它调整的是自身大小 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内外边距问题总结</title> <style> .pad{ height:200px; width:200px; background: green; margin-left:100px; } .mar{ height:200px; width:200px; background:brown; } .mar>div{ height:100px; width:100px; background: plum; } </style> </head> <body> <div class="pad">padding测试</div> <div class="mar"><div>margin测试</div></div> </body> </html>
margin过大,则盒子内容会被挤出,但不会改变盒子本身大小 <title>内外边距问题总结</title> <style> .pad{ height:200px; width:200px; background: green; margin-left:100px; } .mar{ height:200px; width:200px; background:brown; } .mar>div{ height:100px; width:100px; background: plum; margin-left:200px; } </style> </head> <body> <div class="pad">padding测试</div> <div class="mar"><div>margin测试</div></div> </body> </html>
内部div和外部div定位时需要找到边界,外部div如没有设置border,则内部div的margin设置时会一直往上找,直到找到边界位置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内外边距问题总结</title> <style> .pad{ height:200px; width:200px; background: green; margin-left:100px; } .mar{ height:200px; width:200px; background:brown; } .mar>div{ height:100px; width:100px; background: plum; margin-top:100px; } </style> </head> <body> <div class="pad">padding测试</div> <div class="mar"><div>margin测试</div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内外边距问题总结</title> <style> .pad{ height:200px; width:200px; background: green; margin-left:100px; } .mar{ height:200px; width:200px; background:brown; border:1px solid red; } .mar>div{ height:100px; width:100px; background: plum; margin-top:100px; } </style> </head> <body> <div class="pad">padding测试</div> <div class="mar"><div>margin测试</div></div> </body> </html>
内部相邻div间的margin,取值为两个div各自设置margin的最大值,而不是相加值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内外边距问题总结</title> <style> .pad{ height:200px; width:200px; background: green; margin-bottom:50px; } .mar{ height:200px; width:200px; background:brown; border:1px solid red; margin-top:100px; } .mar>div{ height:100px; width:100px; background: plum; } </style> </head> <body> <div class="pad">padding测试</div> <div class="mar"><div>margin测试</div></div> </body> </html>
盒子模型:可以把页面上的每一个元素看成一个盒子,这是一个抽象的概念
三要素:solid(样式) 1px(粗细)red(颜色)
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
border:1px solid red;
}
</style>
?
</head>
<body>
<div class="box"></div>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
border-top:20px solid red;
border-right:20px double skyblue;
border-bottom:20px dotted purple;
border-left:20px dashed green;
}
?
</style>
?
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
border:5px solid red;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
}
?
</style>
?
</head>
<body>
<div class="box">很高兴认识你</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
border:5px solid red;
/*四个参数:上右下左*/
padding:20px 30px 40px 50px;
}
?
</style>
?
</head>
<body>
<div class="box">很高兴认识你</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
border:5px solid red;
?
/*三个参数:上右下,左=右*/
padding:20px 30px 40px;
}
?
</style>
?
</head>
<body>
<div class="box">很高兴认识你</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
border:5px solid red;
?
/*二个参数:上=下,左=右*/
padding:20px 30px;
}
?
</style>
?
</head>
<body>
<div class="box">很高兴认识你</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box {
width: 200px;
height: 200px;
border:5px solid red;
?
/*一个参数:上=下=左=右*/
padding:20px;
}
?
</style>
?
</head>
<body>
<div class="box">很高兴认识你</div>
</body>
</html>
盒子与盒子之间的距离,必须四面都要有参照物
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box{
background:green;
/*margin-top:100px;*/
/*margin-right:100px;*/
/*margin-bottom:100px;*/
/*margin-left:100px;*/
/*div居中*/
margin:0 auto;
}
.box1{
height:200px;
width:200px;
background:indianred;
}
?
</style>
?
</head>
<body>
<div class="box">
昨夜星辰昨夜风,画楼洗盘四呃呃和 深刻还是动合视觉系徐好的u扽昨夜星辰昨夜风,画楼洗盘四呃呃和 深刻还是动合视觉系徐好的u扽
</div>
<div class="box1">参照物</div>
</body>
</html>
注意四点:
A:盒子模型要牢记;
B:padding调整外部div内边距,它调整的是自身大小,所以如果不希望破坏外观,则尽量使用margin布局(padding有可能撑大外盒子,但如果是margin过大,则盒子内容会被挤出,但不会改变盒子本身大小);
C:内部div和外部div定位时需要找到边界,外部div如没有设置border,则内部div的margin设置时会一直往上找,直到找到边界位置。
D:内部相邻div间的margin,取值为两个div各自设置margin的最大值,而不是相加值。
padding调整外部div内边距,它调整的是自身大小,所以如果不希望破坏外观,则尽量使用margin布局(padding有可能撑大外盒子,但如果是margin过大,则盒子内容会被挤出,但不会改变盒子本身大小);
padding调整外部div内边距,它调整的是自身大小
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距问题总结</title>
<style>
.pad{
height:200px;
width:200px;
background: green;
margin-left:100px;
?
}
.mar{
height:200px;
width:200px;
background:brown;
}
.mar>div{
height:100px;
width:100px;
background: plum;
}
</style>
?
</head>
<body>
<div class="pad">padding测试</div>
<div class="mar"><div>margin测试</div></div>
?
</body>
</html>
margin过大,则盒子内容会被挤出,但不会改变盒子本身大小
<title>内外边距问题总结</title>
<style>
.pad{
height:200px;
width:200px;
background: green;
margin-left:100px;
?
}
.mar{
height:200px;
width:200px;
background:brown;
}
.mar>div{
height:100px;
width:100px;
background: plum;
margin-left:200px;
}
</style>
?
</head>
<body>
<div class="pad">padding测试</div>
<div class="mar"><div>margin测试</div></div>
?
</body>
</html>
内部div和外部div定位时需要找到边界,外部div如没有设置border,则内部div的margin设置时会一直往上找,直到找到边界位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距问题总结</title>
<style>
.pad{
height:200px;
width:200px;
background: green;
margin-left:100px;
?
}
.mar{
height:200px;
width:200px;
background:brown;
}
.mar>div{
height:100px;
width:100px;
background: plum;
margin-top:100px;
}
</style>
?
</head>
<body>
<div class="pad">padding测试</div>
<div class="mar"><div>margin测试</div></div>
?
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距问题总结</title>
<style>
.pad{
height:200px;
width:200px;
background: green;
margin-left:100px;
?
}
.mar{
height:200px;
width:200px;
background:brown;
border:1px solid red;
}
.mar>div{
height:100px;
width:100px;
background: plum;
margin-top:100px;
}
</style>
?
</head>
<body>
<div class="pad">padding测试</div>
<div class="mar"><div>margin测试</div></div>
?
</body>
</html>
内部相邻div间的margin,取值为两个div各自设置margin的最大值,而不是相加值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内外边距问题总结</title>
<style>
.pad{
height:200px;
width:200px;
background: green;
margin-bottom:50px;
?
}
.mar{
height:200px;
width:200px;
background:brown;
border:1px solid red;
margin-top:100px;
}
.mar>div{
height:100px;
width:100px;
background: plum;
}
</style>
?
</head>
<body>
<div class="pad">padding测试</div>
<div class="mar"><div>margin测试</div></div>
?
</body>
</html>
浏览器在解析某些标签的时候,本身就自带了一些样式,导致我们写样式的时候就会效果不一致,公司里会根据每个公司的业务不同,会自己写一套属于自己公司的RESETCSS
https://meyerweb.com/eric/tools/css/reset/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style>
#top{
height:35px;
background:black;
}
?
#content{
height:500px;
background:ghostwhite;
}
?
#bottom{
height:60px;
background:dimgrey;
}
?
#top>div{
height:35px;
width:800px;
background:blue;
margin:0 auto;
}
?
#content>div{
height:500px;
width:800px;
background:cornflowerblue;
margin:0 auto;
}
?
#bottom>div{
height:60px;
width:800px;
background:rebeccapurple;
margin:0 auto;
}
</style>
</head>
<body>
<div id="top"><div></div></div>
<div id="content"><div></div></div>
<div id="bottom"><div></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style>
*{
/*将网页的白边去除了*/
margin:0;
padding:0;
}
#top{
height:35px;
background:black;
}
?
#content{
height:500px;
background:ghostwhite;
}
?
#bottom{
height:60px;
background:dimgrey;
}
?
#top>div{
height:35px;
width:800px;
background:blue;
margin:0 auto;
}
?
#content>div{
height:500px;
width:800px;
background:cornflowerblue;
margin:0 auto;
}
?
#bottom>div{
height:60px;
width:800px;
background:rebeccapurple;
margin:0 auto;
}
</style>
</head>
<body>
<div id="top"><div></div></div>
<div id="content"><div></div></div>
<div id="bottom"><div></div></div>
</body>
</html>
标签:距离 class cal bottom ref span pos tom pen
原文地址:https://www.cnblogs.com/zgzeng/p/11954346.html