CSS学习笔记

2016-03-09

CSS代码风格

声明顺序

相关的属性声明应该以下面的顺序分组处理：

  1. Positioning
  2. Box model 盒模型
  3. Typographic 排版
  4. Visual 外观

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。

其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}

display属性：block，inline和inlinke-block

  • block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，比如 P 元素，只能包含inline元素，而不能包含block元素。
  • display:block: 独占一行，有宽高，支持margin、padding
  • display:inline: 不能指定宽高，宽高由内容控制，多个元素排满一行才换行，水平方向padding，margin才有效
  • display:inline-block: 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。

每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！

常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

inline-block元素的空白间距

在父元素中设置font-size:0,用来兼容chrome，

而使用letter-space:-N px来兼容safari(ps. 实测最新的safari通过设置font-size就可以解决)

1
2
3
4
5
6
7
8
9
10
11
12
13
.finally-solve {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;
}
.finally-solve li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
}

定位(position)

通过 position属性可以选择4中不同的定位类型

  • static: 正常生成，
  • relative: 相对元素本身的位置进行浮动，原先所在空间保留
  • absolute: 相对文档（0,0）位置进行浮动，不占文档流的位置
  • fixed: 相对窗口（0,0）位置进行浮动

注意：

  1. fixed定位的时候相对是窗口（viewport）来进行定位，
  2. 而absolute要看父级有没有relative，如果有就相对该元素进行定位，否则就相对整个文档来定位，即浏览器左上角
  3. 如果父元素已经是absolute，子元素是根据父元素的(0,0)位置进行浮动，所以，父元素的padding对子元素是没有用的了

position还有一个值：inherit，用于继承父元素的position

z-index:
定位就会有堆叠情况，通过z-index来区分层级关系，

  • 值越大越靠前(靠近用户)，可以为负数,
  • 相同的值，谁排在后面，谁就显示靠前
  • 没有设置z-index时，定位元素比文档流中的元素靠前
  • 如果父元素的z-index有效，则子元素无论设置什么值都无效，跟随父元素
  • 如果父元素没有指定z-index或失效，子元素的z-index就可以生效

水平垂直居中

块级元素默认是会撑满水平方向空间的，设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

  • 水平居中
1
2
3
4
.main {
	width: 500px;
	margin: 0 auto;
}

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
所以可以使用max-width属性替换width

  • 垂直居中
1
2
3
position: absolute;
top:50%;
margin-top: -300px; /*设置为高度的一半*/

同理，如果希望垂直水平居中
加上以下样式即可

1
2
left:50%;
margin-left: -300px;/*设置为宽度的一半*/

float相关

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

css 有三种定位机制： 普通流，浮动，绝对定位

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：

  • 块级元素：直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。
  • 内联元素：有空隙就插入。

清除浮动

如果浮动元素下方的元素不受浮动元素的影响，可以使用clear: both;来清除浮动

CSS3 3D Transforms相关

-webkit-backface-visibility:hidden: 当元素不面向屏幕是隐藏

-webkit-transform-style:preserve-3d: 支持子元素的3d效果

-webkit-transform:translate(0px,0px) rotateY(0deg);: 定义位移以及沿着Y轴旋转

  • translate: 平移
  • rotateY,rotateX,rotate: 旋转
  • skew: 定义沿着 X 和 Y 轴的 2D 倾斜转换
  • scale: 缩放

transform-origin: 变换的原点，比如旋转（rotate）时，就是值旋转的圆心座标，默认是50%,50%,即中心点）

  • 如果是3D变换，则还有第三个属性值z，默认是为0

-webkit-perspective: perspective 属性定义 3D 元素距视图的距离，以像素计。该样式设在3d变换元素的富元素上

过渡动画

transition: property duration timing-function delay 属性 持续时间 时间函数 延时

盒子模型

  • 推荐在全局设置border-box
1
2
3
4
5
*, *:after, *:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

box-sizing: 定义盒子包不包括边框，默认是ccs2.1定义的盒子模型，即盒子的宽高是内容的宽高，padding和border在盒子之外
当值为border-box时，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

注意：

  1. 当border,padding的实际大小大于宽高时，宽高将会被改变
  2. 当文字内容是连续的英文字母，默认是不会换行的, TODO: 这个要处理一下
  3. 当内容多过容器时，内容会超出容器，但容器大小是不会被改变的，修复溢出内容可以通过设置overflow: auto在容器内滚动，（或者设置hidden，隐藏多出的，一般不这样做）

