前端知识汇总2(css,css2, 页面布局，移动端适配）

1. 固定定位（fixed）
固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当position属性的
取值为fixed时，即可将元素的定位模式设置为固定定位。
当对无素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。
不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该无素都会始终在浏览器窗口的固定位
置。
固定定位有两点：
1、固定定位的元素跟父亲没有任何关系，只认浏览器。
2、固定定位完全脱标，不占有位置，不随着滚动条滚动。

2.叠放次序（z-index )
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

定位模式 是否脱标占有位置 是否使用边偏移 移动位置基准
1.静态static 不脱标正常模式 不可以 正常模式
2.相对定位relative 脱标，占有位置 可以 相对自身位置移动
3.绝对定位absolute 完全脱标，不占有位置 可以 相对定位父级移动位置
4.固定定位fixed 完全脱标，不占有位置 可以 相对浏览器移动位置

3.display显示
display设置或检索对象是否如何显示
display: none 隐藏对象（不占有位置）
display: block显示对象,除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不再保留位置，下面的元素会跑上去。

   /* display: none; */
        /* 隐藏某个元素 display: block 显示某个元素 */
        /* visibility: visible; 显示某个元素 */
        visibility: hidden; 
        /* 隐藏某个元素 */
		
		overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible：不剪切内容也不添加滚动条。
hidden：不显示超过对象尺寸的内容，超出的部份隐藏掉。
scroll：不管超出内容否，总是显示滚动条。
auto：超出自动显示滚动条，不超出不显示滚动条。

CSS用户界面样式：鼠标样式，表单轮郭
4.鼠标样式cursor
<ul>
   <li style="cursor: default">我是箭头</li>
   <li style="cursor: pointer">我是小手</li>
   <li style="cursor: move">我是移动</li>
   <li style="cursor: text">我是文本</li>
</ul>

5. 轮郭outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用   textarea {
        resize: none; /* 防止拖拽   */
        outline: none;  /* 取消边框   */
    }
	
6.vertical-align 垂直对齐
vertical-align不影响块级元素中心内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元
素。通常用来控制图片/表单与文字的对齐。
vertical-align: baseline 基线对齐，默认的是文字和图片基线对齐
vertical-align: middle 垂直居中，
vertical-align: top 顶部对齐
vertical-align: bottom 底部对齐

7. 溢出的文字隐藏white-space,text-overflow
white-space设置或检索对象内文本显示方式，通常我们使用于强制一行显示内容。
normal：默认处理方式
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
 li {
        width: 260px;
        height: 30px;
        border: 1px solid red;
        line-height: 30px;
        white-space: nowrap; /* 强制在同一行内显示所有文本 */
        text-overflow: ellipsis; /* 溢出的部份用省略号替代 */
        overflow: hidden;    /* 超出的部分隐藏 */
    }
	
	
css3 层叠样式表的升级版本：层叠样式，对网页布局、字体、颜色、背景灯效果做出控制

css3新增的选择器
1.属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样可以不用借助于类或id选择器。
注：类选择器，属性选择器，伪类选择器权重是10
属性选择器还有以下匹配规则（E表示选择器，att表示属性值，val表示匹配的内容）
选择器 简介
E[att] 具有att属性的E元素
E[att=val] 具有att属性且值为val的E元素
E[att^=val] 具有att属性且值以val开头的E元素
E[att$=val] 具有att属性且值以val结尾的E元素
E[att*=val] 具有att属性且值包含val的E元素

 <style>
        div[class^="icon"] {
            color:red;
        }
        div[class$="img"] {
            color: pink;
        }
        div[class$="text"] {
            color: blue;
        }
    </style>
	
2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素 权重10 
选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个

 <style>
        ul li:first-child{
            background-color: red;
        }
        ul li:last-child {
            background-color: blue;
        }
        ul li:nth-child(3) {
            background-color: pink;
        }

nth-child(n)
nth-child（n） 选择某个父元素的一个或多个特定的子元素
1.n 可以是数字，关键字和公式
2.n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
3.n 可以是关键字：even 偶数，odd 奇数
4.n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的
个数会被忽略 )

nth-child和nth-of-type的区别
1. nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据E找第n个孩子


