CSS世界（读书笔记一）

1 , 对 CSS2.1的支持从 IE8开始的。
2, 元素都有内外两个盒子。display: inline-block; 可以理解为有两个盒子，外面的盒子是inline(能和图文在一行显示)，里面的盒子是 block （能设置width/height）。 所以 display:block;其实是 display: block-block;的 简写，display: table;可以看成 display: block-table;对于display:inline-table; 表示可以和文字在一行显示的表格。
3, 三无准则： 无宽度，无图片，无浮动。

4.<button>按钮</button> 和 <input type="button" value="按钮">
button按钮会自动换行，input默认white-space:pre是不会自动换行的，需要将pre值重置为normal
5.首选最小宽度。中文的最小宽度是每个汉字的宽度。 英文字符，会以 空格， 短横线，问号等作为最小宽度。

---

6.
“内在盒子”又分为 4个盒子： content box, padding box, border box, margin box. 这4个盒子有对应的名字： content-box, padding-box, border-box, 但 margin box没有对应的CSS名字（因为目前没有任何场景用到它）

---

7, 【宽度分离原则】
.box { width: 100px; padding:20px; border: 1px solid;} 原本想设置宽度为100px，结果却变成了 142px像素。使用宽度分离原则来写：
.father { width:100px; }
.son { padding: 20px; border: 1px solid;}
也就是说 html多一层 标签来设置 width。
不通过 多添加一层标签设置width的方法：box-sizing: border-box;，对于IE8需要添加前缀-ms-,box-sizing的作用就是改变width的作用细节。
box-sizing: content-box 是默认值
box-sizing: border-box 全部支持

但是，box-sizing不支持margin-box的，为什么呢？因为 margin 只有在 width:auto的时候才会改变元素的尺寸， 对于 width:100px;的元素再怎么设置margin，像素宽度都不会变的，但border和padding就会改变 offsetWidth的值了。

margin的背景永远是透明的

经常看到的写法：直接全局重置

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

会造成浪费，应该使用：

input, textarea, img, video, object {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
} 

---

8， 注意： 单单使用div {height: 100%;}无效，
要支持 height: 100%; 的话，必须父级要有固定高度。比如 html, body {height: 100%;}有效 ， 但仅仅设置 body 是不行的，因为此时body没有具体的高度值 body {height: 100%;}无效。

---

9, 为了避免移动端的图片展示过大的问题：常常写成如下方式：
img { max-width: 100%; height: auto!important;}
width 和 height 的初始值 是 auto,
min-width 和 min-height的初始值是 auto,
max-width 和 max-height的初始值是 none
超越!important: max-width会覆盖width , !important的权重非常高，比style属性中设置CSS声明还要高，但 max-width 会超越 !important, 覆盖width。
如下 <img src="1.jpg" style="width:480px!important">其中CSS是： img {max-width: 256px;}
结果width是 256px .

假如
min-width: 1400px; 比max-width更大
max-width: 1200px;
则是 min-wdith活了下来，width变为了 1400px

---

10. 盒尺寸四大家族 content, padding,border, margin这四个属性。
    替换元素：内容外观不受CSS影响，有自己的尺寸，有默认的表现规则

content ，默认尺寸为300像素 * 150像素

