html左中右自适应布局,CSS左中右自适应布局六种方案与原理

css虽简单,但细节多,技巧性高,易学难精。

如何实现左右固定300px , 中间宽度自适应?

15f719ea95b2982d721c9bfa126cc148.png

有如下结构

公有样式, 设置高,设置左右宽度固定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元素类似 ,实际上是行内块级元素, 而不是块级元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397792.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cacti 忘记密码的方法

忘记密码的方法如果是admin 的密码丢失,id 1;其他用户以此类推。进入mysqlmysql> show databases; mysql> use cacti;mysql> show tables; mysql> update user_auth set passwordmd5("newpassword") where id1;新的cacti密码就是…

cr3格式是什么意思_佳能rp的cr3如何打开?修图为什么要用raw格式?转码又是什么?...

佳能rp的cr3如何打开?修图为什么要用raw格式?转码又是什么?这是我个人整理的广大网友的一些答案,不想浪费大家太多时间就在这里分享给大家希望大家可以快速理解。(搜集的广大网友的回答,方便大家理解,希望他…

SGU traffic light

占位置。。转载于:https://www.cnblogs.com/usedrosee/p/4669358.html

计算机基础应用的培养活动记录,计算机应用基础综合实训

摘要:《计算机应用基础综合实训(Windows7Office 2010 第3版)》是中等职业教育课程改革国家规划新教材,根据教育部2009年颁布的"中等职业学校计算机应用基础教学大纲"中职业模块的要求编写,在第2版的基础上修订而成,经全国中等职业教育教材审定委员会审定通…

cronschedulebuilder 到时还没运行完_为什么我的软件编译时没问题,运行时却出错?...

首先有件事要和大家说一下:我的公众号现在可以留言了!出于种种不可抗力的原因(你们懂的),2018 年 3 月 12 号之后注册的公众号将不带有留言功能,并且前三个月内注册但并未使用的公众号的留言功能也会被一并…

Canvas createImageData

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。 对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值: R - 红色 (0-255)G - 绿色 (0-255)B - 蓝色 (0-255)A - alpha 通道 (0-25…

青岛计算机类职业中学,青岛最好的职业学校有哪些?

青岛海洋职业学校是一所由青岛市教育局批准,国家承认学历的重点中等职业学校。学校占地200余亩,建筑面积5万平方米,在籍学生3975人。学校拥有雄厚的师资力量,以专职教师为主,是一支政治素质好,师德水平高、…

测试1

2018/06/03 测试我的随笔转载于:https://www.cnblogs.com/xixirui/p/9129252.html

使用Javascript正则表达式来格式化XML内容

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><meta http-equivcontent-type content"text/html; charsetUTF-8"><title>Xml格式化…

mysql vfp_vfp+mysql问题|交流区 - 梅子Visual FoxPro 编程 - Powered by phpwind

感谢楼上,请现场指导,拜谢c_pzwhfiellist""c_pzwhbglist""For i1 To Fcount()-1c_pzwhfiellistc_pzwhfiellistField(i)","c_pzwhbglistc_pzwhbglistField(i)Space(1)"pzwhk."Field(i)","Chr(10)Endforc_pzwhfiellistc_pzwhf…

Nginx 笔记与总结(3)配置虚拟主机

Nginx 重启的另外一种方式&#xff0c;相当于 kill -HUP cat /usr/local/nginx/logs/nginx.pid&#xff1a; /usr/local/nginx/sbin/nginx -s reload停止 Nginx 的另外一种方式&#xff1a; /usr/local/nginx/sbin/nginx -s stop重读日志文件的另一种方式&#xff0c;相当于 …

计算机如何查找目标,如何使用命令行查找计算机地理位置? | MOS86

有多种方法可以从IP地址中了解计算机的位置&#xff0c;但如果您决定使用命令行查找信息&#xff0c;那么您如何处理&#xff1f;今天今天的问题Screenshot由Paul Fenwick(Flickr)提供。问题SuperUser阅读器AlikElzin-kilaka想知道如何找到一台电脑首先&#xff0c;AlikElzin-k…

Nmap命令的常用实例

一、Nmap简介 nmap是一个网络连接端扫描软件&#xff0c;用来扫描网上电脑开放的网络连接端。确定哪些服务运行在哪些连接端&#xff0c;并且推断计算机运行哪个操作系统&#xff08;这是亦称 fingerprinting&#xff09;。它是网络管理员必用的软件之一&#xff0c;以及用以评…

mysql sqlexception_c-很奇怪-mysql的sql :: SQLException未被其类型捕...

我正在使用带有此(稍微简化)代码的mysql c连接器.try{statement->setString(1, word);statement->executeUpdate();}catch( sql::SQLException& e ){// I dont get herereturn sqlerrno_to_error_code( e.getErrorCode() );}catch( std::exception& e ){// I do …

Linux Kernel系列 - 黄牛X内核代码凝视

Hanks.Wang - 专注于操作系统与移动安全研究。Linux-Kernel/SELinux/SEAndroid/TrustZone/Encription/MDM Mail - byhankswanggmail.com 牛X的内核代码凝视 大牛的代码质量高稳定性好&#xff0c;并且逻辑清晰易读性比較强&#xff0c;今天看到Linux Kernel红黑树的代码时&a…

电子商务计算机网络安全技术教案,网络安全技术教案.pdf

名师精编 优秀教案《网络安全技术》教案2011-2012 第 2 学期适用班级&#xff1a; 2010 级计算机网络技术专业编写&#xff1a;徐英武名师精编 优秀教案第 1~2 课时周次 &#xff11; 日期 2012 年 02 月 14 日 授课班级 2010 级计算机网络技术课题 网络安全概述 课 型 理论课教…

技术文章汇总

点击以下链接&#xff0c;可以查看相关技术文章&#xff1a;包括APP软件开发、手机软件开发、嵌入式开发、Java和C/C编程&#xff0c;同时涉及原型设计、效果图设计、切图、网络、多媒体、加密、字符编码、通信原理、测试和项目管理等各方面的知识。APP开发实战手机开发实战技术…

咋样查mysql的url_eclipse用jdbc连接mysql数据库时,url是填什么?怎样找出地址?

展开全部 jdbc连接mysql数据62616964757a686964616fe78988e69d8331333337623535库的url为: jdbc:mysql://主机名或IP抵制:端口号/数据库名?useUnicode=true&characterEncoding=UTF-8 jdbc连接其他数据库的连接字符串写法为:1、Oracle8/8i/9i数据库(thin模式) Class.for…

HP服务器ile进系统,HP GEN10服务器UEFI安装Windows Sverver 2012 R2教程

1.操作系统&#xff1a;Windows Server 2012 R2 VL with Update (x64) – DVD (Chinese-Simplified)&#xff0c;MSDN下载地址&#xff1a;ed2k://|file|cn_windows_server_2012_r2_vl_with_update_x64_dvd_6052729.iso|5545527296|BD499EBCABF406AB82293DD8A5803493|/2.镜像写…

[程序设计语言] 堆和栈的全面总结

操作系统堆栈&#xff1a; 分配由编译器自己主动和自己主动释放。对应于堆栈的函数。参数存储功能值、函数调用结束后完成值和局部变量的函数体内。段内存空间。其操作和组织方式与数据结构中的栈十分相似。栈是为了运行线程留出的内存空间。当调用函数时创建栈。当函数运行完毕…