网站首页 网站建设 网站报价 成功案例 建站知识 增值服务 联系方式 关于我们
网站首页
电话联系
在线咨询
网站首页
电话联系
在线咨询

深度解析网站前端中盒模型的含义

发布时间:2019-02-14 17:08
发布者:admin
浏览次数:

 

  盒模型是我们在学习前端时必须进行理解的知识,了解并熟练运用盒模型可以帮我们在网站建设时更快的进行布局。那究竟什么是盒模型,今天郑州网站建设公司小编就和大家聊聊。

  什么是盒子?
 

盒模型

  html中的标签(元素)统统都是一个矩形的平面框, 在立体上, 它由多个平面构成, 这称为盒子模型.

  从底层到顶层的立体结构: margin->background-color->background-image->padding->content->border

  盒子的三大属性:

  border(边框)

  padding(内边距)

  margin(外边距)

  经验:

  这三大属性可以结合top right bottom left来使用!

  当同时设置4个值时,遵循顺时针顺序: 上右下左, 如: padding: 9px 10px 11px 12px;

  border: 边框宽度(border-width) 边框风格(border-style) 边框颜色(border-color);

  边框风格: solid(实线), dashed(虚线), dotted(点线)

  margin的特殊用法:盒子在其容器中水平居中.

  margin-left: auto; margin-right: auto;

  margin可以取负值, 但padding不可以.

  部分元素有默认的内/外边距:

  body,h1-h6,p,ul,ol,dl,dd

  盒子尺寸(box-sizing)

  box-sizing: content-box | border-box;

  context-box的含义:

  为盒子设置的width属性仅表示内容区宽度, 实际宽度=width+padding+border

  border-box的含义:

  为盒子设置的width属性就是实际宽度

  为盒子设置的padding和border自动从width中扣除, 内容区宽度自动缩减.

  盒子的圆角

  border-radius: 圆角半径;

  border-top-left-radius: 左上角半径

  盒子的阴影

  box-shadow: 阴影类型 x-offset y-offset blur-radius color;

  阴影类型如果是inset, 表示阴影的方向是朝向盒子内