转载 链接：https://www.jianshu.com/p/5b2ec7ba7bbb
1.怎么让一个不定宽高的 DIV，垂直水平居中?
使用Flex
只需要在父盒子设置：display: flex; justify-content: center;align-items: center;
使用 CSS3 transform
父盒子设置:position:relative
Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;
使用 display:table-cell 方法
父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
2.position 几个属性的作用
position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合"left"、"top"、"right" 以及 "bottom" 属性使用
3.使用:not() 解决lists边框的问题
在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则 解除最后一个link的border
这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：
body上加入line-height样式
导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。行间距（line-height）可以作为 给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观
请注意，这里的声明没有单位，我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍请注意，这里的声明没有单位，我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍
使用 “OWL选择器”
使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则
CSS变量
最后，最强大的CSS级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。你可能有一套颜色在整个项目中使用，以保持一致性。在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。例如：
<!DOCTYPE html>
<html>
<head>
<style>
:root
{
--main-color:red;
--axxent-color:yellow;
}
h1{
color:var(--main-color)};
a[href]:not([class])
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
margin: auto;
background: #fff;
padding: 0 20px 20px 20px;
// max-width: 250px;//限制宽度过宽
z-index: 12;
border-radius: 6px;
网友评论