html左中右自适应布局,CSS左中右自适应布局六种方案与原理
css虽简单,但细节多,技巧性高,易学难精。
如何实现左右固定300px , 中间宽度自适应?
有如下结构
左
右
中
公有样式, 设置高,设置左右宽度固定300px,左右为红色,中间为黄色。
.item {
height: 400px;
}
.left,
.right {
width: 300px;
background: #f00;
}
.center {
background: yellow;
}
一. 双浮动法
.left {
float: left;
}
.right {
float: right;
}
原理: float不会完全脱离文档流,会占用原空间
MDN官方解释:该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。
问: 为什么 center 要放在leftr和right之后?
答:
浏览器加载页面顺序是从上到下,
left已经左浮动,right右浮动。渲染center时,浏览器忽略掉已经脱离文档流的left和right ,center元素会从头占满整行,但发现left还占用着300px ,右边right又占用了300px,所以center的宽度在left和right之间,达到宽度自适应
二. 绝对定位法
左
中
右
原理: 左右绝对定位,脱离文档流 。 中间不设置宽度,只设置左右边距,自动撑满块级元素一行的剩余空间
三. 弹性盒子
.wrapper {
display: flex;
}
.center {
flex: 1;
}
父容器设置 display: flex,左右设置300px, center把flex设置为1 ,效果是否实现了呢?
浏览器运行,看上去是对的 ,但实际上屏幕缩小后左右不是固定的300px,宽度会被压缩。
还需要再添加如下样式:
.left,.right {
flex-shrink: 0; /*等同flex:0 0 auto */
}
原理:flex:1 实际上是三个属性的简写 , flex:1; 等同于 flex:1 1 auto;。
简单的说,分别代表:剩余空间 容器缩小时压缩比例 最小宽度。具体细节参考:MDN -- 弹性盒子
由此得知,center设置flex:1; ,即为flex:1 1 auto; (自动占满容器剩余宽度 默认压缩比例 默认最小宽度)
left和right设置 flex-shrink: 0;,flex-shrink就是flex简写中的第二个属性, 等同 flex:0 0 auto; (没有设置自动占满容器剩余宽度 0不压缩 最小宽度默认auto)
问: 为什么left和right设置flex-shrink: 0;等同flex:0 0 auto,其中最小宽度为auto,但是宽度依旧固定为300px?
答: 最小宽度为auto是默认值 , 优先级小于具体元素设置的width。如果设置flex:0 0 400px,那么左右最小宽度为400px,优先级高于元素设置的width
四. 网格布局 grid
最简单的网格布局
.wrapper {
display: grid;
grid-template-columns: 300px 1fr 300px;
}
快速理解: grid-template-columns为父容器属性,并非表示上右下左,而是表示三个子元素的宽度为 (300px 自动占满1份剩余空间 300px),如果写 grid-template-columns: 300px 1fr 2fr 100px;即表示四个子元素宽度分别为300px 1/3剩余空间 2/3剩余空间 100px
五. 表格布局
.wrapper {
width: 100%;
display: table;
}
.wrapper>.item:not(.center) {
display: table-cell;
}
把左右元素设置为单元格即可,不过该方法在屏幕缩小时,左右固定300px会被压缩
问: 为什么要设置width为100%?
答: display:table 与table元素类似 ,实际上是行内块级元素, 而不是块级元素。
html左中右自适应布局,CSS左中右自适应布局六种方案与原理相关推荐
- css box 等高布局,css实现等高布局有哪些方式
什么是等高布局? 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说分为两类: 1.伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高. 2.真等高 子元素高度相等. 伪等高实现 ...
- html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
- CSS之display:block布局
转载自http://www.cnblogs.com/Ry-yuan/p/6848197.html) CSS之使用display:inline-block来布局 css之display:inline-b ...
- 在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...
- html div布局位置横,div位置布局 CSS实现DIV居中对齐 div居右对齐 div居左对齐
使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右 居中 靠左对齐介绍篇) 实现DIV对齐用到关键属性有两个,一个为float一个为margin. ...
- html设置div靠左,float:left css浮动靠左 布局靠左
首先float是组织网页浮动(对象靠左left.靠右right)样式属性单词.在构造中咱们要让对象靠左显现只要求对对象设置float:left款式即可. 一.float left语法 1.float: ...
- css左固定右自适应常用方法
下面是几种方法的公用部分(右自适应也是一样的,换一下方向) html: <div class="demo"> <div class="sidebar&q ...
- 常见的网站布局方式---左固定右自适应、左右固定中自适应等
偶尔看到的一篇博文,觉得挺有用的,刚好前两天做项目的时候自己也遇到这个问题,觉得解决方案很好,所以搞过来,大家一起学习一起进步! 左边定宽.右边自适应(类似管理台) 方案一 左边设置左浮动,右边宽度设 ...
- html添加靠左的图片,div 居左靠左布局 CSS居左靠左布局
DIV居左靠右显示篇 DIV靠右居左需要CSS样式单词为CSS浮动float,设置float:left即可实现DIV盒子居左显示. 小例: 为了观察DIV是否靠左显示,我们设置其css宽度为300px ...
最新文章
- playbook核心元素之 模板template 介绍(7)
- jquery和zepto冲突解决以及体会
- 你们的蛙儿子成马云儿子了 阿里巴巴获得《旅行青蛙》独家代理权
- 音乐播放类应用后台播放耗电评测报告
- 图论 —— 生成树 —— 最小树形图
- P1001 蓝桥杯算法提高-用字符串处理大数乘法
- Junit介绍与实现
- [学习笔记]java基础Java8SE开发环境搭建、第一个Java Hello World、Java程序的编译与执行...
- STM32——RTC实现毫秒级计时
- 浏览器cookie怎么清除,彻底清除上网痕迹只需这几步
- qtcreator编译qt程序是如何调用moc的,如何通过pro文件向moc传入参数
- android销毁指定activity,Android - 销毁指定Activity
- createfile调用失败_Java NIO Files.createFile()以NoSuchFileException失败
- java 迷你dvd_java基础迷你DVD系统
- PowerJob使用
- 科普:controller,service,serviceImpl,mapper,xml等几个文件的作用
- N1 armbian打造家庭NAS、下载机、aliyun-webdav
- Codeforces Round #655 (Div. 2) D
- 欧科传动变频器说明书_欧科变频器说明书文档.doc
- 打破思维定势,来一次面对面沟通