深入css布局 (1) — 盒模型 元素分类

 

深入css布局(1)—— 盒模型 & 元素分类

 

    “ 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。”

 

首先来列下大纲

  • 盒模型
    • IE盒模型
    • W3C盒模型
    • box-sizing
  • 元素的分类
    • 块级元素
    • 行内元素
    • 行内块级元素
    • 行框
  • 定位与浮动
    • 文档流
    • 包含块
    • 浮动清除
  • margin问题
  • 格式化上下文(formatting context)
    • BFC、IFC、FFC、GFC
  • 常见布局实战
    • 水平垂直居中
    • 两栏 & 三栏布局


一、css盒模型

1.1 IE盒模型与W3C盒模型

首先大家都知道一个页面是由众多HTML元素组成的,每一个元素都有自己的一个矩形的显示区域,这就是我们平时经常提及的css盒模型。

这个盒模型或者说这个矩形的显示区域呢 就是向下面这张图一样,包括四部分:

margin(外边距) border(边框) padding(内边距) content(内容)

 

 

在css的发展历程中,有两种版本的盒模型,一个叫

IE盒模型
(又叫怪异盒模型),一个叫
W3C标准盒模型
,在早期的微软出的IE浏览器中采用的是自己的盒模型标准成为IE盒模型或者叫怪异盒模型。

规定:元素width和height属性是包含元素的border(边框) padding(内边距) content(内容)的。

而后来W3C组织(中文叫做万维网联盟,是一家中立性的技术标准指定机构),一个专门制定互联网技术标准的机构,为了标准化前端的技术规范,他规定了个标准称为W3C标准盒模型。

规定:元素width和height属性只包含元素的content(内容)。 

后来微软也慢慢转向了W3C的标准,在IE6以后支持了W3C标准盒模型。在我们现在的主流浏览器里面默认都是使用w3c标准盒模型。

我们来看下面这张图

 

在图的上半部分中展示的W3C盒模型标准,比如我声明一个div的width属性为100px,那我只是规定了这个div的content内容显示区域的大小为100px,如果之后我再声明div的padding为10px, border为15px solid black, 那么这个div最终的整体宽度就会变成

100   10 * 2   15 * 2 = 150px
了。

而如果同样的css运用到了IE盒模型身上那么当我规定div的width属性为100px时,他整体的宽度就已经确定了,就是100px,再之后我去声明div的padding为10px,border为15px solid black,也不会影响我这个div的整体宽度,只是会压缩这个div的content内容显示区域的大小。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style> #div1{ width: 100px; height: 100px; padding: 10px; border: 15px solid black; } /* 在W3C盒模型下 #div的整体宽度是150px; 在IE盒模型下 #div的整体宽度是100px; */ </style>
</head>
<body><div id="div1"></div>
</body>
</html>

 

1.2 box-sizing

box-sizing干嘛用的?

我们刚在说道目前主流浏览器默认都是采用W3C盒模型,如果你就是想在这些浏览器里使用IE盒模型呢?你就需要使用box-sizing这个属性,这是个css3中新出的属性:默认值是content-box就是指的使用W3C盒模型标准,另外一个值是border-box,指的就是我要在这个元素上使用IE盒模型标准。

#div1 { box-sizing: border-box || content-box(默认值) }

那么这里就有个问题了,为啥W3C组织好不容易将IE盒模型摒弃调,统一了前端这个盒模型标准而且所有浏览器厂商也都默认支持了,现在反而在css3中加入了box-sizing属性让我们可以自由选择盒模型标准了呢?

答案就是W3C突然发现在某些情况下,IE盒模型比自己家的那个盒模型标准更好用。 =。=…(这就很尴尬了…) 于是在css3中加入了box-sizing这个属性让开发者可以自由选择要使用哪种标准(估计是被喷惨了…)

我们来看这样一个例子:如果现在我们要实现这样一个简单布局,我要一个div的整体宽度是页面的50%,并且呢这个div还带有一个10px的边框。我们要怎么做呢?
如果我们用IE盒模型标准的话就很简单

    div{ width: 50%; border: 10px solid black; box-sizing: border-box; /* 设置为IE盒模型标准 */ }

就可以了 是吧。

那么如果我们使用W3C盒模型呢。
我们知道如果我们声明这个div宽度为50%,然后声明border为10px的话 那么这个div实际宽度应该是

50%   20px
对吧 所以这样不符合我们的要求,那么要怎么做呢。

    有2种方法。

  • 再包裹一层div,让外层div宽度为50%,然后让内层div有一个10px边框,由于内层div没有是个块级元素所以宽度会默认撑满父元素。代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style> #div1{ width: 50%; } #div1{ border: 10px solid black; } </style>
