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

1.web前端(盒子模型)

时间:2020-03-24 23:38:51      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:padding   技术   round   color   title   type   style   text   set   

A.

1.内边距,边框影响盒子大小

定义好盒子大小以后,再定义内边距和边框的时候,在原有的盒子大小基础上(原有的盒子啥也不变,定义完就完了)加上内边距和边框。就像穿上一身衣服了一样。

练习

技术图片

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{
        width:300px;
        height:150px;
        background-color: pink;
        padding:75px 100px;  
    }
    .small{
        width:300px;
        height: 150px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="box">
       <div class="small"></div>
    </div>
</body>
</html>

2.

(1)子盒子只继承父盒子的宽度,不继承高度,高度不定义的话就是0

(2)子盒子没有定义宽度,继承了父盒子的宽度,定义左右内边距,只要这个内边距不大于父盒子的宽度,就不会撑大盒子(左右方向)。如果定义上下内边距的话,子盒子还是会被撑大的。

1.web前端(盒子模型)

标签:padding   技术   round   color   title   type   style   text   set   

原文地址:https://www.cnblogs.com/zhaojiayu/p/12562683.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!