html/css基础知识中点难点(观后感)

转载 链接：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中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。例如：

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

第五个段落。

---

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;