<img src="1.jpg">没有CSS尺寸和HTML尺寸，则固有尺寸为最终宽高（当前图片尺寸为 278 * 227）
<img src="1.jpg" width="128" height="96">使用HTML尺寸错位最终宽高
img {width: 200px; height: 150px; } <img src="1.jpg" width="128" height="96"> 三者同时存在，使用CSS尺寸作为最终宽高。
假如 img {width: 200px;} <img src="1.jpg">虽然CSS仅仅设置了width,但图片这种“替换元素”具有特定的宽高比例，所以height会按照图片原有比例来计算，最终结果是 200像素 * 163.3像素（图片尺寸为278*227，结果为 200 * 227 / 278 = 163.3）
观点一： 替换元素 和 非替换元素 之间只隔了一个 src属性，没有src属性的 <img>就是一个和<span>类似的普通的内联标签（非替换元素）
观点二：替换元素和 非替换元素之间只隔了一个 content属性， img {content: url(1.jpg)} <img> 和 <img src="1.jpg">是一模一样的效果。 使用 <img src="1.jpg"> img { content: url(2.jpg)}此时显示的是 2.jpg ，但是右键保存这张图片是保存原来的src的图片1.jpg。所以content仅仅改变的视觉效果。
content属性生成的 对象就是 “替换元素”，也是如此， content属性生成的内容 和 普通元素内容才会有很多不同的特性：
（1）content生产的文本 无法选中无法复制，好像设置了 user-select:none 一般，但普通元素的文本可以被选中。注意，别用content生成重要的文本信息，只用content生成一些无关紧要的内容，如序号之类的，也不用担心原本重要的文字被content替换，因为content仅仅只是替换的视觉层。
（2）不能左右 :empty 伪类, 比如 <div></div>使用 div:empty {border-style:dashed;}, 此时使用 div:after {content: '生成内容'},看起来 div里面好像有内容了，但<div></div>实际还是空的, div:empty对 它还是有作用。
content属性几乎都是用在 ::before和::after 这两个伪元素中，IE8仅支持单冒号的伪元素，所以使用 单冒号 :before

---

11. content计数：

    counter-reset: 计算器-重置（起名字，以及规定默认起始值（默认为0）） **
    .xx{counter-reset: jishuqi 2;}表示该计数器的名称是 jishuqi, 默认起始值是 2
    counter-reset 的值可以是 写成负数，小数，但IE和Firefox都认为这是不合法数值，当做默认值0，Chrome支持，但对任何小数都是向下取整**
    可以同时为多个计数器命名：
    .xxx {counter-reset: jishuqi001 2 jishuqi002 2;}
    counter-increment 计数器每次递增的值，默认每次的递增值 是1
    counter() 方法 取得 计数器的 值
    counter(name) /*name是counter-reset的名称*/
counter(name,style) /**其中style的关键字是list-style-type, 因为递增递减的不一定是数字，也可以是英文字母或者罗马字母/
    例如 counter(jishuqi, lower-roman);

<p class="test"></p>
.test {
  /*给计数器命名为jishuqi,默认初始值是2*/
  counter-reset: jishuqi 2;	
  /*在不同标签，没碰到一次counter-increment就递增一次*/
  counter-increment: jishuqi 1;
}
.test:before {
	counter-increment: jishuqi 5;
	/*counter(计数器名称) 是用来显示 计数器的结果*/
  content: counter(jishuqi);	
}
/*如果一个test含有多个，选递增数 最高的那一个*/
.test:before {
	counter-increment: jishuqi 5;
    content: counter(jishuqi);	
    /*记过该递增是 6 不是2*/
  	counter-increment: jishuqi 6;
}

---

12. padding属性
    （内联元素）在不影响当前布局的情况下，优雅的增加点击区域的大小，比如浏览器高度是 1em, 换到移动端就很难点，此时可以使用 a {padding: .25em 0}来增加点击区域的大小，同时又不影响当前的布局。
    块级元素 设置 padding-top: 50px; 会影响布局，但内联元素不会。
    padding百分比，不能有负值，无论是水平方向还是垂直方向都是相对于宽度来计算的
    –ol/ul 列表内置 paddin-left, 单位是 px 不是 em (当font-size是 12px至 14px时，22px是比较好的padding-left的设置值)

兼容效果好的写法：

<button id="btn"></button>
<label for="btn"></label>

button {
   position: absolute;
   clip: rect(0 0 0 0);
}

label {
  display: inline-block;
  line-height: 20px;
  padding: 20px;
}

三条杠和 双层圆点

<i class="icon-menu"></i>
<i class="icon-dot"></i>

