《CSS世界》读书笔记

1、ul下多个li一行排列

ul {
   margin-right: -20px;
}
ul > li {
   float: left;
   width: 100px;
   margin-right: 20px;
}

2、box-sizing

/* 
 * box-sizing含义指盒尺寸
 * box-sizing属性的作用是改变width的作用细节。
 */
.box {
    width: 100px;
    box-sizing: border-box;
    border: 1px solid
}
/*解决替换元素宽度自适应问题*/
input, textarea, img, video, object {
    box-sizing: border-box;
}

3、height: 100%

/*要满屏显示背景图*/
html, body {
    height: 100%;
}
div {
    width: 100%;
    height: 100%;
    background: url(bg.jpg);
}

4、展开收起动画

/*
 * 只需要设定为保证比展开内容高度大的值即可,因为max-height值比height计算值大的时候
 * 元素的高度就是height属性的计算高度，在本交互中，也就是height:auto时候的高度值。
 */
.element {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
}
.element:active {
    max-height: 666px;
}

5、透明图片占位

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

6、元素尺寸

元素尺寸：在原生API中写作offsetWidth和offsetHeight，也称为“元素偏移尺寸”。

元素内部尺寸：在原生API中写作clientWidth和clientHeight，也称为“元素可视尺寸”。

7、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’是具有强烈的计算意味的关键字

8、border应用

/*上传图片＋号背景图样式*/
.add {
    color: #ccc;
    border: 2px dashed;
}
.add:before {
    border-top: 10px splid;
}
.add:after {
    border-left:10px solid;
}
.add:hover {
    color: #26e;
}
/*三角图标(朝下三角)*/
div {
    width: 0;
    border: 10px splid;
    border-color: #f50 transparent transparent;
}

9、基线

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

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

10、ex

/*
 * ex是CSS中的一个相对单位，指的小写字母x的高度
 * 不受字体和字号影响的内联元素的垂直居中的对齐效果。
 * 每页显示15▼
 * 借助ex单位，直接利用默认的baseline基线对齐就可以实现该效果。
 */
.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow.png) no-repeat center;
}

11、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的大值特性”。

12、float

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

特性：

包裹性；

块状化并格式化上下文；

破坏文档流；

没有任何margin合并。

13、阻止margin合并

那该如何阻止这里margin合并的发生呢？

对于margin-top合并，可以进行如下操作（满足一个条件即可）：

• 父元素设置为块状格式化上下文元素；

   父元素设置border-top值；

  父元素设置padding-top值；

  父元素和第一个子元素之间添加内联元素进行分隔。

• 对于margin-bottom合并，可以进行如下操作（满足一个条件即可）：

   父元素设置为块状格式化上下文元素；

  父元素设置border-bottom值；

  父元素设置padding-bottom值；

  父元素和最后一个子元素之间添加内联元素进行分隔；

  父元素设置height、min-height或max-height。

• margin合并的计算规则

  两个正的margin值取最大的

  两个负的margin值取最小的

  正的和负的则直接相加