盒模型知识点汇总（附实例、图解）

边框属性
1.1 表格边框
1.2 圆角框的使用
1.3 关于input标签边框默认初始化的内容
内边框属性
外边距
3.1 盒子水平居中
3.2 margin垂直合并现象
3.3 margin包含塌陷现象及解决方法
关于盒子大小的计算
盒子模型布局稳定性
css3盒模型
盒子阴影box-shadow
页面初始化

正文

边框属性

   /* 设置上边框的宽度 */border-top-width: 10px;/* 设置上边框的颜色 */border-top-color: red;/* 设置上边框的样式：虚线、实线、点线等 */border-top-style: dashed;

下边框同上

       边框的样式设置语法能合写border-top: 宽度 样式 颜色;

border-left: 6px double yellow;

一行css设置上下左右所有边框的样式（连写）

 border: 10px dotted yellow;

/* 去掉默认边框兼容性最好的写法 */
border: 0 none;

1.1 表格边框

要设置表格边框border得同时设置在table标签跟td标签上

只设置在table上时：

同时设置时：

边框合并：

Border-collapse
取值：
separate：边框独立
collapse：相邻边被合并

 border-collapse: collapse;

效果：

1.2 圆角框的使用

Border-radius
取值：
< length > ：用长度值设置对象的圆角半径长度。不允许负值
< percentage >：用百分比设置对象的圆角半径长度。不允许负值

例子：

border-radius: 50%;

效果：

注意：border-radius：

一个值时表示四个角都切相同的
两个值时第一个值表示左上跟右下另一个值表示右上跟左下
三个值时第一个表示左上角，第二个值表示右上角跟左下角，第三个值表示右下角
四个值时依次从左上角顺时针方向表示

半圆的做法：
盒子的宽为高的两倍
只设置相邻两边有圆角

 div{width: 200px;height: 100px;background: pink;border-radius: 100px 100px 0 0;}

1.3 关于input标签边框默认初始化的内容

/去掉input默认初始边框/
border: none;

/* 重新设置自己想要的边框 */
border: 10px solid pink;

         /* 去掉input获得焦点后的边框 */outline: none;

内边框属性

padding属性用于设置内边距，也是复合属性，相关设置如下：

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
Padding-left：左内边距
padding：上内边距[右内边距下内边距左内边距]

           /* 顺序：上 右 下 左 */padding: 1px 2px 3px 4px;

padding的值：

一个值的时候：上右下左都是该值
两个值时：第一个表示垂直方向，第二个表示水平方向
三个值时：第一个值表示上内边距，第二个表示左右内边距，第三个表示下内边距
四个值时：从上面开始，依次顺时针方向内边距(上右下左)

内边距是享有背景色的,文本内容位置会受内边距影响

外边距

margin属性用于设置外边距，也是复合属性，相关设置如下：
~margin-top：上内边距
~margin-right：右内边距
~margin-bottom：下内边距
~margin-left：左内边距
~margin：上内边距[右内边距下内边距左内边距]

               /* 上右下左 */margin: 10px 0 20px 200px;/* 上下一起，左右一起 */margin: 20px 25px;

Margin的值：

一个值的时候：上右下左都是该值
两个值时：第一个表示垂直方向，第二个表示水平方向
三个值时：第一个值表示上内边距，第二个表示左右内边距，第三个表示下内边距
四个值时：从上面开始，依次顺时针方向内边距(上右下左)

3.1 盒子水平居中

对于元素应用宽度属性width,并将左右的外边距都设置为auto，可使块级元素居中，实际工作中常用这种方式进行网页布局.

 .box1 {width: 100px;margin: 0em auto;}

text-align用来设置文本在盒子中水平居中

注意：如果要让盒子水平居中必须满足两个条件：

            1，必须是块级元素（不是块则转为块）2，盒子必须设置宽度

对于行内块级元素在盒子中水平居中使用text-align：center；

3.2 margin垂直合并现象

当盒子在垂直方向上设置了同一个位置的margin值的时候，两者取最大的那个

.box {margin-top: 10px;margin-top: 100px;}

解决方案：无

所以在布局时尽量避免这种情况的出现

3.3 margin包含塌陷现象及解决方法

Margin包含塌陷现象：
有父子两盒子，子盒子嵌套在父盒子中，当在子盒子样式设置用margin-top想将其相对于父盒子向下移时，父盒子被连带拖下去的现象