.icon-menu {
   	display: inline-block;
    width: 140px; height: 10px;
    padding: 35px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
    background-color: currentcolor;
    background-clip: content-box;
}
.icon-dot {
	  display: inline-block;
	  width: 100px;
	  height: 100px;
	  padding: 10px;
	  border: 10px solid;
	  border-radius: 50%;
	  background-color: currentcolor;
    background-clip: content-box;	  
}

display的默认属性inline。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

---

13. margin
    clientWidth = width + padding offsetWidth = width + padding + border
    元素尺寸： offsetWidth 和 offsetHeight 对应JQuery中的 $().width() 和 $().height() 方法
    元素内部尺寸，对应JQuery的 $().innerWidth()和$().innerHeight() , 可写做 clientWidth 和 clientHeight
    元素外部尺寸，对应JQuery的$().outerWidth() 和 $().outerHeight(), 不仅包括 padding 和 border , 还包括 margin

margin合并: 块级元素的 margin-top和 margin-bottom有时会合并为单个外边距。(因为默认文档流是水平流，所以margin合并的就是垂直方向)
（1）相邻兄弟元素margin合并
p {margin: 1em 0;} <p>第一行</p><p>第二行</p> 第一行和第二行之间的间距还是1em
（2）父级和第一个子元素margin-top合并， 父级和最后一个子元素margin-bottom合并，例如

<div class="container">
    <h2>CSS世界</h2>
</div>

.container {
    max-width: 1920px;
    height: 384px;
    background: url(2.jpg) no-repeat left;
}
.container > h2 {
    font-size: 60px;
    margin-top: 100px; /*这里的原意是 标题 在图片中 下移100px,结果却变成了 图片 下移 100px*/
    /* 也就是 虽然是在 子元素上设置的 margin-top, 但实际就等于是在 父元素上设置了 margin-top*/
    color: #fff;
}

解决方法： 在 父元素添加：
.container {overflow: hidden;}

（3）空块级元素的margin合并
`

第一行

第二行

` CSS是 `p {margin: 1em 0;}` 结果 第一行和 第二行之间的 间隔不是 2em 而是 1em.这里发生了3次margin合并： div 和 第一行p 的margin-bottom合并，然后和第二行 p 的 margin-top 合并，这两次合并是相邻兄弟合并。由于自身是 **空**div，于是前两次合并的 margin-bottom和 margin-top再次合并，这次合并是 空块级元素合并，最终间距还是 1em

margin合并的计算规则： 正正取最大，正负值相加，负负取最小

浏览器默认的字号大小是 16像素， 设置为 1em 就当前像素的1倍

因为margin的合并，在写代码的时候建议保留上下maregin设置，例如 .list {margin-top: 15px; margin-bottom: 15px; } 而不是只写一个 .list {margin-top: 15px;}

margin: auto; : (1) 如果一侧定值，一侧auto,则auto为剩余空间大小。 (2)如果两侧均是auto,则平分剩余空间
.father { width: 300px;} .son { width: 200px; margin-right: 80px; margin-left: auto;} 得到的结果是 左边距 20px,右边距80px.

将上面的margin-right去掉 .son {width: 200px; margin-left: auto; } 则实现的效果正好是块级元素右对齐效果。 所以，如果想让某块状元素右对齐，除了使用 float: right;之外可以使用 margin-left:auto;
对应： margin-left:auto;对应text-align: right右对齐，
margin-right:auto对应text-align:left;左对齐
width: 200px; margin-left:auto; margin-right:auto;对应text-align: center;

