一、中国服务商（水平垂直居中）
1、水平垂直居中
父元素相对定位，该元素使用绝对定位；
然后给该元素设置：
top:50%; (50%为相对于父元素的高度)
left:50%; (50%为相对于父元素的宽度)
margin-left:-(width/2);（该元素宽度的负一半）
margin-top:-(height/2); （该元素高度的负一半）
2、APP、webAPP、Android、iOS中用的较多的为弹窗
二、Z-index层级。
在使用了(绝对定位和固定定位)定位的元素中，层级z-index高的，显示在前面。
三、背景定位场景(中国商业服务商)。
加上padding-left，再用使用background。
四、Css 精灵(css sprite,雪碧图)应用场景（中国商业服务商）
1、 在线制作工具: https://www.toptal.com/developers/css/sprite-generator
（将多张图片合并为一张图片使用，并且会设有background-position的值，引用时合成背景图片公用）
2、减少http请求,提升网页加载速度.
3、合成的大图的大小小于多张小图,减少字节数,节省服务器流量.
五、Overflow隐藏溢出场景(运达集团 )。
a) Visiable默认值，内容不裁剪。
b) Hidden,内容会被裁剪，隐藏溢出的元素。
c) scroll,内容被裁剪，浏览器以滚动条的形式显示其他内容。
d) auto,浏览器根据内容自动判断是否需要添加滚动条来显示溢出内容.
六、伪类场景（中国商业服务商）。
a) 鼠标移动到链接上的样式a:hover。
a:link {color:springgreen;/* 未被访问的链接 */}
a:visited {color:red;/* 已访问的链接 */}
a:hover {color:orange;/* 鼠标移动到链接上 */}
a:active {color:blue;/* 选中的链接 */}
顺序一定不能错不然会不生效（l v h a）
七、固定定位场景（启梦科技）。
b) 固定定位一种特殊的绝对定位,相对于可视区域定位。
八、锚链接
c) 在a标签的href中使用#再加上某一个元素的id值，点击a标签跳到相应的模块。
d) 只有id锚链接才生效
九、透明度场景（启梦科技）。
e) opacity，数值范围0~1.
f) 半透明背景影响文字显示,将背景和文字分离.
十、两栏自适应布局场景（后台管理系统）。
g) Html的高度为100%，高度为浏览器可视区域高度。
h) Width为auto（不设宽度，margin值会影响元素的宽度：width+margin=父元素宽度）,width为100%（设宽度为100%，margin值不会影响宽度，本身的宽度=父元素的宽度）.
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>后台管理系统左右栏布局</title>
<style>
*{ margin:0px;padding:0px;}
html,body{width:100%;height:100%;}
/* 和可视区域一样高,所以先要将父元素设为和可视区域一样高 */
.left{
width:300px;
height:100%;
float:left;
background: #0a1f2f;
position: fixed;
}
.right{
/* 不设置宽度，宽度默认值为auto
设置100%即为父元素的宽度 */
height:2000px;
background: red;
width:100%;
}
</style>
</head>
<body>
<!-- 两栏自适应布局 -->
<divclass="left">
</div>
<divclass="right">
</div>
</body>
</html>十一、单行文本溢出:
1、overflow: hidden;隐藏溢出
text-overflow: ellipsis;文本溢出使用省略号显示
white-space: nowrap;强制文本不换行
2、内联元素设置行高不起作用,必须给块级元素或者内联块元素设置行高.
十二、H1加上文本缩进 text-indent:xxxpx，隐藏网站名。
侧重于网站知名度的网站一般给网页的logo加h1，且h1需要写文字，为了让文字不出现在网页中一般使用文本缩进属性text-indent:-99999px;隐藏文字
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
