HTML与CSS布局技巧总结,Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)...
一、单列布局
1.水平居中
水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)
①使用inline-block 和 text-align实现
.parent{text-align: center;}
.child{display: inline-block;}
通常处理不必要占位空格的写法:
.parent{text-align: center;font-size:0;}
.child{display: inline-block;font-size:14px;vertical-align: middle;}
优点:兼容性好;
不足:需要同时设置子元素和父元素;
②使用margin:0 auto来实现
.child{width:200px;margin:0 auto;}
优点:兼容性好
缺点: 需要指定宽度
③使用table实现
.child{display:table;margin:0 auto;}
优点:只需要对自身进行设置
不足:IE6,7需要调整结构
④使用绝对定位实现
.parent{position:relative;}
.child{position:absolute;left:50%;transform:translate(-50%);}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
不足:兼容性差,IE9及以上可用
⑤使用flex布局实现
/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}
缺点:兼容性差,如果进行大面积的布局可能会影响效率
2.垂直居中
①vertical-align
我们都知道,每个人都有不同的嗜好,有的人喜欢吃甜食,有的人喜欢吃辣的东西,有的人不喜欢吃芹菜,有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样,他们有的只对牛奶感兴趣,有的只喜欢吃坚果和果冻,而讨厌牛奶。而vertical-align呢,是个比较挑食的家伙,它只喜欢吃果冻,从小吃果冻长大,没有了果冻,它就会闹脾气,对你不理不睬。我称之为“果冻依赖型元素”,又称之为“inline-block依赖型元素”,也就是说,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识
在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
②使用绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}
③实用flex实现
.parent{display:flex;align-items:center;}
3.水平垂直全部居中
①利用vertical-align,text-align,inline-block实现
.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
②利用绝对定位实现
.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
③利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}
二、多列布局
1.左列定宽,右列自适应
该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局
①使用float+margin实现
.left{float:left;width:100px;}
.right{margin-left:100px;}
注:IE6会有3px的bug
②使用float+margin(fix)实现
.left{width:100px;float:left;}
.right-fix{width:100%;margin-left:-100px;float:right;}
.right{margin-left:100px;}
③使用float+overflow实现
.left{width:100px;float:left;}
.right{overflow:hidden;}
overflow:hidden,触发bfc模式,浮动无法影响,隔离其他元素,IE6不支持,左侧left设置margin-left当作left与right之间的边距,右侧利用overflow:hidden 进行形成bfc模式
如果我们需要将两列设置为等高,可以用下述方法将“背景”设置为等高,其实并不是内容的等高
.left{width:100px;float:left;}
.right{overflow:hidden;}
.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}
④使用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}
⑤使用flex实现
.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}
利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。而align-items 默认值为stretch,故二者高度相等
2.右列定宽,左列自适应
①使用float+margin实现
.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}
②使用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left{display:table-cell;}
.right{width:100px;display:table-cell;}
③使用flex实现
.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}
3.两列定宽,一列自适应
图片描述
基本html结构为父容器为parent,自容器为left,center,right.其中,left,center定宽,right自适应
①使用float+margin实现
.left,.center{float:left:width:200px;}
.right{margin-left:400px;}
②使用float+overflow实现
.left,.center{float:left:width:200px;}
.right{overflow:hidden;}
③使用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left,.center,.right{display:table-cell;}
.left,.center{width:200px;}
④使用flex实现
.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}
4.两侧定宽,中栏自适应
①使用float+margin实现
.left{width:100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}
②使用table实现
.parent{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}
.right{width:100px;}
③使用flex实现
.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}
5.一列不定宽,一列自适应
①使用float+overflow实现
.left{float:left;}
.right{overflow:hidden;}
②使用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left{width:0.1%;}
.left,.right{display:table-cell;}
③使用flex实现
.parent{display:flex;}
.right{flex:1;}
6.多列等分布局
多列等分布局常出现在内容中,多数为功能的,同阶级内容的并排显示等。
html结构如下所示
①使用float实现
.parent{margin-left:-20px}/*假设列之间的间距为20px*/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}
②使用table实现
.parent-fix{margin-left:-20px;}
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}
③使用flex实现
.parent{display:flex;}
.column{flex:1;}
.column+.column{margin-left:20px;}
6.九宫格布局
①使用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.row{display:table-row;}
.item{display:table-cell;width:33.3%;height:200px;}
②使用flex实现
.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width:100px;background:red;}
7.全屏布局
①使用绝对定位实现
html,body,parent{height:100%;overflow:hidden;}
.top{position:absolute:top:0;left:0;right:0;height:100px;}
.left{position:absolute;top:100px;left:0;bottom:50px;width:200px;}
.right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;}
.bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}
②使用flex实现
.parent{display:flex;flex-direction:column;}
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;display:flex;}
.left{width:200px;}
.right{flex:1;overflow:auto;}
8.响应式布局
meta标签的使用
设置布局宽度等于设备宽度,布局viewport等于度量viewport
媒体查询
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体,而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性,扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
HTML与CSS布局技巧总结,Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)...相关推荐
- 【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化 思 ...
- 计算机网页div怎么划分,《网页布局与实现(DIV+CSS)》
编辑推荐:<高职高专计算机教学改革新体系规划教材>特色: ·反映产业技术升级,符合职业教育规律和高端技能型人才成长规律,根据计算机类专业建设和教育教学改革而设计. ·对接职业标准和岗位要求 ...
- css左右布局代码_如何使用CSS位置来布局网站(带有示例代码)
css左右布局代码 Using CSS position to layout elements on your website can be hard to figure out. What's th ...
- CSS开发过程中的20个快速提升技巧
摘要:本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你 ...
- php div 实现上中下布局,上中下结构DIV CSS布局实例
实例布局之上中下结构DIV CSS布局 上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部).中(内容区).下(底部版权)组成.而这其实是由最简单上下结构CSS布局演变而成,只 ...
- 用html制作简单日历,CCS小技巧,如何使用CSS Grid制作简单的日历,简单有趣
原标题:CCS小技巧,如何使用CSS Grid制作简单的日历,简单有趣 日历是人类文明的重要工具之一.然后可以记住许多重要事件,并从事件的确切日期追溯到真相. 在本文中,我们将学习如何利用CSS Gr ...
- css dl图片布局,经典图文列表以及CSS布局切换
Android:在任务列表隐藏最近打开的app 对于某一个应用,如果不想在最近打开的app列表中留下任何纪录,即按下Home键回到主页,再按任务键的时候,任务列表看不到这个app,在AndroidMa ...
- css高度已知,左右定宽,中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head><meta ...
- [css] 举例说明你知道的css技巧有哪些?
[css] 举例说明你知道的css技巧有哪些? /* 等比例容器 */ .ratio { position: relative; display: block; } .ratio:before { c ...
- [css] 当页面采用rem布局时,如何解决用户设置字体大小造成的页面布局错位?
[css] 当页面采用rem布局时,如何解决用户设置字体大小造成的页面布局错位? 禁止用户缩放页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主 ...
最新文章
- Apache配置代理服务器的方法(1)
- MSSQL事务开发指南
- 看完你就知道什么是 HTTPS 了
- Form 组件动态绑定数据
- Android怎么导入Moudle
- 创建和应用Java包文件的两种方式(转)
- 二、bootstrap4基础(flex布局)
- [HNOI2011]数学作业
- werkzeug Request
- Unity AssetBundle 爬坑手记
- Mysql 基于 Amoeba 的 读写分离
- 解决一次模拟post请求的时候,出现中文???的错误
- Java+Swing+mysql实现学生选课管理系统
- x509证书cer格式转pem格式
- Spring Bean的生命周期自我记忆
- hmm进行英文词性标注
- 信息课为什么不叫计算机课,让信息技术课“美”起来
- 排球分组循环交叉编排_巍山县举办气排球赛,看谁技高一筹!
- Android使用java和kotlin混合开发时 发现黄油刀BindView失效
- [旋转卡壳]最大土地面积 AcWing2617
热门文章
- maven常用的中央仓库
- 20161013 晨报
- visual studio 使用快捷方法1
- 【转载】随机游走及马尔科夫链(本体映射相关)
- php漏洞黑掉数据库,WDCPnbsp;add_user.php任意数据库添加任意用户漏洞分析
- cba篮球暂停次数和时间_为什么足球赛的观赏性比篮球更强?这三点是主要原因...
- python 修改文件属性 macos_Python中用MacFSEvents模块监视MacOS文件系统改变一例
- oracle禁用ctss,CTSS服务介绍及模式调整
- Java从FTP网盘读取文件
- Python基础(使用print()函数输出格式化字符串)