css文字两端对齐

文本内容可以实现左对齐、右对齐以及居中对齐,如何实现两端对齐?很多时候为了对齐文字中间使用空格来隔开,这样每个内容需要计算空格个数,当内容不一样长短的时候又通过JS进行麻烦的计算。

text-align是控制文字的对齐与显示,从其属性名上就可以看出来。从其渲染与解析上来看,其主要是用来控制inline水平元素或inline-block元素的对齐与显示的,例如嵌套行内标签的文字、图片、input表单控件等;而对block水平的元素是没有作用的。

1
2
text-align: center | left | right | start | end | justify | inherit | initial | unset
text-align: justify

css2中text-align有一个属性为justify,居中对齐。其实现的效果就是可以让一行文字两端对齐显示(文字内容要超过一行)

SVG基础入门

可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN)

  • version: 表示<svg>的版本
  • xmlnshttp://www.w3.org/2000/svg 固定值
  • xmlns:xlinkhttp://www.w3.org/1999/xlink 固定值
  • xml:space:preserve 固定值,上述三个值固定,表示命名空间,当数据单独存在svg文件内时,这3个值不能省略
  • class: class类名
  • width | height: 定义 svg 画布的大小
  • viewbox: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg 不同时,viewBox 在屏幕上的显示会缩放至 svg 同等大小。

按钮点击水波效果

Material Design设计按钮点击效果比较酷炫,每次点击按钮都会产生一次水波涟漪的效果。

可以css和canvas来实现这种效果。

CSS中的content和attr

content和attr表达式,它们能在你的页面下面悄悄的使用CSS来生成内容,下面让我们看看attr和content如何相互配合产生神奇效果的。

基本content用法

content属性能让程序员使用CSS往页面元素里填写内容:

1
2
3
.myDiv:after {
content: "我是一个使用*content*属性生产的静态文字";
}

CSS实现元素水平垂直居中

在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。块级元素的水平居中比较容易,直接设置元素的

0 auto```就可以实现,垂直居中相对来说是比较复杂一些的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- more -->
## 高度位置,使用绝对定位

```css
.parentElem {
position: relative;
}

.childElem {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

父容器高度已知

且只有一个元素,只要使用相对定位即可

1
2
3
4
5
6
7
8
9
.parentElem {
height: 200px;
}

.childElem {
position: relative;
top: 50%;
transform: translateY(-50%);
}

水平居中方案

行内元素

1
text-aligin: center;

块级元素,宽度固定

1
margin: 0 auto;

块级元素,宽度不定

1
margin: 0 auto;

vertical-align 垂直对齐

  1. 元素默认垂直对齐方式为基准对齐(baseline)
  2. 继承性: 不继承
  3. 适用于行内元素和单元格(table-cell)元素

语法

  • : 基准线
    1
    2
    3
    4
    5
    6
    7
    8
    9
    > * ```middle``` : 中部对齐
    > * ```top``` : 顶端对齐
    > * ```bottom``` : 底端对齐
    > * ```text-top``` : 与文本顶部对齐
    > * ```text-bottom``` : 与文本底部对齐
    > * ```sub``` : 下标
    > * ```super``` : 上标
    > * ```<百分比>```,```<长度>``` : 可为负数
    > * ```inherit

垂直对齐属性

图片本身没有基线,则将其底部与父元素的基线对齐。

参考:垂直对齐:vertical-align属性

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×