3.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
::before —— 匹配被选元素的内容前面插入内容，可以与 content 配合使用
::after —— 匹配被选元素的内容后面插入内容，可以与 content 配合使用
伪元素特点
伪元素要配合content属性一起使用。
before和after创建一个元素，但是属于行内元素。
伪元素只能给双标签添加，不能给单标签添加，比如img或br元素
伪元素不会出现在DOM中，所以不能通过JS来操作，仅仅是在css渲染层加入。
伪元素选择器和标签选择器一样，权重为1。


4.CSS3 边界图片
CSS3 的 border-image 属性，可以使用图像创建一个边框。
border-image 属性允许指定一个图片作为边框！ 用于创建上文边框的原始图像。
round：图像平铺（重复）来填充该区域。
stretch：图像被拉伸以填充该区域


5.CSS3圆角
在 CSS3 中，border-radius 属性用于创建圆角。
在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

属性 描述
border-radius 所有四个边角 border-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度


5.CSS3背景
 CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。
5.1background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。 可以给不同的图片设置多
个不同的属性。


5.2CSS3 background-size 属性
 background-size指定背景图像的大小，在不同的环境中指定背景图片的大小，可以指定像素或百分比
大小，指定的大小是相对于父元素的宽度和高度的百分比的大小。
基本语法：background-size: length | percentage | cover | contain;
一：length
该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一
个值，那么第二个值会自动转换为 “auto”;
调整背景图片的大小：
</html>
.example {
 background: url(flwr.gif) right bottom no-repeat, url(paper.gif) left top 
repeat;
}
	
div {
   background:url(img/flwr.gif);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-origin: content-box;
}
	
	
5.3CSS3 background-clip属性
 CSS3中background-clip背景剪裁属性是从指定位置开始绘制。 语法如下：
 background-clip: border-box|padding-box|content-box;

 border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。
	
6.CSS3 渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。	
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的
事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览
器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义	
	
CSS3 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同
时，你也可以设置一个起点和一个方向（或一个角度）。	

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 对角	
使用透明度	CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

CSS3 径向渐变


6.CSS3 文本效果
CSS3的文本阴影
 CSS3中，text-shadow属性适用于文本阴影 。 指定了水平阴影，垂直阴影，模糊的距离，以及阴影的
颜色：
CSS3 box-shadow属性
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
CSS3 Text Overflow属性
 CSS3文本溢出属性指定应向用户如何显示溢出内容
CSS3 转换
 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小
和位置。可以使用 2D 或 3D 转换来转换您的元素。
 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：
 h1 {
 text-shadow: 5px 5px 5px #FF0000;
}
	
6.1CSS3 box-shadow属性
CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
div {
 width:300px;
 height:100px;
 background-color: red;
 box-shadow: 10px 10px 5px #888888;
}

CSS3 Text Overflow属性
 CSS3文本溢出属性指定应向用户如何显示溢出内容
text-overflow: clip|ellipsis

clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。


7.CSS3 转换
 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小
和位置。可以使用 2D 或 3D 转换来转换您的元素。
 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法transform: none|*transform-functions;

7.1 2D 转换
translate() 方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div {
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
 transform:translate(50px,100px);
}
translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

7.2 rotate() 方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

7.3scale() 方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。 缩放也有3种情
况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩
放倍数。当x或y取值为0~1之间时，元素进行缩小；当x或y取值大于1时，元素进行放大。
div {
 width:200px;
 height:100px;
 background-color:red;
 border:1px solid black;
 transform: scale(2,3);  // scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
}

7.4 skew() 方法
skew()方法来实现元素的倾斜效果。 倾斜也有3种情况：skewX()、skewY()、skew() 。
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向
相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜

div {
 width:200px;
 height:100px;
 background-color:red;
 border:1px solid black;
 transform:skew(30deg,20deg);
}

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

8. 3D 转换
8.1 rotateX() 方法
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
div {
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
 transform:rotateX(120deg);
}

8.2 rotateY() 方法
rotateY()法，围绕其在一个给定度数Y轴旋转的元素。
div {
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
 transform:rotateY(130deg);
}

9.CSS3 过渡
CSS3的过渡就是平滑地改变一个元素的css值，使元素从一个样式逐渐过渡到另一个样式。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦
点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
transition:[<transition-property> || <transition-duration> || <transition-timingfunction> || <transition-delay>]

