【CSS】积累与发现

大小

单位

css中单位em和rem的区别
如果em用于修饰字体大小，那么1em就是相对于父元素字体大小
如果em用于修饰width/height/padding/margin，1em是该元素的font-size大小
css 背景图铺满整个屏幕无滚动条
width: 100%; height:100vh;注：vh:表示 显示窗口的高度，设置了100vh

选择器

伪类选择器

伪类选择器p::before{content:"content "}加上<p>123</p>的输出是<p>content 123</p>，是在内容的前面加，即在p标签的内部，而非标签前面加。而p::before本身可以看做p的一个独立的子元素，就像p里面又多了一个p那样

各类选择器可以连用，例如tbody td:first-child::before；伪类选择器也可以单独使用，例如div :first-child，代表着所有div下面第一个出现的标签，无论这个标签是啥

CSS hover 父对子、子对父、同级之间的控制

修改表格

Html-浅谈如何正确给table加边框
border属性给了table标签的话，是不会影响下面的tr和td等东西的

---

关于html中table表格tr,td的高度和宽度
table中的width值也是可以改变的，但是tr的width是跟着身体table的width

---

修改列表

CSS counter-increment 属性
每counter一次，计数器就加一；counter-reset同时有创建和清除的功能，如果使用的话一定要在需要计数的父标签里reset一次，不要直接定义increment，当遇到有counter-reset的标签的时候，才会清除counter-reset后面跟的计数器。如果不手动设定reset的话，其reset的机制非常奇怪

h1 {counter-increment: counter_h1;        }
h1::before {content: counter(counter_h1);}

把注释放开你会很惊讶为什么这样

<div>
    <!--    <h1>CSS的选择器</h1>-->
    <div><h1>CSS的选择器</h1></div>
    <h1>CSS的选择器</h1>
</div>

---

CSS list-style 属性

布局

display

CSS—display详解

盒子模型

css知多少（7）——盒子模型
为啥会画出一个三角呢，那是因为border默认情况下上边缘的border的左右边缘就是两根对角线

---

聊聊CSS世界中的margin-box
关于css虚线
div嵌套2个子div，当子div的宽度等于父div宽度的时候，为什么会换行？
这种水平布局可以用flex和float两种方法进行布局，设置font-size会导致子容器继承字体大小

---

布局和包含块

文档流

CSS-标准文档流（Normal Flow）

浮动

经验分享：CSS浮动(float,clear)通俗讲解
css知多少（8）——float上篇

为什么要设计成塌陷，因为不塌陷怎么环绕啊
上面博客里2.2的右图那个蓝框应该是一条横线，里面应该没有空行；另外从2.2的最后一张图可以看出来，虽然叫做浮动，但是效果仍然会保证文字显露出来，例如，效果如图，可以看到123这个文字并没有被green的div覆盖掉，而是被这个浮动块挤开了

    <div style="border:1px solid blue;width:500px">
        <div style="width: 200px;height: 100px;background-color: red"></div>
        <div style="width: 100px;height: 100px;float: left;background-color: green"></div>
        <div style="width: 150px;height: 300px;background-color: pink">123</div>
    </div>

第二个例子是

<div>
        <div>abc</div>
        <div style="float: left">123</div>
        <div>alpha bet</div>
    </div>

效果如下，通过调试工具可以看到，最后一个alpha bet块块实际是一整行的，只不过文字部分被123这个浮动块挤开了

同样地，图片也会被挤走，例如下面的代码，图片实际的排列顺序是2 1 3

<div>
        <img src="../images/skill1.png"/>
        <img src="../images/skill2.png" style="float: left"/>
        <img src="../images/skill3.png"/>
    </div>

所以，浮动元素脱离了文档流，的确会使得div块之间产生重叠，但对于浮动的文字和图片来说，float并不会导致他们与其他不浮动的元素的重叠，而只会将他们挤开；另外，即使是脱离了标准文档流，但也不能说这个浮动块不归属其父容器了，他仍然会受到其父容器的限制，例如两个相邻的浮动块合并宽度大过父容器宽度，仍然会换行

---

css知多少（9）——float下篇
消除float的破坏性的方法如下，为啥呢，里面的那个div被要求了左侧不可以有浮动的元素，所以这个盒子会挪到下一行去，你在这个div里加一个1变成<div style="clear: left">1</div>就更清楚了

