zoukankan      html  css  js  c++  java
  • 女屌丝前端逆袭记(二)之盒子模型

    女屌丝又来为你分享前端技术鸡汤啦!上一篇,简单的分享了float的使用以及注意事项,这一次给你分享点什么呢??作为前端开发工程师,你觉得你还必须掌握的是什么呢?是不是想到了-盒子模型。对,就是它,这可谓是布局中的核心。通过上一篇我们认识了float,它能帮我们改变元素性质,能帮助我们让元素并排显示并且还能左右布局,那这就可以了吗?答案,是No!No!No!我们还需要掌握盒子模型的使用。你的布局稳不稳,它可是起到关键作用。那么下面我们就一起来看看这个比较让人垂涎欲滴的技术吧。

    我们先来简单认识一下,什么是盒子模型?

    说到盒子模型,那我们可以看到其中两个关键字“盒子”。日常生活中,盒子的作用是什么?是不是用来盛放东西,会根据要盛放东西的多少选择适合尺寸的盒子。那我们会将每个盒子放到指定的位置,每个盒子之间整齐堆叠或排列在一起。那么我们把这种情况放到前端页面中去思考,是不是我们的页面布局中也可以这样。把网页中零散元素内容,集中放在某个盒子中,然后将这些盒子整齐排列堆叠起来,这样一个整齐的页面是不是就可以实现了呢?比如看图1,这是我学习过程中模仿小米官网做的商城首页部分效果展示。

    图1:喜科堂页面

    从页面图片可以看出,我们可以把这四部分划分成四个模块,而这四个模块可以看成是四个大小不同的盒子,将性质相同的元素放在对应的盒子里边,就可以呈现出我们想要的布局,这样看起来是不是会舒服点。

    那么通过盒子模型,就可以帮助我们实现这样的布局,让我们的页面看起来整齐,布局更加的稳当。

    那么要想利用好盒子模型,我们就得清楚的认识什么是盒子模型。

    首先,看一下盒子模型的概念,在HTML中,所有的HTML元素都可以看作盒子,在CSS中,“box model”是用来设计和布局时使用。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距、边框、填充,和实际内容。盒模型允许我们其它元素和周围元素边框之间的空间放置元素,下面通过图2,看一下标准盒子模型的图示。

    图2:标准盒子模型

    示例代码:图3

    图3:示例代码

    从图2可以看出,一个标准盒子的组成,是由内容(content)、内边距(padding)、border(边框)、外边距(margin)构成,在使用的过程中,可以根据实际的情况增加或减少其中某个组成,说到这儿,我们还得清楚知道一个标准盒子模型宽高的计算。

    一个标准盒子模型宽高是如何计算呢?这个可是关系到内容布局。

    从盒子模型的组成可以看出,一个盒子的宽度计算由以下公式组成:

    boxWidth=contentWidth+padding*2+border*2+margin*2(PS:此处的*2代表的是左右大小,因此要乘以2)。

    boxHeight=contentHeight+padding*2+border*2+margin*2。

    根据以上这个计算公式,可以得出图2盒子的宽度实际是270px,高度也是270px。

    以上就是我们网页中的一个标准的盒子模型,也是W3C标准盒子模型,是不是很好理解,下次再计算盒子宽高,不能再错了哦。

    内容不多,但是全是干货经验分享。

  • 相关阅读:
    $route 侦听路由参数的变化
    vue移动端(持续更新......)
    vue本地开发配置及项目部署
    vue解决虚拟dom复用的问题
    移动端头部固定中间内容滚动
    VUE的路由懒加载及组件懒加载
    VUEX(状态管理)之憨憨篇
    Go-第一篇
    高精度1
    牛客练习赛61
  • 原文地址:https://www.cnblogs.com/xiketang/p/12768088.html
Copyright © 2011-2022 走看看