transition-property：指定过渡的CSS属性。
transition-duration：指定完成过渡所需的时间。 默认是 0。
transition-timing-function：指定过渡调速函数。 默认是 "ease"。
transition -delay：指定过渡开始出现的延迟时间。 默认是 0。
div {
 width:200px;
 height:100px;
 background-color:red;
 border:1px solid black;
 transform:skew(30deg,20deg);
}
div {
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
 transform:rotateX(120deg);
}
div {
 width:100px;
 height:75px;
 background-color:red;
 border:1px solid black;
 transform:rotateY(130deg);
}
transition:[<transition-property> || <transition-duration> || <transition-timing￾function> || <transition-delay>]
 
9.1 transition-property属性
transition-property:规定应用过渡的css属性的名称.
允许取值：1、none:没有属性会获得过渡效果
 2、all：默认值，所有属性都将获得过渡效果
 3、property：定义应用过渡效果的CSS属性名称列表

9.2 transition-duration属性
transition-duration：定义过渡效果花费的时间。
允许取值：time值，它是以秒和毫秒计，默认是0，意味着没有效果。

9.3 transition-timing-function
transition-timing-function：规定过渡效果的时间曲线。主要包括下面几个属性值。
ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。
linear：元素样式从初始状态过渡到终止状态速度是恒速。（ 匀速 ）
ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。这种效果称为渐显
效果。（ 加速 ）
ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。这种效果称为渐
隐效果。（ 减速 ）
ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。这种效果称为渐显渐隐效果。

9.4 transition-delay
transition-delay：规定效果开始之前需要等待的时间
允许的值：time值，以毫秒和秒计，默认是0。
transition属性类似于border，font这些属性，可以简写，也可以单独来写。简写时，各函数之间用空格
隔开，且需要按一定的顺序排列。另外，作用于多个过渡属性时，中间用逗号隔开。
div{
       width: 50px;
       height: 100px;
       background: #ffd800;
       /*分开使用transition的扩展属性*/
       transition-property: width,height,background;
       transition-duration: 1s;
       transition-timing-function: ease;
       transition-delay: .2s;
       /*使用transition简写属性*/
       transition: width 1s ease .2s,height 1s ease .2s,background 1s ease .2s;
   }
   div:hover{
       width: 100px;
       height: 50px;
       background: #00ff90;
   }
 
10.CSS3 animation（动画）属性


1.商标数据有时遗漏问题：图上的第2层商标同步服务可能有问题
	@keyframes属性
在学习animation之前，先了解一个特殊的东西，就是KeyFrames,叫做关键帧。 Keyframes有自己的语
法规则，他的命名由“@keyframes”开头，后面紧接着“动画名称” 和一对花括号{},括号中是一些不同时间
段的样式规则 。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes” 中的样式规则是由多个百分比构成的，如 0%到100%之间。我们可以在这个规则中创建多
个百分比，同时分别给每一个百分比中需要有动画效果的元素加上不同的属性，从而达到一种在不断变
化的效果。比如移动，改变元素颜色，位置，大小，形状等。同样也可以使用from ，to来代表一个动画
从哪开始，到哪结束。From相当于0%而to相当于100%。0% 是动画的开始，100% 是动画的完成。
注意：0%不能像别的属性取值一样把百分比符号省略，在这里必须加上% (0%),如果没有加上的话，这
个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。
div {
 width: 100px;
 height: 100px;
 background: red;
 animation: name 5s;
}
@keyframes name
{
 from {background:red;}
 to {background:yellow;}
}

10.2 animation 属性
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name：规定需要绑定到选择器的 keyframe 名称。换句话说此处的name要和keyframes
中的name一致，如果不一致，将不能实现任何动画效果 。
animation-duration：规定完成动画所花费的时间，以 s 秒或毫秒计。 默认是 0。
animation-timing-function：规定动画的速度曲线。 默认是 "ease"。

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。

@keyframes myfirst
{
 0%   {background:red; left:0px; top:0px;}
 25% {background:yellow; left:200px; top:0px;}
 50% {background:blue; left:200px; top:200px;}
 75% {background:green; left:0px; top:200px;}
 100% {background:red; left:0px; top:0px;}
}

