大前端之路-快速入门css布局

时间 2020-03-03

标签前端之路快速入门 css 布局栏目 CSS 繁體版

原文原文链接

本文适用读者范围

适用前端初学者，尤为是移动端转大前端，平时工做weex和rn 为主，但迟迟找不到css布局感受的。读了这篇文章应该很快就能上手工做了。介绍的东西都是平时移动端开发中常见的。有兴趣的能够再根据文中的内容自行拓展。css

w3cSchool真的是垃圾，你看那个css字典，看完了也是找不到任何布局感受的。 不如看这篇快速入门之后先上手快速开发，而后以点到面再拓展细节。前端

快速理解css中的布局重要概念

如何快速理解盒模型

<div class="box"></div>
 .box {
  width: 100px;
  height: 100px;
  border: 10px solid blue;
  padding: 30px;
  margin: 40px;
  background: yellow;
}
复制代码

效果以下；android

默认状况下width属性定义的是内容的宽度，不包含边距、边框bash

width的计算方式是由box-sizing属性来定义的，若是设置一个元素为box-sizing: border-box; ，元素的内边距和边框就会包含在width宽度内。weex

这里与android 实际上是不同的，android中一个view的宽度高度实际上是包含了padding 可是不包含margin的布局

块元素和行内元素

有android基础的理解这个就很快了。块元素就是一个vertical属性的linearylayout 而行内元素则是一个hor 属性的LinearLayout 无非就是一个子元素垂直排列另一个水平排列罢了。学习

块元素的特色测试

每一个块元素都重新的一行开始，独占一行字体
元素的高度、宽度、行高以及顶和底边距等属性均可设置flex
默认的高度与父元素的宽度一致，即width默认为100%
能够容纳行内元素和其余块元素

行内元素的特色：

和其余行内元素都在一行上
元素的高度、宽度、行高及顶部和底部边距等属性不可设置
元素不能设置高度，宽度就是它包含的文字或图片的宽度
行内元素只能容纳文本或者其余行内元素

在CSS中将行内元素能够经过display: block设置为以块元素的方式显示，咱们还能够继续设置该元素的长宽等本来不能设置的属性。一样，咱们也能够设置块元素的display属性为display: inline，这样块元素就能够再同一行显示了

android中的visiable 以及 gone 属性在css中也有对应

当一个元素的display属性被设为none时，该元素不会被渲染，也不会占位，就像不存在同样。对布局不会产生任何影响。它和visibility属性不同。把display设置成none不会保留元素本该显示的空间，可是visibility: hidden;还会保留

最后一种重要的display属性

display: inline-block修饰的元素称之为行内块元素，它们会像行内元素同样在同一行显示，又能够像块元素同样设置高、宽、行高、边距。

叠加布局

所谓叠加布局，在移动端就是简单的两个view 叠加在一块儿，有重合的部分。在android中咱们常常在framelayout或者相对布局layout中实现这种效果。

如图所示：

源码以下，咱们只要谨记关键字是 position: relative 便可。

<div>
        <div class="r1"></div>
        <div class="r2"></div>
    </div>
复制代码

.r1{
    height: 200px;
    width: 50%;
    position: relative;
    background: red;
}

.r2{
    height: 200px;
    width: 70%;
    position: relative;
    background: blue;
    top:-50px;
    left:20px;
}
复制代码

固定位置的布局

相似在android中，咱们每每须要单独写一个window ，不跟随主xml文件。这样无论个人主界面怎么滑动，我这个单独的窗口都是固定在屏幕的一个位置。

代码：

.t1 {
  width: 100%;
  height: 2000px;
  background: red;
}

.t2 {
    /* 就是这个fixed起到做用而已 */
  position: fixed;
  bottom: 50%;
  right: 0;
  width: 200px;
  background-color: white;
}
复制代码

跟随父布局移动的相对布局。

<div class="t1">
      <div class="t2">随便你怎么滑动，我都在我父元素的内部保持不动</div>
    </div>
复制代码

.t1 {
  width: 100%;
  height: 200px;
  background: red;
  /* 前面不要遗漏这个 不然你子布局的那些位置属性就是相对于整个窗口而言了 */
  position: relative;
}

.t2 {
  /* 就是这个absolute起到做用而已 可是他须要他的父元素 position 为 非static的 也就是说
  父元素的position不能为默认值  */
  position: absolute;
  bottom: 20px;
  left: 10px;
  width: 200px;
  background-color: green;
}
复制代码

