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 Web API 2第五课——Web API路由
Asp.Net Web API 导航 Asp.Net Web API第一课——入门 http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web ...
- unity3d asset store下载的代码所在位置
Asset Store下载了官方的示例,却找不到了,又不想重新下载 PC:C:\Users\PCNAME\AppData\Roaming\Unity\Asset StoreMAC:"~/Li ...
- jenkins2 Jenkinsfile
推荐使用Jenkinsfile代替将groovy脚本直接写在jenkins job里. 文章来自:http://www.ciandcd.com文中的代码来自可以从github下载: https://g ...
- 说不尽的MVVM(4) – 发号施令的Command
知识预备 阅读本文,我假定你具备以下知识: C# WPF基础知识 知道WPF的命令 WPF相对WinForm加了一种Command的机制,对用户的操作进行更加灵活的处理,相信很多朋友知道并用过Rout ...
- Intellij IDEA13无法使用SVN
症状:在公司里面idea13工作正常,到了家里后idea的svn就是无法正常工作,单独使用tortoisesvn一切正常,后来在网上看到有网友解决了这个问题,看了之后明白了为啥公司的正常,家里的不行, ...
- Express 4 更新改变文档
概览 从 Express 3 到Express 4 是一个巨大的变化,这意味着现存的 Express 3 应用在不更新依赖的情况下将不能工作. 这篇文章涵盖一下内容: Express 4 中的变化 一 ...
- 微软发布Windows 10：连Windows 7都能免费升级了
今日凌晨,微软宣布Windows 10发布. Windows10 整体重置了 Window8 的设计,恢复了原有的开始菜单设置,系统新增了虚拟桌面功能,搜索框加分类项的形式替代原有的两栏式控制面板界面 ...
- 浅谈压缩感知（二十八）：压缩感知重构算法之广义正交匹配追踪(gOMP)
主要内容: gOMP的算法流程 gOMP的MATLAB实现 一维信号的实验与结果 稀疏度K与重构成功概率关系的实验与结果 一.gOMP的算法流程 广义正交匹配追踪(Generalized OMP, g ...
- 【原】在windows下使用VirtualEnv
VirtualEnv可以方便的解决不同项目中对类库的依赖问题.这通常是通过以下方式实现的:首先将常用的类库安装在系统环境中:然后为每个项目安装独立的类库环境.这样子可以保证每个项目都运行在独立的类库环 ...
- fgets函数执行完成后，文件指针如何移动？
用fgets执行之后,读取了文件中的一行,这时文件位置指针是自动指向文件的下一行的开头吗,还是指向当前行的结尾?如果一行的字符串没读取完会怎样? 实例结果: 如果一行的字符串没读取完会,下一次会接着上 ...