盒模型的概念

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。

盒模型示意图

盒模型的属性

  • margin(外边框):            用于控制标签与标签之间的距离；margin的最基本用途就是控制标签周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • padding(内边框):           用于控制内容与边框之间的距离；
  • Border(边框):     围绕在内边距和内容外的边框。
  • Content(内容):   盒子的内容，显示文本和图像
  • width：指的是内容的宽度，而不是整个盒子的真实的宽度。
  • height: 指的是内容的高度，而不是整个盒子的真实的高度。

margin 外边框

border 边框

padding 内边距

content内容

例子

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

    <div>

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

页面显示是这样子

加上padding 20px效果

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            padding: 20px;

        }

    </style>

</head>

<body>

    <div>

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

文字外面加上内边距

再加上border 10px

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            padding: 20px;

            border: 10px solid red;

        }

    </style>

</head>

<body>

    <div>

        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

        内容内容内容内容内容

    </div>

</body>

</html>

在内边距外面 加上10px的红色边框

前端 CSS 盒子模型的更多相关文章

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

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

  2. 前端 CSS 盒子模型 目录

    CSS盒子模型介绍 padding border属性

  3. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  4. 前端 CSS 盒子模型 padding 内边距 属性

    padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. DDD领域驱动设计初探（二）：仓储Repository（上）

    前言:上篇介绍了DDD设计Demo里面的聚合划分以及实体和聚合根的设计,这章继续来说说DDD里面最具争议的话题之一的仓储Repository,为什么Repository会有这么大的争议,博主认为主要原 ...

  2. JavaSE---显式锁

    1.概述 1.1.jdk5之前,用于  调节共享对象访问机制  只有 synchronized.volatile:     jdk5之后,提供了  显示锁:Lock.ReentrantLock...: ...

  3. CSS3——制作正在加载页面loading...

    今天做了好多小东西,还挺开心的~ <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. 【leetcode】1162. As Far from Land as Possible

    题目如下: Given an N x N grid containing only values 0 and 1, where 0 represents water and 1 represents ...

  5. 【leetcode】299. Bulls and Cows

    题目如下: 解题思路:本题难度不太大,对时间复杂度也没有很高的要求.我的做法是用一个字典来保存每个字符出现的次数,用正数1记录标记secret中出现的字符,用负数1记录guess中出现的字符,这样每出 ...

  6. 无线网络中的MIMO与OFDM技术原理分析

    无线网络中的MIMO与OFDM技术原理分析CNET中国·ZOL 07年08月14日 [原创] 作者: 中关村在线 张伟 从最早的红外线技术到目前被寄予重望的WIFI,无线技术的进步推动我们的网络一步步 ...

  7. 层定位layer

    一.如何实现层定位position属性 二.相对定位relative 三.绝对定位absolute 四.元素堆叠z-index 一.实现层定位的方法 position属性实现层定位,把元素分出层次形成 ...

  8. APIO2019解题报告

    「APIO 2019」奇怪装置 题目描述 有无限个二元组,每个二元组为\(((t+\left\lfloor\frac{t}{B} \right\rfloor)\%A,t \% B)\),给出一些区间, ...

  9. VMware Workstation 14 Pro安装教程（详细）

    VMware Workstation 14 Pro安装教程(详细) 话不多说,直接上图,需要的拿走. 下载地址:https://download3.vmware.com/software/wkst/f ...

  10. 关于Java协变性的思考

    简而言之,如果A IS-A B,那么A[] IS-A B[]. 举例:现在有类型Person.Employee和Student.Employee 是一个(IS-A) Person,Student是一个 ...