文档章节

深入理解CSS盒子模型

reid3290
 reid3290
发布于 2015/03/16 16:18
字数 379
阅读 10
收藏 0

1 盒模型主要用于块级元素在网页上的布局和定位问题,而行内布局模型则适用于行内元素。

2 在css中用width和height属性确定一个元素的宽度和高度时,这个width和height只是内容区域的宽和高,并不包括内边距、边框和外边距(但在IE的早期版本包括IE6中,盒模型的width和height却恰恰是这样定义的,尽管符合人们思考的逻辑,但是不符合规范,会造成严重的问题)。

3 若不对一个元素的width和height属性作任何设定,其默认值就是auto。但对于采用不同方式进行定位的元素,浏览器对其width有两种处理方式(虽然都是默认值auto):

    1 对于position:static 或 position:relative 的元素而言,其宽度是该元素包含块的宽度减去其左右外边距、左右边框和左右内边距。也就是说:该元素尽最大可能撑满包含块。

    2 对于position:absolute 或 position:fixed 或 浮动定位元素而言,其宽度是就是其实际内容的宽度。

4 无论内容区域如何定位,如果高度,最小高度(min-height),最大高度(max-height等没有被声明的话,内容区域高度与内容的高度是相等的。


© 著作权归作者所有

reid3290
粉丝 2
博文 64
码字总数 15933
作品 0
闵行
程序员
私信 提问
10分钟复习CSS盒模型与BFC

css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区、paddi...

coderLfy
2018/06/30
0
0
盒子模型的理解

概述 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。 这些属性我们可以把它转移到我们日常生活中的盒...

名字已被取
2016/03/14
60
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
330
1
DIV+CSS盒子模型

CSS盒子模型-什么是CSS盒子模型。 认识日常生活中盒子: 常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。 CSS盒子: 根据字面我们...

晨曦之光
2012/04/24
143
0
【Hello CSS】第六章-文档流与排版

首发:krissarea.gitee.io 作者:陈大鱼头 github: KRISACHAN 正常流 什么是“正常流”? 其实就是我们日常所说的“文档流”。 在W3C官方文档里对应的是“normal flow”。 正常流的盒子属于...

陈大鱼头
04/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
30分钟前
6
0
wildfly(JBoss AS)应用服务器快速入门

什么是wildfly JBoss AS 从8版本起名为wildfly。Wildfly是一个开源的基于JavaEE的轻量级应用服务器。可以在任何商业应用中免费使用。 WildFly是一个灵活的、轻量的、强大管理能力的应用程序服...

程序新视界
54分钟前
5
0
Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾。 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术 https://blog.csdn.net/column/details/21930...

Java技术江湖
57分钟前
6
0
怎么用for循环打出爱心

先上效果图: 这是用*组成的爱心,下面讲讲思路: 首先这个图形可以拆分成三部分:第一部分是上面三行的两个梯形,第二部分是中间三行的长方形,第三部分是最下面的倒三角形。 其实图形拆分好...

INEVITABLE
今天
4
0
用HttpUrlConnection伪造成HttpClient

https://www.jianshu.com/p/27ad06cc39d2

shzwork
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部