css3 盒模型
0,前言
在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型。在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不甚,有会带来混乱。css3让我们之前了解的怪异模式能够很好的在页面中使用,下面来了解下上面提到的w3c标准盒模型和怪异模式下的盒模型。
div {
width: 200px;
height: 100px;
padding: 20px;
border:30px solid blue;
margin: 10px;
background: red;
}
1,w3c标准盒模型


2,怪异模式下盒模型
式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声
明,将使网页进入怪异模式(quirks mode)。

3,CSS3 盒模型


css3 盒模型的更多相关文章
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- 第94天:CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- 5.css3盒模型--margin/border/padding/content
1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...
- css3盒模型
css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...
- CSS3盒模型之box-sizing
这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...
- CSS3盒模型——box-sizing
box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...
- CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...
随机推荐
- 2.6.2 Notification的功能与用法
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...
- 检查string是否为double
之前写的方法,使用try catch来处理 如果能捕获异常就说明问题 public bool CheckLegal() { double number; bool flag = true; try { ...
- C++11内存模型的一些补充阅读材料
<Intel Threading Building Block> O'REILLY Chapter 7 Mutual Exclusion - Atomic Operation - Memo ...
- -_-#【JS】element.click()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- POJ -- 3140
#include<iostream> #include<cstdio> #include<cstring> #include<string> #defi ...
- 白帽子讲Web安全2.pdf
XSS构造技巧 利用字符编码: var redirectUrl="\";alert(/XSS/);"; 本身没有XSS漏洞,但由于返回页面是GBK/GB2312编码的“% ...
- 2008---2009学年(A)B)第1学期《中国近代史纲要》课程考核试卷
湖南人文科技学院公共课 2008---2009学年第1学期<中国近代史纲要>课程考核试卷(A) 考核方式: (闭卷) ...
- Shell简介:什么是Shell,Shell命令的两种执行方式
Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...
- php分页类代码和使用
在这要说的一点就是如果你做的分页是有搜索条件的,那么就可以用下面的代码,然后调用之后在new Page()里面把连接加进去就可以了.例如: $href="http://www.***.cn/ ...
- iOS 视频播放的简单使用
最近工作中有用到视频播放的内容,分享一些简单的用法给大家(由于网速问题,本例中使用的是本地的资源进行播放,要播放网络上的修改一些URL即可) 1.iOS9之前的视频播放 首先需要导入MediaPlay ...