CSS基本使用技巧-布局&居中

2019-06-10  本文已影响0人  卡拉咖啦

在开始之前,我们有必要简单了解一下 css 中那些容易导致 bug 的属性:

  1. "width:100%;" , 如果有 margin / padding 存在,内容常常会超过界面;
  2. 设置固定 height, 缺点就是当内容太多的时候,显示不完全;
  3. "display:inline-block;" , 会经常出现一些间隔问题,所以每当用到这个的时候我们都会响应的加上:"vertical-align:top";

进入正题

一、水平布局

水平布局中,我们最常用到的属性是 float,效果是让 element 脱离文档流。

1.left & right

一般我们让两个元素水平左右布局的话,可以设置一个元素 float: left; 另一个 float: right;

2.百分比

我们也可以考虑相同方向上的 float,然后设置 element 的宽为百分比,只要保证水平上的 elements width 之和不大于一就可以实现水平布局。
这种方式在多个元素水平布局上就更适合。

3.position

在父级元素设置 postion: relative;,然后分别设置子元素:

.left {
    position: absolute;
    left: 0;
    top: 0;
}
.right {
    postion: absolute;
    right: 0;
    top: 0;
}

注意

1)默认情况下,我们设置的 width 只是针对 element 的 content 部分,也就是说,当有 padding / margin 存在的时候,element 的实际占用宽度会大于设定值,这会导致 element 无法挤到一起水平布局,解决的方法就是:
设置 box-sizing: border-box,或者把 padding / margin 设为 0;

2)因为 float 会让元素脱离文档流,就会出现子元素跑到父元素外部的结果:


float1

解决的方法:利用 clear 属性(可以理解为克制 float 属性)给父元素加上有 clear 属性的空白内容;

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
clearfix

3)还有一个比较麻烦的问题,如图:

对齐1

本来我们想要的是整齐的 float,但是因为左边元素的字体比右边的大,整个元素的方框就比右边大一点点,导致下一列的元素卡在了奇怪的位置 ……

解决的办法就是给每个元素设定一样的 height 或 line-height;

但是,这又会导致另一个问题,我们前面说了设置固定高度容易导致 bug 就提现在这里,如果我们的内容比较多,就可能会出现显示问题。

固定 height

当然,我们也可以考虑给每一行的元素套上一个 div 作为一个整体,再加上一个上面提到的 .clearfix class.

其实还有更好的解决方法,用上 flexbox ,这个以后在讨论。

二、居中

1.水平居中

1)block elements

对于 block 元素自身,设置左右两边 margin 为 auto margin-left: auto; margin-right: auto 可以在父元素内水平居中;

2)inline elements
a. 在父级元素中设置 text-align: center; 可以让内部的 inline 元素水平居中;
b. 内联元素设置左右 padding 为相同值,可以让内部内容居中;
内联元素这种的居中也有它的优点:可以自动随着内容长度的变化而变化

2.垂直居中

1)设置相同的上下 padding;
2)设置 line-height 等于 父元素的 height;

这两种方式的缺点非常明显,父元素里面无法同时存在其它内容。更为高级的用法在下面;

3.水平、垂直居中

利用,position 和 transform (translate);

.parent {
    position: relative;
}

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

对于 block 和 inline 元素都有效!爱怎么调就怎么调

4.背景居中

用这个:

background-position: center center;

如果还需要背景的自动放缩:

background-size: cover;


(待补充……)
上一篇 下一篇

猜你喜欢

热点阅读