CSS快速入门-盒子模型
一、CSS盒子模型概述
css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
content：内容的实际空间
padding：边框和内容之间的空间
margin：盒子与盒子之间的空间
border：边框
二、盒子模型的类型
盒子模型分为IE盒子模型和标准盒子模型
起因
为什么会有IE盒子模型呢？当年微软的IE浏览器占据超过80%市场份额的时候，想自己独立制定一套浏览器标准，其中就包括IE的盒模型。
但是其他诸如Mozilla，Google等公司不同意IE的做法，他们遵循的是W3C的标准来定制浏览器，也就是W3C标准盒模型，因此就造成了现在浏览器不同的CSS盒模型了。
1、IE盒子模型（width包括了padding）
2、标准盒子模型
1、区分比较简单：IE模型：width=boder*2+padding*2+content
标准模型：width=content
2、选择
实际当中，我们选择哪个模型呢？当然是标准模板了。
3、怎么操作？
在网页上定义：<!DOCTYPE html>
三、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
div {
width:40px;
height:40px;
border:2px dashed red;
margin-top:20px;
padding-left:10px;
padding-top:20px;
padding-right:30px;
padding-bottom:40px; }
</style>
</head>
<body>
<div>
aaa
</div>
</body>
</html>
我们定义了一个div，然后设定高度、宽度、边框、margin、padding参数，从浏览器上我们可以清晰的看到盒子模型。
CSS快速入门-盒子模型的更多相关文章
- CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- css中的盒子模型
css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型. 1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...
- 【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
- CSS学习之盒子模型
1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- 前端开发HTML&css入门——盒子模型以及部分CSS样式
CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
随机推荐
- UNIX高级环境编程（2）FIle I/O － 原子操作、共享文件描述符和I/O控制函数
引言: 本篇通过对open函数的讨论,引入原子操作,多进程通信(共享文件描述符)和内核相关的数据结构. 还会讨论集中常见的文件IO控制函数,包括: dup和dup2 sync,fsync和fdatas ...
- Linux which/whereis/locate命令详解
which 查看可执行文件的位置,从全局环境变量PATH里面查找对应的路径,默认是找 bash内所规范的目录 whereis 查看文件的位置,配合参数-b,用于程序名的搜索,从linux数据库查找. ...
- 详细透彻解读Git与SVN的区别（集中式VS分布式）
Git是目前世界上最先进的分布式版本控制系统,其实 Git 跟 SVN一样有自己的集中式版本库或服务器,但是Git 更倾向于被使用于分布式模式,也就是每个开发人员从中心版本库/服务器上chect ou ...
- 铁乐学python_md5校验两个文件的一致性
# 写一个函数,参数是两个文件的路径 # 返回的结果是T/F # 判断两个文件的md5值是否相同 import hashlib def diff_md5(file1,file2): def chick ...
- Mysql不改默认侦听回环地址而ssh通道连接的办法
Mysql不改默认侦听回环地址而ssh通道连接的办法 文:铁乐与猫 比较新版的mysql默认侦听的网卡地址是本地回环地址:127.0.0.1: 比如你在/etc/mysql/my.cnf配置文件中往往 ...
- RYU基础整理
1. RYU结构,源码 1.1 RYU文件目录 下面介绍ryu/ryu目录下的主要目录内容. base base中有一个非常重要的文件:app_manager.py,其作用是RYU应用的管理中心.用于 ...
- DotNET中的幕后英雄：MSCOREE.DLL
现在做.NET Framework的开发的朋友应该是越来越多了,但是可能并非人人都对MSCOREE.DLL非常了解.而事实上,毫不夸张地说,MSCOREE.DLL是.NET Framework中最为核 ...
- 20165318 2017-2018-2 《Java程序设计》第三周学习总结
20165318 2017-2018-2 <Java程序设计>第三周学习总结 学习总结 我感觉从这一章开始,新的知识点扑面而来,很多定义都是之前没有接触过的,看书的时候难免有些晦涩.但由于 ...
- iPhone X进入DFU模式
下面把iphoneX进dfu模式的方法分享给大家.在开机状态下,按一下音量加键后松开,然后按一下音量减键后松开,接着按住电源键,屏幕完全熄灭后,松开电源键,接着同时按住电源键和音量减,保持5秒左右,再 ...
- 【转】Spring Boot干货系列：（六）静态资源和拦截器处理
前言 本章我们来介绍下SpringBoot对静态资源的支持以及很重要的一个类WebMvcConfigurerAdapter. 正文 前面章节我们也有简单介绍过SpringBoot中对静态资源的默认支持 ...