grid (网格布局)

适合做整体布局

单位可用百分比. fr auto 混搭 .wrapper{ /* 容器 */ display: grid; /* inline-grid 行内 */ grid-template-columns: 1fr 1fr 1fr; /* 列宽 repeat(1fr, 3) 写法 repeat(auto-fit, minmax(200px, 1fr)); */ grid-template-rows: 100px 100px 100px; /* 行高 */ row-gap: 10px; /* 行间距 */ column-gap: 10px; /* 列间距 */ grid-gap: row-gap column-gap; /* 行列复合写法 */ justify-items: center; /* 水平方向 start end */ align-items: center; /* 垂直方向 start end */ place-items: center center; justify-content: center; /* 整体内容 space-evenly */ grid-template-areas: "z m l" "d e l" "g h i"; /* 这里起成相同的名字 代表相同的区域 */ } .item{ grid-column-start: 2; /* e-start 也可以简写 e */ grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; grid-area: l; /* 这样比较方便直观 */ align-self: end; justify-self: end; place-self: ; /* 上面两个复合 */ } flex(弹性盒)

适合写一行布局.

https://·/shihaiying/p/11386355.html

div{ display: flex; /* 设为Flex布局以后子元素的float、clear和vertical-align属性将失效 inline-flex; */ flex-direction: row; /* 默认row | row-reverse | column | column-reverse;*/ flex-wrap: no-wrap; /* 默认no-wrap |wrap | wrap-reverse(第一行在下面); */ flex-flow: row wrap; /* direction和wrap的复合属性 */ justify-content: 主轴的对齐方式; align-items: stretch | flex-start | flex-end | center | baseline; (以第一行文字的基线) align-content: flex-start; flex-end; center space-saround space-between; // 多行情况下才 } .item{ order: 0; 越小越靠前 flex-grow: 0; 有剩余空间不放大; 1 2 占据剩余空间的比例 flex-shrink: 1; 空间不够将缩小;0 为不缩小 flex-basis: ;主轴空间 auto(默认项目本来的-大小) flex: 0 1 auto; 默认不放大, 缩小, 本来大小 /* initial -- 0 1 auto; auto -- 1 1 auto; none -- 0 0 */ align-self: ; 覆盖align-items; } float vw 之前流行rem, 现在流行vw 定位 父元素有border padding 而且position: relative, 那子元素absolute, top: 0; left: 0; 位置会在哪里?? 紧贴着border子元素margin-bottom撑不开父盒子?设置父盒子 overflow: auto; 盒模型

内容 => padding => border => margin

box-sizing: border-box;// 感觉这个比较合理.width auto是块级元素的默认值, 100%; 的话会等于父级, 但是再加了padding border(content-box) 会溢出box-sizing: border-box; // line-height设置要减去padding和border 是内容区域的高度text-align: center; 内容区域居中(居中偏移固定的距离没有问题) box{ box-sizing: border-box; /content-box/ border: 10px; line-height: 100px; /* 记得减 */ text-align: center; /内容区域/ }设置了box-sizing: border-box;方便写盒子, 但是写line-height, 要减去padding和border了,text-align center也是内容区域width: auto 和 100%的区别; auto; 默认的是auto; 100% 如果是content-box就会超出了block默认和父级盒子的宽度一样 Grid for layout, Flexbox for components 阮一峰 grid 布局

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。