前台入门4-CSS属性样式表
本篇文章已受权微信公众号 dasu_Android（大苏）独家发布
公告
本系列文章内容一律梳理自以下四个来源：
- 《HTML5权威指南》
- 《JavaScript权威指南》
- MDN web docs
- Github:smyhvae/web
作为一个前台小白，入门跟着这四个来源学习，感谢作者的分享，在其基础上，通过自己的了解，梳理出的知识点，或者许有遗漏，或者许有些了解是错误的，如有发现，欢迎指点下。
正文-CSS属性样式表
理解了 CSS 具体的各种工作原理、使用方式、选择器规则、层叠算法等之后，那么该来学习的也就是 css 都支持哪些属性样式表了。
1.单位
in，cm，mm，px，em，%
绝对单位：1in（英寸） = 2.54cm（厘米） = 25.4mm（毫米） = 72pt（英镑points） = 6pc（皮卡picas）
相对单位：px（像素）， em（相对于font-size的大小）， %（百分比）
单位
2.字体 font-xxx
| font-size: 20px; | 字体大小 |
|---|---|
| line-height: 30px; | 行高 |
| font-family: 微软雅黑; | 字体 |
| font-style: italic; | 斜体，normal正常字体 |
| font-weight: bold; | 粗体 |
| font-variant: small-caps; | 小写变大写 |
font-xxx, line-xxx 属性具备继承性，后代会继承祖先标签内的这些属性。
3.文本 text-xxx
| letter-spacing: 0.5cm; | 单个字母之间的间距 |
|---|---|
| word-spacing: 1cm; | 单词之间的间距 |
| text-decoration: none; | 字体修饰，none:去掉下划线，underline下划线，line-through中划线，overline上划线 |
| text-transform: lowercase; | 单词小写，uppercase大写, capitalize首字母大写 |
| color:red; | 字体颜色 |
| text-align: center; | 在当前容器中对齐方式，left,right,justify |
text-xxx具备继承性，后代标签会继承祖先中公告的这些属性，想让文本居中显示时，假如属性不生效，可自行计算，如下：
字体
4.背景 background-xxx
background-color
设置元素背景颜色，属性值有三种方式：red, rgb(255, 0, 0), #ff0000
以上三种均表示红色。以下是几种常见的颜色：
#000（黑） #fff（白） #f00（红） #222（深灰）#333（灰）#ccc（浅灰）
background-repeat
设置背景图片能否重复，以及如何重复，默认平铺满。属性值如下：
- no-repear 不要平铺
- repeat-x 横向平铺
- repeat-y 纵向平铺
应用场景：可以相似于 Android 中的 .9 图，设计一张 1px 的背景图，指定横向或者者纵向平铺。
background-position
指定背景图位置，几种格式如下：
background-position: 向右偏移量 向下偏移量;
属性值可以是正数，也可以是负数。比方：100px 200px，-50px -120px
background-position: 形容左右的词 形容上下的词;
形容左右的词：left、center、right
形容上下的词：top 、center、bottom
比方说，right center表示将图片放到右边的中间；center center表示将图片放到正中间。
这个属性既可以用于在一张包含各种 icon 种只显示指定区域的 icon，也可用于在文本四周增加 icon。
background-attachment
设置背景图片能否固定，属性值：
- fixed 背景固定住，不会被滚动条滚走
- scroll 默认属性，背景跟随滚动条滑动
background-clip
背景默认延伸到边界的外边缘，假如你只想背景扩展到内容区的边缘，可通过这个属性设置。
outline
设置盒子的轮廓，它看起来像边界，但不是盒模型的一部分，是画在边界框之外，外边距之内，但不会修改盒子的大小。
background
以上属性的综合属性，假如不想一个个属性的去写，可以用这个属性集中写在一起。格式如下：
background: -color –image –repeat –position –attachment//如background:red url(1.jpg) no-repeat 100px 100px fixed;等效于：
background-color:red;background-image:url(1.jpg);background-repeat:no-repeat;background-position:100px 100px;background-attachment:fixed;另外，背景是可以设置多个的，多个背景间会自动重叠在一起，并不是像 Android 中只可设置一个背景。
5.盒子 width height…
width&height
设置内容的宽高，并不是盒子的宽高，但可通过 box-sizing 来更改宽高的作用域。
Android 中必需给控件设置宽高，但在这里，宽高并不是必选像。当没有设置宽高时，会根据其显示模式 display 来决定其默认宽高。
比方，display: block 块级元素默认高度会霸占父节点 100% 宽度，而高度默认会由子内容决定，相似于 Android 中的 wrap_content。
display: inline 行内元素则是无法设置宽高，默认为文本内容的宽高。
除了正常宽高外，还有其余少量可选项配置：
min-width, min-height, max-width, max-height
借助这些配置，可以达到少量当窗口大小变化时，变化到肯定程度改变原有元素的体现行为，比方某张图片原本居中显示，但当窗口缩小到比图片还小时，图片就根据窗口进行缩小，此时即可结合 max-width 来实现。
padding
padding：-top –right –bottom -left
设置内边距
border
border：-width –style –color
设置边框
margin
margin：-top –right –bottom -left
设置外边距
注意一点，margin 跟 Android 中的 margin 有些不一样，对某个元素设置了 margin 后，margin 区域的大小也算在这个元素盒子的大小中。
另外，默认的文档流中，上下方向会存在 margin 塌陷的情况，也就是上一个元素设置了 margin-bottom: 10px，下一个元素设置了 margin-top: 20px，那么最终这两个元素其实间距为 20px，并不是叠加的。
另外，margin 通常是用于兄弟节点间设置间距，假如要设置儿子和父亲间的间距，建议使用 padding，否则假如父节点没有设置 border 时，可能效果并不是想要的。
margin: 0 auto; 可以达到水平居中的效果。
<body>标签，浏览器通常默认给了 margin: 8px
<ul> 默认有设置 margin-left 和 padding-top
所以，通常都会有一份 reset.css，来重置这些默认属性值。
6.阴影 box-shadow&text-shadow
阴影
你会看到，我们在 box-shadow 属性值中有4个项：
- 第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移(假如值为负的话则为左)。
- 第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离(或者向上，假如值为负)。
- 第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。
- 颜色值是阴影的基本颜色（base color）。
假如需要内部阴影，则是在上述属性值最前面加一个 inset 如：
box-shadow: inset 2px 2px 1px black7.显示模式 display
标准文档流布局方式
当没有进行任何 CSS 控制元素的排版布局时（float, position, flex）默认就是按照标准的文档流布局方式进行排版布局绘制元素。
而这个标准的文档流布局方式就是按照解析 HTML 文档元素的顺序，从页面顶部开始，从上到下，从左到右，解析一个元素就绘制一个元素，解析时碰到的是行内元素，就忽略宽高，允许并排布局绘制，碰到的是块级元素，就另一起一行，让这个元素霸占父元素中的这一整行。
所以，清楚了浏览器默认的文档流布局方式后，得再理解下所说的行内元素，块级元素是什么，怎样切换。
inline(行内元素)&block(块级元素)
display 有两个很基本的属性值：inline（行内元素） block（块级元素）
通常，容器类的标签默认值都是 block，而文本类的标签默认值是 inline。
比方：div, header, main, li, h 系列这类都是块级元素
p, span, I, a 这类都是行内元素。
区分以及了解行内元素和块级元素对于写网页布局非常重要，由于浏览器是按照文档流从上到下，从左到右来进行绘制网页的。
对于行内元素（inline），浏览器绘制时会忽略对它设置的宽高，并且假如相邻两个元素都是行内元素，则直接以并排方式从左到右对其进行布局绘制。
但对于块级元素，浏览器会强制让其霸占一整行，也就是这一行内，只能有这个块级元素存在，其余元素不能与其并排。假如没有设置宽度，那么就是充满整行。
这个整行是想对于父元素的区域而言，并不是浏览器页面的整行 。
文档流布局方式
这种默认的标准文档流的布局绘制方式有些相似于 Android 中的 LinearLayout 容器，inline 就相似于水平方向， block 就相似于垂直方向，同一个方向内只能有一个元素霸占，不允许并排。
所以，我们在写 HTML，CSS 时，脑中就要有个大概的蓝图，这些元素大概会呈现怎么的排版布局。
一个元素是行内元素还是块级元素，可以通过 display 来设置，假如没有设置，那么就是默认值，不同元素的默认值不同。
假如行内元素不支持设置宽高，块级元素又不允许并排存在，那么很显然，很多布局我们就实现不了了。是吧，假如既要能够并排，还要支持可以设置宽高，这是该怎样办呢？
处理方法有很多种，说白了就是一点：脱离默认的文档流布局方式
方式有以下几种：
- display:inline-block（行内块元素）
- 浮动 float: left/right
- 绝对定位 position: absolute
- 固定定位 position: fixed
inline-block(行内块元素)
当设置了 display: inline-block 时，这时这个元素就不会霸占一整行了，而是根据设置的宽高来布局绘制，因而这种情况下，可以处理并排的场景。
但需要注意下，最好不要有这样的布局：
<div style=”display:inline-block”> <div style=”display:block”> <div style=”display:inline-block></div></div></div>也就是行内块元素嵌套了块级元素内部又嵌套了行内块元素，这样的话，布局方面会有些问题，起因不清楚。但把中间的块级元素也设置成行内块元素就没问题了。
另外，并不是说，不允许行内块元素内嵌块级元素，也是可以的。
8.浮动 float
float 属性值通常会用到这两个：left right
浏览器默认是按照标准文档流从上到下，从左到右布局绘制各个元素，此时这些元素可以说位于同一个层面，但当碰到元素设置了 float 属性时，会将这个元素以当前绘制的位置抽离到新的层面上进行布局。
就像单词直译过来：浮动
也就是让这个元素浮在标准文档流上面。
float
浏览器绘制这个网页时，按照文档流顺序，先在网页第一行左边开始解决 div1 元素，发现它的一个浮动元素，则将其抽离到另一个层面，浮动在文档流上面。
而后它继续解决 div2 元素，由于之前解决的 div1 元素是浮动元素，不占用文档流，所以此时依旧是在第一行左边绘制 div2 元素，发现它是一个块级元素，所以让其霸占一整行。
所以，此时可以看到 div1 浮在 div2 上面的效果。
紧接着，继续解决 div3 元素，因而之前 div2 块级元素已经霸占了第一行了，所以此时是在第二行解决 div3 元素，发现它也是一个浮动元素，便以当前位置将其抽离到另一层面绘制。
所以此时看到的效果就是，浮动元素 div3 是在块级元素 div2 下。
继续往下解决，假如发现的还是浮动元素，由于所有的浮动元素都解决同一层面，所有的文档流元素都处于一个层面，所有浮动元素 div4 并不会跟 div3 发生重叠，而是贴着它。
假如接下去解决的元素是块级元素，那么此时的效果会是怎么的呢？
假如接下去是块级元素，那么它就会是绘制在浮动元素 div3 和 dive4 下面，呈现出重叠的效果。
但这里需要注意一点，尽管浮动元素会造成重叠的现象，但这只是正常的文档流的元素盒子被浮动元素压住了，但文档流元素的文本内容会自动围绕在浮动元素附近，就像上图中块级元素四个字并没有被覆盖住。
也就是说，浮动元素并不会造成文档流的内容被覆盖的情况，反而它会影响到它之后文档流中元素的内容区域的显示排版。假如不想让后面的元素受到浮动元素的影响，那么就要进行浮动清理解决。
另外，不考虑嵌套元素的话，兄弟元素之间，假如处于同一层面，是不会有重叠现象的。
浮动清理
因为浮动最初设计是为了让文字可以围绕在图片附近，因而，浮动元素后面的非浮动元素会自动围绕着浮动元素进行包装。而假如我们想让浮动元素之后的元素另起一行，从新的位置开始布局，那么就要进行浮动的清理。
另外，浮动元素之后的浮动元素也会受到它的影响，比方设置了 float:left，那么这个元素要浮动的靠左的位置会受到前面已经靠左浮动的元素的影响。
假如不想让当前的浮动元素受到之前浮动元素的影响，那么也要进行浮动清理的解决，方式有几种，每种有自己的适用场景，理解下就可，后续写多了，自然就懂了。
- clear: both 表示当前元素不受之前浮动元素的影响
- 隔墙法（在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。本质上也是clear:both）
浮动的不足
浮动尽管好用，既可以实现文字围绕的效果，又可以实现多列并排的布局，但它也存在少量不足的地方，上面说的浮动清理是其中一点，还有少量问题，如下：
- 整个宽度可能难以计算
? 这是由于多个浮动元素之间并排显示的前提的有足够的空间让这些元素并排，所以通常对于浮动元素的宽度设置是通过百分比来设置，确保多个并排的元素即便窗口发生变化依旧可以并排布局。
? 但，假如元素还需要进行内边距，外边距的设置，边框的设置，由于这些大小都算在盒子的总宽度中，那么最终盒子的大小就变得很难确定，有可能导致某个浮动元素被挤到下一行去。
? 有个方法可以处理，修改 box-sizing:border-box，让 width 就是盒子总宽度，当设置了边距时，会自动减少相应的内容区域。但假如页面使用不同类型的 box-sizing，会使 CSS 的代码阅读变得很杂乱。
- 浮动元素之后的元素设置 margin 失效
? 非浮动元素的外边距不能用于它们和浮动元素之间来创立空间，通常我们再浮动元素之后的非浮动元素会进行浮动清理，顺便设置外边距来创立间隔空间，但这时会发现这个间隔空间失效。处理方法可以在这中间插一个空的元素，在这个元素里清理浮动，也就是所说的隔墙法。
9.位置 position
position 属性值有三个：absolute, relative, fixed
三种尽管是不同的定位模式，但其实说白了，就是参考点不同。
也都是通过 left, top, right, bottom 来根据参考掉调整位置。
releative 相对定位
相对定位并不是相对于父元素，而是相对于该元素本来所应该在的位置作为参考点。
这点跟 Android 中的 ReleativeLayout 布局不一样，需要注意一下。
另外，相对定位并不会改变元素在文档流中的位置，也就是这个元素本来占据哪个坑，通过相对定位微调之后，仍占据那个坑，只是视觉上它发生了移动而已。有点相似 Android 中的 View 动画。
应用场景：
- 微调
- 让后代元素可以使用绝对定位
通常都是用来给后代使用绝对定位的，由于固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。
而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。
absolute 绝对定位
参考的对象是父类或者祖先元素中有使用了position的最近一个元素。也就是说在父类元素中，不论是使用了相对定位，绝对定位，固定定位之后，都可以用来作为后代绝对定位的参考元素。
但通常都是使用子绝父相的模式，其余模式并没有什么意义。
参考的元素决定了之后，参考点的选取还分两种情况，参考元素的左上角或者者左下角。
假如使用了 top 来调整位置，那么参考点就是参考元素的左上角
假如使用了 bottom 来调整位置，那么参考点就是参考元素首屏页面的左下角
为什么强调首屏，由于参考元素的大小可能是超出一个屏幕的，bottom 并不是说参考元素的左下角坐标，也不是当前页面参考元素的左下角坐标，而是首屏状态时，也可以了解成，没有发生滑动前，参考元素在当前页面的左下角坐标作为参考点。
举个例子：
absolute
另外，有点需要注意下，绝对定位的元素，由于其已经从文档流中抽离，因而就不存在什么行内元素、块级元素的限制了。大小就是根据设置的宽高、位置就是根据参考点进行调整后进行布局绘制。
而假如没有使用 position 属性，元素默认是文档流解决的，此时的布局绘制方式就只能按照文档流的规则来，即行内元素、块级元素这些特性。
由于绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到本来的文档流元素，所以，通常少量弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。
应用：
- 弹窗框
- 压盖（角标之类）
fixed 固定定位
固定定位参考点就是浏览器的左上角，不论页面如何发生滑动，元素显示的位置都没有发生改变。
应用：
网页右下角的返回顶部按钮
顶部导航栏
z-index
这个属性只有当使用了 position 的元素才会生效，其余元素设置了这个属性没有什么意义。
这个属性其实就是用于当元素发生重叠时，决定由谁盖在上面，默认值为0，值越大，越上层。
而会发生元素重叠的现象也就只有使用了 position 调整了元素的位置，以及浮动元素两种场景。正常的文档流方式布局绘制元素是不会出现元素重叠，当然假如是嵌套的元素，层级关系也早就确定了，也没必要通过这个属性来调整了。
浮动元素造成的重叠只是盒子上的重叠，并不会造成元素内容上的重叠，那么也就没有使用 z-index 的必要，由于要呈现的内容并不会被覆盖。
总结一下，这个属性有几个特性：
- 属性值大的位于上层，属性值小的位于下层
- z-index 值没有单位，就是一个正整数。默认的 z-index 值是0
- 假如大家都没有 z-index 值，或者者 z-index 值一样，那么在 HTML 代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素
- 只有定位了的元素，才能有 z-index 值。也就是说，不论相对定位、绝对定位、固定定位，都可以使用 z-index 值。而浮动的元素不能用
- 从父现象：父亲怂了，儿子再牛逼也没用。意思是，假如父亲1比父亲2大，那么，即便儿子1比儿子2小，儿子1也能在最上层。
大家好，我是 dasu，欢迎关注我的公众号（dasuAndroidTv），假如你觉得本篇内容有帮助到你，可以转载但记得要关注，要标明原文哦，谢谢支持~
dasuAndroidTv2.png
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台入门4-CSS属性样式表
