css
文章平均质量分 72
RayShyy
阿巴..阿巴阿巴阿巴...
展开
-
grid网格布局基础(二)
上一篇小shy向大家介绍了什么是grid和grid中容器身上的属性,本篇向大家介绍下项目身上的一些属性。项目属性grid-column-startgrid-column-endgrid-row-startgrid-row-endgrid-columngrid-rowgrid-areajustify-selfalign-selfplace-self1. grid-column-* / grid-row-*grid-column-start:从哪一列网格线开始;grid-co.原创 2022-05-02 11:48:36 · 687 阅读 · 0 评论 -
grid网格布局基础(一)
1. grid布局简介CSS Grid(网格) 布局,与 flexbox 的一维布局系统不同,是一个二维的基于网格的布局系统,它可以同时处理列和行,Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块。Grid布局和Flex布局有很多相似之处,Grid也分容器和项目,采用grid布局的元素,被称为grid容器(grid container),简称“容器”,其下的所有直接子元素自动成为容器成员,称为grid项目(grid item),简称“项目”。2. 基本概念上面说到,gr原创 2022-04-30 16:01:50 · 1706 阅读 · 0 评论 -
flex布局详解
1. Flex布局是什么?Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。任何一个容器都可以指定为Flex布局。注意:设为Flex布局后,子元素的float、clear和vertical-align属性将失效。2. 基本概念容器:采用Flex布局的元素,称为Flex容器(flex con原创 2022-04-23 18:36:07 · 24494 阅读 · 1 评论 -
css属性书写顺序规范
小shy刚开始写前端css样式的时候总是想到什么样式就写什么样式,完全不注重css书写顺序,后来才了解到正确的css样式顺序,其实会提升浏览器渲染dom的性能;所以小shy觉得css样式顺序正确的书写也是每一个前端开发人员不可或缺的技能。(1) 定位属性:display / position / float / left / top / right / bottom / overflow / clear / z-index(2) 自身属性:width / height / margin / p.原创 2022-04-21 21:23:24 · 367 阅读 · 0 评论