CSS 常用知识点

理论

1. div 默认情况下是占用一行，继承父级宽度：100%

2. span

3. flex 布局默认情况下宽度自动挤压

   1. flex-row
   2. flex-nowrap

4. img 无法自适应宽度，解决方案 <div><img /></div>

5. box-sizing：box-content、 box-border 指定元素的尺寸包括内容区域、内边距和边框的总和。

6. 宽度塌陷原因分析：

   1. 元素在flex布局中

div

padding 用途

box-sizing

box-borderw-full

1. 排查自动换行
2. 滚动条

box-content 确保元素的尺寸只计算内容区域、内边距和边框的大小，而不包括外边距和滚动条的空间。

box-border 元素的尺寸包括内边距和边框的总和

注意事项

flex

默认 nowrap 此时即使配置 w-full 会被挤压

justify-centerjustice-betweenjustify-around

items-startitems-enditems-center

justify 水平对齐

align-items 垂直对齐

flex-wrap

垂直居中

position:relative

flex margin-auto

table

内部容器占满

overflow 滚动条

overflow-auto

X轴 横向滚动

基础

样式

注意事项

Y轴 纵向滚动

基础

注意事项

image

自动适应宽高

order 渲染顺次

v-bind

demo