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 ...
随机推荐
- Heroku空项目 Git本地Push代码错误 以及 Heroku Web启动错误
在Eclipse下建了一个"Blank Heroku App", 然后将自己写好的JS Web练习代码直接复制放到了这个空项目下, 由于Eclipse下的git工具不太会用, 导致 ...
- [MSSQL2012]First_Value函数
First_Value返回结果集中某列第一条数据的值,跟TOP 1效果一样,比较简单的一个函数 先贴测试用代码 DECLARE @TestData TABLE( ID INT IDENTITY ...
- 2-MSP430按键输入检测
为了写一篇文章做铺垫--提醒着自己,,,,,, P1.0的电平,随着P1.1引脚输入的电平变化而变化 #include "io430.h" void delay(void) { u ...
- CSS3实现的超酷动态圆形悬浮效果
在线演示 本地下载 了解代码是如何开发的? 请参考并且播放如下代码轻视频: http://www.gbtags.com/gb/rtreplayerpreview/151.htm
- [Java拾遗一] XML的书写规范与解析.
前言今天天气大好, 起了个大早开始总结一些常用的基础知识. XML一直来说都很陌生, 使用大多是用于配置文件, 之前并没有细究过其中的约束规范, 今天刚好没事来学习并总结下. 1,XML基础介绍 XM ...
- [jQuery学习系列二 ]2-JQuery学习二-数组操作
前言 上一篇内容 已经对于Jquery 有了一些认识, 包括Jquery的选择器和DOM对象, 那么这一篇继续来看下Jquery中很实用的Jquery对于数组的操作. Jquery中对数组的操作大致有 ...
- piap.excel 微软 时间戳转换mssql sql server文件时间戳转换unix 导入mysql
piap.excel 微软 时间戳转换mssql sql server文件时间戳转换unix 导入mysql 需要不个mssql的sql文件导入mysql.他们的时间戳格式不同..ms用的是自定义的时 ...
- JAVA学习Swing章节按钮组件JButton的简单学习
package com.swing; import java.awt.Container; import java.awt.Dimension; import java.awt.GridLayout; ...
- 关于EntityFramework连接Oracle的详细教程
研发环境需安装的组件 Oracle Developer Tools for Visual Studio 2015 - MSI Installer 来自Oracle官网. 为Visual Studio ...
- Call and Apply in JavaScript
Call 和 Apply 方法可以用来代替另一个对象调用一个方法,改变this指向. 1.call -call([thisObj[,arg1[, arg2[, [,.argN]]]]]) -调用一 ...