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合并
<p>第一行</p>
<div></div>
<p>第二行</p> 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*/
}