重温基础之-css盒模型
2024-04-26 19:40:56
所有html元素都可以看作盒子。
css盒模型本质上是一个盒子，封装周围的html元素,它包括：外边距，边框，内边距和实际内容。
默认情况下，一个元素的总宽度计算方式：
总宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距。
div{
width:300px;
padding:10px;
border:1px solid #eee;
margin:10px;
}
该div的宽度是300px,但它在页面上所占据的总宽度是：10+1+10+300+10+1+10=342px；
这实际上是css中设置box-sizing:content-box的效果，也就是说css盒子模型默认是box-sizing的content-box值。
box-sizing还有一个常用属性是border-box。其效果导致元素总宽度计算为：
总宽度=左外边距+宽度+右外边距。
宽度=左边框+左内边距+实际内容宽度+右内边距+右边框。
拿上述例子：div的总占宽度为10+300+10=320px; div的实际内容宽度为:300-10-10-1-1=278px
最新文章
- LINUX下搭建VPN
- connect调用超时的实现方式
- 【BZOJ】【2179】FFT快速傅里叶
- 【转】System.DateTime.Now.ToString()的一些用法
- javaWeb中的/路径问题
- c# ProxyServer 代理服务器 不是很稳定
- spring+springmvc+mybaties整合实例
- ajax中基本参数应用
- leanote使用本地账户时，去掉待同步的小红点
- POJ 2112 Optimal Milking （Dinic + Floyd + 二分）
- Django框架详细介绍---视图系统
- loadrunner 运行脚本-命令行运行脚本
- POJ 3903 Stock Exchange（LIS || 线段树）题解
- day 50 Java Script 学习
- Android开发网上的一些重要知识点[经验分享]
- js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js
- 漫谈js自定义事件、DOM/伪DOM自定义事件
- 水平居中和transform: translateY(-50%) 实现元素垂直居中效果
- OpenERP实施记录（14）：收款处理
- 压测工具Locuse的使用