若是把父布局的position删除之后就变成

float- 变动图层的覆盖关系

<div>
    <div class="t1">我原本应该在下面 被覆盖</div>
    <div class="t2">我原本应该在上面 覆盖下面</div>
  </div>
复制代码

例如这样的div 由于t2 这个div 是在t1 后面写的，因此理应t2 在t1之上。

.t1 {   
  width: 50px;
  height: 200px;
  background: red;
  /* float: left; */
}

.t2 {
  width: 200px;
  height: 200px;
  background: yellowgreen;
}
复制代码

若是咱们把上面t1 注释掉的那行代码打开：

效果立刻就变成了 t1 覆盖到t2 上面了。

这里固然还能够用 clear 属性来清除这种浮动

.t2 {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  clear: left
}
复制代码

用float 来体会下啥叫脱离文档流

<div class="parent">
    <div class="t1">1</div>
    <div class="t2">2</div>
    <div class="t3">3</div>
  </div>
复制代码

.parent {
  /* display: inline; */
  background: red;
  /* height: 200px; */
}
.t1 {
  width: 200px;
  height: 400px;
  background: yellowgreen;
  float: left;
}
.t2 {
  width: 200px;
  height: 400px;
  background: wheat;
  float: left;
}
.t3 {
  width: 200px;
  height: 400px;
  background: green;
  float: left;
}
复制代码

稍微改一下增长一行代码便可让父布局高度正常

<div class="parent">
      <div class="t1">1</div>
      <div class="t2">2</div>
      <div class="t3">3</div>
      <!-- 清除浮动 便可让父布局 有高度 -->
      <div style="clear:both;"></div>
    </div>
复制代码

文字环绕效果

这多是css中为数很少的，实现起来比android里面要方便多的效果了。实现原理为：

若是该元素的下一个兄弟元素中有内联元素（一般是文字），则会围绕该元素显示，造成相似"文字围绕图片"的效果。即虽然浮动会让元素脱离文档流，可是文本内容会受到浮动元素的影响。

<div>
    <div class="parent">
      <div class="t1"></div>
      <div
        class="t2"
      >23123123123123123131231231231231231231231231312312312312312313123123123123123131231231312312312312312313123123123123123131231231231231231312313131231231231231231231231231231sdasdasdasdasdasda13131231231231231231231231231231sdasdasdasdasdasda</div>
    </div>
  </div>
复制代码

.parent {
  text-align: center;
  width: 300px;
  background: blueviolet;
}
.t1 {
  width: 100px;
  height: 100px;
  background: red;
  /* 一个float 就解决了全部问题 真是比android的布局dsl方便啊 */
  float: left;
}

.t2 {
  width: 200px;
  height: 200px;
  background: yellowgreen;
  /* 下面这个保证div中的文字 显示不下就自动换行 */
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}
复制代码

img外面包裹div

<div class="test">
        <img
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583071176313&di=5d94f8d41a598ec2e4a3a2e80de0dd14&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20107%2F571%2Fw640h731%2F20200229%2Fe016-iqfqmas5577811.jpg"
        />
    </div>
    
复制代码

.test {
  width: 500px;
  background: red;
}
img {
  width: 150px;
  height: 150px;
  /* vertical-align: middle; */
}
复制代码

看看效果

为何下面有个空白？这是什么鬼？

图片的 baseline 是图片的下缘，它和所在行的 baseline 是对齐的，而所在行的 baseline 离父元素的下边是有距离的（这个涉及到字体知识），这个距离就是你看到的空隙。

这个问题有不少种解法

一般推荐

img {
  width: 150px;
  height: 150px;
  /* 这种解法比较经常使用 通常行内元素 均可以考虑用这种方式对齐 */
  vertical-align: middle;
}
复制代码

height 与 line-height

实际上line-height 这个东西在css布局中是个很麻烦的属性（其实从这里就能看出来css是一门多么愚蠢的dsl语言），这里只说一些平时咱们应该注意的地方。

<div>
    <div class="test1">
      test1
      <br />test1
    </div>

    <br />
    <br />
    <div class="test2">
      test2
      <br />test2
    </div>
  </div>
复制代码

.test1 {
  line-height: 20px;
  background-color: red;
}
.test2 {
  height: 20px;
  background-color: green;
}
复制代码

div标签中直接写文字要注意什么？

<div>
    <div class="test1">test1</div>

    <br />
    <br />
    <div class="test2">test1</div>
  </div>