初始时：

给子盒子设置margin-top发生塌陷：

解决方法：
1, 给父盒子加边框
2, 给父盒子加：overflow：hidden;

关于盒子大小的计算

盒子的最终宽度= width+左右border+左右padding+左右margin
盒子的真实宽度=width+左右border+左右padding
盒子的最终高度=height+上下border+上下padding+上下margin
盒子的真实高度=height+上下border+上下padding

设置border跟padding都会影响盒子的真实大小

盒子模型布局稳定性

布局建议：
按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）
即：
Width>padding>margin
原因：
1，margin容易产生塌陷现象
2，padding会影响盒子大小

css3盒模型

Css3中可以通过box-sizing来指定盒模型。即可指定为content-box、border-box。这样我们计算盒子的大小就发生了改变

可分两种情况：

1，box-sizing：content-box 盒子大小为width+padding+border content-box：此值为默认值，其让元素维持W3C的标准box Mode
2，Box-sizing：border-box 盒子大小为width,就是说，padding和border是包括在盒子里面的

/* box-sizing: content-box; 保持盒子内容大小不变 /
/ box-sizing: border-box; 保持盒子的大小不变，只改变content的大小 */

盒子阴影box-shadow

语法：

  水平距离 垂直距离 模糊距离 阴影距离 阴影类型
box-shadow: h-shadow v-shadow blur spread color inset;

  注意：设置盒子阴影时，水平距离跟垂直距离是必须要设置的，其他可选盒子阴影默认就是外部阴影outset，不用再设置outset了再设置反而错了

例子：

box-shadow: 10px 10px 5px 5px skyblue;

效果：

盒子多阴影

不同阴影用逗号隔开

例如：

          box-shadow: 210px 10px red,10px 210px yellow;

效果：

当多阴影重叠时，第一个阴影在最上面

例如：

 box-shadow: 10px 10px red,18px 18px yellow;

效果：

页面初始化

为了更方便的控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距

 * {padding: 0%;  /*清除内边距*/margin: 0em;  /*清除外边距*/}

盒模型知识点汇总（附实例、图解）相关推荐

利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
计算机三级数据库知识点汇总附思维导图
目录第一章:数据库应用系统开发方法第二章:需求分析第三章:数据库结构设计第四章:数据库应用系统功能设计与实施第五章:UML与数据库应用系统第六章:高级数据查询第七章:数据库及数据库对象 ...
再谈三角形整理形态（附实例图解）
对称三角形的定义.市场含义.各项要点.研判诀窍.案例分析.上升/下降三角形的基本概念.市场含义.要点提示.注意事项.形态举例.还有底部三角形.扩散三角形.研判要点.操作要点. 千帆竞发的网易博客相关 ...
第三课弹性盒模型知识点
display:flex display:box的进化版,但是存在兼容性问题兼容性分析:http://blog.csdn.net/qishuixian/article/details/5325880 ...
Vue 知识点汇总（下）--附案例代码及项目地址
文章目录 Vue 预备知识与后续知识及项目案例一.简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 2.Vue.js安装二.Vue知识量化三.内容 1.Webpack 详解 ...
前端面试知识点-DOCTYPE、盒模型、css选择符、position的值、网络协议【小咚 “面筋” 记】
文章目录前言一.DOCTYPE的作用二.盒模型三.css选择符有哪些?优先级? 1.选择符 2.优先级四.position的值有哪些? 五.网络协议(OSI.TCP/IP) 总结前言每天 ...
html盒子模型的实例,html盒模型的示例分析
html盒模型的示例分析发布时间:2021-06-04 12:04:12 来源:亿速云阅读:61 作者:小新小编给大家分享一下html盒模型的示例分析,相信大部分人都还不怎么了解,因此分享这篇文 ...
原生遍历_细品原生JS从初级到高级知识点汇总（三）
作者:火狼1 转发链接:https://juejin.im/post/5daeefc8e51d4524f007fb15 目录细品原生JS从初级到高级知识点汇总(一) 细品原生JS从初级到高级知识点汇 ...
javaSE知识点汇总
javaSE知识点汇总 Java基础知识精华部分写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实 ...

盒模型知识点汇总（附实例、图解）

盒模型知识点汇总（附实例、图解）相关推荐

最新文章

热门文章