读后总结--精通css高级web标准解决方案（第二版）

时间 2019-12-06

标签读后总结精通 css 高级 web 标准解决方案第二栏目 CSS 繁體版

原文原文链接

为啥读这本书

如今前端圈子过于浮躁，掌握基础无疑比掌握一个js框架重要css
css怎么都能写出来，可是要写的好写得快还得多读书html
css魔法推荐的，读完这个读读css揭秘前端
固然，根本缘由仍是以为本身掌握很差html5

开始总结吧~

一. 基础知识

通过上世纪没有 css的痛苦时的混沌时期，人们开始了进步之路
1.语义化标签：提升可读性和更合适默认样式
2.设置ID和类名：上一步的增强，同时也为样式提供钩子（hook）
3.如何分配ID和类名：保持与表现方式无关，应该根据“他们是什么”，而不是“它们外观如何命名”
4.选择ID仍是类名：类应该应用于概念上类似的元素，这些元素能够出如今同一个页面上的多个位置，而ID应该应用于不一样的惟一的元素
5.不该该乱用类名：这样会致使文档增长不少无心义的类，能够结合后代选择器+标签选择器的形式避免
6.删除没必要要的div：好比ul外套div是彻底没有必要的
7.css版本css3

版本     时间    特色
  css1    1996    字体颜色外边距等
  css2    1998    增长浮动，等位以及更高级的选择器
  css2.1  2002    修正上一个版本错误，精确的描述css的浏览器实现
  css3

8.html版本web

版本         时间    特色
  html4.01    1999
  xhtml1.0    2000    4.01的xml版本，语法严格按照xml格式
  html5
  xhtml2              流产

9.文档类型：经过读取doctype来了解试用哪一个文档类型定义（DTD），由此知道使用html哪一个版本，并添加有效性验证
10.浏览器呈现模式：标准模式、混杂模式（向后兼容，但会致使意想不到的bug）、几乎标准模式
11.DOCTYPE切换对应的呈现模式：详情可查看 https://hsivonen.fi/doctype/express

二. css选择器

1.经常使用选择器（现代浏览器制霸）：标签选择器，后代选择器，ID选择器，类选择器，通用选择器
2.伪类选择器：根据文档结构以外的其余条件对元素应用样式浏览器

:link和:visited称为连接伪类，只能应用于锚元素
:hover、:active、:focus称为动态伪类，上能够应用于任何元素
:hover、:active,IE6只能应用于锚连接:focus彻底忽略
:active、:focus,IE7彻底忽略但:hover正常使用

3.高级选择器：IE6不支持，可是不会致使css报错，会忽略。请记住，对于重要功能或站点功能避免使用（不考虑兼容老浏览器除外）缓存

子选择器（>）、相邻选择器（+）：IE7支持，但html元素之间不能有注释app
属性选择器

4.css使用优先级：用户!important>做者!important>做者>用户>浏览器默认
5.选择器使用优先级：全部选择器基数相加最高者显示

内联样式：                   1000
ID选择器：                   100
类、伪类、属性选择器：         10
标签选择器、伪标签选择器：      1

6.继承：有的css属性会继承
7.@import：这种方法能够引用css文件，可是会致使文档加载缓慢，不建议使用
8.注释：/**/主要用于分割css结构
9.css结构分割：做者提倡使用单一css，不敢苟同，可以使用scss等编译工具来优化编码（不过写这本书时候没有），但css结构分割时必须的，以避免结构混乱
10.优化样式表：删除注释，删除无用空格换行，开启gzip压缩

三. 盒模型

1.概述：页面上每一个元素被看作一个矩形框，这个框由元素的内容（content）、内边距（padding）、边框（boder）和外边框（margin）组成。此外，css2.1增长outline属性（IE7如下不支持），与border属性不一样，outline绘制在元素框之上，因此不影响元素的大小或定位
2.标准盒模型宽度：盒子宽度 = contentWidth + padding(Left + Right) + boder(Left + Right) + margin(Left + Right)，即若是设置元素宽度表面只设置content宽度
3.IE盒模型：盒子宽度 = 设置元素的宽度，即padding，boder，margin都从盒子内算起，content占剩下部分（其实挺科学的不是）
4.box-sizing:css3的这一属性能够指定盒模型为标准盒模型仍是IE盒模型
5.外边距叠加：当两个或更多垂直外边距相遇时，它们将造成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者，另外，行内框、浮动框或绝对定位框之间的外边距不会叠加。
6.定位概述：

