1、CSS 框模型概述(盒模型)
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
CSS 框模型概述
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。
元素的宽度和高度
指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和边距。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
* {margin: 0;padding: 0;
}
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:
#box {width: 70px;margin: 10px;padding: 5px;
}
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。
重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和边距。
下面的例子中的元素的总宽度为300px:
实例
div {width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {background-color: lightgrey;width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div>
</body>
</html>
让我们自己算算:
300px (宽)
- 50px (左 + 右填充)
- 50px (左 + 右边框)
- 50px (左 + 右边距)
= 450px
试想一下,你只有250像素的空间。让我们设置总宽度为250像素的元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.ex
{width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="250x250px.gif" width="250" height="250" />
<div class="ex">上面的图片是250 px宽。
这个元素的总宽度也是250 px。</div>
</body>
</html>
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
1、CSS 框模型概述(盒模型)相关推荐
- CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表 用于给HTML标签添加样式 CSS3是CSS的最新版本 增加了大量的样式/动画/3D特效以及移动端特性 前端 ...
- css盒模型(css的两种盒模型:标准盒模型、怪异盒模型)和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
- 标准盒模型怪异盒模型
标准盒模型&怪异盒模型 盒子模型的组成: 盒子模型一般由:内容(content).边框(border).左右外边距(margin-left+margin-right).左右内边距(padd ...
- CSS-0816盒模型 标准盒模型怪异盒模型及其应用背景属性补充小图标使用图标网站可变化单位meta元信息浏览器内核(渲染机制)响应式页面 媒体类型媒体特性opacity和背景色设置透明的区别
title: "CSS 0816" date: 2022-08-16T11:18:25+08:00 文章目录 title: "CSS 0816" date: 2 ...
- CSS之布局(盒模型)
盒模型: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title&g ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector {property: value;property: value;... property: value ...
- 再读《精通css》04:盒模型和空白边叠加
第二章:可视化格式模型 2.1 框模型概述 1.框模型:在页面上的每一个元素被看做是一个矩形的框.这个框由元素的内容(content),填充(padding),边框(b ...
- css盒模型只能应用于html,iframe,css样式表,盒模型的使用方法-2019年9月3日
实例演示:标签的使用 实例演示: css样式设置的优先级 实例演示: css的id, class与标签选择器的使用规则 实例演示盒模型的五大要素: width, height, padding, bo ...
- CSS 盒模型 标准盒模型 IE盒模型
CSS 盒子的组合部分: Content box: 用来显示内容. Padding box: 包围在内容外面的部分. Border box: 包围显示内容和内边距. Margin box: 在bord ...
- CSS基础五(盒模型)
目录 盒子模型 1 什么是盒模型 2 内容区(content) 3 盒子边框(border) 边框大小 border-width 边框样式 border-style 边框颜色 border-color ...
最新文章
- 连接两个点云中的字段或数据形成新点云以及Opennni Grabber初识
- html中设置表格单实线,css实现表格实线的方法
- c#连接oracle11,C#连接Oracle 11g 无需安装Oracle客户端
- Nginx 服务并发过10万的Linux内核优化配置
- BZOJ 1664: [Usaco2006 Open]County Fair Events 参加节日庆祝( dp )
- 微信小程序的userInfoReadyCallback理解
- html协商缓存没起作用,用了CDN缓存,就会跳过强缓存和协商缓存吗?
- python模型训练框架_Pytorch-Transformers 1.0发布,支持六个预训练框架,含27个预训练模型...
- 计算机信息处理技术的基础知识列举出一些易错易混淆知识点,计算机考证实训报告指导书.doc...
- XML To Linq 读取Sharepoint列表中的附件列信息
- python request 接口自动化设计
- Office 2007简体中文版售价抢先看
- webm是什么格式?
- 手持式频谱仪帮助解决链路故障
- 解决uniapp的 swiper 组件的随着指示点添加背景宽度不随着内容添加而自动扩大问题,而是溢出。
- UVALive 3959 Rectangular Polygons (排序贪心)
- 【KRpano360全景教程 】 - krpano地图导航radar插件的使用
- 2021-07-13 BIYAO项目总结!!!
- 图论:图的四种最短路径算法
- 如何解决您与此网站之间建立的连接不安全,该页面采用不加密的http传输协议?
热门文章
- 《python机器学习经典实例》Expected 2D array, got 1D array instead和Reshape your data either using array.问题(已解决)
- 20 道 Spring Boot 面试题
- UIBezierPath和CAShapeLayer画直线、CGContextRef画直线两种方案
- COGS 2274. [HEOI 2016] tree
- 如何用windbg查看_eprocess结构
- 未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage”包 - - 博客频道 - CSDN.NET...
- 0523-学习进度条
- bootstrap 列表--水平定义列表
- FZU 2214 Knapsack problem(背包问题)
- android自定义进度条渐变色View,不使用任何图片资源