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. 复试笔试复习 & bd面试总结

    计算机网络: 1.OSI模型中提供端到端服务的是传输层 2.波特率的含义是每秒钟信号变化的次数 3.非屏蔽双绞线中5类网线的数据速率为100Mbps,连接器是RJ-45 4.虚电路在数据链路层实现,电 ...

  2. php sockets扩展安装

    php sockets扩展安装   今天安装cacti发现需要php sockets扩展,而现在的lnmp没有安装,于是想到了phpzie工具安装扩展,安装方法如下: cd php-5.3.8/ext ...

  3. 0-4评价一个语言模型Evaluating Language Models:Perplexity

    有了一个语言模型,就要判断这个模型的好坏. 现在假设: 我们有一些测试数据,test data.测试数据中有m个句子;s1,s2,s3-,sm 我们可以查看在某个模型下面的概率: 我们也知道,如果计算 ...

  4. Python的命令行参数（argparse）

    参考:https://www.cnblogs.com/lindaxin/p/7975697.html 参考:https://www.cnblogs.com/dengtou/p/8413609.html ...

  5. Node.js 版本管理工具——nvm

    日常项目开发中,有些项目可能基于node  V10 或者 V8 不同的版本: 如果我们手动安装卸载node,这样是不友好. 先放上作者的博客地址 : https://www.cnblogs.com/g ...

  6. BZOJ 1733: [Usaco2005 feb]Secret Milking Machine 神秘的挤奶机 网络流 + 二分答案

    Description Farmer John is constructing a new milking machine and wishes to keep it secret as long a ...

  7. Java——常用类（StringBuffer）

    [StringBuffer]   <1>java.lang.StringBuffer代表可变的字符序列. <2>StringBuffer和String类似,但是StringBu ...

  8. Go简易分布式对象存储 合并文件的所有分块为一个文件

    项目 项目地址: https://github.com/Draymonders/cloud 欢迎大家Watch or Star 缘由 由于项目中对大文件进行5MB为一个分块上传(多线程,提升上传效率) ...

  9. 设计模式学习笔记——Visitor 访问者模式

    1.定义IVisitor接口,确定变化所涉及的方法 2.封装变化类.实现IVisitor接口 3.在实体类的变化方法中传入IVisitor接口,由接口确定使用哪一种变化来实现(封装变化) 4.在使用时 ...

  10. D2. Remove the Substring (hard version)

    D2. Remove the Substring (hard version) 给字符串s,t,保证t为s的子序列,求s删掉最长多长的子串,满足t仍为s的子序列 记录t中每个字母在s中出现的最右的位置 ...