文档章节

CSS的盒子模型

dong23
 dong23
发布于 2017/09/11 14:00
字数 204
阅读 10
收藏 0

盒子模型分为IE盒子和W3C盒子两种:

W3C盒子由margin,border,padding,content

IE盒子由margin,padding,padding,content构成,但是由于content包括padding,border,即为margin+content

 

例如一个盒子模型如下:margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释,那么这个盒子模型占用的

 宽度为:20*2+10*2+10*2+200=280px; 

  高度:20*2+10*2+20*2+50=130px;

 盒子的实际宽度大小为:10*2+10*2+200=240px;

 实际高度:10*2+10*2+50=90px;

用ie的盒子模型解释 :盒子在网页中占据的大小为20*2+200=240px; 高:20*2+50=90px;

盒子的实际大小为:宽度:200px,  高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

 

© 著作权归作者所有

共有 人打赏支持
dong23
粉丝 0
博文 10
码字总数 1763
作品 0
盒子模型的理解

概述 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性。 这些属性我们可以把它转移到我们日常生活中的盒...

名字已被取
2016/03/14
51
0
CSS 盒子模型 Box Model

CSS 盒子模型概述 element : 元素。 padding : 内边距,也有资料将其翻译为填充。 border : 边框。 margin : 外边距,也有资料将其翻译为空白或空白边。 盒子模型有两种,分别是 IE 盒子模型...

ivon_lee
2014/04/19
0
1
DIV+CSS盒子模型

CSS盒子模型-什么是CSS盒子模型。 认识日常生活中盒子: 常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。 CSS盒子: 根据字面我们...

晨曦之光
2012/04/24
121
0
10分钟复习CSS盒模型与BFC

css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区、paddi...

coderLfy
06/30
0
0
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
06/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
29分钟前
25
5
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
31分钟前
0
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部