文档章节

CSS的盒子模型

dong23
 dong23
发布于 2017/09/11 14:00
字数 204
阅读 12
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

storm 环境搭建

1.下载解压 下载地址:http://storm.apache.org/downloads.html

MrPei
5分钟前
0
0
Python Base - 读写文件,字符串拼接,单引号

字符转义 读写文件cvs 字符串拼接,替换 import csvcsv_file_name = 'cardbin.csv'# insert into `card_bin_code` (name_of, code_of, card_no_prefix, bank_code) values ('中国银行......

园领T
7分钟前
0
0
基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%><div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">   <div style="width: 200px;height:20px; z-index: 20000; position: abs......

颖辉小居
7分钟前
0
0
springboot+kafka

1,首先springboot对kafka的支持也很好,同样是在配置文件中配置好参数,然后就可以直接使用。先说一下,很简单,,,不要怕 2,我用的依赖是 <dependency> <groupId>org.springframewor...

我真是小菜鸡
11分钟前
2
0
webservice动态客户端自我记录备份(spring boot)

动态客户端相比直接调用webservice的客户端代码要简单很多,但实际上很多工作是java自己替我们做掉了。简单记录一下内容,以备后续使用: pom文件只需要引入: <!-- CXF webservice --><de...

checkboxMan
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部