</head>
<body><div id="div1"><div id="div2"></div></div>
</body>
</html>
  • 另一种方法是使用css3的计算属性calc(),将div的宽度设为
    50% - 20px
    ,但是这个属性兼容性一般。代码如下
    div{ width: calc(50% - 20px); border: 10px solid black; }
    
    ….显然,IE盒模型的实现方案更加简洁和直观。后来W3C也意识到了这个问题 于是为了重新支持IE盒模型,W3C组织在CSS3中添加了box-sizing属性,用于让开发者可以随意切换这两种盒模型。

二、元素的分类

2.1 块级元素 & 行内元素 & 行内块级元素

元素除了自己的盒模型外还有自己的分类。从元素的布局特性来分,主要可以分为三类元素:

块级元素
行内元素
行内块级元素

我们现在看下他们的定义:

块级元素:display属性取block、table、flex、grid和list-item的元素。

行内级元素:display属性取inline的元素。

行内块级元素:display属性取inline-block、inline-table、inline-flex和inline-grid的元素

很多网上或者书上说: div是个块级元素,span是个行内元素。这样的说法是不正确的,或者说是不严谨的。我们只能说div默认是个块级元素,span默认是个行内元素。就是因为每个元素初始都会带有一些样式属性,而div默认的display是block,span的display是inline。但是如果我们在css中去设置他们的display属性就可以改变他们的类型。

接下来我们看看他们都有什么特点,很简单

块级元素

  1. 独占一行显示(width默认为100%,height为0);
  2. 可以设置尺寸属性(width、height等);

行内元素

  1. 一行可以显示多个;
  2. 不能设置宽高或者说设置的width,height无效;
  3. 受父元素的text-align属性和自身vertical-align属性的控制,在水平方向上默认左对齐,在垂直方向上默认在行框的baseline基线上显示(“行框”的概念,会在后面深入讲解)

行内块级元素( 结合了块级元素和行内元素的特征 )

  1. 一行可以显示多个;
  2. 可以设置尺寸属性(width、height等);
  3. 受父元素的text-align属性和自身vertical-align属性的控制

对于块级元素很简单,没有什么可说的。就是一点,无论我们把块级元素的宽度设置多小,他们也只能在一行里单独显示,而不会跟这个元素的兄弟元素在同一行显现。

对于行内或者行内块级元素来说,有个小注意点。当有多个这样的元素并排排列时 你会发现他们之间是有

几像素的间距
的,我们来看下面的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style> span{ background: blue; } </style>
</head>
<body><div><span>LearnInPro1</span><span>LearnInPro2</span><span>LearnInPro3</span></div>
</body>
</html>

我们会发现 他们之间会有间距 像这样:

这是由于我们为了代码的整洁和直观,一般把每个标签在单独一行里书写,这样就造成了,标签之间会存在换行符,在渲染过程中,渲染引擎会认为换行符是一种文本,所以导致了我们每个span之间就跟存在着一个空格一样。

那么我们这里介绍两个方法来消除这个间距

  1. 很简单,我们直接把span在一行里书写就好了,像这样:
<div><span>LearnInPro1</span><span>LearnInPro2</span><span>LearnInPro3</span>
</div>
  1. 由于渲染引擎认为换行符是一种文本,那我把文本的font-size设为0不就可以了么。

注意:由于font-size属性是一个可继承属性,所以在div上将font-size设为0后还需要再span上把font-size设回来,否则span里的文本的font-size也会变成0。像这样:

div { font-size: 0; }
span{ font-size: 16px; background: blue; }

 

2.2 行框

关于元素分类,我们再来讲一个概念,叫做

行框

我们现在看下行框的概念:子元素的虚拟矩形区域,形成的每一行。这个概念有点抽象,我们结合下面这张图来理解下。

我们可以看到,

  • 当行内元素或者行内块级元素并排排列的时候,可能他们的字体大小,高度都是不一样的。那么行框就是包裹他们的一个框。就是图中Line box所指的区域。
  • 行框规定了这些元素排列时候的对齐方式。默认他们的对齐方式是根据baseline基准线对齐。就如同图上的对齐方式一样。
  • 在行框中,我们利用vertical-align来改变他们的对齐方式。他的值有很多,常用的有top,middle,bottom等,这个比较简单就不多介绍了。

