CSS页面布局笔记

CoderDock 发布于2019-08-28 18:14 / 3395人阅读

摘要：居中布局水平居中父元素和子元素的宽度都未知优点兼容性好缺点子元素文本继承了属性，子元素要额外加优点只需要设置子元素的样式优点居中子元素不会对其他元素产生影响缺点是的属性，存在兼容性问题优点只需要设置父元素的样式缺点兼容性问

居中布局 水平居中

父元素和子元素的宽度都未知

inline-block + text-ailgn

.child{display:inline-block;}
.parent{text-align:center;}

优点：兼容性好
缺点：子元素文本继承了text-align属性，子元素要额外加text-align:left;

table + margin

.child{display:table; margin:0 auto;}

优点：只需要设置子元素的样式

absolute + transform

.parent{position:relative;}
.child{position:absolute; left:50%; transform: translateX(-50%);

优点：居中子元素不会对其他元素产生影响
缺点：transform是CSS3的属性，存在兼容性问题

flex + justify-content

.parent{display:flex; justify-content:center;}

优点：只需要设置父元素的样式
缺点：兼容性问题

flex + margin

.parent{display:flex;}
.child{margin:0 auto;}

垂直居中

父容器和子容器的高度都未知

table-cell + vertical-align

.parent{display:table-cell; vertical-align:middle;}

优点：兼容性好

absolute + transform

.parent{position:relative;}
.child{position:absolute; top:50%; transform:translateY(-50%);}

优点：子元素不会干扰其他元素
缺点：兼容性

flex + align-item

.parent{display:flex; align-items:center;}

优点：只需要设置父元素
缺点：兼容性问题

水平垂直居中

父容器和子容器的高度都未知

inline-block + text-align + table-cell + vertical-align

.parent{text-align:center; display:table-cell; vertical-align:middle;}
.child{display: inline-block;}

absolute + transform

.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

flex + justify-content + align-item

.parent{display:flex; justify-content:center; align-items:center;}

多列布局 定宽-自适应 float+margin

.left{float:left; width:100px;}
.right{margin-left:120px;}

float+margin+fix

外层在包裹一个容器

.left{float:left; width:100px; position: relative;}
.right-fix{float:right; width:100%; margin-left:-100px;}
.right{margin-left:120px;}

兼容性很好，但是多了层right-fix的结构

float+overflow

.left{float:left; width:100px; margin-right: 20px;}
.right{overflow:hidden;

table

.parent{display:table; width:100%; table-layout:fixed;}
.left,.right{display:table-cell;}
.left{width:100px; padding-right:20px;}

flex

.parent{display:flex;}
.left{width:100px; margin-right:20px;}
.right{flex:1;}

不定宽-自适应 float + overflow

.left{float:left; margin-right:20px;}
.right{overflow:hidden;}

table

.parent{display:table; width:100%;}
.left,.right{display:table-cell;}
.left{width:0.1%; padding-right:20px;}

flex

.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111112.html

《CSS世界》笔记一：流/元素/尺寸

摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。下一篇：《CSS世界》笔记二：盒模型四大家族写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》...

hizengzeng 2019-08-30 15:54 评论0 收藏0
CSS学习笔记(八) 页面布局之三栏-固定宽度布局

摘要：示例添加这一行规则结果就会变成这样我们把这种现象称为浮动滑移，可以使用三种方法来预防发生从设定的元素宽度中减去添加的水平外边距边框和内边距的宽度和。当我们取消勾选该属性时，栏就会由于栏的推挤产生了浮动滑移，移位到栏下方。 1.布局前的认知 1.1 三种基本方案多栏布局有三种基本的实现方案：固定宽度、流动、弹性。固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 ...

eechen 2019-08-28 18:03 评论0 收藏0
【零基础入门】 css学习笔记（4）布局与定位介绍

摘要：内联元素在水平方向上相互挨着，总体上会从左上方流向右下方。，增加元素，设置属性，两个内联元素并排摆放，但只有左右方向有。还能与其它内联元素并排。写在前面：作为一个刚开始写技术博客的新手，看到有人收藏了文章，写作动力又猛增了。这应该就是写技术博客的好处之一：能给自己增加成就感和驱动力。最近关于css布局和定位相关内容整理地有点慢，因为同时在做freecodecamp上的题，所以节奏有点...

nevermind 2019-08-30 15:53 评论0 收藏0
前端面试笔记 - 性能

摘要：页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...

JouyPub 2019-08-23 14:50 评论0 收藏0
CSS学习笔记(十二) CSS命名规范

摘要：引言最近想将这几个月做过的东西组件化，然后首先想到的是编码规范化本文只涉及命名规范，搬来了造好的轮子。举例对齐样式使用对齐目标的英文名称。举例注意事项一律小写尽量用英文不加中杠和下划线尽量不缩写，除非一看就明白的单词。引言：最近想将这几个月做过的东西组件化，然后首先想到的是编码规范化！本文只涉及 CSS 命名规范，搬来了Alloyteam 造好的轮子。可能并不完全适用，在以后...

stormjun 2019-08-28 18:04 评论0 收藏0