Mki's Blog

CSS学习(三):布局和字体

字体

文字样式

字体样式

color属性

颜色

font-family属性

字体种类:例如 sans-serif 没有衬线的字体。

字体栈 按顺序找能用的字体 font-family: "Trebuchet MS", Verdana, sans-seriffont-family: "Trebuchet MS", Verdana, sans-serif

font-size属性

字体大小,有px,em,rem等单位。

font-style属性

normal:普通字体

italic:斜体

font-weight属性

normal:普通

bold:加粗

lighter:比父元素更细

bolder:比父元素更粗

text-decoration属性

underline:下划线

line-through:删除线

text-shadow属性

text-shadow: 4px 4px 5px red;

四个值分别为:阴影与原始文本的水平偏移/阴影与原始文本的垂直偏移/模糊半径/阴影的基础颜色

文本布局

text-align属性

控制文本对齐

right/left:右对齐/左对齐

center:居中

justify:文本展开

line-height属性

行高

布局

弹性布局

把要变成弹性盒子的所有元素的父元素的display属性设置成弹性。

xxx {
    display: flex;
}

flex模型

flex模型

搞清楚以下概念:

  • 主轴:main axis 弹性盒子排布方向所在的轴
  • 交叉轴:cross axis 与主轴垂直
  • flex容器:flex container 设置了display:flex的元素
  • flex项:flex item 所有弹性盒子

行列转换

主轴可以是水平也可以是垂直(默认水平)

flex-direction: column;

自动换行

在flex容器

flex-warp: warp

在flex项,设置宽度

flex: xxxpx;

用完这莫名的顺眼是怎么回事,啊,好开心。

动态尺寸

flex_container {
    flex: 1;
}

flex的值是一个比值,1代表所有的flex item所占比例一样。

注意,这个比值是在每一行,换行后会重新计算,比如第一行5个元素那么每个是1/5,第二行3个元素那么每个1/3.

水平/垂直对齐

div {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

align-items属性: 控制items在交叉轴上面的位置。默认值是stretch,效果会导致每个item都变成原有最大的那个的高度。

center值表示保持原有高度,但是居中。

justify-content属性:控制items在主轴上的位置。 space-around表示均匀分布,两端也留下一点空白。

浮动布局

引入了float属性的简单布局,常用来创建多个列布局。

设置了float属性的浮动元素会脱离正常的文件布局流

例如,假如浮动设置为left.

float: left;

那么该元素会吸附到其父容器的左边。

两列布局

最简单的浮动布局例子。

div div:nth-of-type(1) {
    width: 48%;
    float: left;
}
div div:nth-of-type(2) {
    width: 48%;
    float: right;
}

这个是在一个大的div里面的两个小div,使其一左一右排列。

三列布局

其实和两列布局很像。

div div:nth-of-type(1) {
    width: 30%;
    float: left;
}
div div:nth-of-type(2) {
    width: 30%;
    float: left;
    margin-left: 6%;
}
div div:nth-of-type(3) {
    width: 30%;
    float: right;
}

同理,前几个元素都是左浮动,最后一个右浮动。设置每个元素的width来控制比例。区别就是中间的元素多了margin-left的属性,用来隔开前一个元素。

清除浮动

一旦某个元素设置了浮动属性,那么该元素下面的元素都会受到影响。有时候我们不想让某些元素产生浮动的效果,那么就可以这么做。

xxx {
    clear: both;
}

clear可以取三个值,left/right/both,分别代表清除哪一种浮动效果。

网格布局

网格是由水平和垂直线集合创建的一个模式,大多数网格布局是基于浮动创建的。

列(column) 行(row) 行列之间的 沟槽(gutter)

一个简单的例子

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>   
  </div>
</div>
* {
  box-sizing: border-box;
}


body {
  width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 20px;
}
.row {
  clear: both;
}
.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255, 150, 150);
}

流体网格

为了适应窗口大小的变化,将原本的固定像素值转化为百分比,从而成为以一个流体网格。

百分比的计算公式:

target / context = result

假如我们要整的目标元素的像素是100,而整体宽度是1000像素,那么设置成百分比就是百分之十。

宽度沟槽同理。

数学不好没关系,calc()函数来帮您。

容器偏移

有时候会想把某个(或者某一类)元素向某个方向偏移一点距离。

.items {
    margin-left: x.xx%
}

把这些元素添加items类,这真是太直接了。

弹性网格

年纪轻轻不要搞什么弹性网格,请跳过这一段。

定位

有时候我们会想改变某一些元素的默认位置(事实上上面我们一直在这么做。。。),或者我们想固定某一元素在页面的位置,那么我们可以使用position属性来实现这样的效果。

静态定位

position: static;

就是和默认的文档流一样。

相对定位

position: relative;

relative值要配上其他值一起食用。

top: 10px;
left: 10px;
right: 0px;
bottom: 0px;

这里的偏移是相对与静态定位的。

绝对定位

position: absolute;

同样要配合top/left/right/bottom四个值。

与相对定位不同的是,绝对定位并不是与静态定位的比较,而是和包含元素相比较的。

啥是包含元素?默认情况下,是<html>元素,假如要让<body>元素变成包含元素。

那么可以在body的属性上添加

body {
    position: relative;
}

固定定位

这是一种特殊的绝对定位。用在比如在页面位置固定的导航栏上。

position: fixed;

元素重叠

讲道理,两个元素定位之后有重叠,那么谁在上面谁在下面呢?

可以用z-index属性来解决(可以理解为z轴上面的位置)

数值越小,越上面。