文档章节

DIV盒子模型理解的总结

Owen_Gao
 Owen_Gao
发布于 2013/10/23 20:54
字数 378
阅读 51
收藏 1
1.盒子模型的计算

外边距(margin)+边框(border)+内边距(padding)+内容(content)

在CSS中的width和height只是对内容区域的高和宽设定.不是对整个和模型的高和宽设定.

CSS中的宽度(width)和高度(height)只是对块级元素内容(content)的高度和宽度的设定,不影响块级元素的高度和宽度.

但是修改CSS中的宽度(width)和高度(height),会影响到块级元素的宽度和高度.

在修改CSS中的(内边距)padding和(外边距)margin的时候,若要保持块级元素的高度和宽度不变,那么就需要修改CSS中的width和height,以保持块级元素的width和height不变化.

修改CSS中padding和margin都不会影响content的width和height,但是会影响到块级元素的width和height.

当块级元素内层还有块级元素的时候,若内层的块级元素的width,height,padding,margin,border发生变化的时候,都会影响到外层的块级元素,相当于影响了整个块级元素.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
*{margin:0; padding:0;}
dl { background:red;border:10px solid #000; width:100px; height:100px;}
dt { background:yellow;}
dd { background:green;}
</style>
</head>
<body>
<dl>
	<dt>test of dt</dt>
	<dd>test of dd</dd>
</dl>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
Owen_Gao
粉丝 6
博文 52
码字总数 22501
作品 0
广州
我对margin外边距合并的理解

在我初学css的时候,关于css盒模型的外边距合并问题,迷惑了我很久。在写demo的时候,我只是尽量避免两个div外边距合并,怕出现各种各样匪夷所思的bug。 工作不久,经过几个项目的洗礼,这个...

会写代码的husky
2016/09/21
75
0
DIV+CSS盒子模型

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

晨曦之光
2012/04/24
121
0
Css关于浮动造成父级塌陷的总结

基础概念 文档流: 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。 脱离文档流 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候...

从零_开始
2017/10/09
0
0
WEB标准布局(DIV+CSS)学习笔记(一)--基础知识

首先,CSS样式有4种使用方式: 1、外部样式 2、内部样式 3、行内样式 4、导入样式 外部样式:把CSS样式写入到一个单独的文件中,每个HTML页面链接该文件,是使用最为广泛的方式,很好的体现了...

小叶与小茶
2013/12/24
268
0
盒子模型(Box Model)

一、背景 就像玩积木,可以随意的摆放想要的效果。 来看张图,体会下盒子模型。 其实。所有的标签都会生成一个矩形框(给它添加一个背景色就会看到),称为元素框(element box),它描述了一...

阿豪的girl
08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[Hive]JsonSerde使用指南

注意: 重要的是每行必须是一个完整的JSON,一个JSON不能跨越多行,也就是说,serde不会对多行的Json有效。 因为这是由Hadoop处理文件的工作方式决定,文件必须是可拆分的,例如,Hadoop将在...

Mr_yul
14分钟前
0
0
54:mysql修改密码|连接mysql|mysql常用命令

1、mysql修改密码: root用户时mysql的超级管理员,默认mysql的密码是空的,直接可以连接上去的,不过这样不安全; 注释:为了方便的使用mysql,需要把mysql加入到环境变量里; #后续自己输入mys...

芬野de博客
21分钟前
0
0
鼠标单击复制粘贴标签中的内容

<span ref="spanContentOne" id="spanContentOne" style="font-size: 14px;">或许不是最亮眼,总比瞎买强一点</span><!--<input type="button" @click="copyClick('1')" value="复制" />-......

帝子兮
26分钟前
0
0
使用axel多线程疯狂下载

在Linux中比较常见见的下载工具是curl和wget,但是下载比较大的文件两者都不支持多线程, 断点续传的作用不见得能发挥到最大。今天介绍一个axel工具,开启多线程疯狂下载。 安装 Fedora/Cen...

linuxprobe16
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部