CSS基础之盒子模型

前言1.盒子模型的组成2.边框(border)3.内边距(padding)4.外边距(margin)

①外边距典型应用②外边距合并③清除内外边距

css页面布局三大重点： css 盒子模型 、 浮动 、 定位

border(边框)content(内容)padding(内边距)margin(外边距)

CSS 边框属性允许你指定一个元素边框的样式和颜色边框由三部分组成：边框宽度（粗细）、边框样式、边框颜色

属性

作用

border-width

定义边框粗细，单位是px

border-style

边框的样式

border-color

边框颜色

    
        border:border-width | border-style | border-color;
    

①border-style

边框样式的样式如下：

none:没有边框即忽略所有边框的宽度（默认值）solid :边框为单实线（最为常用的）dashed: 边框为虚线dotted: 边框为点线

②边框会影响盒子实际大小
边框会额外增加盒子的实际大小，对此我们有两种解决方法：

测量盒子大小的时候，不量边框如果测量的时候包含了边框，则需要 width/height 减去边框宽度 3.内边距(padding)

padding 属性用于设置内边距,即盒子边框与内容之间的距离

属性

作用

padding-left

左内边距

padding-right

右内边距

padding -top

上内边距

padding-bottom

下内边距

padding的简写属性：

值的个数

表达意思

padding : 1px;

上下左右内边距为1px

padding :1px 1px;

上下内边距是1px ，左右内边距是1px

padding: 1px 1px 1px;

上内边距1px，左右内边距1px，下内边距1px

padding :1px 1px 1px 1px;

上内边距，右内边距，下内边距，左内边距都是1px

注意点：

当我们给盒子指定 padding 值之后，发生了2件事情：
① 内容和边框有了距离，添加了内边距
②padding影响了盒子实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
③ 解决方式：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小 4.外边距(margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性

作用

margin-left

左外边距

margin-right

右外边距

margin-top

上外边距

margin-bottom

下外边距

margin 简写方式与 padding 完全一致，具体可参考上文padding写法

外边距可以让块级盒子水平居中，但是必须满足两个条件:
1.盒子必须制定了宽度(width)
2.盒子左右的外边距都设置为 auto

    div {
        width: 300px;
        margin: 0 auto;
    }

Tips:
以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。

使用 margin 定义块级元素的垂直外边距时，可能会出现外边距的合并

主要有两种情况：

相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷

①相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

②嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方法：
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow: hidden

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距

    body {
        padding: 0;
        margin: 0;
    }

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 java开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的Gitee获取。
还有 高级java全套视频教程 java进阶架构师 视频+资料+代码+面试题！

全方面的java进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。