盒模型的概念

在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. Linux架构之Nginx 动静分离

    案例No.51:Nginx动静分离 1.web01配置静态资源 [root@web01 ~]# cd /etc/nginx/conf.d/#配置静态资源[root@web01 conf.d]# cat ...

  2. 北京师范大学第十五届ACM决赛-重现赛D Disdain Chain （规律+组合数学）

    链接:https://ac.nowcoder.com/acm/contest/3/D 来源:牛客网 Disdain Chain 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 2621 ...

  3. L3-002 特殊堆栈 （30 分)

    大家都知道“堆栈”是一种“先进后出”的线性结构,基本操作有“入栈”(将新元素插入栈顶)和“出栈”(将栈顶元素的值返回并从堆栈中将其删除).现请你实现一种特殊的堆栈,它多了一种操作叫“查中值”,即返回堆 ...

  4. 基于http方式搭建YUM源服务器

    基于http方式搭建YUM源服务器 (2012-09-21 11:59:14) 转载▼ 标签: yum linux lnmp lamp http 分类: Linux 为了方便公司80多台Linux服务 ...

  5. python multiprocessing pool

    python 本身是不是单线程这个我真心搞不懂 但是我是来吐槽的: multiprocessing.Pool(precesses = 2) 这个语句曾经让我的内存爆满,死机不解释. 在重装 pytho ...

  6. 8：Spring Boot Shiro记住密码

    1,添加Cookie 2,添加安全管理器中 3,配置记住我, 4 ,在登录页面中加我rememberMe复选框 /** * 1.配置Cookie对象 * 记住我的cookie:rememberMe * ...

  7. spring boot不要放在tomcat下启动，因为自身就带了集成tomcat

    spring boot不要放在tomcat下启动,因为自身就带了集成tomcat

  8. mysql Alias操作符 语法

    mysql Alias操作符 语法 作用:为列名称和表名称指定别名 大理石构件 语法:SELECT column_name(s) FROM table_name AS alias_name mysql ...

  9. 约数定理（two）

    筛约数个数和 理论基础: 1.对n质因数分解,n=p1^k1 * p2^k2 * p3^k3 …… 则n的约数个数为(k1+1)*(k2+1)*(k3+1)…… 2.线性筛素数时,用i和素数pj来筛掉 ...

  10. codevs 2039 骑马修栅栏 USACO x

    题目描述 Description Farmer John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏 ...