CSS基础（四）：盒模型
CSS盒模型
HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。
使用Firebug，可以轻松地查看到盒子的布局大小。
盒子本身的大小是这样计算的：
width: width + padding-left + padding-right + border-left + border-right
height: height + padding-top + padding-bottom + border-top + border-bottom
静态定位或相对定位的盒子
当放置一个块级元素于页面上时，并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.box1
{
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px;
}
</style>
</head> <body>
<h2>静态定位和相对定位的盒子</h2>
<div class="box1">静态定位和相对定位的盒子</div>
</body>
</html>
注意上面的盒子是没有声明宽度的，所以默认宽度为100%，padding 和 border 会向内推动，而不是向外扩展。
但是当声明宽度后，那么 padding 就会向外延展。
浮动和绝对定位的盒子
当设置浮动float元素和绝对定位元素，他们的结果却恰恰相反，他们会收缩以致包裹紧贴内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.box1
{
background:black;
color:White;
height:100px;
padding:10px;
border:20px solid Red;
margin:30px; position:absolute;
}
</style>
</head> <body>
<h2>浮动和绝对定位的盒子</h2>
<div class="box1">浮动和绝对定位的盒子</div>
</body>
</html>
亲眼目睹一下
想看看组成页面的每个单独的“盒子”吗？试着把这行代码暂时放入样式表：
* { border: 1px solid red !important; }
CSS基础（四）：盒模型的更多相关文章
- CSS基础必备盒模型及清除浮动
盒模型 盒模型是有两种标准的,一个是标准模型,一个是IE模型. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing /* 标准模型 */ box-sizing:content-b ...
- css 选择器；盒模型
一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...
- 浅谈css中的盒模型（框模型）
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- CSS基础之盒子模型及浮动布局
盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- 关于CSS你应该知道的基础知识 - 盒模型篇
浏览器渲染引擎通过盒模型的方式来布局html元素.我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样的盒子组成了我们的网页. Margin,Border,Padding 每一 ...
- web开发： css高级与盒模型
一.组合选择器 二.复制选择器优先级 三.伪类选择器 四.盒模型 五.盒模型显示区域 六.盒模型布局 一.组合选择器 <!DOCTYPE html> <html> <he ...
随机推荐
- ASP.NET 5中的静态文件处理
ASP.NET 5 与之前的 ASP.NET 相比,有着翻天覆地的变化.了解与熟悉它需要一个过程,而我选择的了解方式是一步一步从无而有手写一个简单的 ASP.NET 5 程序,然后根据遇到的问题进行学 ...
- Python模拟HTTP Post上传文件
使用urllib2模块构造http post数据结构,提交有文件的表单(multipart/form-data),本示例提交的post表单带有两个参数及一张图片,代码如下: #buld post bo ...
- 04-Vue入门系列之Vue事件处理
4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...
- js随机点名
定时器案例. <!-- Author: XiaoWen Create a file: 2016-12-08 12:27:32 Last modified: 2016-12-08 12:51:59 ...
- paip.python3 的类使用跟python2 的不同之处
paip.python3 的类使用跟python2 的不同之处 #------python3的写法而且使用.. #class syllable(BaseClassA, BaseClassB): cla ...
- LDR 和 ADR 彻底详解
0.什么是位指令? 答:伪指令(Pseudo instruction)是用于告诉汇编程序如何进行汇编的指令.它既不控制机器的操作也不被汇编成机器代码, 只能为汇编程序所识别并指导汇编如何进行. 1.L ...
- Windows下如何枚举所有进程
要编写一个类似于 Windows 任务管理器的软件,首先遇到的问题是如何实现枚举所有进程.暂且不考虑进入核心态去查隐藏进程一类的,下面提供几种方法.请注意每种方法的使用局限,比如使用这些 API 所需 ...
- STM32 CANBus RAM Layout
F8 FF FF FF //F0R0 F0R1 F8 FF FF FF //F1R0 F1R1 F8 FF FF FF F8 FF FF FF F8 FF FF FF F8 FF FF FF F8 F ...
- Ubuntu 汉化及kate汉化和使用自带终端的解决方式
汉化方法:1,打开屏幕上方的“system”(系统),里面有个“Administration”(系统管理),选择“Snaptic Package Manager”(软件包管理器),打开,输入密码后进入 ...
- JAVA中取子字符串的几种方式
有这样一串字符串:String s = "共 100 页, 1 2 3 4..."; 假如我想把"100"给取出来,该如何做? 方法一: 采用split的方式 ...