首页 > > 网页制作 > css >

汇总css布局模型和常见代码缩写与长度单位

2020-03-06 16:01:12来源：博客园阅读 ()

汇总css布局模型和常见代码缩写与长度单位

在网页中元素有三种布局模型：1.流动模型（Flow）2.浮动模型 (Float)3.层模型（Layer）,如何让html元素在网页中精确定位?通过css定位属性position来支持层布局模型=>层模型有三种形式：1.绝对定位(position: absolute)2.相对定位(position: relative)3.固定定位(position: fixed)虽然CSS文件或者嵌入的CSS都纯文本文件，为了减少css样式代码的编写量，代码缩写是很有必要的，这样可以使用户访问你的网页的时候占用更少的带宽。因此有必要掌握盒模型代码简写/颜色值缩写/字体缩写/除此之外，在网页中的颜色设置是非常重要，设置颜色的方法也有很多种：(1).英文命令颜色(2).RGB颜色(3).十六进制颜色;最后总结一下网页中常用到的长度单位，比方说px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

知识点一：css布局模型：布局模型是建立在盒模型基础之上，在网页中，元素有三种布局模型：1.流动模型（Flow）2.浮动模型 (Float)3.层模型（Layer）。

一、流动模型：默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的‘；特征1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，原因？默认状态下，块状元素的宽度都为100%，导致块状元素都会以行的形式占据位置。特征2.内联元素都会在所处的包含元素内从左到右水平分布显示。

二、浮动模型：块状元素独占一行，如果想让两个块状元素并排显示，怎么办呢？通过浮动使元素脱离默认文档流。拓展阅读：float布局打破标准流,神助攻clear清浮动

三、层布局模型：层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>流动模型、浮动模型</title>
 6         <style type="text/css">
 7             #box1,#box2{
 8                 width: 100px;
 9                 height: 100px;
10                 border: 1px solid red;
11                 margin:50px 0px;
12                 float: left;/*如果现在我们想让两个块状元素并排显示，怎么办呢？*/
13             }
14         </style>
15     </head>
16     <body>
17         <!-- 流动模型flow -->
18         <div class="box1" title="流动模型">
19             块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
20         </div>
21         <p>在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。</p>
22         <!-- 浮动模型float -->
23         <div id="box1">栏目一</div>
24         <div id="box2">栏目二</div>
25     </body>
26 </html>

知识点二：定位属性position来支持层布局模型=>层模型有三种形式：1.绝对定位(position: absolute)2.相对定位(position: relative)3.固定定位(position: fixed) 拓展阅读：position属性值4缺一带你了解相对还是绝对抑或是固定定位 absoulue与relative配合定位盒子居中问题

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。并且拖动滚动条时位置固定不变。拓展阅读：css常用样式背景background如何使用

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>层模型</title>
 6         <style type="text/css">
 7         .box1,.box2,.box3,.box4,.box5{
 8             width: 100px;
 9             height: 100px;
10         }
11         .box1{
12             border: 2px solid red;
13             position: absolute;/*这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。*/
14             left: 100px;
15             top: 100px;
16         }
17         .box2{
18             border: 2px solid blue;
19         }
20         .box3{
21             border: 2px solid deepskyblue;
22             position: relative;/*相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动*/
23             top: 10px;
24             left: 300px;
25         }
26         .box4{
27             border: 2px solid #008000;
28         }
29         .box5{
30             border: 2px solid #000000;
31             position: fixed;/*由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。*/
32             right: 0;
33             bottom: 0;
34         }
35         .box6{
36             height: 1000px;
37             background-color: #00FFFF;
38             color: #fff;
39         }
40         </style>
41     </head>
42     <body>
43         <div class="box1">box1</div>
44         <div class="box2">box2</div>
45         <p>box1与box2是绝对定位对比，box3和box4相对定位对比</p>
46         <div class="box3">box3</div>
47         <div class="box4">box4</div>
48         <div class="box5">box5</div>
49         <div class="box6">我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示我是固定定位文本展示</div>
50     </body>
51 </html>

知识点三：盒模型代码简写/颜色值缩写/字体缩写/（虽然CSS文件或者嵌入的CSS都纯文本文件，为了减少css样式代码的编写量，代码缩写是很有必要的。这样可以使用户访问你的网页的时候占用更少的带宽。）

盒模型代码简写阅读：css排版常用样式、三种不同html类型、css布局盒模型介绍
颜色值缩写/*关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半*/比方：p{color:#000000;}与p{color: #336699;}可写成p{color:#000}与p{color:#369}
字体缩写阅读:css常用样式font控制字体的多种变换注意：body{font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}a.使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。b.在缩写时 font-size 与 line-height 中间要加入“/”斜扛。c.一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：body{font:12px/1.5em "宋体",sans-serif;}只是有字号、行间距、中文字体、英文字体设置

知识点四：颜色值/长度值

颜色值概述为：在网页中的颜色设置是非常重要，有字体颜色（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;}详情阅读：css常用样式font控制字体的多种变换

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>长度值</title>
 6     </head>
 7     <body>
 8         <div>目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。</div>
 9         <h5>1、像素</h5>
10         <p>像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。</p>
11         <h5>2、em</h5>
12         <p>就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：</p>
13         <code>p{font-size:12px;text-indent:2em;}</code>
14         <p>上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）</p>
15         <h5>下面注意一个特殊情况：</h5>
16         <p>但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：</p>
17         <p>html:</p>
18         <code>&lt;p&gt;以这个&lt;span&gt;例子&lt;/span&gt;为例。&lt;/p&gt;</code>
19         <p>css:</p>
20         <code>p{font-size:14px}
21 span{font-size:0.8em;}</code>
22         <p>结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。</p>
23         <h5>3、百分比</h5>
24         <code>p{font-size:12px;line-height:130%}</code>
25         <p>设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。</p>
26     </body>
27 </html>