原文地址:http://geekplux.com/2014/04/25/several_core_concepts_of_css.html
原文作者:GeekPlux
本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。
元素类型
HTML 的元素可以分为两种:
- 块级元素(block level element)
- 内联元素(inline element 有的人也叫它行内元素)
两者的区别在于以下三点:
- 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),而内联元素则都会在一行内显示。
- 块级元素可以设置 width、height 属性,而内联元素设置无效。
- 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
最常见块级元素应该是 <div>
吧,内联元素有 <span>
<a>
<img>
等等,完整的元素列表可以谷歌一下。
具体来说一下吧,
1 2 3 4 |
.example {
width: 100px;
height: 100px;
}
|
我们为 <div>
设置上面的样式,是有效果的,因为其是块级元素,而对 <span>
设置上面的样式是没用的。要想让 <span>
也可以改变宽高,可以通过设置 display: block;
来达到效果。当 display 的值设为 block 时,元素将以块级形式呈现;当 display 值设为 inline 时,元素将以内联形式呈现。
若既想让元素在行内显示,又能设置宽高,可以设置:
1
|
display: inline-block;
|
inline-block 在我看来就是让元素对外呈内联元素,可以和其他元素共处与一行内;对内则让元素呈块级元素,可改变其宽高。
HTML 代码是顺序执行的,一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。这种无样式的情况下,元素的分布叫普通流,元素出现的位置应该叫正常位置(这是我瞎起的),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。
盒模型
页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )。请看 Chrome DevTools 里的截图:
可以显而易见的看出盒模型由 4 部分组成。从内到外分别是:
1
|
content -> padding -> border -> margin
|
按理来说一个元素的宽度(高度以此类推)应该这样计算:
1
|
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
|
但是不同浏览器(你没有猜错,就是那个与众不同的浏览器)对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度,其余都要额外算。于是你规定一个元素:
1 2 3 4 5 6 |
.example {
width: 200px;
padding: 10px;
border: 5px solid #000;
margin: 20px;
}
|
则他最终的宽度应为:
1
|
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;
|
而在 IE(低于IE9) 下,最终宽度为:
1
|
宽度 = width(200px) + margin(20px * 2) = 240px;
|
我个人觉得 IE 的更符合人类思维,毕竟 padding 叫内边距,边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题,在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-box;
时,border 和 padding 就被包含在了宽高之内,和 IE 之前的标准是一样的。所以,为了避免你同一份 css 在不同浏览器下表现不同,最好加上:
1 2 3 4 5 |
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
|
这里还有两种特殊情况:
- 无宽度 —— 绝对定位(position: absolute;) 元素
- 无宽度 —— 浮动(float) 元素
它们在页面上的表现均不占据空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其他元素的定位)。这就涉及到另外两个核心概念 position 和 float。
position
position 这个属性决定了元素将如何定位。它的值大概有以下五种:
static | position的默认值。元素将定位到它的正常位置(上文提到过),其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。 |
relative | 相对定位,相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。 |
absolute | 绝对定位,相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置。 |
fixed | 绝对定位,相对于浏览器窗口来进行定位。其余和 absolute 一样,相当于一种特殊的 absolute。 |
inherit | 从父元素继承 position 属性的值。 |
具体效果可以参考w3school的实例,或者自己写一下就明白了。
每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示。
position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。
而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事:
- 把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。
- 该元素将变为块级元素,相当于给该元素设置了
display: block;
(给一个内联元素,如<span>
,设置 absolute 之后发现它可以设置宽高了)。 - 如果该元素是块级元素,元素的宽度由原来的 width: 100%(占据一行),变为了 auto。
由此观之,当 position 设置为 absolute 或 fixed,就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素,可以设置 z-index 值 达到效果。
float
float 顾名思义,就是把元素浮动,它的取值一共有四个:left right none inherit,光看名字就懂了,无需多言。
最初的 float 只是用来实现文字环绕图片的效果,仅此而已。而现在 float 的应用已不止这个,前辈们也是写了无数博文来深入浅出的讲解它。
浅如:
经验分享:CSS浮动(float,clear)通俗讲解 篇幅不长,通俗易懂,可以看完这篇文章再回过头来看本文。
深如:
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)
从本质上讲解了 float 的原理。
我就不班门弄斧写原理了,只说说 float 的几个要点就行了:
- 只有左右浮动,没有上下浮动。
- 元素设置 float 之后,它会脱离普通流(和
position: absolute;
一样),不再占据原来那层的空间,还会覆盖下一层的元素。 - 浮动不会对该元素的上一个兄弟元素有任何影响。
- 浮动之后,该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后(很好理解,因为该元素脱离普通流了,或者说不在这一层了,所以它的下一个元素当然要补上它的位置)。
- 如果该元素的下一个兄弟元素中有内联元素(通常是文字),则会围绕该元素显示,形成类似「文字围绕图片」的效果。(可参考CSS float浮动的深入研究、详解及拓展(一)中的讲解)。这个我还是实践了一下的:
- 下一个兄弟元素如果也设置了同一方向的 float,则会紧随该元素之后显示。
- 该元素将变为块级元素,相当于给该元素设置了
display: block;
(和position: absolute;
一样)。
相关推荐
最后一部分通过几个大型的实例,让读者深入领会Ajax技术在实际网络项目中的优势,也让读者体验这种优势所带来的优越性能。 本书适用于初、中级网络开发者,对于高级开发人员也很有启发。没有接触过Ajax的入门者...
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
为什么要用边缘,而不用宽高呢,因为后面的几个关键概念,用的都是这个边缘。 3. 渐变颜色 跟线性渐变一样,一组颜色设定表示渐变过程。没什么好讲的,后面将统一用 [red, #fff 99%, blue] 这个渐变组合,表示从红色...
学习 Java 的路线可以大致分为以下几个阶段: 学习基础:首先需要掌握 Java 的基础知识,包括语法、数据类型、变量、运算符、控制流程、数组、字符串等。可以通过阅读教程、参加在线课程或自学来获得这些基础知识。...
Java程序员学习路线通常包括以下几个阶段: 1. 基础知识阶段: - 学习Java语言的基本语法、数据类型、运算符等基础知识。 - 理解面向对象编程的概念,掌握类、对象、继承、多态等相关知识。 - 学习异常处理、...
在使用elint之前,需要先了解几个核心概念。 1.1。 爱林特 elint是一种代码校验工具,基于eslint,stylelint,commitlint,prettier等工具封装而成。elint本身不包含任何校准规则,校验规则通过预置定义。elint的...
1.7 学习和使用JavaScript的几点建议 1.8 关于本书的其余部分 第2章 浏览器中的JavaScript 2.1 嵌入网页的可执行内容 2.2 赏心悦目的特效 2.3 使用JavaScript来与用户交互 2.4 绕开脚本陷阱 ...
这就是本文将重点讲述的核心,所谓“动态”,并不是指那几个放在网页上的GIF动态图片,在这里笔者为动态页面的概念制定了以下几条规则: 1、“交互性”即网页会根据用户的要求和选择而动态改变和响应,将浏览器...
原生js的ajax设计方案(引入支持npm安装)npm安装,文档见底部npm i ajax-js / yarn add ajax-js整理ajax设计方案原因如下从资源合理利用的角度以及网站优化角度去想,每次为了那几个功能,去引用一个框架,不划算...
3、几个主要页面采用Div+Css标准重构和优化,对搜索引擎能更好的支持。4、针对搜索引擎进行优化,对主流的搜索引擎提供了不同的显示结果和站点地图等优化。5、重写论坛回收站,使用和操作更加方便,超版也可进入管理...
【内容简介】 本书以通俗易懂的方式介绍了jQuery的基本概念,主要包括jQuery的选择符、事件、特效、DOM操作、AJAX、表格操作、表单函数、拖曳与旋转和插件等内容,最后几章以实例操作为主,在前面内容的基础上,...
万维网中至关重要的概念超文本起源于1960年代的几个从前的项目。譬如泰德·尼尔森(Ted Nelson)的仙那都项目(Project Xanadu)和道格拉斯·英格巴特(Douglas Engelbart)的NLS。而这两个项目的灵感都是来源于...
该模板是使用CDNJS中的USWDS核心CSS和JS文件。 上次更新时间:2021年4月29日 版本:2.11.1 详细信息: 入门 复制模板并设置发布 在“ Code选项卡上,按“ Use this template按钮。 转到Settings选项卡,然后向下...
这些是贯穿全书的、在此后的章节中将重点突出的几个主线。这使得你能够在通读全书时把注意力集中在那些对于你非常重要的问题上,而跳过其他章节。学习主线 XML是从一种简单的文档标记语言逐步发展成为涉及范围广泛的...
这是一个概念验证平台,您应该以此为基础构建自己的平台。 我提供几种格式的卡片组。 首先,作为anki2文件,Anki使用的本机格式。 该文件应包含开始使其适应您的需求所需的所有内容。 甲板也可作为在Anki的云共享...
媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...