要特别注意的点有两个

  1. 我们说过行内元素是不能设置高度的,那么他的高度是如何决定的呢? 任何一个行内元素,他的高度是由font-size和line-height共同决定的。
  • 首先,文本的高度是跟line-height无关的。我们可以给span设置一个背景色,然后我们改变他的line-height会发现,无论line-height设置成多高,span的背景色的高度都不会改变,但是span整体的高度会随line-height的增大而变高。所以说文本的高度是跟line-height无关的(注意这里说的是文本)。
    • 那么,文本的高度只跟font-size有关,但是注意,文本的高度永远会大于font-size的值。就像下面这张图,font-size的大小只是规定了text-top到text-bottom的距离,而文本高度是top到bottom的距离,而这之间的距离是多少,每个浏览器都不太一样。总之是为了保护文本,不希望行与行之间产生重叠。( 如果你强行将line-height设置的特别小,希望产生重叠,在大部分现代浏览器中是无效的,也就是在大部分浏览器中line-height的值最小等于文本的高度,所以不建议将line-height设的比文本高度小。 )
    • 所以,行内元素的高度(不折行的情况下)当没设置line-height或者line-height小于等于文本的内容高度时,行内元素高度取决于font-size,等于文本的高度。 当line-height大于文本高度时,则由line-height决定。

 

 2. 当行内元素和行内块级元素在一个行框内排列的时候,比如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style> *{ margin: 0; padding: 0; } span{ background: blue; font-size: 20px; } .inline-block{ height: 100px; width: 100px; background: red; display: inline-block; } </style>
</head>
<body>    <div style="background: gray;"><span>LearnInPro</span><div class="inline-block"></div></div>
</body>
</html>

就会变成下图这样

我们前面说过 这两个元素中间的空隙是由于换行符导致的,并且也介绍了解决方案,而这次要说的是这个红色的行内块级元素下方的空隙,这个就是由于行框默认的对齐方式导致的。由于行框默认是baseline对齐,行内块级元素也要遵守所以这个红框的底部会骑在baseline线上。导致baseline到bottom的区域空着,产生空隙。那么解决方案也很简单,只要改变行框的对齐方式,在这两个元素上都加上

vertical-align: top || middle || bottom
等就可以把这个空隙消除掉。

由于css布局相关知识,比较重要,知识点也比较多。我们下篇文章再来介绍其他的部分。

 

最后你觉得我们的文章对你有帮助,欢迎关注我们的 微信公众号LearnInPro,在上面你可以第一时间获取到我们的技术文章,并且你可以随时在上面向我们提问,把你在学习前端过程中所遇到的问题发给我们。我们每天都会按时回复大家的每一个问题,希望

LearnInPro
可以伴随你从入门到专家。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370164.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

批改网禁止粘贴怎么破_教育部对家长批改作业表态了,明令禁止!你怎么看?...

互联网的发展&#xff0c;的确方便了现代人生活。视频电话、出去买东西你都不用带钱带卡&#xff0c;手机一扫就可以完成支付。很多中小学的家长都会建一个家长群&#xff0c;方便老师和家长的沟通。这个群可以说是家长和学校的桥梁和纽带&#xff0c;家长们为了支持老师的工作…

MapReduce算法–顺序反转

这篇文章是介绍MapReduce算法的系列文章的另一部分&#xff0c;该书在使用MapReduce进行数据密集型文本处理中找到。 先前的文章是Local Aggregation &#xff0c; Local Aggregation PartII和创建共现矩阵 。 这次我们将讨论阶数反转模式。 顺序反转模式利用的MapReduce来计算…

液压支架销轴力学计算分析研究_基于RFID射频精准定位的智能开采研究与应用...

一、项目背景近年来随着智能开采技术的不断发展&#xff0c;装备和新工艺不断更新换代,在智能开采中&#xff0c;对采煤机位置的精准定位是能否实现智能开采的关键&#xff0c;只有准确无误地获取煤机的准确位置&#xff0c;才能实现工作面的智能化开采&#xff0c;进而提高生产…

您是否能及时编译?

还记得上次被C开发人员嘲笑的时候吗&#xff1f; Java如此繁琐&#xff0c;以至于他们甚至都不会考虑使用这种语言&#xff1f; 在许多方面&#xff0c;这一概念仍然成立。 但是对于典型的用法&#xff08;在大型企业的骨干中&#xff09;&#xff0c;Java性能绝对可以与许多竞…

2d物理引擎01

我一直想做一个游戏&#xff0c;但一直感觉自己水平不够 想了想觉得不去做的话就永远做不出来 所以有了这个博文 01 我需要一个东西来显示&#xff0c;很显然h5中canvas是很好的选择 <!DOCTYPE html> <html><head><meta charset"utf-8" />&l…

Liferay Model Hints

这篇文章主要介绍如何通过model hint 来修改liferay builder service生成数据库表中默认字段的长度。 1.什么是Model Hints? 它是对liferay builder service生成的model类的基本提示. 2. 它在什么地方被定义的&#xff1f; portlet-model-hints.xml 3. 文件位置&#xff1f; /…

浏览器书签备份管理

1、火狐浏览器备份导出HTML文件&#xff1a; CtrlJ 书签 - 导入/导出 2、谷歌浏览器&#xff1a; 设置中 导入书签 转载于:https://www.cnblogs.com/AmbiguousMiao/p/8084721.html

选择您的收藏库

