CSS盒子模型之详解

前言:
        盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局。

一、css盒子模型概念
    CSS盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:

 
图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。

那么,
元素框的总宽度 = 元素(element)的width padding的左边距和右边距的值  margin的左边距和右边距的值  border的左右宽度
元素框的总高度 = 元素(element)的height padding的上下边距的值  margin的上下边距的值  border的上下宽度

二、css 外边距合并(叠加)
        两个上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值,如图:


 
比较容易理解,所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义,如下图:

 
需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
css reset 中也会经常用到
* {
  margin : 0;
  padding : 0;
}
 

三、box-sizing属性介绍
box-sizing属性是用户界面属性里的一种,之所以介绍它,是因为这个属性跟盒子模型有关,而且在css reset中有可能会用到它。

box-sizing : content-box|border-box|inherit;
(1) content-box ,默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
  即总宽度 = margin border padding width
(2) border-box , 设置的width值其实是除margin外的border padding element的总宽度。盒子的width包含border padding 内容
    即总宽度 = margin width
很多CSS框架,都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值,上海尚学堂web前端原作,请多支持!

关于border-box的使用:
1 一个box宽度为100%,又想要两边有内间距,这时候用就比较好
2 全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减,它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369125.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode的二分查找的练习部分总结

这两天由于工作的原因,一直没有写博客,但是却把LeetCode上面的题目做了不少——二分查找。上面这些题都是这两天写的。现在简单做一个总结。 首先二分查找的思想就是对一个有规律的元素(事情)进行不断的排除,最后找到符…

在Mac上安装IntelliJ IDEA

在Mac上安装IntelliJ IDEA http://www.jetbrains.com/idea/documentation/ 入门视频 这篇文章旨在介绍如何在Mac系统上安装IntelliJ IDEA,至于IntelliJ IDEA的介绍和使用方法,大家另行查阅,本篇的文章不再详细阐述。 简短解说,I…

mysql sohu_【MySQL中间件之SOHU-DBProxy】

SOHU-DBProxy是由 搜狐 数据库团队开发维护的一个基于MySQL协议的数据中间层项目。它在MySQL官方推出的MySQL-Proxy 0.8.3版本的基础上, 修改了大量bug,添加了很多功能特性。现在已经在sohu的多个业务线上使用DBProxy 兼容 MySQL 协议,可以用…

JavaFX:太空侵略者在175 LOC以下

使用当前版本的API,我对太空侵略者的评价不到175个LOC。 我的API中有很多“功能接口”,可以使用JavaFX 8(例如SpriteProvider和CollisionHandler)将其转换为Lambda表达式。 这将使代码更好,更短。 我可能还可以通过捆绑…

行内元素,块级元素,各自特点及其相互转化

作为一名小前端,块级元素、行内元素用了几千几万次,除了“块级独占一行,行内不独占”之外,对细节属性的了解十分匮乏,今天做以部分属性的测试和阐述。 一、 对物理属性的支持 元素类别widthheightpaddingmargin是否独…

mysql断开同步并记录位置_数据库同步自动断开问题的处理

堡垒机的实施过程中,因为做了双机,所以要对两台堡垒机进行数据库的主从同步和HA配置。在部署完mysql主从同步以后,发现同步会有中断的现象。中断表现为Slave_IO_Running: YesSlave_SQL_Running: NoReplicate_Do_DB:Replicate_Ignore_DB:Repli…

[NOIP2016提高组]换教室

题目:洛谷P1850、UOJ#262、BZOJ4720、Vijos P2005。 题目大意:有n个时间段,第i个时间段只能在教室$c_i$上课,另一个上这门课的教室在$d_i$。现在你最多可以进行m次申请,对于第i个时间段的申请如果成功,那么…

从RSS Feed和YQL创建数据表

Yahoo Query Language( YQL )是一种查询语言,例如SQL。 使用YQL,我们可以跨Web服务 查询 , 过滤和联接数据。 YQL也可以阅读RSS feed。 响应可以是JSON或XML。 雅虎提供了一个YQL控制台,用于调试 &…

