元素布局与居中

HTML(在不设置css属性的情况下)根据元素类型不同而布局不同,块级元素靠左边向下排列,行内元素和行内块元素不会独占一行,可以横向排列。所以不借助css的话,页面布局就会有很大的局限性。
能够影响布局的css属性(常用):

属性 属性值 作用
margin xxpx 设置盒子外边距,可以理解为包裹电视机的泡沫,在外部影响了电视机与桌子的距离
padding xxpx 设置盒子内边距,调整盒子内容的布局
position absolute(绝对定位)relative(相对定位)fixed(固定定位)static(静态定位,默认值) 设置了absolute的元素会根据设置了定位的父元素来布局,设置了relative的元素根据自身最初的位置来布局,设置了fixed的元素根据浏览器窗体来布局,通过设置top,right,left,bottom这四个属性来控制位置
display flex 将元素display设置成flex,代表这个盒子变成了一个弹性盒子,可以通过弹性盒子的属性来控制盒子内的布局

元素水平居中:
1,通过设置margin来实现(只对块级元素有效):
子元素设置margin:0 auto;
2,通过设置子元素display和父元素text-align来实现:
父元素设置text-align:center
子元素设置display:inline-block或者inline
3,通过设置position和父元素float来实现:
父元素设置 position:relative;left:50%;float:left;
子元素设置 position:relative;right:50%;
这里父元素(命名为box2)设置float:left,主要是为了让元素靠左,同时也让父元素的宽度不继承它的父元素(box1),而是由子元素(box3)撑开。这样它就和子元素(box3)一样宽了,这时它相对于最左边的位置向右移动50%,这个50%是父元素(box1)宽度的50%,所以现在它就紧靠着中间线右边,而此时box3往左移动50%,这个50%是box2宽度的50%,由于box2的宽度与box3相同,相当于box3往左移动它自身宽度的一半,由此实现居中。
4,通过设置absolute和margin-left来实现(已知子元素宽度):
子元素设置position:absolute;left:50%;margin-left:-(自身宽度/2);
5,通过设置父元素absolute实现:
父元素设置position:absolute;left:50%;
子元素设置position:relative;right:50%;
原理和方法三一样,只是不需要给父元素设置float了,因为绝对定位也会使元素脱标,宽度不再继承父元素。
6,通过css3提供的flex布局实现:
父元素设置display:flex;justify-content:center;
7,通过css3提供的width新属性结合margin实现(还是只对块级元素有效):
子元素设置width:fit-content;margin:0 auto;
fit-content这个属性相当于让块级元素不用脱标就能不再继承父元素宽度,而是由内容决定宽度。
8,通过flex和子元素align-self实现:
父元素设置display:flex;flex-direction:column;
子元素设置align-self:center;
这里需要给父元素设置成垂直布局,因为align-self是设置的子元素相对于父元素侧轴的位置,因此设置父元素为垂直布局,水平方向就成了侧轴,这时候设置center才能水平居中。

元素垂直居中:
1,通过单元格的vertical-align实现:
父元素设置display:table;
子元素设置vertical-align:middle;display:table-cell;
2,通过flex布局实现的第一种方法:
父元素设置display:flex;
子元素设置align-self:center;
3,通过flex布局实现的第二种方法:
父元素设置display:flex;align-items:center;
4,通过flex布局实现的第三种方法:
父元素设置display:flex;flex-direction:column;justify-content:center;
5,通过position定位实现的第一种方法:
子元素设置position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
6,通过position定位实现的第二种方法:
子元素设置position:absolute;top:50%;margin-top:-(自身高度/2);
7,通过position定位实现的第三种方法:
子元素设置position:absolute;top:50%;transform:translate(50%,-50%);
translate这里设置的百分比是元素自身宽高的百分比,所以元素高度未知的时候这种方法也可行。
8,通过设置行高(只适用于文字):
子元素设置line-height:自身高度;

展开阅读全文
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值