这真的是您应该烦恼的吗&#xff1f; java.util.ArrayList和java.util.HashMap从根本上有问题吗&#xff1f; 对于大多数源代码&#xff0c;答案是–不&#xff1b; 这些实现完全可以。 但是&#xff0c;一如既往&#xff0c;细节决定成败。 并存在情况下&#xff0c;当是内置…

里公式后面标号怎么对齐_你若会用Word里F4键,又何须加班到半夜?

F4键在Word里面表示重复上一个操作&#xff0c;但对于这个快捷键&#xff0c;你真的会操作吗&#xff1f;本期与大家分享这个神奇的F4键&#xff0c;助你高效工作。1、批量复制文本在一般情况下&#xff0c;我们是用CtrlC复制内容&#xff0c;CtrlV粘贴内容&#xff0c;但遇到特…

DshanMCU-R128s2 SDK 架构与目录结构

R128 S2 是全志提供的一款 M33(ARM)C906(RISCV-64)HIFI5(Xtensa) 三核异构 SoC&#xff0c;同时芯片内部 SIP 有 1M SRAM、8M LSPSRAM、8M HSPSRAM 以及 16M NORFLASH。 本文档作为 R128 FreeRTOS SDK 开发指南&#xff0c;旨在帮助软件开发工程师、技术支持工程师快速上手&am…

数据导出

数据导出和数据导入刚好是相反的&#xff0c;把逻辑反过来就可以了。 源码&#xff1a;https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/COM/DataToOut.aspx 效果&#xff1a; 然后勾选需要导出的数据&#xff0c;生成Excel 部分前台&#xff1a;…

spring 事务隔离级别和传播行为_Spring事务传播性与隔离性实战

一、事务传播性1.1 什么是事务的传播性事务的传播性一般在事务嵌套时候使用&#xff0c;比如在事务A里面调用了另外一个使用事务的方法&#xff0c;那么这俩个事务是各自作为独立的事务执行提交&#xff0c;还是内层的事务合并到外层的事务一块提交那&#xff0c;这就是事务传播…

前端为什么非要动静分离 说一下CDN托管的意义

大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存&#xff0c;因为浏览器缓存始终只是为了提升二次访问的速度&#xff0c;对于首次访问的加速&#xff0c;我们需要从网络层面进行优化&#xff0c;最常见的手段就是CDN&#xff08;Content Delivery Network&#xff0c;…

CSS position(定位)属性

关于CSS position&#xff0c;来自MDN的描述&#xff1a; CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。 然后来看看什么是文档流(normal flow)&#xff0c;下面是 www.w3.org 的描述&#xff1a; Normal flo…

Java ByteBuffer –速成课程

以我的经验&#xff0c;当开发人员第一次遇到java.nio.ByteBuffer时&#xff0c;会引起混乱和细微的错误&#xff0c;因为如何正确使用它尚不明显。 在我对API文档感到满意之前&#xff0c;需要反复阅读API文档和一些经验以实现一些微妙之处。 这篇文章是关于如何正确使用它们的…

实现编辑功能有哪几个action_Web 应用的撤销重做实现

背景前不久&#xff0c;我参与开发了团队中的一个 web 应用&#xff0c;其中的一个页面操作如下图所示&#xff1a;GIF这个制作间页面有着类似 PPT 的交互&#xff1a;从左侧的工具栏中选择元素放入中间的画布、在画布中可以删除、操作&#xff08;拖动、缩放、旋转等&#xff…

windows下如何安装pip以及如何查看pip是否已经安装成功?

最近刚学习python&#xff0c;发现很多关于安装以及查看pip是否安装成的例子都比较老&#xff0c;不太适合于现在&#xff08;python 3.6 &#xff09;因此&#xff0c;下一个入门级别的教程。 0&#xff1a;首先如何安装python我就不做介绍了。 1&#xff1a;如果安装的是pyth…

检查用户显示器的分辨率

检查用户显示器的分辨率 转载于:https://www.cnblogs.com/Renyi-Fan/p/8088012.html

android 字体 dpi,详解Android开发中常用的 DPI / DP / SP

Android的碎片化已经被喷了好多年&#xff0c;随着国内手机厂商的崛起&#xff0c;碎片化也越来越严重&#xff0c;根据OpenSignal的最新调查&#xff0c;2014年市面上有18796种不同的Android设备&#xff0c;作为开发者&#xff0c;一个无法回避的难题就是需要适配各种各样奇奇…

android studio闪退代码不报错_代码不报错,不代表真的没错

今天是生信星球陪你的第695天大神一句话&#xff0c;菜鸟跑半年。我不是大神&#xff0c;但我可以缩短你走弯路的半年~就像歌儿唱的那样&#xff0c;如果你不知道该往哪儿走&#xff0c;就留在这学点生信好不好~这里有豆豆和花花的学习历程&#xff0c;从新手到进阶&#xff0c…