1、块级 maigin padding border 上下左右都可以推开盒子，行内左右能推开 上下不能，但是仍然会重叠生效
2、dispaly-flex 生成的框体是内联框 框体外面的块级元素不会换行！！
<style>
ul {
display: inline-flex;
}
ul li {
list-style: none;
border: 1px solid red;
padding: 2px;
}
div {
border: 1px solid blue;
padding: 2px;
}
</style>
<body>
<ul>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<div>111</div>
<div>111</div>
</ul>
</body>效果：
3、background-size属性 cover就是全覆盖 盒子 所以按图片比例可能会放大图片 contain属性就是一定要把完整图片装盒子内 所以盒子侧边或底边可能会出现空隙
background-attachment scroll fixed local 首先他们相对位置一定是对于被设定的元素确定的，比如scroll fixed都是根据 设定元滚动条固定 滚动滚动条背景不会变 但是fixed特殊在 你移动视口滚动条时 背景相对视口位置 是不发生变化的 此时背景相对于元素框的位置一定会变 因为移动视口滚动条时元素框是一定会滚动的
然后Local 就是北京随元素框滚动条一起移动
下面这个链接展示效果
4、书写模式writing-mode ： 水平 horizontal-tb 垂直vertical-rl 对于里面的内容怎么排版来说，垂直就是将水平顺时针旋转90度
问题是：盒子的width height属性并不会调换方向 所以会造成内容不适应盒子的情况
解决：用 inline-size代替width block-size代表height 。因为改变书写模式之后 什么叫inline 什么叫 block方向上来说已经不一样了。原来的inline方向和width方向一直 block方向和height方向一致。旋转之后 inline方向和width方向就不一样了！！这也是为啥用inline-size 代替 width属性...
然后至于 margin-top border-bottom这些属性 用什么逻辑值代替就好理解了 只不过top对应start bottom 对应 end
如top、right、bottom、left 这些值对应的逻辑值映射为 block-start、inline-end、block-end 、inline-start
5、overflow-y:控制只在y方向上有滚动条
6、em用于font-size就是相对与父元素而言 如果用于width这些就是相对于自身盒子字体大小而言，rem 相对于根元素。vw vh相对于视口宽高而言 lh相对于line-hight而言。vmin vmax相对于视口较小的那边 和 视口较大的那边
7、rgb 三原色 rgba加一个透明度，hsl（色调、饱和度、亮度）hsl加一个透明度
8、margin padding 上下位置时 是按照父盒子宽度计算的（内联尺寸，也就是说改变书写模式为垂直时，这个百分数是 按照Inline-size确定的）
9、置换元素的 object-fit属性：cover他会按比例缩小图片 应该是按照尺寸小的边为标准去缩小，目的是为了充满整个元素框。contain是必须把置换元素全部包含进去，所以缩放肯定要按照大边为标准 。fill就是整个充满不会按比例。
10、在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。
button,
input,
select,
textarea {
font-family : inherit;
font-size : 100%;
} 
2044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