box-shadow: 阴影，x, y, 阴影模糊范围,阴影尺寸, color，inset（内阴影）

css单位

  • %
  • px
  • em

动画

动画和变换是不一样的，虽然都在动

  • 通过@keyframes 定义动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 简单的 */
@keyframes easy
{
from {top:0px;}
to {top:200px;}
}

/* 可设定不同时期的动作 */
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
  • 在元素上设置animation的样式
1
2
3
4
5

/* 样式引用动画 */
div {
	animation: myfirst;
}

字体图标

字体文件一般定义了字符对应的图形特征，

使用步骤：

  • 引入字体文件
1
2
3
4
5
6
7
8
@font-face {
	font-family: 'diyfont';
	src: url('diyfont.eot'); /* IE9+ */
	src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('diyfont.woff') format('woff'), /* chrome、firefox */
		 url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		 url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
  • 使用字体，本质上和普通文字使用字体是一样的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.test-font {
	font-family: 'iconfont';
	font-style: normal;
	font-size: 32px;
	line-height: 2;
	letter-spacing: .25em;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
}
</style>

<div class="test-font">&#13363;</div>

说明：&#13363;即字体文件中定义的字符unicode编码，在HTML页面中使用&#xxxxx;的字符表示 ，十进制的如&#59392;，16进制方式如&#e800；

而一般在css的伪类中只能使用反斜杠转义的16进制方式如\e800,e800即十进制的59392

1
2
3
4
5
6
7
8
9
.test:before {
	content: '\e800';
	font-family: 'iconfont';
	font-size: 80%;
	/* 可选 */
	display: inline-block;
	line-height: 30px;
	text-align: center;
}

vertical-align: 设置元素的垂直对齐方式

当文字在同一行需要有不一样的对其方式可以用改属性进行调整

list-style: none;: 去除li默认的点

text-decoration: none;: 去除a标签的下划线

letter-spacing: 增加或减少字符间的空白（字符间距）

word-spacing: 文字中空格的间距大小

文字过长省略号处理

  • 单行 
1
2
3
4
5
6
.too-long {
    width: 249px;
    text-overflow: ellipsis;/*这就是省略号喽*/
    overflow: hidden;/*设置超过的隐藏*/
    white-space: nowrap;/*设置不折行*/
}
  • 多行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.multi-line {  /*移动端方案*/
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


p {		/*pc端兼容多浏览器方案，不考虑IE6，7*/
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p:after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
}

颜色渐变

linear-gradient

阴影

box-shadow: 10px 10px 1px 3px #fff inset

水平垂直居中

1
2
3
4
5
6
7
.Absolute-Center {
  width: 120px;
  height: 80px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

好处：

  • 跨浏览器，兼容性好（无需hack，可兼顾IE8~IE10）
  • 无特殊标记，样式更精简
  • 自适应布局，可以使用百分比和最大最小高宽等样式
  • 居中时不考虑元素的padding值（也不需要使用box-sizing样式）
  • 布局块可以自由调节大小
  • img的图像也可以使用

注意:

  • 必须声明元素高度
  • 推荐设置overflow:auto;样式避免元素溢出，显示不正常的问题
  • 这种方法在Windows Phone上不起作用

水平对齐

vertical-align

背景图设置

注意：

  1. 不要直接在body上设置background

background-size

  • length: background-size: 100px 200px;
  • percentage: background-size: 100% 80%;
  • cover: 等比缩放
  • contain: 适应容器

媒体查询

  • 当浏览器尺寸小于960px时候执行下面的CSS。
1
2
3
@media screen and (max-device-width:960px){ 
body{background:red;}
}
  • 当浏览器尺寸大于960px时候执行下面的CSS。
1
2
3
@media screen and (min-width:960px){ 
body{background:orange;}
}
  • 我们还可以混合使用上面的用法：当页面宽度大于960px小于1200px的时候执行下面的CSS。
1
2
3
@media screen and (min-width:960px) and (max-width:1200px){
body{background:yellow;}
}

Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：

  • width:浏览器可视宽度。
  • height:浏览器可视高度。
  • device-width:设备屏幕的宽度。
  • device-height:设备屏幕的高度。
  • orientation:检测设备目前处于横向还是纵向状态。
  • aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
  • device-aspect-ratio:检测设备的宽度和高度的比例。
  • color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
  • color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
  • monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
  • resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
  • grid:检测输出的设备是网格的还是位图设备。