CSS Display属性与盒模型
由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个。 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box。 依据display
属性的不同。Box的呈现方式又有所不同。
本文首先引入CSS盒模型。然后通过不同的display
属性分别介绍Box常见的呈现方式。
Box Sizing:元素大小的计算方式
在HTML中。不论什么HTML元素都会被呈现为一个矩形。该矩形由内容、内边距、边框、外边距构成。举个样例:
<style>
.box-demo{
width: 100px;
height: 100px;
border: 50px solid green;
padding: 30px;
margin: 50px;
background: yellow;
}
</style>
<div class="box-demo"></div>
上述的<div>
中,内容、边距与边框例如以下图所看到的:
- 黄色的背景作用于内容和内边距构成的矩形,其宽高为
160px
:宽度100px
+两側的内边距30px
X2; - 绿色部分为边框,宽度为
50px
; - 与浏览器边框的距离为外边距,宽度为
50px
。
样例中width
属性定义的是内容的宽度,不包括边距、边框。然而在IE中width
定义的是内容+内边距+边框的宽度。
这是由box-sizing
属性来定义的,前者的默认值为content-box'。后者的默认值为
border-box`。
Display:渲染类型
了解了box-sizing
之后,我们回到display属性。display
指定了元素渲染Box的类型(type
of rendering box)。我们来看它经常使用的取值:
none
:
隐藏元素;inline
:行内元素,顾名思义。用于把一个元素放在行的内部;block
:块元素,用于显示占用一行的块。inline-block
:以block
的方式渲染。以inline
的方式放置。table-cell
:以表格元素的方式显示。
隐藏元素
none
是最easy理解的取值。当一个元素的display
CSS属性被设为none
时,该元素不会被渲染,也不会占位,就像不存在一样。对布局不会产生不论什么影响。
行内元素
行内(inline
)元素不会打断文本流。默认(UA)显示为inline
的元素包含:<span>
。<a>
,<em>
等。它们的出现不会使得兴许元素另起一行。行内元素能够设置margin
与padding
,但margin
仅仅在水平方向上起作用:
div{
display: inline;
background: red;
padding: 10px;
margin: 10px;
}
上图中,红色背景的是一个<div>
,其大小为内容大小+padding
。左右的空隙即为外边距margin
。能够看到在Chrome中,这个inline
的<div>
遮挡了出如今它前面的文本,同一时候被出如今它后面的文本所遮挡。这正是流式文档的特性。
另外,对inline
元素设置width
与height
是不起作用的。
块元素
块(block
)元素会中断当前的文本流。另起一行,并在父元素中尽可能地占领最大宽度。常见的块元素有<p>
,<div>
,<section>
等。
通常块元素不可包括在行内元素内部。比如以下的两个<p>
标签,不论内容是否足够。都会占领整个body
的宽:
行内块
行内块(inline-block
)将会产生一个块元素,并以行内元素的方式放置。
什么意思呢?该元素的样式是以块元素的方式来渲染的。比如能够设置宽和高。然后以行内元素的方式放置在其上下文中,就像在行内元素的位置上替换成这个块元素一样。
MDN:The element generates a block element box that will be flowed with surrounding content as if it were a single inline box.
相同地。我们在一行文本内增加一个<div>
。这次将它的display
设为inline-block
:
div{
display: inline-block;
background: yellow;
padding: 10px;
margin: 10px;
height: 20px;
}
此时。垂直方向的margin
和height
都起作用了:
- 蓝色部分为内容,能够看到其高度为
20px
; - 绿色部分为
10px
的padding
; - 接着,
border
为空; - 红色为
10px
的margin
。
inline-block
与inline
的不同在于:垂直方向上的margin
也会起作用,而且能够设置width
和height
。inline-block
是很经常使用的样式设置。
表格元素
display
设为table-cell
的元素与<td>
标签的行为一致,即:可设置padding
。不接受margin
,可伸缩的width
。
IE6/7不支持
table-cell
,然而WinXP已经下架。Win7的标配是IE8。如今能够放心地使用table-cell
了。
利用table-cell
属性能够在不写<table>
标签的情况下完毕表格布局:
<style>
.left, .right{
display: table-cell;
line-height: 50px;
}
.left{
background: yellow;
min-width: 150px;
}
.right{
background: lightgreen;
width: 100%;
}
</style>
<div>
<div class="left">This is left cell</div>
<div class="right">This is right cell</div>
</div>
左側固定150px
宽度,右側自适应:
除非注明,本博客文章均为原创。转载请以链接形式标明本文地址: http://harttle.com/2015/05/28/css-display.html
CSS Display属性与盒模型的更多相关文章
- css display flew 伸缩盒模型
父级容器属 <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- css文档之盒模型阅读笔记
前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- css中的width,height,属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...
- 被废了的display:box弹性盒模型
这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
随机推荐
- [Apple开发者帐户帮助]八、管理档案(1)创建开发配置文件
您可以在开发人员帐户中创建开发配置文件,以便在Xcode中手动签署应用程序时使用. 在开始之前,您需要一个App ID,一个或多个开发证书以及一个或多个已注册的设备.您可以使用Xcode为您管理的Ap ...
- easyui -tree的详细讲解
代码的具体实现 @{ ViewBag.Title = "人员查找"; ViewBag.LeftWidth = "200px"; ViewBag ...
- Combox两级联动会经常出现的错误
例如: 当我们遇到这种情况:(下拉框的隐藏值和显示值皆为实体类进行绑定值时)下拉框的隐藏值并不能成功获取到. 我们就可以使用下面 的方案来解决 ok ,成功获取到隐藏值. 还有一个,附加解决方案:
- sql server 无法创建数据库,错误代码:1807
SQL Server 不能创建数据库,发生错误:1807 :未能获得数据库 'model' 上的排它锁.请稍后重试操作. declare @sql varchar(100) while ...
- 个人作业——Alpha项目测试
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnbl ...
- 联想 K10(K10e70) 免解锁BL 免rec Magisk Xposed 救砖 ROOT 版本号 S206
>>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...
- Microsoft SQL Server学习(一)--基本概念
数据库的分类 关系型数据库 非关系型数据库 数据库的发展 数据都是以文件的形式存储在硬盘上FATFAT32NTFS LinuxEXT 数据库设计流程 文件系统缺陷 数据库的专业术语 数据库引擎服务 E ...
- 从ABC到流利口语-unit01
Unit 1 Introduction1 Good evening,everyone.It's a pleasure to you all. My name is Wang Dong.I'M from ...
- k[原创]Faster R-CNN论文翻译
物体检测论文翻译系列: 建议从前往后看,这些论文之间具有明显的延续性和递进性. R-CNN SPP-net Fast R-CNN Faster R-CNN Faster R-CNN论文翻译 原文地 ...
- chinason工作室-兄弟的工作室开张了,欢迎来访喔!
Chinason工作室,团队成员由多位多年从事软件开发及大型生产企业系统维护的工程师组成,借重传统国外协同软件的开发经验,结合国内企业实际需求,致力于本土企业工作流软件研发,workflow系统定制开 ...