前端 CSS 盒子模型
盒模型的概念
在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 盒子模型的更多相关文章
- [Web 前端] CSS 盒子模型，绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- 前端 CSS 盒子模型 目录
CSS盒子模型介绍 padding border属性
- 前端 CSS 盒子模型 边框 border属性
边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...
- 前端 CSS 盒子模型 padding 内边距 属性
padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...
- 前端面试必备的css盒子模型
今天同学发给了我一份前端基础的面试题,第一道便是对css盒子模型的理解,我看到的第一眼想到的是div,然后就...懵逼了,知其然不知其所以然.所以打算写一写盒子模型的概念理解啥的,如有写的不当的地方, ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- 前端学习（十三）：CSS盒子模型
进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...
- 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
随机推荐
- VB中输入函数InputBox的用法
格式:InputBox(pronpt[,title][,default][,xpos,ypos]).其中的pronpt为窗口的提示词,title为输入窗口的标题,default为输入窗口的默认内容,x ...
- 【NOIP2013模拟】归途与征程
题目 分析 好吧...明显是暴力题. 首先,把A串分成只有小写字母组成的小分串,按顺序存放:A[1].A[2].A[3]--. 对于同构循环串,显然把两个B串合在一起,成为一个新的C串.\(C[i.. ...
- echart-如何将x轴和y轴的原点进行重合？？？
设计稿突然让x轴 和y轴重合,我们可以设置图中的这个属性. 不知道还有没有别的设置属性,欢迎评论指出谢谢
- React Native 之SectionList
接上一篇: /pages/SectionListDemo.js import React, {Fragment,Component} from 'react'; import { SafeAreaVi ...
- 查询重复数据group by menu_id having count(menu_id)>1
select * from sys_power_menu WHERE menu_id in ( select menu_id from sys_power_menu group by menu_id ...
- PHP入门培训教程 php中的时间处理
php中的时间处理 PHP入门培训教程 兄弟连PHP培训 小编整理的 php中的时间处理: <? /** * 转换为UNIX时间戳 */ function gettime($d) { if(is ...
- 安装memcached和elasticsearch服务并systemctl管理
[root@izbp18dv3a3metugyd02qxz bin]# rpm -qa | grep memcache [root@izbp18dv3a3metugyd02qxz bin]# yum ...
- C++ 对象间通信框架 V2.0 ××××××× 之（三）
类定义:CSignalSlot ======================================================================= // SignalSlo ...
- ARC093 F - Dark Horse
https://atcoder.jp/contests/arc093/tasks/arc093_d 题解 先钦定\(1\)号站在第一个位置上,那么他第一轮要和\((2)\)打,第二轮要和\((3,4) ...
- UOJ418. 【集训队作业2018】三角形
http://uoj.ac/problem/418 题解 考虑激活每个节点时,它的每个儿子都是放满的. 那每一次的操作我们可以用一个二元组来表示\((w_i-\sum w_{son},\sum w_{ ...