一、垂直居中布局绝对定位布局
.parent { position: relative; } .child { width: 200px; height: 200px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }复制代码
2.margin 负间距.child{ width:200px; height: 200px; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }复制代码Transforms 变形
.child { width: 200px; height: 200px; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }复制代码flex布局.parent { display: flex; justify-content:center; align-items:center; }复制代码
.parent { display: flex; } .child { margin: auto }复制代码table布局
父元素设置teable-cell元素,利用三层结构模拟父子结构.parent { display: table; width: 200px; height: 200px; } .child { display: table-cell; text-align: center; vertical-align: middle; } .box { display: inline-block; }复制代码grid布局
.parent { display: grid; } .child { justify-self: center; align-self: center; }复制代码.parent { display: grid; } .child { margin: auto; }复制代码二、自适应布局右边宽度固定,左边自适应
float布局实现方式
实现步骤:给子元素设置相同高度,left元素向左浮动,设置固定宽度100px
right元素利用margin-left调整位置
flex实现方式:父元素设置display: flex,给left元素设置固定宽度
给right元素设置flex:1使其填充其余空间
绝对定位实现方式:
实现步骤:设置container元素高度与box-sizing属性,使padding计算入container元素中
设置top元素高度,并使用绝对定位将其放置在container头部
设置container元素内边距padding-top为top元素的高度,设置bottom元素高度为100%
普通布局实现:
实现步骤:设置container元素高度与box-sizing属性,使padding计算入container元素中
设置top元素高度,使用margin移动元素位置到container元素顶部
设置container元素内边距padding-top为top元素的高度,设置bottom元素高度为100%
三栏式布局的七种布局方式:float布局、绝对定位布局、圣杯布局、双飞翼布局、Flex布局、表格布局、网格布局
float布局
实现步骤:
1.左右两栏设置float属性使其脱离文档流左边栏设置 float:left, 右边栏设置float: right
2.给中间元素设置margin-left、和margin-right,设置margin的原因是当中间元素高度超出左右两边时,中间元素会被覆盖
3.为了不影响其他元素,给父元素清除浮动
实现步骤给 container 设置position: relative,因为绝对定位的元素的参照物为第一个postion不为static的父元素。
left 向左定位,right 向右定位。
main 使用绝对定位,通过设置left和right并把两边撑开。
实现步骤使左、中、右三栏都通过float进行浮动。
将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-200px,则右栏也会移动到和左、中栏一行中
给container一个padding,该padding应该正好等于左、右栏的宽度
给左、右两栏加上相对布局,然后再通过设置left和right值向外移动。
实现步骤使左、中、右三栏都通过float进行浮动。
将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-200px,则右栏也会移动到和左、中栏一行中
给 main 的子元素content设置margin: 0 220px 0 120px;,同时设置overflow: hidden使其成为一个BFC
为了不影响其他元素,给main清除浮动
实现步骤给 container 设置为一个 flex 容器display: flex
main 的宽度设置为width: 100%,left 和 right 分别设置为width: 200px和width: 100px
为了不让 left 和 right 收缩,给它们设置flex-shrink: 0
使用order属性给三个部分的 DOM 结构进行排序:left:order: 1,main:order: 2,right:order: 3
实现步骤给三栏都设置为表格单元 display: table-cell
left 和 right分别设置 width: 100px和width: 200px,container设置 width: 100%
这时 left 和 right 被挤到两边去了,因此要分别设置min-width确保不会被挤压。
实现步骤给 container 设置为display: grid
设置三栏的高度:grid-template-rows: 300px
设置三栏的宽度,中间自适应,两边固定:grid-template-columns: 100px auto 200px;
实现步骤:background 会填充内边距 padding,而不会填充外边距 margin 。margin具有坍塌性,可以设置负值。
float:left。使用float,元素会脱离文档流,使其浮动至最近的文档流元素。在这里的作用是,将三个div元素并排。
overflow:hidden; 设置overflow属性为hidden,这样会让父容器产生BFC(Block Fromatting Context块级格式化上下文)效果,消除float带来的影响。同时,根据需要,会截取内容以适应填充框,将超出容器的部分隐藏。
实现思路:父元素设置display:flex, 弹性盒子布局flex,默认值就是自带等高布局的特点
实现步骤:
1.父元素设置dispaly:table, table布局天然就具有等高的特性。
inline或float布局方式
实现步骤:三块高宽是确定的;
上面那块用margin: 0 auto;居中;
下面两块用inline-block或者float不换行
用margin调整位置使他们居中(使left元素margin-left为宽度的一般则可居中)
实现方式一:
实现方式二:// 与上述实现道理基本相同,不同的是left和right元素布局
实现步骤:上面的div宽100%,下面的两个div分别宽50%,然后用float或者inline使其不换行即可
multi-columns 方式
实现步骤:瀑布流容器中设置 column-count(列数) 和 column-gap(列间距)
item 中设置 break-inside:avoid,这是为了控制文本块分解成单独的列,以免项目列表的内容跨列,破坏整体的布局。
为了布局具有响应式效果,可以借助媒体查询属性,在不同屏幕大小的条件下设置瀑布流容器 container 的 column-count 来自适应改变列数
实现步骤:瀑布流容器设置dispaly:flex,并使用 flex-flow 来控制列,并且允许它换行
显式的设置 height 属性,当然除了设置 px 值,还可以设置100vh,让容器的高度和浏览器视窗高度一样(注意:不能不显式的设置,如果没有显式的设置,容器就无法包裹住项目列表)
为了布局具有响应式效果,可以借助媒体查询属性显示设置不同的高度值