img{width: 50px;border:1px solid #cccccc;float: left;}

<div style="border:2px solid blue;padding: 3px">
        <img src="../images/skill1.png"><img src="../images/skill1.png">
        <div style="clear: left"></div>
</div>

box-sizing

css3——box-sizing属性

Flex布局

Flex 布局教程：语法篇
关于align-items和align-content的区别和使用场景
假如主轴是行，那么每行的里的块的水平线都是平齐的

---

CSS flex-basis 属性
CSS flex-shrink 属性
CSS flex-grow 属性（可以使flex-basis失效）
弹性盒子
弹性盒子的尺寸，例如article { flex: 1;}，表示每个article子项都占据一个单位的宽度或者高度。

Grid布局

网格布局
显式网格和隐式网格的区别
显示网格就是我们来设计的网格格式，例如grid-template-columns来规定有多少列，每一列要有多宽，又如grid-template-rows来规定有多少行，每一行多高；
以上内容都是我们告诉浏览器的网格的显式设计，而剩余的就是隐式网格，是浏览器根据已经定义的显式网格自动生成的网格部分，比如上面文章里说的表格外的部分就是自动生成的。
再比如我有7个元素被放置于一个网格盒子，下面的例子里只定义了网格有3列，每一列150px；我并没有指定每个元素的行高，这个行高是82.656，再加上两个gap，刚好就是整体的行高300px，而这个82.656px的高度，就是隐式计算出来的，而这个计算出来的样式，被归类于“隐式网格”里。更进一步的，我也可以手动指定这个隐式网格的行高样式，grid-auto-rows，这里稍微有点别扭，这个样式属于“隐式网格”，但却是被我们手动指定的。

.container {
            display: grid;
            height: 300px;
            grid-template-columns: repeat(3, 150px);
            grid-gap: 20px;
        }

定位

position:sticky 粘性定位的几种巧妙应用
如何理解left和top，当页面上下滚动时，粘性定位的元素到达视口top指定距离时（例如top:10px，就是距离视口上边缘10px），变为相对于视口的固定定位；left呢？这不是也能所有滑动me。。。
css知多少（11）——position

position: fixed 一定是相对于浏览器窗口进行定位吗？
CSS | absolute绝对定位的默认位置

overflow

overflow
浅析BFC布局的概念以及作用
深入理解块级格式化上下文(BFC)
最后一张图里的原因是BFC的区域不会与float box重叠

---

深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
浮动的元素脱离文档元素， 不占据空间。 不浮动的元素会直接无视掉这个元素
边界塌陷或者说边界重叠 相邻block的margin取两者之间的最大值

权重

前端 CSS权重详解
CSS权重的等级划分与比较
权重并非按等级相加求和作比较，就是说没有进位这一说，1011不等于100，100>1011
另外，感谢微信群里欧阳兄弟的解释，比如<block class='yello red'>生效的不一定是red，前后不是指使用时候的前后，是要看样式定义的前后，看谁是后定义的（或者说后加载的），后加载的会生效。以及如果在某个样式页a.css里引入了外部样式b.css，如果import 'b.css'写在前面，相当于b.css先引入，然后使用的时候规则同上，即如果有相同的样式，a.css会生效

---

[CSS]CSS的继承性、层叠性、权重
继承的权重为0，也就是说这个属性没被其他样式提到过，那就用继承来的

基线与行高

css基线与行高关系
字母’x’在CSS世界中的角色和故事
深入理解 CSS 中的行高与基线
vertical-align到底怎么用
研究了一下午，没研究明白什么，vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐
但是知道了该元素所在行的基线的位置是可以变的，而且也没有个固定的位置，如果不设置的话这个位置是自动寻找的，例如

#d {height: 200px;border: solid 1px lightskyblue;}

<div id="d"><span>xxxxxxx</span>
<!-- 可以先把图片注释 -->  <img src="https://how2j.cn/example.gif">
</div>

基线如下

而如果你把图片放出来，基线就变了，注意现在那个xxx垂直不是居中的，只是看起来像而已

所以寻找基线的最简单的方法就是扔一个<span>xxxxxxx</span>。当然我们可以通过line-height来控制，因为行高是指上下文本行的基线间的垂直距离，如果行高等于容器高度，那么这个容器也就只能容纳一行，

<div id="d"><span>xxxxxxx</span><img src="https://how2j.cn/example.gif">/div>

#d {height: 200px;line-height: 200px;border: solid 1px lightskyblue;}
span, img {/*vertical-align: middle;*/}

结果如下，此时，默认情况下与父元素的基线对齐，这是因为代码中对于行高的设置确定了基线的位置，如果把vertical-align: middle;打开，文字会下挪一点，图片会下挪很多，完成近似居中，这是因为父元素div的基线没变，而middle导致的是各元素的中线与父元素的基线+一半的x高度对齐

过度

CSS3实现hover离开时平滑过渡