flex 平铺布局_flex布局及各种布局的总结
Flexbox display: flex;
如果也想设置内联元素为弹性盒子,可以使用display:inline-flex;
实现三种其他布局难以达到的效果:
在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度,而不管有多少宽度/高度可用。
使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同。
flex盒子属性(只对flex container弹性盒子起作用)
属性
值
备注
flex-direction
row(默认)/column
用来指定主轴方向
flex-wrap
wrap/wrap-reverse
自动换行,防止内容溢出
justify-content
flex-start(默认)/flex-end/center/space-around(均匀分布)/space-between(不会在两端留下任何空间)
控制子项在主轴上的位置
align-items
stretch(默认)/center/flex-start/flex-end
控制子项在交叉轴上的位置,align-self可以覆盖align-itemsflex-flow:flex-direction和flex-wrap的缩写。
弹性盒子的子元素上可以应用flex属性,实现每个元素的动态尺寸,并可以自由处理剩余空间。
弹性盒子的子元素上可以应用order属性进行子项的任意排序。
兼容性(只支持IE11)
布局方案汇总
以前只有float和position被广泛用于布局中,未来我们可以期待flexbox和grid。
float浮动布局
百分比宽度布局
单边固定流体布局
inline-block布局
将元素设为display: inline-block进行布局(不建议整体布局时使用)。
布局注意点:
vertical-align属性会影响到inline-block元素,你可能会把它的值设置为top 。
你需要设置每一列的宽度。
如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙。
position定位布局
冻结布局
用一个全局性的固定大小的div包裹整个页面,给这个div设置一个宽度width,并使用margin:0 auto;将整个页面在浏览器中居中。
圣杯布局
为三列嵌套一个container box,对这个box设置padding-left和padding-right,留出左右列的空间。
中间盒子设置width:100%;,三列盒子都设置float: left;。
使用margin-left: -100%;和相对定位的right值把左边盒子放入正确的位置。
使用marigin-right同样放置好右边的盒子。
进行整体margin的调整,留出三列的边距。
圣杯布局的关键在于两边的列元素设置负值 margin 可以抵消掉.container容器元素设置的padding,推荐对这一块儿进行拓展阅读
双飞翼布局
在圣杯布局的基础上,在中间列的内容外再包裹一层div,直接用css调整包裹层div的位置,就可以更加便捷的操控中间列的内容不被两边遮挡,还能方便设置与两边的间距。
flexbox布局
Grid布局
跟布局相关的技术总结
媒体查询
注:媒体查询可以直接嵌入中。
Meta Viewport and @viewport
有些CSS属性需要触发叫做hasLayout的东西,触发hasLayout是用来支持旧浏览器的(IE6/IE7等)。
css reset
Normalize.css
常规reset.css
布局类型
布局类型无非就是一列/两列/三列/等分列/混合布局等。
三栏布局:圣杯布局和双飞翼布局 及 三种三栏网页宽度自适应布局方法
margin-left:-100%怎么理解?可是手动设置一下margin-left:-200px-300px-500px,结合父元素留出的padding,多看看效果,理解这个问题主要在于两点:一是按CSS规定,浮动元素会尽量往上浮动;二是margin负值会改变元素占据的空间。可参考:为什么左边的模块margin-left:-100%会跑到左上方
扩展阅读
布局中的问题记录
width宽度设为100%后,再设置margin/padding会超出屏幕
解决方案:width值为100%指的是宽度为其父元素宽度,如果父元素本身就是body,那么再设置边距就会超出屏幕。解决方法就是使用box-sizing: borde-box;再使用padding设置间距(不要使用margin)。如果只是为了自适应,也可以试试不设置宽度,不一定非要把宽度设为100%。
当li在ul里浮动时,如果想当鼠标hover到li时改变它的高度,会发现所有的li会同时往上浮动,这是因为改变的那个li的高度将ul撑开了,其余的li又是遵循浮动的,会尽量往上浮动。解决的办法就是不要对li使用浮动,而是使用display:inline-block;。
将li设置为横排nav有两种办法:float和display: inline-block。
flex 平铺布局_flex布局及各种布局的总结相关推荐
- flex 平铺布局_Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- flex 平铺布局_Flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- flex 平铺布局_CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- html 平铺 布局,html – 具有一致边距和对齐的Flexbox平铺布局
这是一种越来越常见的布局,使用flexbox和一些聪明的容器标记可以相对容易地实现. 平铺布局的常见问题是在多行的不同尺寸的贴片之间保持一致的间距和对齐.假设我们希望将所有切片分开30px的边距,我们 ...
- html5中平铺图片,HTML布局排版2 div的和图片平铺方便管理
在HTML里,由于浏览器显示器等差异,浏览器的宽度也会有变化,为了适应不同的宽度,需要用到平铺. 例如页面前面的固定的条等,如果是纯色,可以用背景色,如果不是纯色,是渐变等,可以用条状图平铺. 常见的 ...
- 背景平铺两栏自适应(占满剩余高度)fastclick、IScroll双飞翼布局
文章目录 背景平铺 两栏自适应(占满剩余高度) 需求 实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件 双飞翼布局(两边固定宽度,中间自适应) 条件 实现 背景平 ...
- 用flex进行网易云音乐界面构建和布局解析(2)
前面我们通过<css布局简史与决胜未来的第四代css布局技术>了解了css布局发展史和未来,下面,我们通过<使用flex进行网易云音乐界面构建和布局解析>了解一下,如何在实际项 ...
- css flex布局 padding,CSS3 flex布局之快速实现BorderLayout布局
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代 ...
- 临时抱佛脚版_移动端适配布局_flex+rem+响应式
移动端的常见布局方案 文章目录 移动端的常见布局方案 一. 移动端和PC端的区别? 2. 手机屏幕的现状 2.1 视口 2.2 布局视口 layout viewport 2.2视觉视口 ...
最新文章
- matlab中如何输出,将文本信息显示到屏幕上的输出流
- python基本图形绘制_【Python】Python基本图形绘制-Go语言中文社区
- 我对对象和引用的理解
- Boost:字符串分割Split的测试程序
- Git之深入解析在没有合适的网络或者可共享仓库情况下的git bundle打包操作
- python time模块计算时长_python time模块详解
- 笔记本电脑键盘切换_真想本小新13pro搭档,笔记本电脑周边好物清单推荐
- 画时序图软件 TimeGen 3.2 TimingDesigner 9.103 AndyTiming
- PDE34 Transport equation: derivation general solution
- linux服务器打印400错误,Nginx过一段时间出现400 Bad Request 错误解决方法
- var模型可以用spss做吗_求:如何用SPSS做VAR模型?
- php计算圆的面积怎么带单位_圆的面积计算公式的教学演示工具的制作方法
- Nyoj 954 N!
- 计算机的电子邮件地址怎么看,电脑使用小技巧:如何找出网站上隐藏的电子邮件地址?...
- Mini MP3 Player模块无法正常播放
- 携程java面经 一二HR面面经
- 判断当前时间段是否在某个时间段内(当前小时是否在当日某个时间段)
- 前端体系结构知识概括
- 26、灭火系统中最不利点处洒水喷头的工作压力是多少
- 餐饮成本计算机基础知识,餐饮业有效控制成本的方法
热门文章
- Linux小宝典之理解Chroot模式
- vue-resource ajax跨域,基于Vue-resource jsonp跨域问题的解决方法_婳祎_前端开发者
- Python应用实战-Python爬取4000+股票数据,并用plotly绘制了树状热力图(treemap)
- css的fill属性,css column-fill属性怎么用
- 笔记本如何选择修复计算机,如何处理旧的笔记本电脑?这些操作必不可少!
- java string blob_java String类型转换为Blob类型
- Java中的Redis的思维导图_Redis思维导图
- 美国东北大学khoury计算机学院,2021年美国东北大学计算机研究生专业有哪些?入学要求高吗?...
- thinkphp+mysql+join+where_thinkphp5.0 多join时where无法between
- mysql查看导入大小_mysql 数据导入、导出,及库大小查看