CSS tips 整合

CSS tips

本文旨在记录本人开发过程中一些常用到的 css 配置

---

2020/07/07 add 文字折行相关

---

2020/08/10 add css 选择器 first-child 等

---

2020/08/13 add positon 是否与 display 冲突

---

position vs display

一般脱离文档流的操作：absolute fixed 会和 display有冲突，解决方法是用容器 A 将使用 display的 B 包起来， A 使用position进行定位即可。

position 与 display:flex 冲突吗

结论： 只要不脱离文档流就不冲突
即：如果使用 absolute fixed 就会产生冲突，better practice 是外层盒子用 position: absolute; width:100% 内层盒子使用 flex 布局

文字折行

word-wrap: break-word;
word-break: break-all;

文字不折行，省略号显示

    display: -webkit-box; // 必需
    overflow : hidden; // 必需
    text-overflow: ellipsis; // 必需
    -webkit-line-clamp: 1; //
    限制在一个块元素显示的文本的行数,必需
    -webkit-box-orient: vertical; // 垂直排列，必需

css选择器优先级：

• !import （增大权重，非必要时不用如何和何时使用CSS的!important）
• 内联样式 1000
• ID选择器 0100
• 属性选择器（a[href] a[title]等） 类选择器（class）  - 伪类（a:link表示a标签为点击时的样式，a:hover等）选择器 0010
• 伪元素选择器（:before :after）  元素选择器（div p）  -  关系选择器 0001
• 通配符 0000（* 表示和文档中任何元素匹配）

css3常用关系选择器

• 后代选择器 E F{}      所有被E包含的F  常用
• 子代选择器 E>F{}     直接子代 常用
• 相邻兄弟    E+F{}
• 通用兄弟    E~F{}
• 组合选择器:对多种选择器进行相同样式的定义

eg:div,p,a{…}

• “与”选择器：

    <div class="tall">tall</div>
    <div class="wealthy">wealthy</div>
    <div class="handsome">handsome</div>
    <div class="tall wealthy handsome">tall wealthy handsome</div>

        div.tall.wealthy.handsome{
            border: 1px solid red;
        }

效果如下：

first-child vs first-of-type

first-child 或者 last-child 选定的永远是父节点的第一个或者最后一个元素

如果想要选中某个指定元素第一个元素需要使用 css3 first-of-type

注： first-of-type last-of-type选中第一个或最后一个元素的条件也是 first-child 或者 last-child 就是这个 type 的元素，因此当遇到特殊情况时可以使用 nth-last-of-type(n) 来解决问题

• 当然一个更好的解决上述问题的方式是将 last-of-type 锁定的内容用一个容器包起来就不会产生无法定位最后一个或第一个的情况。