名称               属性            例            特色
块框（块级元素）   display:block;    p、h一、div     通常从上到下一个一个排列
行内框（内联元素） display:inline;    a、span       水平排列，可以使用垂直内边距、边框、外边距，但不能使用水平内边距、边框、外边距；修改高度惟一方法是修改行高

7.display:inline-block;css2.1新属性（>=IE8）将块级元素像行内元素显示
8.匿名块框：将一些文本添加到一个块级元素的开头时，能够:first-line为元素指定样式

<div>
    匿名块级元素
    <div>块级元素</div>
</div>

9.相对定位：相对定位的元素，它将出如今它所在位置，而后经过设置垂直或水平位置，让这个元素“相对于”他的起点移动。不管是否移动，元素仍然占据原来的空间。
10.绝对定位：

绝对定位使元素的位置与文档流无关，所以不占据空间。
绝对定位元素相对于距离它最近的那个已定位的祖先元素肯定。若是元素没有已定位元素，那么就相对于画布或html元素
z-index会控制这些框的叠放次序。
IE6bug:相对于的相对定位框的右边或下面时，相对定位框须要设定尺寸，要否则会相对于画布

11.浮动

浮动的框能够左右移动，知道它的外边缘碰到包含框或另外一个浮动块的边缘。
浮动框再也不文档的普通流中，因此普通流中的块框表现的就像浮动框不存在同样
浮动框会让文本元素缩进环绕
阻止环绕能够为其使用clear属性（其原理是给文本内容足够且精确的高度）
父元素内部的子元素若是使用浮动会使得父元素高度塌陷

父元素高度塌陷和清除浮动的解决方法

.clearfix:after{content:'';display:table;clear:both}
.cleafix{*zoom:1;}
或者
.clearfix:after{content:'';display:block;overflow:hidden;clear:both}
.cleafix{*zoom:1;}

四. 背景图像

1.背景图像基础

基础用法:background-image:url(/img/pattern.gif);
平铺:background-repeat:repeat-x;
背景颜色（没有被覆盖图片的区域会显示此颜色，在渐变末尾比较经常使用）:background-color:#ccc;
能够为背景区域设定宽高，多用于显示logo
背景图片显示位置（标题上添加项目符号，如点）:background-position:left center;
background-position也能够设置数字;若是是像素,会以图片左上角为对应点出如今背景图片指定位置;若是是百分比:会以图片上的指定数字为对应点
背景css简写:background:#ccc url(/img/bullet.gif) no-repeat left center;

2.圆角框

固定宽度圆角框:两个圆角背景图一个位于框顶一个位于框底

<div class="box">
    <h2>HeadLine</h2>
    <p class="content">Content</p>
</div>

.box{
    width:419px;
    background:#effce7 url(/img/bottom.gif) no-repeat left bottom;
}

.box h2{
    background:url(/img/top.gif) no-repeat left top;
}

p.content也能够设置背景颜色 但要保证repeat-y

滑动门圆角框:与固定宽度类似，不过把圆角设定在左上、左下、右上、右下并指定父容器宽度，嵌套很复杂不推荐

css3实现圆角1：多个背景图片

<div class="box">
    <h2>HeadLine</h2>
    <p>Content</p>
</div>

.box{
    background-image: url(/img/top-left.gif),
                      url(/img/top-right.gif),
                      url(/img/bottom-left.gif),
                      url(/img/bottom-left.gif),
    background-repeat: no-repeat,
                       no-repeat,
                       no-repeat,
                       no-repeat,
    background-position: top left,
top right,
bottom left,
bottom right,
}

不支持浏览器会显示直角框

css3实现圆角2：border-radius

.box{
    -moz-border-radius:1em;
    -webkit-border-radius:1em;
    border-radius:1em;
}

css3实现圆角3：border-image
```
.box{
    -webkit-border-image:url(/img/corners.gif) 25% 25% 25% 25% / 25px round round;
}
```
将背景图片分为9个宫格中间部分为内容其余部分为边框

3.阴影