background-image使用svg如何改变颜色

结论 在我多番测试之后,才发现background-image使用svg,改变颜色根本做不了。 分析 当svg图片被使用成background-image,颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式,却是无效,这其实可以从CSS选择器得到…

NOIP 2012 Day2

tags: 扩展欧几里得二分答案查分倍增二分答案贪心NOIP categories:信息学竞赛总结同余方程借教室疫情控制 同余方程 Solution 首先同余式可以转化为等式.\[ax\equiv 1\mod b\Leftrightarrow axby1\]   根据扩展欧几里得定理, 对于式\[axbyk(a,b),k\in \mathbf{R}\]一定存在整…

Qt之QSS(Q_PROPERTY-自定义属性)

版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣、好玩、靠谱。。。作者:一去丶二三里 博客地址:http://blog.csdn.net/liang19890820 目录(?)[] 简述 在Qt之QSS(Q_PROPERTY-原始属性&a…

python print error 空_python笔记37:10分钟掌握异常处理,再也不担心程序挂了

主要内容:小目标:异常处理主要内容:错误与异常,try_except语句对于撸代码的程序员来说,程序运行中出现问题是常见的现象;实际学习与工作中,我们会花很大的精力去解决各种问题;1. 程序…

在URL参数中传递复杂对象

假设您要传递原始数据类型,例如复杂的Java对象 java.util.Data,java.lang.List,泛型类,数组以及通过URL参数所需的所有内容,以便在页面加载后在任何网页上预设默认值。 共同的任务? 是的,但是可…

contenteditable元素的placeholder输入提示语设置

在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable。 然后可能需要像input、textarea有placeholder的输入提示语,但…

CF 961E Tufurama

JYZdalao上课讲了这道题&#xff0c;觉得很好可做 其实也是一道理解了就水爆了的题目 把题意抽象化&#xff0c;可以发现题目求的满足 i<ja[i]>ja[j]>i的i&#xff0c;j对数。由于i&#xff0c;j顺序问题&#xff0c;可以在不考虑i&#xff0c;j顺序的情况下将ans>…

使用JCA的密码术–提供者中的服务

Java密码体系结构&#xff08;JCA&#xff09;是一个可扩展的框架&#xff0c;使您能够使用执行加密操作。 JCA还促进实现独立性&#xff08;程序不应该在乎谁提供加密服务&#xff09;和实现互操作性&#xff08;程序不应该与特定加密服务的特定提供者联系在一起&#xff09;。…

IE浏览器支持响应式网站设计

目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局&#xff0c;其理念是&#xff1a;集中创建页面的图片排版大小&#xff0c;可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 但是, 响应式设计并不能原…

python循环for不从零开始_Python-多处理-巨大的for循环

下午好&#xff0c;我对Python还是很陌生&#xff0c;我必须解决一个需要尝试数十亿个假设的问题...更具体地说&#xff0c;我需要迭代440个元素的列表&#xff0c;但我需要这样做8次...(是的&#xff0c;我知道OS迭代的次数完全是疯狂的。我的机器相当不错&#xff0c;所以我想…

Bridge Across Islands POJ - 3608 凸多边形间最小距离/旋转卡壳

旋转的部分始终感觉有点别扭。。后来发现是因为叉积顺序为负。。 所以让三角形面积逐渐变大实际上就是让三角形面积变小&#xff08;绝对值意义上的&#xff09;&#xff0c;这样就是让高变小了。。 至于为什么要选最下和最上。。应该是为了满足两条线始终可以生成所有多边形间…

绑定到JSON和XML –处理集合

EclipseLink JAXB&#xff08;MOXy&#xff09;的优势之一是能够通过一组元数据将对象模型映射到JSON和XML。 一个弱点是您需要在JSON键或XML元素上折衷集合属性。 我很高兴地说这个问题已经在EclipseLink 2.5&#xff08;和EclipseLink 2.4.2&#xff09;中得到解决&#xff0…