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 ...
随机推荐
- 调研一类软件的发展演变—聊天软件（ 1000-2000 words, in Chinese）
因为本人平时对聊天软件的涉及比周边其他同学而言所涉及的是比较多的.所以说想写写这个东西.(ps本文里面的具体通讯信息的时间安排不分先后) 也许最起初的通讯信息的传达是利用.烽火狼烟这一类可以远距离视觉 ...
- Unity3D——相机跟随物体移动
public Transform target; public float moveSmooth=5f; Vector3 offset; void Start () { offset = transf ...
- git删除push到远程服务器的commit
如果不小心把不该提交的代码或者敏感的数据(如密码)提交到远程git服务器上,可以使用git reset回滚到上一个commit,并且commit history不留下任何痕迹. 具体做法: # 1.通 ...
- Server Develop （七） Linux 守护进程
守护进程 守护进程,也就是通常说的Daemon进程,是Linux中的后台服务进程.它是一个生存期较长的进程,通常独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.守护进程常常在系统引导装 ...
- JavaScript 火的有点过头了，但又能火多久呢？
2016年的前端是遍地开花的一年,各种前端框架,各种库,学都学不完,反正在前端的世界里,没有什么是JavaScript实现不了的... JavaScript 你还能再火几年?? 前些年node被捧上天 ...
- struts2学习笔记之一:基本简介
Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个Servlet,在MVC设计模式中,Struts2作为控制器来建立模型与视图的数据交互(所有的访问都会被控制器操作控制) ...
- python连接数据库
使用pymysql://安装pymysqlpip install pymysql 代码: # coding=utf8 import pymysql # 创建连接对象 conn = pymysql.co ...
- jmap命令(Java Memory Map)(转)
JDK内置工具使用 一.javah命令(C Header and Stub File Generator) 二.jps命令(Java Virtual Machine Process Status To ...
- 使用Nginx负载均衡搭建高性能.NETweb应用程序一
一.遇到的问题 当我们用IIS服务器部署了一个web应用以后,当很多用户高并发访问的时候,客户端响应就会很慢,客户的体验就会很差,由于IIS接受到客户端请求的 时候,就会创建一个线程,当线程达到几千个 ...
- nginx是一个反向代理的软件
nginx只是一个反向代理的软件,和语言无关,理论上支持任何Web平台,当然http://Asp.net也不例外,http://51aspx.com就是http://Asp.net开发的,前端暴漏的是 ...