简单css阴影： div.阴影 > img

<div class="img-weapper">
    <img src="xxx.jpg" width="300" height="400"></img>
</div>

.img-wrapper{
    background: url(/img/shadow.gif) no-repeat bottom right;
    // 为了div具备水平伸展性把div浮动
    clear:right;
    float:left;
}
img{
    margin:-5px 5px 5px -5px;
    /* 也能够用相对位置进行偏移
        position:relative;
        left:-5px;
        top:-5px;
     */
}

box-shadow

img{
    -webkit-box-shadow:3px 3px 6px #666;
    -moz-box-shadow:3px 3px 6px #666;
    box-shadow:3px 3px 6px #666; // 垂直偏移 水平偏移 阴影宽度 阴影颜色
}

4.透明度

css不透明度：其子元素会继承不建议使用

.alert{
    opacity:0.8;
    filter:alpha(opacity=80); // ie老浏览器使用方法
}

RGBa

.alert{
    background-color:rgba(0,0,0,0.8);
}

PNG透明度:png文件支持透明度，可是IE6不直接支持，hack方法以下或使用htc文件显示

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=/img/my-image.png',sizingMethod='crop');
// 此行代码会致使css无效，建议单独提出或者使用ie6条件注释

五. 对连接应用样式

1.简单的连接样式

连接伪类选择器

:hover{} // 鼠标悬停处的元素
:active{} // 被激活点击的元素
:focus{} // 经过键盘移动到元素上时，应该与悬停(hover)同样

连接伪选择器浏览器支持：IE7如下不支持在除连接以外的其余元素使用伪类选择器
连接伪选择器顺序很重要，不对的话可能致使失效
```
a:link, a:visited, a:hover, a:focus, a:active
```

2.连接下划线

简单的连接修饰：text-decoration: none/underline;或者边框替代

奇特的连接下划线

// 图片下划线
a:link, a:visited {
    color:#666;
    text-decoration:none;
    background:url(/img/underline.gif) repeat-x left bottom;
}

//动画下划线
a:hover, afocus, a:active{
    background-image:url(/img/underline-hover.gif);
}

3.已访问连接的样式：防止用户回溯能够在visited选择器中加一个已访问图片

// 图片下划线
a:visited {
    padding-right:20px;
    background:url(/img/underline.gif) no-repeat right middle;
}

4.为连接目标设置样式：若是想为被连接的锚点设置样式能够选择:target伪类选择器，为css3属性
5.突出显示不一样类型的连接：为了区分站内、站外、邮件、等不一样种类连接形式能够在连接后加一个图片区分

a[href^="http:"] {
    padding-right:20px;
    background:url(/img/externalLink.gif) no-repeat right top;
}

6.建立相似按钮的连接：连接只能用于请求数据，而不是更改数据

a{
    display:block;
    width:6.6em;
    line-height:1.4;
    text-align:center;
    text-decoration:none;
    border:1px solid #66a300;
    background-color:#8cca12;
    color:#fff;
}

简单的鼠标改变颜色效果

a:hover, a:focus{
    background-color:#f7a300;
    border-color:#ff7400;
}

鼠标改变图像效果:原理和上面同样，不过须要把text-indent设置为看不见的位置，而且图片和按钮css大小一致
Pixy鼠标改变图像效果:使用上述方法会出现由于再次请求而致使图片闪烁问题，建议使用雪碧图方法，不过在IE上依旧会再次请求致使闪烁，使用下面css能够缓存IE背景图片
```
html{
    filter: expression(document.execCommand("BackgroundImageCache",false,true));
}
```

纯css工具提示：当鼠标悬停在元素上时出现提示，核心代码以下：

a.tooltip{
    position:relative;
}
a.tooltip:hover span{
    display:block;
    position:absolute;
    top:1em;
    left:2em;
}

六. 列表样式和建立导航条

1.基本列表样式

为了添加定制的项目符号，可使用list-style-image属性，可是这种方法对图像位置控制能力不强。更经常使用的方法是关闭项目符号，而且将定制的项目符号做为背景添加到列表元素上

须要将列表的内外边距设置为0

ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
li{
    background:url(/img/bullet.gif) no-repeat 0 50%;
    padding-left:30px;
}

2.水平导航条:实现思路float:left;