水平、垂直都居中对齐:
.father { width: 300px; height: 150px; position: relative; background-color: #FF8C00; } .son { position: absolute; top: 0;left: 0;right: 0;bottom: 0; width: 200px;height: 100px; margin: auto; background-color: #123456; }

---

14，border
border-width: 不支持百分比。
border-width:thin 等同于 1px
border-width:medium 等同于3px (默认值)
border-width:thick等同于 4px

border-style
border-style:none 默认值

重置边框样式
div { border: 1px solid; border-bottom: 0 none; //style设为none或者宽度设为0,两个同时写提高渲染性能。 }

border-style:solid 实线边框
border-style:dashed 虚线边框
border-style:dotted 虚点
CSS属性的border-radius从IE9浏览器才开始支持，要IE8浏览器支持圆角，可以使用dotted类型的边框，然后将另外三个给隐藏掉：
.box { width: 150px;height: 150px; overflow: hidden; } .dotted { width: 100%;height: 100%; border: 149px dotted #cd0000; }

border-style:double 双线边框

之前的 三条杠，可以写成：
.icon-menu { width: 120px; height: 20px; border-top: 60px double; border-bottom: 20px solid; }

border-color
当没有指定border-color的时候，会将当前的 color值作为边框色

增加点击区域的大小: 使用 border-color: transparent; 透明
.icon-clear { width: 16px; height: 16px; border: 11px solid transparent; /*此时点击区域从16*16变成了 38*38*/ }

###第5章，内联元素与流

小写字母x的下边线 就是我们的 基线 baseline , line-height就是指的 两条基线之间的距离， vertical-align的默认值就是基线。vertical-align:middle并不是绝对的垂直居中，middle指的是 基线往上 1/2 x-height的高度，可以理解为 小写字母x 交叉点的那个位置。

x-height是指小写字母x的高度， ex是CSS中的一个相对单位，1ex 就表示 一个小写字母x的高度。
ex的作用在于：不受字体和字号影响的内联元素的垂直居中对齐效果。

默认<div>高度是0，写上文字后就有了高度，<div>的高度是由 line-height决定的，而不是font-size.

行距就是 line-height减去 font-size

使用 line-height 实现的单行文本垂直居中是**“近似处置居中”**

多行文本的垂直居中就需要 line-height和 vertical-align一起才行

* {
  font-size: 14px;
}

body {
  line-height: 1.5;
}

body {
   line-height: 150%;
}

body {
   line-height: 1.5em;
}

上面计算出来行高值都是 1.5 * 14px = 21px ,没有区别，但如果同时还有子元素，例如：
h3 {font-size: 32px;}
p { font-size: 20px;}
则 150% 和 1.5em的结果是：

而 1.5 的结果是：

原因在于， line-height: 150%; 和 line-height: 1.5em; 继承的是 计算值 21px; 考虑到 h3的font-size为 32px; 则半间距就是 (21px - 32px) / 2 = -5.5px; 所以“标题”和“内容”文字发生重叠。
而 line-height: 1.5; 继承的是属性值 1.5， 此时h3的行高是 1.5 * 32px = 48px; p的行高是 1.5 * 20px = 30px;

通常都是使用 line-height: 20px; 或者 line-height: 1.5;

vertical-align，如果是 数值，正值表示相对于基线 往上偏移， 负值表示相对于基线往下偏移。

vertical-align: 百分比 是相对于 line-height来设置的。

vertical-align起作用的前提：应用于 内联元素 以及display值为 table-cell的元素上。（也就是display为 inline, inline-block, inline-table, table-cell的元素）

。。。。剩下的太多文字看得好绕，先跳过。。

---

###第6章，流的破坏与保护

魔鬼属性float，浮动的本质是为了实现文字环绕效果（主要只文字环绕图片显示的效果）。
父级高度坍塌
<div class="father"><img src="me.jpg"></div>
<p class="animal">小猫1，小猫2，...</p>
受制与 父元素father的阻拦，无法和 animal相见

给图片img设置了 属性: float: left; 就会造成父元素高度坍塌，变成：

**float的克星 clear **
clear属性是让自身不能和前面的浮动元素相邻，对后面的浮动元素是不闻不问的， 因为clear属性对‘后面的”元素不管不问，那么 clear:left 和 clear:right的 写法其实就没有啥意义，直接用 clear:both。