整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在前端界面设计中，会有那么一些布局，需要占满整个父级容器，比如：
模态框（Modal）的背景
加载器（Spinner）的背景
以上两种组件中，都是将背景完全填充到父级容器，区别在于模态框通常是背景填满屏幕，通常使用 position: fixed; 用于定位，而加载器更多用于将其背景布满父级容器，通常使用 position: absolute; 定位。
为了实现填充父级的需求，从正常的盒子模型的设计逻辑来讲，我们的思路大体上很简单：将子容器的高度、宽度设置为和父级一致
围绕这个核心思路，我们可以尝试设置 CSS 属性： width: 100%; height: 100%;, 但在 CSS 中，% 这个单位仅用于用于参考父级已设置的宽度或高度，换句话说，如果父级容器并没有设置宽度或高度，子容器设置的 100% 并不能产生相应的作用，而在实际的 UI 布局中，固定父级容器高度的情况是很少出现的，大部分都是由内容将父级容器给撑高，而这种情况下子级容器并不能通过设置 height: 100%; 来将高度设置为和父级一致。
如果使用 position: fixed 定位，width: 100%; height: 100%; 是可以设置高度和宽度布满屏幕的，不过需要通过 left:0;top:0; 调整位置刚好和屏幕大小一致。
既然大部分情况下我们不能使用 height: 100% 来将子容器的高度设置为和父级一致，那我们应该怎样来填充父级空间呢？
答案是通过 left, top, right, bottom 这四个属性。
关于这四个属性，我们都知道是配合 position 使用的，并且会随着 position 设置的值不同，有着不同的特性：
通常我们都通过使用其中两个非对立的属性来进行定位，比如 left:0; top: 0; 在 position: fixed 中表示该容器对齐屏幕的左上角。我们可以通过类似的写法对齐右上角，右下角，或者是左下角。
那如果我们设置一组对立的定位呢，比如在 position: fixed 的情况下设置 left: 0; right: 0;，在对该容器设置了指定 width 和 height 的情况下，我们会发现，该容器对齐在屏幕的左侧，right: 0 似乎并没有任何作用，在设置上下对立的定位 top: 0; bottom: 0; 时，该容器会对齐在屏幕的上方，仿佛 bottom 也没有生效。
细心的同学肯定注意到了，这里有个前提条件：对该容器设置了指定 width 和 height，如果我们去掉容器的高度和宽度并设置 left: 0; right: 0; top: 0; bottom: 0;，那么神奇的事情发生了，该容器铺满了整个容器！那如果使用 position: absolute 呢，效果是显而易见的，铺满了整个父级元素（前提是父级元素设置了 position: relative 、 position: fixed 或 position: absolute）。
总结一下，如果要铺满父级容器，我们可以将父级容器设置为 position: relative，并且为子级容器设置以下 CSS 属性
.sub{
position: absolute;
width: auto; height: auto;
top: 0; right: 0; bottom: 0; left: 0;
}既然我们可以通过设置对立属性为 0，让没有指定高度或宽度子级容器铺满父级容器，那么我们是不是也可以通过设置对立属性为其它值从而拉扯子级容器的高度或宽度呢？
答案是肯定的，只要子级容器没有指定高度或宽度，我们都可以设置对立属性为任意值从而拉扯其容器高度或宽度
例子:
.sub{
position: absolute;
width: auto; height: auto;
top: 50px; right: 0; bottom: 50px; left: 0;
}习CSS是构建好看网页的一种方式。但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。
因此，在这篇文章中，向你介绍7个 比较少见且好用的 CSS 属性，希望对你有所帮助。
CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
就像定义说的，这个属性允许你垂直对齐文本。它对于顺序指示器(st, nd等)、需要的输入星号(*)或没有正确居中的图标特别有用。vertical-align取其中一个值:super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom，或从基线开始的长度(px，%， em, rem等等)。
baseline: 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如<textarea> ，这意味着这些元素使用此值的表现因浏览器而异。
sub：使元素的基线与父元素的下标基线对齐。
super：使元素的基线与父元素的上标基线对齐。
text-top：使元素的基线与父元素的上标基线对齐。
text-bottom：使元素的底部与父元素的字体底部对齐。
middle：使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。
资源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align）。
writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（对于 HTML 文档应该在 html 元素上设置）。它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr。
horizontal-tb：对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。
vertical-rl：对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。
vertical-lr：对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧。
资源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode）。
font-variant-numeric CSS属性控制数字，分数和序号标记的替代字形的使用。
它采用以下这些值之一：normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions。
此属性对于设置数字样式很有用。根据情况，你可能希望显示老式的数字或带有斜杠的零，对于这些情况，font-feature-settings很有用。
请注意，font-variant-numeric是font-feature-settings组属性的一部分。诸如font-variant-caps或font-variant-ligatures之类的属性也属于该组。还要注意，像所有font-feature-settings属性一样，你的字体需要实现上述功能才能正常工作。我使用的字体是Fira Sans。
资源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric）。
每当我们有不想让用户选择的文本，或者相反，如果发生了双击或上下文单击，希望选择所有文本时，user-select属性将非常有用。
此属性采用以下值之一：none | auto | text | all。
none：元素及其子元素的文本不可选中。请注意这个Selection 对象可以包含这些元素。从Firefox 21开始， none 表现的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新启用选择。
autoauto 的具体取值取决于一系列条件，具体如下：
text：用户可以选择文本。all：在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。
资源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)。
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle()。clip-path属性代替了现在已经弃用的剪切 clip属性。
此属性采用以下值之一:circle() | ellipse() | polygon() | path() | url()。
由于这是对该属性的介绍，因此，这里不会深入研究每个值。
我使用最多的两个值是circle和polygon。circle(radius at pair)值有两个参数，第一个参数是圆的半径，第二个参数是表示圆心的点。polygon(pair, pair, pair ...)值取3个或更多的点，表示一个三角形、一个矩形等等。
shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。它采用与clip-path相同的值。
clip-path定义用户如何查看元素，shape-outside定义其他HTML元素如何查看元素。
资源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside)。
最后，backgroundclip CSS属性设置元素的背景是否扩展到其border、padding 或content 框之下。
此属性采用以下值之一：border-box (default) | padding-box | content-box | text
资源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)。
下图是结合上面 7 个属性实现的布局，让大家加深一下印象。
如果你还知道一些新奇的属性，欢迎留言。
作者：Mustapha Aouas 译者：前端小智 来源：dev
原文：https://dev.to/mustapha/7-amazing-css-properties-you-may-not-know-yet-eej
Web领域的一些基本概念。
Web（World Wide Web）叫全球广域网，俗称万维网（www）。
W3C（World Wide Web Consortium）叫万维网联盟，是国际最著名的标准化组织，制定了web标准。
一个网页包含了html元素 Css JavaScript，Html元素决定了网页结构，Css进行了修饰美化，JavaScript控制了交互行为和动态效果。
web标准包含了下面三个方面：
Html不是一种编程语言，而是描述性的标记语言，主要作用是定义内容的结构。
2014年10月万维网联盟（W3C）完成了HTML5标准制定，是目前最新的HTM版本。
HTML5的出世，标志着web进入一个富客户端（具有很强的交互性和体验的客户端程序）时代，像APP网页，小程序都是HTML5的应用场景。
Html5新特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--字符集-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="关键词" />
<meta name="Description" content="页面描述" />
<title>页面标题</title>
</head>
<body>
</body>
</html>viewport用户网页的可视区域，一个针对移动网页优化的页面 viewport meta 标签如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">head区域元素：
meta title style link script base。
body区域元素：
块级元素：每个元素都是独占一行
行内元素：元素在同一行水平排列
inline-block：元素可以排列在同一行显示，并且可以设置一些块元素属性
通过Css：display:inline-block 改变元素。
很多元素都自带了默认样式，不同浏览器下默认样式表现不一致，为了统一或者满足一些需求我们需求将所有默认样式清空，这种处理方式又称为 Css Reset，比如：
*{
margin: 0;
padding: 0;
}另外一种方案使用normalize.css，它将不同浏览器下的默认样式进行了统一，
https://github.com/necolas/normalize.css
html中的单位是像素px
绝对单位
相对单位
属性：字体、行高、颜色、大小、背景、边框、滚动、换行、修饰属性（粗体、斜体、下划线）
p{
font-size: 20px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: PingFang SC; /*字体类型：显示PingFang SC，没有就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体或写（400｜500｜600）*/
font-variant: small-caps; /*小写变大写*/
}行高（line-height）
一般约定行高、字号都是偶数，这样保证它们的差一定偶数除2得到整数，如下图所示：
line-height
文本垂直居中
对于单行文本可以设置行高 = 盒子高度。
对于多行元素的垂直对齐，我们可以使用vertical-align: middle属性，不过vertical-align 仅适用inline、inline-block 和 table-cell 元素。
vertical-align
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定长度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;内容溢出处理
filter:gray()理解优先级很重要，有助于我们排查一些问题。浏览器将优先级分为两部分：HTML的行内样式和选择器的样式。
行内样式
行内样式是直接作用在元素，它的优先级高于选择器样式，使用！important可以提高样式表的优先级。
<div style="font-size:16px">
</div>选择器样式
<style type="text/css">
p{
font-size: 16px;
}
</style>
<link rel="stylesheet" href="style/app.css">优先级规则如下：
优先级
我们通过下图这种标记方式，就可以判断出选择器的优先级。
优先级
两条经验法则
由多个基础选择器组合成的复杂选择器。
多个基础选择器连起来（中间没有空格）组成一个复合选择器（如：ul.nav）。复合选择器选中的元素将匹配其全部基础选择器，.box.nav 可以选中 class="box nav" ，但是不能选中 class="box"。
用于选中某种特定状态的元素，优先级（0，1，0）。
:nth-child(an+b)
更多参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS
伪元素选择器可以向HTML标记中未定义的地方插入内容，优先级（0，0，1）。
属性选择器用于根据HTML属性进行匹配元素，优先级（0，1，0）。
本文要点回顾，欢迎留言交流。
*请认真填写需求信息，我们会在24小时内与您取得联系。
