《css世界》读书笔记3

1、盒子内三个box，一行排列，间距20px

ul {

margin-right: -20px;

}

ul > li {

float: left;

width: 100px;

margin-right: 20px;

}

2、管道符

a + a:before {

content: "";

font-size: 0;

padding: 10px 3px 1px;

margin-left: 6px;

border-left: 1px solid gray;

}

a- href=""

3、box-sizing

/* 
 * box-sizing含义指盒尺寸，更准确叫法应该为“盒尺寸的作用细节”或者叫“width作用的细节”
 * box-sizing属性的作用是改变width的作用细节。
 */
.box {

    width: 100px;

    box-sizing: border-box;

    border: 1px solid

}

/*解决替换元素宽度自适应问题*/
input, textarea, img, video, object {

    box-sizing: border-box;

}

4、height: 100%

/*要满屏显示背景图*/

html, body {
    height: 100%;
}

div {
    width: 100%;
    height: 100%;
    background: url(bg.jpg);
}

5、展开收起动画

/*
 * 只需要设定为保证比展开内容高度大的值即可,因为max-height值比height计算值大的时候
 * 元素的高度就是height属性的计算高度，在本交互中，也就是height:auto时候的高度值。
 */

.element {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
}

.element:active {
    max-height: 666px;
}

6、透明图片占位

/* 
 * 图片img必须直接没有src属性，当图片src属性缺省的时候，图片不会有任何请求，是最高效的实现方式。
 * 但是在Firefox浏览器下会无效，需要设置display: inline-block
 */

img {
    visibility: hidden;
}

img[src] {
    visibility: visible;
}

7、图片替换

/*如果图片原来有src地址，可以使用content属性把内容替换，就能轻松实现hover图片变成另一张图片的效果。*/

8、正在加载中...动画

/* 
 * 正在加载中...
 * IE6-IE9下为静态点点点，其余为loading动画效果
 */

dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}

@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

9、padding百分比值无论是水平方向还是垂直方向均是相对于宽度计算的

10、元素尺寸

元素尺寸：对应jq中的$().outerWidth()和$().outerHeight()方法，包括padding和border，也就是元素的border box的尺寸。在原生API中写作offsetWidth和offsetHeight，也称为“元素偏移尺寸”。

元素内部尺寸：对应jq中的$().innerWidth()和$().innerHeight()方法，包括padding但不包括border，也就是元素的padding box的尺寸。在原生API中写作clientWidth和clientHeight，也称为“元素可视尺寸”。

元素外部尺寸：对应jq中的$().outerWidth(true)和$().outerHeight(true)方法，不仅包括padding和border，还包括margin，也就是元素的margin box的尺寸。没有对应的原生DOM API。

11、margin：auto

margin合并的计算规则

  两个正的margin值取最大的

  两个负的margin值取最小的

  正的和负的则直接相加

margin:auto的填充规则如下。（

如果一侧定值，一侧auto，则auto为剩余空间大小（margin-right: 80px;margin-left: auto，则表示margin-right为80px，剩下的为margin-left。如果不设置margin-left则margin-left为0，所有空间都是margin-right，所以会实现靠一侧例如居右这种）。

  如果两侧均是auto，则平分剩余空间。
  
  margin的’auto’是具有强烈的计算意味的关键字

12、border应用

/*上传图片＋号背景图样式*/

.add {
    color: #ccc;
    border: 2px dashed;
}

.add:before {
    border-top: 10px splid;
}

.add:after {
    border-left:10px solid;
}

.add:hover {
    color: #06c;
}

/*三角图标(朝下三角)*/
div {
    width: 0;
    border: 10px splid;
    border-color: #f30 transparent transparent;
}

13、基线

line-height行高定义就是两基线的间距，vertical-align默认值就是基线

x-height指的就是小写字母x的高度，术语描述就是基线和等分线之间的距离

14、ex

/*
 * ex是CSS中的一个相对单位，指的小写字母x的高度
 * 不受字体和字号影响的内联元素的垂直居中的对齐效果。
 * 每页显示15▼
 * 借助ex单位，直接利用默认的baseline基线对齐就可以实现该效果。
 */

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow.png) no-repeat center;
}

15、line-height

line-height: 1.5        ,数值型，最终的值为乘以font-size的大小
line-height: 150%    ,百分比型，最终的值为乘以font-size的大小
line-height: 24px     ,长度值，一般为px或者em,其中em也是乘以font-size的大小

区别在于，数值型在子级继承line-height属性的时候，继承的为1.5，到了子级会重新按照子级的font-size重新计算，而百分比和长度值则是直接继承了父级的最终计算过的数值大小，所以一般使用数值型最好。

line-height值可以设置在1.6～1.8，如果使用的是长度值，我建议直接line-height:20px

无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的，我称之为“内联元素line-height的大值特性”。

16、float

浮动的本质就是为了实现文字环绕效果。

特性：

包裹性；

块状化并格式化上下文；

破坏文档流；

没有任何margin合并；

17、BFC

含义：块级格式化上下文

原则：如果一个元素具有BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠是会影响外面的元素的。

触发：

根元素；

float的值不为none；

overflow的值为auto、scroll或hidden;

display的值为table-cell、table-caption和inline-block中的任何一个。

position的值不为relative和static。

自适应布局：

overflow: auto/hidden，适用于IE7及以上版本浏览器；

display: inline-block，适用于IE6和IE7；

display: table-cell， 适用于IE8及以上浏览器。

18、display:table-cell元素内连续英文字符无法换行问题，解决方案

.work-break {
    dispaly: table;
    width: 100%;
    table-layout: fixed;
    work-break: break-all;
}