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

时间 2020-03-07

原文原文链接

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

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

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

3、层布局模型：层布局模型就像是图像软件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如何使用spa

 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;}只是有字号、行间距、中文字体、英文字体设置

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

颜色值概述为：在网页中的颜色设置是很是重要，有字体颜色（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>一、像素</h5>
10         <p>像素为何是相对单位呢？由于像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际状况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）做为单位。</p>
11         <h5>二、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>三、百分比</h5>
24         <code>p{font-size:12px;line-height:130%}</code>
25         <p>设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。</p>
26     </body>
27 </html>