盒模型

房东的喵

于 2020-04-29 17:08:30 发布

阅读量113

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/105844212

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.盒模型的概念
如果CSS对HTML文档元素生成一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么我们可以形象的将其看作一个盒子

CSS围绕这些盒子产生一种“盒子模型”概念，通过定义一系列与盒子有关的属性（内容、填充、边框、边界），可以控制各个盒子乃至整个HTML文档的表现效果和布局结构

虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分

2.盒模型的组成

CSS盒子模式都具备这些属性：
内容（content）、填充（padding）、边框（border）、边界（margin）

3.盒模型相关属性

border：边框宽度 边框风格 边框颜色 ；

边框宽度：border-width：
边框样式：border-color：
边框样式：border-style：solid（实线）/dashed（虚线）/dotted（点划线）/double（双线）

可单独设置一方向边框，如：
底边框：border-bottom：边框宽度 边框风格 边框颜色
左边框：border-left：边框宽度 边框风格 边框颜色
右边框：border-right：边框宽度 边框风格 边框颜色
上边框：border-top：边框宽度 边框风格 边框颜色

padding的使用方法
padding设定页面中一个元素内容（content）到元素的边缘（boder）之间的距离。背景色和背景图像会覆盖padding和content组成的区域

用法：
（1）用来调整内容在容器中的位置关系
（2）用来调整子元素在父元素中的位置关系
注：padding属性需要添加在父元素上
（3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，则需要从元素宽或高上减掉后添加的padding属性

属性值的4种方式：
四个值：上 右 下 左{padding：10px 20px 30px 40px；}
三个值：上 左右 下{padding：10px 20px 30px;}
二个值：上下 左右 {padding：10px 20px；}
一个值：四个方向{padding：2px；}
可单独设置一个方向的填充 如
padding-top: 10px;  
padding-left: 10px; 
padding-bottom: 10px;
 padding-right: 10px;

例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box {width: 960px; border: #000 solid 5px;overflow: hidden;}
        .box_l {width: 300px;height: 400px; background: #f00; float: left; padding: 20px;}
        .box_c, .box_r {width: 200px;height: 200px;float: left;padding: 20px;}
        .box_c {background: #f1f1ff;}
        .box_r {background: #f1f1f1 url(xiyou.png) no-repeat right bottom;}
        </style>
    </head>
    <body>
    <div class="box">
        <div class="box_l">西安邮电大学（Xi’an University of Posts & Telecommunications）简称“西邮”，位于世界历史名城古都西安，创建于1950年，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
        <div class="box_c">西安邮电大学（Xi’an University of Posts & Telecommunications）简称“西邮”，位于世界历史名城古都西安，创建于1950年，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
        <div class="box_r">西安邮电大学（Xi’an University of Posts & Telecommunications）简称“西邮”，位于世界历史名城古都西安，创建于1950年，是中华人民共和国工业和信息化部与陕西省政府共建高校、陕西省省属高水平大学、教育部“卓越工程师教育培养计划”实施高校、国家级大学生创新创业训练计划立项高校、教育部”新工科研究与实践项目“入选高校、长安联盟、CDIO工程教育联盟成员单位，中国人民解放军后备军官选拔培养基地、全国首批试办边防军人子女预科班的高校、西北地区唯一承担亚太电信组织和东盟培训任务的高校，已发展成一所以工学为主，以信息科学技术为特色，工、理、管、经、文、法、艺多学科协调发展的教学研究型大学。</div>
    </div>
      
    </body>
</html>

margin的使用方法
外边距（margin）在border之外，margin区域不应用背景；
CSS中margin默认值为0

属性值的4种方式：
四个值：上 右 下 左{margin：10px 20px 30px 40px；}
三个值：上 左右 下{margin：10px 20px 30px;}
二个值：上下 左右 {margin：10px 20px；}
一个值：四个方向{margin：2px；}
{margin：0 auto；}在浏览器中横向居中
也可以单独定义某一个方向

注意事项：

1.系统会为某些元素设置默认的margin值或者padding值。这对于我么以后尺寸的计算有影响，所以在以后的开发过程中，首先会清除掉所有元素的margin和padding值
css首航代码：*{margin：0；padding：0}

2.相邻兄弟元素在垂直方向上的margin值会出现融合的情况，融合以后会取两个元素里较大的值作为融合后的值

3.当父级子级元素都设置了margin时，子级的margin值会传递到父级。
margin传递解决办法：给父级使用overflow：hidden属性


盒子与盒子之间建议使用margin
当盒子边缘与内容需要间隔时用padding

例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box1 {width: 100px;height: 100px; background: #f00;margin-bottom: 100px;}
        .box2 {width: 200px;height: 200px; background: #0f0;}
        h1 {width: 400px; height: 100px; background: #0ff;text-align: center;line-height: 100px;margin: 0 auto;}
        .box3 {width: 300px; height: 300px; background: #0f00ff;overflow: hidden;}
          .box4 {width: 100px;height: 100px; background: #fff000; margin-top: 50px;}
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <h1>西安邮电大学</h1>
        <div class="box3">
            <div class="box4"></div>
        </div>
    </body>
</html>

房东的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型

1.盒模型的概念如果CSS对HTML文档元素生成一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么我们可以形象的将其看作一个盒子CSS围绕这些盒子产生一种“盒子模型”概念，通过定义一系列与盒子有关的属性（内容、填充、边框、边界），可以控制各个盒子乃至整个HTML文档的表现效果和布局结构虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一...
复制链接

扫一扫