复制代码

.test1 {
  font-size: 0;
  line-height: 32px;
  border: 1px solid red;
}
.test2 {
  font-size: 32px;
  line-height: 0;
  border: 1px solid yellow;
}
复制代码

单行文字垂直居中

<div>
    <p class="t1">这是一行文字</p>
  </div>
复制代码

.t1 {
  line-height: 50px;
  border: 1px dashed #cccccc;
  padding-left: 5px;
  font-size: 12px;
}
复制代码

父元素高度不固定的多行文字垂直居中

<p class="t1">
      <span style="font-size:12px;">
        多行文字的第一行
        <br />这里是第二行，用来测试多行的显示效果。
      </span>
    </p>
复制代码

.t1 {
  border: 1px dashed #cccccc;
  padding-left: 5px;
}
.t1 span {
  display: inline-block;
  vertical-align: middle;
}
复制代码

快速学习weex和RN中经常使用的布局技巧

这些布局效果,在移动原生开发中很是常见,可是若是用传统的css布局属性来写会比较麻烦,使用比较新潮的flex来布局效果则特别好,且简单.刚好 weex和rn 都对flex的支持比较好.因此这里重点介绍一下flex布局的实际应用

垂直居中

<div class="dad">
    <div class="son"></div>
  </div>
  
  
  .dad {
  /* 重点就是要开启这个flex  */
  display: flex;
  /* 而后设置居中对齐 */
  justify-content: center;
  /* 设置子容器如何沿交叉轴排列 */
  align-items: center;
  background: red;
  width: 100%;
  height: 200px;
}

.son {
  width: 100px;
  height: 100px;
  background: green;
}
复制代码

水平排列

<div class="parent">
    <div class="t1"></div>
    <div class="t2"></div>
    <div class="t3"></div>
  </div>
  
  
  .parent {
  /* 重点就是要开启这个flex  */
  display: flex;
  /* 而后设置从左到右 */
  justify-content: flex-start;
  /* 设置子容器如何沿交叉轴排列 其实就是纵轴排列的顺序  */
  align-items: center;
  background: red;
  width: 100%;
  height: 200px;
}

.t1 {
  width: 100px;
  height: 100px;
  background: green;
}
.t2 {
  width: 100px;
  height: 100px;
  background: blueviolet;
}
.t3 {
  width: 100px;
  height: 100px;
  background: chocolate;
}
复制代码

固然还有flex-end 属性能够本身看看效果

首尾间距+子元素之间留相等间距

首元素和尾元素与父元素的间距是子元素之间间距的一半

justify-content: space-around;

复制代码

首尾不留间距

justify-content: space-between;

复制代码

纵向对齐的几种方式

align-items: flex-start;

复制代码

align-items: flex-end;

复制代码

子元素按比例分割布局

.t1 {
  flex: 1;
  /* width: 100px; */
  height: 100px;
  background: green;
}
.t2 {
  flex: 2;
  /* width: 100px; */
  height: 200px;
  background: blueviolet;
}
.t3 {
  flex: 3;
  /* width: 100px; */
  height: 300px;
  background: chocolate;
}
复制代码

变动主轴方向

前面咱们讲的主要是横向对应 justify-content 纵向对应 align-items ，这实际上是默认了横向为主轴，纵向为交叉轴。某些状况下咱们能够更改主轴的设定来达到其余的效果

.parent {
  display: flex;
  justify-content: center;
  align-items: stretch;
  // 设置主轴为 列 将白了就是纵向分割    
  flex-direction: column;
  background: red;
  width: 100%;
  height: 200px;
}

.t1 {
  flex: 1;
  /* width: 100px; */
  /* height: 100px; */
  background: green;
}
.t2 {
  flex: 2;
  /* width: 100px; */
  /* height: 200px; */
  background: blueviolet;
}
.t3 {
  flex: 3;
  /* width: 100px; */
  /* height: 300px; */
  background: chocolate;
}
复制代码

横扑布局自动换行

如图，第三个展现不下就自动换行展现

.parent {
  display: flex;
  flex-wrap: wrap;
  background: red;
  width: 500px;
  height: 200px;
}

.t1 {
  width: 100px;
  height: 100px;
  background: green;
}
.t2 {
  width: 200px;
  height: 100px;
  background: black;
}
.t3 {
  width: 300px;
  height: 100px;
  background: chocolate;
}
复制代码