码迷，mamicode.com
首页 > Web开发 > 详细

css-盒子模型

时间：2019-11-28 23:10:09      阅读：107      评论：0      收藏：0      [点我收藏+]

标签：距离   class   cal   bottom   ref   span   pos   tom   pen   

一、盒子模型

盒子模型：可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念

技术图片、

 

border

三要素：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>

padding

<!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>

1.四个参数

<!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>

2.三个参数

<!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>

3.二个参数

<!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>

4.一个参数

<!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>

margin

盒子与盒子之间的距离，必须四面都要有参照物

<!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>

 

 

 

 

 

 

 

 

 

一、盒子模型

盒子模型：可以把页面上的每一个元素看成一个盒子，这是一个抽象的概念

技术图片

border

三要素：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>

 

padding

<!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>

1.四个参数

<!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>

2.三个参数

<!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>

3.二个参数

<!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>

4.一个参数

<!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>

 

margin

盒子与盒子之间的距离，必须四面都要有参照物

<!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>

 

css重置

浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致，公司里会根据每个公司的业务不同，会自己写一套属于自己公司的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>

 

css-盒子模型

标签：距离   class   cal   bottom   ref   span   pos   tom   pen   

原文地址：https://www.cnblogs.com/zgzeng/p/11954346.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！