回炉再造Css Layout
大家好,我叫张文轩,这是我的第5篇分享
初衷
有次看了篇文章,文章有句话对我印象深刻,这句话是废掉一个人的最好方式,就是让他忙的停不下来。意思就是在前进的过程中,如果只知道不停的奔跑,而不间歇性的停下来梳理总结,最终也并不会跑的很远。
就拿我自己来讲吧,我从事前端也好几年了,平常主要工作是承接公司(口袋购物-微店)业务开发,说实在的用的东西挺多的,很多东西都知道一点,但每每自己静下来想想的时候,发现自己很多东西又了解不够深,平常业务开发功能实现就行,受限于时间,很多时候并没有想为什么这样做可以,为什么那样做不行,停下来思考总结的次数不是特别多,再加上前端界的快速发展,因而会有点点焦虑,直到最近自己学会停下来,好好回顾一下自己用过的东西,结构化梳理自己的知识,查漏补缺,构建自己的知识网络,让自己对一些经常用的知识有了更深的认识,同时还补缺了自己之前很多并不知道的一些细节点,才稍微有了种踏实的感觉,希望跟我有同样感想的童鞋也要学会停下来,系统化整理下自己所掌握的,相信你会收获很多。
如题,今天我要讲的是关于Css Layout相关的知识,可能很多知识你都知道,但我们今天的重点是构建基础知识网络,查漏补缺。
Float
我们都知道,css布局正常情况下都是从左至右依次排列,行内元素依次展示,块元素单独占据一行。然而有些时候我们想要一些特定的布局,就需要改变元素的布局方式。比如float
,float被用于移动元素到左或者到右,允许文本或者形内元素环绕它,并且会从正常文档流脱离出来。
<div class="container"><div class="item"></div><p>我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,</p><p>我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,我是一条狗,</p>
</div>.container {width: 500px;border: 5px solid rgb(111,41,97);border-radius: .5em;padding: 10px;
}
<!--关键代码-->
.item{display:float
}
复制代码
float最初被设计出来是用来实现文字环绕的效果的,后面逐渐被开发者用来完成两列布局、三列布局等的效果,若想要达成类似的布局,我们就需要清除浮动带来的影响,主要有以下几种方式。
清除浮动
方式一 常规方式
正常文字是环绕浮动块的,如果我们想要文本在元素下面,可以给p元素增加一个名为clear的类
.clear{clear:both
}
复制代码
如果我们想实现一个文本不环绕的左右布局呢,如果文本内容较多,支撑的高度能够覆盖左边块元素,可以不需要清除浮动就可以实现。但如果右边文本元素支撑的高度不足以覆盖左边块元素,就会出现像下面这样
这个时候给p元素清除浮动不行的,我们要给它们共同的父元素container清除浮动
.container::after{content:"";display:table;clear:both
}
复制代码
方式二 BFC
BFC(块格式上下文),什么是BFC可以点击链接去详细回顾下,这里我们要知道的就是浮动不会影响其它BFC中元素的布局,本例子中左边块状元素是个BFC,我们给container父元素也创建个BFC,那浮动就不会对container内部文本有影响。
.container{overflow:auto
}
复制代码
一个新属性
创建BFC有很多方式,比如display:float,overflow:auto,position:absolute等,但这些方式多多少少会有一定负面影响,比如overflow:auto
会产生滚动条,最新css出了一个新属性display:flow-root
,该属性能够创建一个纯粹的BFC环境。
.container{display:flow-root
}
复制代码
添加上述代码实现的效果和overlfow:auto
一致
position
relative
设置为position:relative
的元素,未脱离文档流,占据空间,相对于自己原本位置进行偏移,不影响邻近元素。这个比较简单,看张图就会明白。
absolute
设置为position:relative
的元素,脱离文档流,不占据空间,可以设置外边距,且不会与其它边距合并(由于此时创建了BFC)
fixed
设置为position:fixed
的元素,脱离文档流,类似于绝对定位,但它始终相对viewport视口,一般用来固定某个元素在视窗中。
sticky
position:sticky
一个新特性,被称为粘性定位,怎么理解粘性定位的概念呢,可以简单理解为元素在跨越特定阈值前为相对定位,之后为固定定位,比如如下代码
#one { position: sticky; top: 10px; }
复制代码
理解就是,在 viewport 视口滚动,元素top距离小于10px之前,元素为相对定位。之后,元素将固定在与顶部距离10px的位置,直到viewport视口回滚到阈值以下。 这个特性特别适合用来完成如下交互的布局,查看demo地址
Flex
flex是display属性新增的一个值,display:flex
能使一个容器变成伸缩容器,详细文档可以点击这个flex使用指导,这里我主要讲一个我们平常开发经常使用的一个写法,也是被推荐的写法,因为浏览器会根据这个去计算布局,如果是一个个的,浏览器解析的时候需要一步步的来回计算,这很浪费性能。比如这样的代码
flex: 1 1 auto
复制代码
flex是flex-grow``flex-shrink
flex-basis
组合的缩写,这3个都是伸缩容器内元素的属性,flex-grow
指明元素在容器空间足够大的时候,是否放大,默认值是1,放大;flex-shink
刚好和flex-grow
相反,指明元素在容器空间不足时,是否缩小,默认值是1;flex-shrink
定义初始伸缩元素的大小,伸缩容器根据此值去调整伸缩元素实际渲染大小。 举个例子:
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
.container {width: 500px;border: 5px solid rgb(111,41,97);border-radius: .5em;padding: 10px;display: flex;
}.item {flex: 1 1 0;width: 100px;height: 100px;padding: 10px;background-color: rgba(111,41,97,.3);border: 2px solid rgba(111,41,97,.5);
}
复制代码
item元素flex:1 1 0
指明元素均分伸缩容器
如果我们把item元素flex调整为flex:0 1 0
,指明item元素不放大,表现如下
如果想某个item元素宽度是其它的两倍,可如下调整
.container :first-child {flex: 2 1 0;
}
复制代码
但实际发现1的宽度并不是2和3的两倍宽,为什么呢?因为flex-grow:2
并不能简单的理解为该元素就是其它元素的2倍,而应该理解为1最大可以是其它元素的2倍宽,尽量往2倍宽的距离去靠。关于这方面的知识可以点击这篇文章的介绍。
Grid
grid布局,又称之为网格布局,如果说flex布局是一维布局的话,grid就可以理解为是个二维布局,定义display:grid
的容器被从横线和纵向切割,里面容纳一个个网络元素。
<div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>.container {width: 500px;border: 5px solid rgb(111,41,97);border-radius: .5em;padding: 10px;display: grid;grid-template-columns: 40px 50px auto 50px 40px;grid-template-rows:25% 100px auto;grid-gap: 20px;
}.container > div {padding: 10px;background-color: rgba(111,41,97,.3);border: 2px solid rgba(111,41,97,.5);
}
复制代码
解析下上述例子,纵向轨道被分为5个轨道,分别为40px、50px、auto、50px、40px,第三个轨道(网络线line3-line4)自动分配剩余空间,横向轨道同理。
其中里面的一个个网络可以被移动,比如如下:
.container > div:nth-child(3n+1) {grid-row-end: span 2;background-color: rgba(193,225,237,.3);border: 2px solid rgba(193,225,237,.5);
}
复制代码
其中grid-row-end:span 2
表示第1、4、7网络分别在横向轨道到被移动到横向轨道线third-line的位置,渲染的效果如下:
通过chrome开发者工具我们可以清晰的看到布局的处理
对于grid布局我就介绍到此,因为这块的内容实在是太多了,我并不想写成一个教程类的文章,要想掌握只能熟练使用,多练习。推荐一个好的学习地址。
到这里为止,对于css layout这条线的知识我就做了个整理,在不断整理的过程中,你才能把自己的知识串联起来,构建自己的知识网络,然后基于其中的一些知识网络节点,不熟悉或者了解不深的再去加强学习下,通过这样的流程,才能加强自己对知识的理解度,在实际需求使用的时候才能对症下药,不断提升自己的技术水平。
最后上传一下自己整理的知识图谱,感谢您花时间阅读我的文章,如果我的文章或者我的思路能够稍微帮助到你一点点,我就很开心?了~
参考链接:
grid布局向导
flex布局向导
css布局复盘介绍
MDN开发文档
对felx-grow的探究
回炉再造Css Layout相关推荐
- 回炉再造,灵活的 YMenuView 2.0 诞生
作者 | 炎之铠 地址 | http://www.jianshu.com/p/9b05b22c474f 声明 | 本文是 炎之铠 原创,已获授权发布,未经原作者允许请勿转载 前言 之前把我项目用到的类 ...
- 回炉再造,灵活的YMenuView2.0诞生
出处: 炎之铠邮箱:yanzhikai_yjk@qq.com 博客地址:http://blog.csdn.net/totond 本文原创,转载请注明本出处! 本项目GitHub地址:https://g ...
- Bootstrap CSS Layout (1) - Breakpoint
笔者是在做项目的过程中接触到bootstrap,关于css 的框架有很多,之前接触过的还有element ui 和vuetify. Bootstrap 好处是有自带的icon库,包含很多icon,还有 ...
- C++之回炉再造笔记--问题记录1
目录 1--vs2017包含目录后,引入头文件失败 2--调试TensorRT程序,报"重写虚函数的限制性异常规范比基类虚成员函数少"的错误 3--编译Tensorrt测试程序时, ...
- 回炉再造-多线程的创建
三种方式创建: 1. 通过继承Thread类来创建并启动多线程的方式 2. 通过实现Runnable接口来创建并启动线程的方式 3. 通过实现Callable接口来创建并启动线程的方式 4. 总结Ja ...
- 回炉再造-多线程生命周期
五种状态:新建(New).就绪(Runnable).运行(Running).阻塞(Blocked)和死亡(Dead)5种状态. 1. 新建状态,当程序使用new关键字创建了一个线程之后,该线程就处于新 ...
- 回炉再造-多线程和进程的对比
进程和线程区别总结: 操作系统可以同时执行多个任务,每个任务就是进程:进程可以同时执行多个任务,每个任务就是线程.简而言之,一个程序运行后至少有一个进程,一个进程里可以包含多个线程,但至少要包含一个线 ...
- 《J2SE 回炉再造18》-------溺水狗
第十二章 GUI编程 1. 提纲 2. AWT包 3. Component和Container 4. Frame类 代码1: import java.awt.*;public class TestFr ...
- 《J2SE 回炉再造17》-------溺水狗
第十一章 网络编程 1. 提纲 值得注意的是网络编程不等同于网站编程 2. 网络基础概念 3. 网络通信协议及接口 4. 数据分层的思想 5. 数据封装和数据拆封 6. IP协议 IPV4协议中用4个 ...
最新文章
- 如何将oracle数据库中的表结构导入到sqlserver中,Oracle转换成SqlServer数据库的步骤...
- 《从零开始学Swift》学习笔记(Day 6)——哎呀常量和变量都该什么时候用啊?...
- Python 安全编程学习总结
- pythonnamedtuple定义类型_详解Python中namedtuple的使用
- Apple Mac OS X每日一技巧026:Spotlight打开文件所在的文件夹
- Ruby on Rails:控制器纵览
- mysql数据库设计学习---数据库设计规范化的五个要求
- 小米10S继承“祖传”三重快充:50W有线+30W无线+10W反充
- Adobe 修复Commerce 和 Magento 平台中的又一个严重RCE
- centos 利用yum更新git
- Entity Framework 4.1 CodeFirst实例
- van-cell 取消点击_支付宝平安好医保怎么样?怎么报销?靠谱吗?怎么取消?_保险测评...
- 阿里云云计算助理工程师认证(ACA)50个资源合集和备考题库
- java并发-独占锁与共享锁
- 百度地图和openlayers融合封装(想法)
- java中如何连接SqlServer2000?
- 国科大 - 模式识别与机器学习(黄庆明等)- 期末复习 - 试卷
- Spring的事务传播机制详解
- 图片中加入超链接html代码,html网页超链接代码 怎样用HTML代码在图片插入超链接...
- 1.java exception handing