CSS 最核心的几个概念
元素类型
HTML 的元素可以分为两种:
- 块级元素(block level element)
- 内联元素(inline element 有的人也叫它行内元素)
两者的区别在于以下三点:
- 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显示修改元素的 display 属性),而内联元素则都会在一行内显示。
- 块级元素可以设置 width、height 属性,而内联元素设置无效。
- 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
最常见块级元素应该是 <div>
吧,内联元素有 <span>
<a>
<img>
等等,完整的元素列表可以谷歌一下。
具体来说一下吧,
.example {width: 100px; height: 100px; }
我们为 <div>
设置上面的样式,是有效果的,因为其是块级元素,而对 <span>
设置上面的样式是没用的。要想让<span>
也可以改变宽高,可以通过设置 display: block;
来达到效果。当 display 的值设为 block 时,元素将以块级形式呈现;当 display 值设为 inline 时,元素将以内联形式呈现。
若既想让元素在行内显示,又能设置宽高,可以设置:
display: inline-block;
inline-block 在我看来就是让元素对外呈内联元素,可以和其他元素共处与一行内;对内则让元素呈块级元素,可改变其宽高。
HTML 代码是顺序执行的,一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。这种无样式的情况下,元素的分布叫普通流,元素出现的位置应该叫正常位置(这是我瞎起的),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。
盒模型
页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )。请看Chrome DevTools 里的截图:
可以显而易见的看出盒模型由 4 部分组成。从内到外分别是:
content -> padding -> border -> margin
按理来说一个元素的宽度(高度以此类推)应该这样计算:
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
但是不同浏览器(你没有猜错,就是那个与众不同的浏览器)对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度,其余都要额外算。于是你规定一个元素:
.example {width: 200px; padding: 10px; border: 5px solid #000; margin: 20px; }
则他最终的宽度应为:
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;
而在 IE(低于IE9) 下,最终宽度为:
宽度 = width(200px) + margin(20px * 2) = 240px;
我个人觉得 IE 的更符合人类思维,毕竟 padding 叫内边距,边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题,在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-box;
时,border 和 padding 就被包含在了宽高之内,和 IE 之前的标准是一样的。所以,为了避免你同一份 css 在不同浏览器下表现不同,最好加上:
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
这里还有两种特殊情况:
- 无宽度 —— 绝对定位(position: absolute;) 元素
- 无宽度 —— 浮动(float) 元素
它们在页面上的表现均不占据空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其他元素的定位)。这就涉及到另外两个核心概念 position 和 float。
position
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浮动的深入研究、详解及拓展(一)中的讲解)。这个我还是实践了一下的,点这个JSfiddle点击预览看看吧。
- 下一个兄弟元素如果也设置了同一方向的 float,则会紧随该元素之后显示。
- 该元素将变为块级元素,相当于给该元素设置了
display: block;
(和position: absolute;
一样)。
这里还有个东西,就是广为人知的——清除浮动。具体的方法五花八门,可以看这篇:那些年我们一起清除过的浮动,我就不多说了。
转载于:https://www.cnblogs.com/hellman/p/4303190.html
CSS 最核心的几个概念相关推荐
- html设置样式不继承_web前端入门到实战:css的核心原理分为优先级原则与继承原则两大部分...
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...
- CSS核心的几个概念
盒模型.position.float.他们是css的基础,之间看似独立却又相辅相成. 元素类型 块级元素.内联元素 他们之间有以下区别: 1.块级元素独占一行,除非显示的修改display属性.而内联 ...
- (1)《Head First HTML与CSS》学习笔记---HTML基本概念
前言: 1. 这本书并没有面面俱到,涵盖所有内容,只提供作为初学者真正需要的东西:基本知识和信心.所以这不是唯一的参考书.(我买了一本<HTML5权威指南>作为参考书和这本一起看, ...
- 判断线程是否执行完毕_Java并发编程 | 线程核心机制,基础概念扩展
源码地址:GitHub || GitEE 一.线程基本机制 1.概念描述 并发编程的特点是:可以将程序划分为多个分离且独立运行的任务,通过线程来驱动这些独立的任务执行,从而提升整体的效率.下面提供一个 ...
- 开源开放 | 《大词林》开源 75 万核心实体和围绕核心实体的细粒度概念、关系列表...
1<大词林>简介 <大词林>(http://101.200.120.155/)是由哈尔滨工业大学社会计算与信息检索研究中心推出,由我中心秦兵教授和刘铭副教授主持开发,是一个自动 ...
- Java并发编程(02):线程核心机制,基础概念扩展
本文源码:GitHub·点这里 || GitEE·点这里 一.线程基本机制 1.概念描述 并发编程的特点是:可以将程序划分为多个分离且独立运行的任务,通过线程来驱动这些独立的任务执行,从而提升整体的效 ...
- 第四章 JavaWeb CSS入门 核心基础 基础形式 + 选择器
谢罪:今天起晚了= =! 文章目录 什么CSS? css样式规则 CSS核心基础 行内式也称为内联样式 内嵌式 链入式 导入式 选择器 标记选择器 类选择器 id选择器 通配符选择器 什么CSS? C ...
- 0基础快速入门CSS技术栈(5)—图解详细阐述说透CSS的盒子模型(超级重要)、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心(附详细案例源码解析过程)2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
- 牛腩之CSS核心内容
根据牛老师的讲解,CSS的核心内容大致为四个部分:标准流.盒子模型.浮动和定位. 在学习核心内容之前,先来了解两个基本概念:块级元素和行内元素. 根据CSS规范的规定,每一个网页元素都有一个displ ...
最新文章
- spring获取webapplicationcontext,applicationcontext几种方法详解(转载)
- 《构建高可用Linux服务器》样书
- Ubuntu上常用快捷键使用
- maven工程src/main/java目录无法创建问题
- 教你使用stm32接收串口的一帧数据!
- java ref 应用类型_Java中的四种引用类型比较
- idea中Gitlab项目导入导出
- Java快速入门学习笔记1 | Eclipse使用
- ⑥NuPlayer播放源码分析之DecoderBase分析
- pycharm怎么做html网页_html下拉菜单怎么做
- VScode中SVN插件详细配置【官网】
- 以贝叶斯思维看待世界
- 开源一个简单的android手机音乐app
- win7音量图标不见了怎么办
- rxjava背压_RxJava(九):背压
- 【Auto.JS】Autojs官方提取文档使用说明函数 (1)
- 房屋装修选择自装,如何寻找砌墙工人,比价并施工(砌墙阶段)
- 通过Cli方式创建uni-app常见错误整理
- ”AE-OT A NEW GENERATIVE MODEL BASED ON EXTENDED“阅读笔记
- N4 新标日初级下 问法总结和课后练习题12答案