盒模型的概念

在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. 03python面向对象编程1

    1.创建和使用类 1.1 创建 Dog 类.根据 Dog 类创建的每个实例都将存储名字和年龄.我们赋予了每条小狗蹲下( sit() )和打滚( roll_over() )的能力: In [2]: cl ...

  2. linux c++下遍历文件

    https://blog.csdn.net/u013617144/article/details/44807333

  3. string初始化

    #include <iostream> using namespace std; int main(int argc, const char * argv[]) { //通过const c ...

  4. 【学习】014 深入理解Http协议

    Http协议入门 什么是http协议 http协议: 对浏览器客户端 和  服务器端 之间数据传输的格式规范 查看http协议的工具 1)使用火狐的firebug插件(右键->firebug-& ...

  5. SpringBoot之初体验

    一.SpringBoot 介绍 1.1 SpringBoot 使命 在之前我们学习 Spring 时,我们了解到 Spring 最根本的使命就是 简化Java开发.而 SpringBoot 的出现也有 ...

  6. ACM/IOI 国家队集训队论文集锦

    转自:https://blog.csdn.net/txl199106/article/details/49227067 国家集训队1999论文集 陈宏:<数据结构的选择与算法效率——从IOI98 ...

  7. websocket的通信原理

    首先什么是websocket? 1.websocket和http一样是一种通信协议,是HTML5的一种新的协议. 2.既然有了http协议了,为什么还会有websocket呢?是因为是为了弥补http ...

  8. POJ-3436-ACM Computer Factory(最大流, 输出路径)

    链接: https://vjudge.net/problem/POJ-3436#author=0 题意: 为了追求ACM比赛的公平性,所有用作ACM比赛的电脑性能是一样的,而ACM董事会专门有一条生产 ...

  9. ubuntu 14.04 安装openjdk 8

    最近准备在ubuntu14.04上安装Oracle,但是需要提前安装jdk,发现问题挺多的,后面看到了如下的操作步骤,成功安装,特意记录下来. 致谢:https://www.yangshenglian ...

  10. extjs计算两个DateField所间隔的月份（天数）

    需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').get ...