web前端入门到实战：汇总css布局模型和常见代码缩写与长度单位

知识点一：css布局模型：布局模型是建立在盒模型基础之上，在网页中，元素有三种布局模型：1.流动模型（Flow）2.浮动模型 (Float)3.层模型（Layer）。 一、流动模型：默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的‘；特征1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，原因？默认状态下，块状元素的宽度都为100%，导致块状元素都会以行的形式占据位置。特征2.内联元素都会在所处的包含元素内从左到右水平分布显示。 二、浮动模型：块状元素独占一行，如果想让两个块状元素并排显示，怎么办呢？通过浮动使元素脱离默认文档流。 三、层布局模型：层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。 专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 1 2 3 4 5 6 15 16 17 18 21

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

22 23 24 25 26 知识点二：定位属性position来支持层布局模型=>层模型有三种形式：1.绝对定位(position: absolute)2.相对定位(position: relative)3.固定定位(position: fixed) A.如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 B.相对定位:如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 C.固定定位:它与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。 1 2 3 4 5 6 41 42 43 44 45

box1与box2是绝对定位对比，box3和box4相对定位对比

46 47 48 49 50 51 知识点三：盒模型代码简写/颜色值缩写/字体缩写/（虽然CSS文件或者嵌入的CSS都纯文本文件，为了减少css样式代码的编写量，代码缩写是很有必要的。这样可以使用户访问你的网页的时候占用更少的带宽。） 知识点四：颜色值/长度值 颜色值概述为：在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：(1).英文命令颜色:p{color:red;}(2).RGB颜色:这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。p{color:rgb(133,45,200);}每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：p{color:rgb(20%,33%,25%);}(3).十六进制颜色:这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;} 专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 1 2 3 4 5 6 7 8 9

1、像素

10

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

11

2、em

12

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

13 p{font-size:12px;text-indent:2em;} 14

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）

15

下面注意一个特殊情况：

16

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

17

html:

18 <p>以这个<span>例子</span>为例。</p> 19

css:

20 p{font-size:14px} 21 span{font-size:0.8em;} 22

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

23

3、百分比

24 p{font-size:12px;line-height:130%} 25

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

26 27

本文章由javascript技术分享原创和收集