1. 简介

  • 元素在页面中显示成一个方块，类似一个盒子
  • 把元素叫做盒子，设置对应的样式分别为
    • 盒子的边框(border)
    • 盒子内的内容和边框之间的间距(padding)
    • 盒子与盒子之间的间距(margin)
盒子真实尺寸

盒子宽度 = width + padding左右 + border左右

盒子高度 = height + padding上下 + border上下

2. 增大内容和边框的距离但不改变盒子的尺寸的方法

box-sizing：content-box | border-box

3. 少废话，上例子

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

        <div class="box4">box4</div>

    </body>

</html>


*{

    width: 100px;

    height: 100px;

}

.box1{

    background: #a7ab86;

    border: 10px solid;

    padding: 20px;

}

.box2, .box3, .box4{

    background: #b8d3ca;

}

.box3{

    padding: 20px;

    box-sizing: border-box; /* 改变间距但不改变盒子大小 */

}

.box4{

    padding: 20px;

    border: 10px solid red;

    box-sizing: border-box;

}
  • 效果截图

[Web 前端] 014 css 盒子模型的更多相关文章

  1. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  2. 前端基础——CSS盒子模型

    如今很多网页都是由很多个"盒子"拼接.嵌套而成,所以多少接触过网页设计的朋友一定都对CSS盒子模型有所了解. 为了更好的说明,先举个通俗的样例:在一个仓库中放了10个纸箱,每一个纸 ...

  3. 前端学习（十三）：CSS盒子模型

    进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...

  4. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

  5. 前端面试必备的css盒子模型

    今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  8. Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618473 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 盒子模型: <!D ...

  9. 前端 CSS 盒子模型 目录

    CSS盒子模型介绍 padding border属性

随机推荐

  1. AGC009题解

    为了1天4题的flag不倒所以开新坑... B. 考虑把这棵树直接建出来,f[i]表示i最少的比赛次数,然后按照定义转移就行了. //Love and Freedom. #include<cst ...

  2. 查看jar包内容

    查看jar包内容 查看jar包内容的基本命令: jar tf jar-file 参数解释: The t option indicates that you want to view the table ...

  3. kali安装docker以及配置阿里云镜像加速

    1.需求 最近需要用到docker比较多,遂安装使用下,第一次用docker搭建测试环境,不得不说,docker真香.期间遇到了比较多奇奇怪怪的问题,网上的教程也比较多比较乱,遂记录一下. 2.安装d ...

  4. （js）粘贴时去掉HTML格式

    一.IE能够触发onbeforepaste事件,因此可以在该事件中直接改变剪贴板中的内容实现过滤效果 二.谷歌由于不能触发onbeforepaste,先阻止默认行为,通过window.getSelec ...

  5. handy源码阅读（六）：udp类

    分为UdpServer类和UdpConn类. struct UdpServer : public std::enable_shared_from_this<UdpServer>, priv ...

  6. 理解厂商前缀 -webkit- / -moz- / -ms- / -o-

    CSS3规范如果想要达到W3C的推荐标准状态还需要不断改进.浏览器则通常在W3C开发标准的过程中就会体现这些特性.这样,标准在最终敲定之前就能知道哪些地方还能进一步改进. 在包含某个特性的的初始阶段, ...

  7. JavaScript 练习

    搜索框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. Java——动态绑定和多态

    动态绑定是在执行期间(而不是编译期间)判断所用对象的实际类型,根据其实际的类型调用其相应的方法(确定选择哪个多态形式被调用). 首先是方法的参数是父类对象,传入子类对象是否可行 然后引出Parent ...

  9. 使用 Markdown 写博客

    后台设置(左侧边栏区找到-设置默认编辑器). 设置为 Markdown 后保存,即可在编辑新博客时生效.

  10. [BZOJ1478&1488&1815][SGU282]Isomorphism：Polya定理

    分析 三倍经验题,本文以[BZOJ1478][SGU282]Isomorphism为例展开叙述,主体思路与另外两题大(wan)致(quan)相(yi)同(zhi). 这可能是博主目前写过最长也是最认真 ...