11. 总结：
animation（动画）与 transition（过渡）的区别是：
transition 需要事件进行触发，而 animation 不需要事件进行触发，调用关键帧即可。
那么第一步就是制作关键帧，其常用语法是：
@keyframes 关键帧的名称{ 0%{ } 20%{ } 30%{ } 40%{ } ... 100%{ } }
第二步：调用关键帧！常用方法是：
animation:关键帧的名称

12.CSS3多列布局
CSS3提供了属性columns用于多列布局
column-count属性
column-count 属性设置列的具体个数 。
column-width属性
column-width设置对象的宽度；使用像素表示。
设置列数或宽度对于多列布局内容很重要。 列应使用'column-width'或'column-count'来设置，但绝不
能一起使用。 这两个属性默认情况下均设置为“自动”。
 column-gap属性
column-gap属性指定的列之间的差距。

12.1 CSS3列规则
column-rule属性
column-rule属性设置列之间的宽度，样式和颜色。 复合属性
“列规则”有效地将边界置于“列空白”的中间。 因此，要启用此功能，必须指定“列间隙”宽度，该宽度与列
规则相同或更大。 列规则还具有几个单独的子属性以及速记版本。 此速记版本的工作方式与速记“ 
border”属性的工作方式相同。
div {
     column-count:3;   /* 划分成三列的div元素的文本 */
}
div {
 column-width: 150px;
 
 column-count属性；/* 划分成三列的div元素的文本 */
 column-width: 150px;
 column-gap: 30px;   /* 指定列之间40个像素差距 */
column-span: all; //指定某个元素应该跨越多少列

column-rule属性设置列之间的宽度，样式和颜色。 复合属性
column-rule: 2px solid #0000ff;
 /* column-rule-width: 2px; */
 /* column-rule-style: solid; */
 /* column-rule-color: #0000ff; */
 
 column-span 属性 column-span属性指定某个元素应该跨越多少列。
 column-span: all;

 12.2遮罩mask
 Css 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可
见区域。简言之，我们可以通过在元素上设置这个属性，来隐藏该元素的一部分。 遮罩mask与背景
background非常类似 ，是一个复合属性 。
注意: IE浏览器不支持，webkit内核的浏览器(包括chrome、safari、IOS、android)需要添加-webkit-前
缀。要特别注意的是，firefox浏览器也支持webkit-mask属性 。
实例： 准备内容图片，和遮罩png图 ，先看效果图， 可以用mask遮罩来实现，保证内容图片完整，直
接更换不用切片。

.mask:hover {
       mask: url("heart.png") center center/400px 400px no-repeat;
       -webkit-mask: url("heart.png") center center/420px 420px no-repeat;
 
13.CSS3 用户界面
 CSS3中，resize属性指定一个元素是否应该由用户去调整大小。 格式为：
 resize: none|both|horizontal|vertical;
 
 none是用户无法调整元素的大小，both是用户可以调整元素的高宽，horizontal是用户可以调整元
素的宽度，vertical是用户可以调整元素的高度。

14.移动端/PC端适配方案
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页
面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
 
 早期网页设计采用静态布局，静态布局中页面各个元素采用px为单位，这种方案实现简单，不存在兼容
性问题，但用户体验很不友好。
后面出现流式布局，使用百分比 % 定义宽度，高度使用px固定，根据可视区域大小实时进行尺寸调整，
通常使用max-width/min-width控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或
横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

弹性布局：
顺应不同页面字体大小展现问题，出现了弹性布局。这种布局方案下，包裹文字的元素的尺寸采用
em/rem为单位，页面主要划分区域的尺寸依据情况使用px、百分数或者em/rem。


对于响应式
web设计，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案
的结合，同时搭配 媒体查询技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果

适配方案：
百分比方案： 高度使用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率

rem方案： rem是相对长度单位

15. 移动端适配
所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示 。

vw适配
 vw(view-width), vh(view-height) 这两个单位是CSS新增的单位，表示视区宽度/高度，视区总宽度为
100vw, 总高度为100vh 。 1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩
放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。
vw：view width，指视口宽度的百分比，如：1vw = 视口宽度的1%
vh：view height，指视口高度的百分比，如：1vh = 视口高度的1%
vmin：vmin的值是当前vw和vh中较小的值
vmax：vmax的值是当前vw和vh中较大的值