美文网首页
前端—盒子模型

前端—盒子模型

作者: Taoqi思 | 来源:发表于2018-10-18 23:16 被阅读0次

盒子模型

一个盒子我们会分成几个部分:

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

内容区:

内容区指的是盒子中放置内容的区域,也就是元素 中的文本内容,子元素都是存在于内容区中的。
如果没有为元素设置内边距和边框,则内容区大小 默认和盒子大小是一致的。
通过widthheight两个属性可以设置内容区的大 小。
widthheight属性只适用于块元素。

内边距:

内边距指的就是元素内容区与边框以内 的空间。
默认情况下width和height不包含padding的大小
使用padding属性来设置元素的内边距。
例如:

padding:10px 20px 30px 40px

这样会设置元素的上、右、下、左四个方向的内边距。

padding:10px 20px 30px;

分别指定上、左右、下四个方向的内边距

padding:10px 20px;

分别指定上下、左右四个方向的内边距

padding:10px;

同时指定上左右下四个方向的内边距

同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

边框:

可以在元素周围创建边框,边框是元素可见框的最外部。
可以使用border属性来设置盒子的边框:
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
和padding一样,默认width和height并包括边框的宽度。

外边距:
外边距是元素边框与周围元素相距的空间。
使用margin属性可以设置外边距。
用法和padding类似,同样也提供了四个方向的 margin-top/right/bottom/left。
当将左右外边距设置为auto时,浏览器会将左右外 边距设置为相等,所以这行代码margin:0 auto可 以使元素居中。

-------------------边框的样式-----------------------

边框可以设置多种样式:

none(没有边框)
dotted(点线)
dashed(虚线)
solid(实线)
double(双线)
groove(槽线)
ridge(脊线)
inset(凹边)
outset(凸边)

相关文章

  • box-sizing属性使用场景

    关键词:布局 盒子模型盒子模型盒子模型在前端开发中有着非常重要的地位。盒子模型的组成由content+paddin...

  • 05-盒子模型

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) ...

  • 2021-05-24

    前端面试2021.5.24 1.说一下盒子模型: 答:盒子模型有两种:W3C和IE盒子模型 盒子模型包括margi...

  • 前端问题总结(二)

    前端知识汇总 盒子模型 2种:IE盒子模型 W3C标准盒子模型 盒模型:内容、内边距、外边距、边框 为什么要初始化...

  • css源码笔记(四)【爱创课堂专业前端培训】

    复习: 1.1布局模型——前端培训机构 与盒子模型一样是最基础、最核心的东西,但是布局模型是从盒子模型基础上进行布...

  • Web常见前端面试题及答案

    Web前端常见面试题及答案 1、盒子模型 盒子模型包括四部分:内容(content)、填充(padding)、边框...

  • 前端盒子模型

    盒子 内容区域设定:width:宽度的设定,height:高度的设定。宽度和高度的设定可以是个体的数值(带单位),...

  • 前端—盒子模型

    盒子模型 一个盒子我们会分成几个部分: 内容区(content)内边距(padding)边框(border)外边距...

  • web前端面试之CSS盒子与选择器(码动未来)

    web前端面试之CSS盒子与选择器(码动未来) 1.1.1、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有...

  • 前端 盒子模型(框模型)

    盒子模型和框模型 一个盒子分为四部分1.内容区(content)2.内边距(padding)3.边框(border...

网友评论

      本文标题:前端—盒子模型

      本文链接:https://www.haomeiwen.com/subject/wwjezftx.html