《精通CSS-高级Web标准解决方案》笔记

最新推荐文章于 2020-02-03 17:04:15 发布

门豪杰

最新推荐文章于 2020-02-03 17:04:15 发布

阅读量865

点赞数

分类专栏： ▶︎前端开发文章标签： web

本文链接：https://blog.csdn.net/qq_31805821/article/details/76599467

版权

▶︎前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

第一章：基础知识
- 标记简史
- 文档类型和DOCTYPE
- 浏览器模式和DOCTYPE切换
第二章：为样式找到应用目标
- 选择器
- 层叠和特殊性
- 对文档应用样式
第三章：可视化格式模型
- 盒模型概述
- 定位概述
- 浮动
第四章：背景图像效果
- 背景图像基础
- 圆角框
- 简单的css投影
- 不透明度
- 图像替换
第五章：对链接应用样式
- 简单的链接样式
- 让下划线更有趣
- 为链接目标设置样式
- 突出不同类型的链接
- 创建类似按钮的链接
- 纯CSS工具提示
第六章：对列表应用样式和创建导航条
- 基本列表样式
- 创建基本的垂直导航条
- 创建基本的水平导航条
- 创建图形化导航条
- 滑动门式导航
- Suckerfish下拉菜单
- css图像映射
- 图像远距离翻转
第七章：对表单和数据表格应用样式
- 对数据表格应用样式
- 简单的表单布局
- 复杂的表单布局
第八章：布局
- 计划布局
- 设置基本结构
- 基于浮动的布局
- 固定宽度、流式和弹性布局
- faux列
- 高度相等的列
- CSS3列
第九章：bug和修复bug
- 常见的css错误
- 捕捉bug的基本知识
- 拥有布局
- 分级浏览器支持
实例研究：Roma Italia
实例研究：Climb the Mountains

图床不可用, 图片已经都丢失了, 非常心痛…

第一章：基础知识

标记简史

使用有意义的标记

使用有意义的标记使得页面更容易被处理。同时使用有意义的标记可以使得直接设置元素的样式，而不需要添加其他的表示符。

ID与class的区别

ID可以用于标识页面上的特定元素（比如站点导航），或者用来标识持久的结构性元素，例如主导航或内容区域，还可以用来标识一次性元素，例如某个链接或表单元素。

类非常适合标识内容的类型或其他相似条目。

为一个ID或者class命名时应该根据其功能来为其命名而不是其表现的外观。因为外观可能改变但是动能却一般不改变。

至于到底选择使用类还是ID，只有确定其只出现一次并且功能也很特殊时采才用ID，否则就采用class。

注意class也不能过度使用，必要时再用。同时不需要给每个元素用类来标识，可以给某个容器赋予一个类名，然后再分别对其中的元素应用不同的样式就好。

div和span

div实际上代表部分（division），它可以将文档分割为几个有意义的区域。为了避免不必要的标记，应该只在没有元素能够实现区域分割的情况下使用div元素。

div可以用来对块级元素进行分组，而span用来对行内元素进行分组或标识。

微格式

一套标准的命名约定和标记模式来表示人、地点或日期等类型的信息，基于vCard和iCalendar等现有数据格式。有利于内容被识别和提取。

文档类型和DOCTYPE

DTD（文档类型定义）是一组机器可读的规则，定义了XML或者HTML的特定版本中允许有什么，不允许有什么。

DOCTYPE描述了使用哪个DTD。

DOCTYPE有两种风格，严格和过渡。严格模式不允许使用已废弃的元素。

一般情况下在文档首加<!doctype html>

浏览器模式和DOCTYPE切换

浏览器模式主要包括混杂模式和标准模式。标准模式浏览器根据规范呈现页面；混杂模式页面以向后兼容的方式呈现，通常模拟老式浏览器的行为以防止老站点无法工作。

根据DOCTYPE是否存在呈现模式，被称为DOCTYPE切换。浏览器根据DOCTYPE是否存在以及使用哪种DTD来选择要使用的呈现方法。

第二章：为样式找到应用目标

选择器

关于各种选择器我的另一篇笔记里有较详细的介绍

层叠和特殊性

层叠

层叠的重要性排序

标有!important的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器或者用户代理应用的样式

所以一般情况下作者样式是比用户样式有限的，但是如果标有!important的话这情况就不一样了。

注意：按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现，它的权重就越大。如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，主样式表中的所有声明在后。

特殊性

特殊性详见我的另一篇笔记

这里有一个小技巧
我们对一般的元素应用一般的样式，特殊的元素再覆盖掉其即可，比如

p{color: black;}
p.danger{color: red;}

但是因为元素可以从很多地方获得样式。所以我们应该让一般性样式非常一般，特殊性样式非常特殊。比如某一个元素若是多次被覆盖，导致非常混乱的结果。那么我们其实可以删除这个元素，只在其需要的地方显式地应用它就好了。

对文档应用样式

导入外部样式表有两种方法。即链接和导入。
链接： <link href="/css/basic.css" rel ="stylesheet" type="text/css"/>
导入： <style>@import url(/css/basic.css);<style>

关于链接中各个属性的含义可见笔记

需要注意的是@import方法导入速度相对于链接方式来说是要慢一点的。

同时多个样式表由于其数量较多，所以传输速度比不上单个的合并样式表。所以一个结构良好的单一CSS文件可以地显著提高下载速度。

设计代码的结构

当文档大了起来之后，我们需要对样式表做一些整理使其易于维护和查找。

我们最好把样式表分为几大块。比如按照这样的顺序

一般样式
1. 主体样式
2. reset样式
3. 链接
4. 标题
5. 其他元素
辅助样式
1. 表单
2. 通知和错误
3. 一致的条目
页面结构
1. 标题、页脚和导航
2. 布局
3. 其他页面结构元素
页面组件
1. 各个页面
覆盖

每个大块之间用大段的注释分隔开来。同时标上特殊的符号比如@便于后期查找。比如可以查看模板代码。

删除注释和优化样式表

注释会使CSS文件显著加大。

减小文件大小的最好方法可能是启用服务器端压缩，比如Apache服务器中用mod_gzip或者mod_deflate进行GZIP压缩。

第三章：可视化格式模型

盒模型概述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1beez0d-1574646148486)(http://orqka55ze.bkt.clouddn.com/15015943752186.png)]

盒模型指定元素如何显示以及（在某种程度上）如何相互交互，它由元素的内容、内边距、边框和外边距组成。

IE和盒模型

IE6及更早的IE版本在混杂模式中使用了非标准盒模型，width属性不是内容的宽度，而是内容、内边距和边框的宽度总和。

外边距叠加

当两个或者更多垂直外边距相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度重的较大者。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-02Rd4UAu-1574646148488)(http://orqka55ze.bkt.clouddn.com/15015952294280.png)]

当一个元素包含在另一个元素中时，它们的顶或底外边距也会发生叠加。
叠加后的外边距如果碰到另一个元素的外边距，它还会发生叠加。
总之就是如果外边距直接接触（没有边框）的情况下，外边距总是会合并的。

定位概述

可视化格式模型

CSS中三种基本的定位机制：普通流、浮动和绝对定位。

块级元素从上到下一个接一个排列，元素之间的垂直距离由元素的垂直外边距计算出来。

水平可调节，垂直不可调节：行内元素在一行中水平排列，可以使用水平内边距、边框和外边距调整行内元素之间的水平间距，但是垂直内边距、边框和外边距不影响行内的高度。

行内元素不能设置宽度或高度：修改行内元素尺寸的唯一办法是修改行高或者水平边框、内边距、外边距。

display属性可以修改生成的框的类型，比如block就让元素表现的和块级元素一样，none就使其不生成框，也就不会在正常文档流中出现。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CLdLhni0-1574646148491)(http://orqka55ze.bkt.clouddn.com/15016421076442.png)]

display: inline-block可以让元素像行内元素一样水平排列，并且元素可以像行级元素一样设置宽度、高度、垂直外边距和内边距。

相对定位

通过设置水平或者垂直位置，让这个元素“相对于”它的起点移动。使用相对定位时，无论是否移动，元素仍然占据原来的空间。所以移动元素会导致它覆盖其他框。

#mybox{
  position: relative;
  left: 20px;
  top:20px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XVbMxZ3G-1574646148495)(http://orqka55ze.bkt.clouddn.com/15016423165840.png)]

绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位元素不存在一样。

绝对定位元素的位置是相对于距离它最近的那个**已定位（可以是相对定位或者绝对定位）**的祖先元素确定的。如果没有已定位的祖先元素，那么它的位置是相对于初始包含块的。这个初始包含块可能是画布或者HTML元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mpxzJR59-1574646148498)(http://orqka55ze.bkt.clouddn.com/15016425188773.png)]

绝对定位不仅可以覆盖页面上的其他元素，还可以设置z-index属性来控制元素的叠放次序。

固定定位

固定定位（position: fixed）是绝对定位的一种，差异在于固定元素的包含块是视口，这使得能够创建总是出现在窗口中相同位置的浮动元素。

浮动

浮动的元素可以左右移动，直到它的外边缘碰到包含元素或另一个浮动元素的边缘。

浮动元素不在普通文档流中，所以普通文档流中的块级元素表现得就像浮动元素不存在一样。所以有的时候这就会导致浮动元素与底下的元素有重叠。

值为left的浮动元素有向左上浮动的趋势，值为right的浮动元素有向右上浮动的趋势。注意向上的趋势的优先级大于向左/右的趋势的优先级。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCYci3Oa-1574646148500)(http://orqka55ze.bkt.clouddn.com/15016426613365.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IqtLjTqG-1574646148505)(http://orqka55ze.bkt.clouddn.com/15016426656274.png)]

行框与清理

浮动的元素后面有一个文档流中的元素，那么这个元素会表现得就像浮动元素不存在一样，但是元素内的文本内容会受到浮动元素的影响，会移动以留出空间。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Hhzl4xa-1574646148507)(http://orqka55ze.bkt.clouddn.com/15016430258201.png)]

想要阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性。

clear属性可以是left、right、both或none。它表示框的哪边不应该挨着浮动框。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
img
{
	float:left;
}
p.clear
{
	clear:both;
}
</style>
</head>
<body>

<img src="logocss.gif" width="95" height="84" />
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>

</body>
</html>

显示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cWOnRFIU-1574646148509)(http://orqka55ze.bkt.clouddn.com/15016433435117.jpg)]

在清理元素时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面，本质上是为元素留出了垂直空间来达到清理浮动的目的。

应用值为hidden或者auto的overflow属性有一个副作用，会自动清理包含的任何浮动元素。这种方法在某些情况下会产生滚动条或截断内容。

第四章：背景图像效果

背景图像基础

垂直渐变

我们可以把一个渐变图像（很高但很窄，从上到下渐变）的图像横向重复，这样我们就实现了一个很高也很宽的渐变图像。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rA0uuDZf-1574646148514)(http://orqka55ze.bkt.clouddn.com/15016526765047.jpg)]到[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jbpFo6jn-1574646148516)(http://orqka55ze.bkt.clouddn.com/15016526557221.jpg)]

但是这样做如果内容太多可能会导致内容超出图像高度。对此问题我们可以设置一个背景色与图像底部的色彩相同，这样就算内容超出了那么图像和背景之间的转换仍然看不出来。比如在上图底部设置白色背景。

给项目添加项目符号

我们可以设置元素的内容设置一个左内边距，然后让背景图像置左，这样就有一种添加了项目符号的感觉。

h1{
    padding-left: 50px;
    background: url(img/corners.jpg) left no-repeat;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h9iQ68M4-1574646148522)(http://orqka55ze.bkt.clouddn.com/15016600284062.jpg)]

圆角框

可以看下我的这篇博文自定义圆角框实现浅析

山顶角

不需要图片，利用css将图片多个矩形背景重叠而使得边角得到类似圆角的效果，这篇博文对此解释的比较详细

不过现在的圆角一般用border-radius就可以比较好地实现了。

border-image工作原理是把图片分成9块，然后把他们应用到元素边框的边和角。

.box{
  /*border-image里面参数分别 对应background-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat五个参数*/
  border-image: url(image.png) 25% 25% 25% 25% /25px round round;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dk3mFAQy-1574646148526)(http://orqka55ze.bkt.clouddn.com/15016700131636.png)]

简单的css投影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K1DBoAcx-1574646148531)(http://orqka55ze.bkt.clouddn.com/15016708153753.jpg)]

我们可以利用photoshop等软件，创建一个阴影背景的图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9CnhY8gk-1574646148534)(http://orqka55ze.bkt.clouddn.com/15016709375576.jpg)]

然后以它为背景，我们使用负的外边距使得图像被偏移。这样就形成了阴影的效果。

不过这个类似地还有文本阴影效果（text-shadow）和盒子阴影效果（box-shadow）很方便地被提供。

不透明度

css不透明度

css不透明度除了对背景生效之外，应用它的元素的内容也会继承它。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gfOHGSyS-1574646148538)(http://orqka55ze.bkt.clouddn.com/15016712883764.jpg)]

opacity：不透明度属性，该属性的值越低约透明。范围0~1之间。


.alert{
  background: #000;
  border-radius: 2em;
  opacity: 0.8;
  filter: alpha(opacity=80); /*IE适配*/
}

RGBa

RGBa是一种同时设置颜色和不透明度的机制。RGB代表红色、绿色和蓝色，a代表alpha透明度。

上面的例子可以写成：

.alert{
  background: rgba(0,0,0,0.8);/*0.8表示不透明度是80%，也就是透明度是20%*/
  border-radius: 2em;
}

PNG透明度

PNG文件格式支持alpha透明度。

图像替换

图像替换（image replacement）可以像平常一样将文本添加到文档中，然后使用CSS隐藏文本并在它的位置上显示一个背景图像，这样搜索引擎仍然可以搜索HTML文本，而且如果禁用CSS，文本仍然会显示。

第五章：对链接应用样式

简单的链接样式

:link伪类选择器用来寻找没有被访问过的链接，:visited伪类选择器用来寻找被访问过的链接。

:hover动态伪类选择器用来寻找鼠标悬停处的元素，:active动态伪类选择器用来寻找被激活的元素（对于链接来说，激活发生在链接被单击时）。

在定义鼠标悬停状态时，最好添加上:focus伪类，也就是说定义:hover的时候我们就同时把:focus定义上，这样再通过键盘移动到链接上时，这让链接显示的样式与鼠标悬停时相同。

为了确保后定义的伪类覆盖之前定义的伪类，应用链接样式的顺序为：a:link、a:visited、a:hover、a:focus、a:active（可以记为LVHFA）。

让下划线更有趣

设计人员往往不喜欢链接的下划线，因为下划线让页面看上去比较乱。有几种不错的办法比如

a:link, a:visted{
    text-decoration: none;
    font-weight: bold;
}

然后在悬停在上面或者激活链接时重新应用下划线

a:hover, a:focus, a:active{
    text-decoration: underline;
    fonto-weight: bold;
}

我们还可以用小图片实现一些特殊的下划线

为链接目标设置样式

使用:target伪类可以很方便地实现跳转

<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DL5D11Xk-1574646148540)(http://orqka55ze.bkt.clouddn.com/15016824143912.gif)]

突出不同类型的链接

对于外部链接我们可以使用一些小图片在后面提示链接的类型。比如维基百科中[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pz6Snhsf-1574646148544)(http://orqka55ze.bkt.clouddn.com/15016830089067.jpg)]

这里有一个现成的链接图片（[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1M2okBk-1574646148547)(http://orqka55ze.bkt.clouddn.com/15016831230869.gif)]）

对于如何分辨是外部链接还是内部链接有一个不错的方法。

a[href^="http:"]{
    background-image: url(xxx.gif) no-repeat right top;
    padding-right:10px;
}

/*然后再对自己的域名豁免*/
a[href^="http://www.yoursite.com"],
a[href^="http://yoursite.com"]{
    background-image: none;
    padding right: 0;
}

我们还可以用$=属性选择器来判断特定后缀的文件比如.pdf,.doc来进行操作。

关于属性选择器详见

创建类似按钮的链接

a{
  display: block;
  width: 6.6em;
  line-height: 1.4;/*垂直居中，文本换行时，高度是所需高度的两倍*/
  text-align: center;
  text-decoration: none;
  background-color: #8cca12;
  color: #ffffff;
  border: 1px solid #66a300;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1RBzebH-1574646148554)(http://orqka55ze.bkt.clouddn.com/15016836373239.png)]

链接应该只用于GET请求，决不要用于POST请求。

简单的翻转

使用伪类创建翻转效果：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyc2ib7K-1574646148558)(http://orqka55ze.bkt.clouddn.com/15016837245142.gif)]

我们还可以使用不同的背景图像来实现翻转的效果。

CSS spirit（css精灵）

CSS spirit（css精灵）是包含许多不同图标、按钮或图形的单个图像。我们只需要在网站不同的地方显示这单个图像的不同位置。这样可以减少请求数量。

用CSS3实现翻转

-webkit-box-reflect属性可以创建对象的倒影，这个属性包含倒影的位置和距离以及蒙版图像这几个参数。可以使用-webkit-gradient值自动生成这个蒙版。

a{
  display: block;
  width: 6.6em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  background-color: #8cca12;
  color: #ffffff;
  border: 1px solid #66a300;
  border-radius: 6px;
  background-image: linear-gradient(to bottom, #abe142,#67a400);
  text-shadow: 2px 2px 2px #66a300;
  box-shadow: 2px 2px 2px #ccc;
  -webkit-box-reflect: below 2px -webkit-gradient(linear, left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BW48Wsx-1574646148561)(http://orqka55ze.bkt.clouddn.com/15016841475431.png)]

纯CSS工具提示

<style>
a.tooltip{
  position: relative;
}
a.tooltip span{
  display: none;
}
a.tooltip:hover span,a.tooltip:focus span{
  display: block;
  position: absolute;
  top: 1em;
  left: 2em;
  padding: 0.2em 0.6em;
  border: 1px solid #996633;
  background-color: #ffff66;
  color: #000000;
}
</style>
<p>
    /*span主动隐藏，借助于已经绝对定位的a元素而定位的span中的内容得以显现。*/
    <a href="#" class="tooltip">aaaaa<span>bbbb</span>rrrrrr</a>
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHpRlpEN-1574646148564)(http://orqka55ze.bkt.clouddn.com/15016841815188.png)]

第六章：对列表应用样式和创建导航条

基本列表样式

用list-style-image属性可以添加定制的项目符号。但是，这种方法对项目符号图像的位置控制能力不强。

更常用的方法是关闭项目符号，并将定制的项目符号作为背景添加到元素上，然后可以使用背景图像的定位属性精确地控制自定义项目符号的对准方式。

ul{
    list-style-type: none;
}
li{
    background: url(tick.png) no-repeat left;
    padding-left: 30px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oR0A2HZB-1574646148567)(http://orqka55ze.bkt.clouddn.com/15017293172400.jpg)]

创建基本的垂直导航条

效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6zPAIwC-1574646148571)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E7%AB%96%E7%9B%B4%E5%AF%BC%E8%88%AA%E6%A0%8F.gif)]

代码请点击

创建基本的水平导航条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8kNRr72K-1574646148573)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E6%BC%94%E7%A4%BA.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZB37otgl-1574646148573)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E6%BC%94%E7%A4%BA-1.gif)]

代码请点击

创建图形化导航条

显式的设置宽度和高度会导致可维护性问题，所以不显式的设置宽度，每个按钮的宽度由<a>文本的尺寸决定，而是给每个<a>元素的左边和右边设置3em的内边距，并使用行高让<a>元素垂直居中。

要想实现如下的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvdqEeUD-1574646148574)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E6%BC%94%E7%A4%BA-2.gif)]

我们需要一个背景图片[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c5T7UHIs-1574646148574)(http://orqka55ze.bkt.clouddn.com/mainNavBg.gif)]将其x轴重复。
我们还需要一个[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KeR7JuIv-1574646148575)(http://orqka55ze.bkt.clouddn.com/divider.gif)]图片用来表示间隔，将其y轴重复。

代码请点击

滑动门式导航

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQmxjHtY-1574646148575)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E6%BC%94%E7%A4%BA-3.gif)]

核心就是在li定义一个置右的较宽的右边距图像，然后在a上定义一个置左的较窄的左边距图像，通过内容的扩充使得右边图像被左边图像覆盖的部分越来越少来达到边框被扩充的效果。

代码请点击

Suckerfish下拉菜单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMCn8j8Y-1574646148576)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E6%BC%94%E7%A4%BA-4.gif)]

这里主要用到的一个技术核心就是默认下拉框的内容定位于其包含块非常远，比如left:-999em;，当鼠标悬浮在上面时我们让其回归该有的位置left:auto;即可。这也是一种另类的隐藏的好方法。

代码请点击

css图像映射

简单来说就是当我们的鼠标停留在图片上不同的区域时就能展示一些特殊的东西。

比如
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPVVCypM-1574646148576)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E6%BC%94%E7%A4%BA-5.gif)]

这个技术主要是将图中的这个背景图片进行相对定位。然后对不同的链接元素进行相对于图片的绝对定位，通过设置链接为有长宽的块级元素，来达到当鼠标停留在特定的区域时显现边框的效果。

代码请点击

图像远距离翻转

这次情况和上面不太一样，我们要让两个相距较远的元素也能有对应的关系比如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rsio0Vnq-1574646148577)(http://orqka55ze.bkt.clouddn.com/%E7%AE%80%E5%8D%95%E6%BC%94%E7%A4%BA-6.gif)]

这个技术的关键就是利用两个span元素镶嵌在一个a元素中，其中一个span元素代表图像上的框，其中一个span元素代表右边的链接。当停留在任何一个span元素上时，就相当于停留在这个a元素上，那么此时另外一个span元素也被激活并且表现出相应的特性。

代码请点击

第七章：对表单和数据表格应用样式

对数据表格应用样式

表格特有的元素

summary和caption,caption基本上用作表格的标题。summary用于表格标签，用来描述表格的内容。与图像的alt文本相似，summary应该总结表格中的数据。所以summary一般是不显示出来的。
利用thead,tbody和tfoot可以将表格划分成几个逻辑部分。比如我们可以将列标题放到thead中，那么我们就能够对tbody部分进行一些特殊的处理了。
行标题和列标题应该使用th而不是td标记。但是某些内容既是内容又是数据，那么应该使用td标记。
th可以设置scope="col"或scope="row"的属性来定义是列标题还是行标题。
col和colgroup，col表示整列，colgroup能够使用col元素对一个或多个列定义和分组。

对表格应用样式

CSS规范有两个表格边盒模型，单独的和叠加的。大多数浏览器默认使用单独（双边框）模型。

没有应用样式之前是这样的。可以看到非常的杂乱
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XubSDsmE-1574646148578)(http://orqka55ze.bkt.clouddn.com/15020738165969.jpg)]
应用样式之后
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LmTnNTx4-1574646148578)(http://orqka55ze.bkt.clouddn.com/15020769175107.jpg)]

代码请点击

我们还可以对表格进行进一步的优化以更好的形式来表现。作者使用双边框来完成更好的表现。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oY1Ajwb3-1574646148579)(http://orqka55ze.bkt.clouddn.com/15020788487937.jpg)]

代码请点击

简单的表单布局

fieldset用来对相关信息块进行分类。

为了识别每个fieldset元素的用途，可以使用legend元素，legend就像fieldset的标题，它常常在fieldset的顶部垂直居中，并且向右缩进一点。legend在不同浏览器有不同的默认样式。

表单标签

label元素用来帮助添加结构和增加表单的可用性和可访问性。

标签和表单控件关联起来的方法有下面两种：

隐式方式：

<label>email<input name="email" type="text"/></label>

显式方式：

<label for="email">email</label>
<input name="email" id="email" type="text" />

label不会呈现任何效果，但当在label中点击文本，就会触发与之相关的控件。其for属性与id属性相同，可用来绑定另一个元素。

在表单输入控件和标签之间创建关联需要id属性，将表单数据发送回服务器需要name属性。id和name不必相同，但为了保持一致，尽可能让它们相同。

注意form元素没有的结尾

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJHTxHrd-1574646148579)(http://orqka55ze.bkt.clouddn.com/15021060382603.jpg)]

代码请点击

复杂的表单布局

可访问的数据输入元素

<style>
  label {
    float: left;
    width: 10em;
    cursor: pointer;
  }
  #monthOfBirthLabel,#yearOfBirthLabel{
    text-indent: -1000em;   /*隐藏标签*/
    width: 0;       /*防止标签影响布局*/
  }
  input#dateOfBirth{
    width: 3em;
    margin-right: 0.5em;
  }
  select#monthOfBirth{
    width: 10em;
    margin-right: 0.5em;
  }
  input#yearOfBirth{
    width: 5em;
  }
</style>
<div>
    <label for="dateOfBirth">Date of Birth:</label>
    <input name="dateOfBirth" id="dateOfBirth" type="text">
    <label for="monthOfBirth" id="monthOfBirthLabel">Month Of Birth</label>
    <select name="monthOfBirth" id="monthOfBirth">
        <option value="1">1月</option>
        <option value="2">2月</option>
        <option value="3">3月</option>
    </select>
    <label for="yearOfBirth" id="yearOfBirthLabel">Year Of Birth</label>
    <input name="yearOfBirth" id="yearOfBirth" type="text">
</div>

多列复选框

<style>
  fieldset#favoriteColor{
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
  }
  #favoriteColor h2{     /*为了避免浏览器处理legend定位的方式不一致，将标题用作标签*/
    width: 10em;
    float: left;
    font-weight: normal;
  }
  #favoriteColor .col{
    width: 8em;
    float: left;
  }
  #favoriteColor label{
    float: none;    /*复选框不浮动*/
  }
</style>
<fieldset id="favoriteColor">
    <h2>FavoriteColor:</h2>
    <div class="col">
        <div>
            <label><input type="checkbox" class="checkbox" id="red" name="red" value="red">red</label>
        </div>
        <div>
            <label><input type="checkbox" class="checkbox" id="yellow" name="yellow" value="yellow">yellow</label>
        </div>
        <div>
            <label><input type="checkbox" class="checkbox" id="blue" name="blue" value="blue">blue</label>
        </div>
    </div>
    <div class="col">
        <div>
            <label><input type="checkbox" class="checkbox" id="green" name="green" value="green">green</label>
        </div>
        <div>
            <label><input type="checkbox" class="checkbox" id="orange" name="orange" value="orange">orange</label>
        </div>
        <div>
            <label><input type="checkbox" class="checkbox" id="other" name="other" value="other">other</label>
        </div>
    </div>
</fieldset>

提交按钮

为了在整个操作系统中保持一致，在一些操作系统上禁止修改input按钮样式，但是button元素不受这些限制影响。button在IE6和IE7提交元素本身的内容，而不是value属性的内容（非IE6和IE7浏览器的行为）。

<style>
  button{
    width: 200px;
    height: 50px;
    border: 1px solid #989898;
    border-radius: 6px;
    background: linear-gradient(to bottom,yellow,greenyellow) #c5e063 bottom left repeat-x;
    box-shadow: 2px 2px 2px #ccc;
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #666;
  }
</style>
<p>
    <button type="submit">Book Now</button>
</p>

最后的效果如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Hz33qhI-1574646148580)(http://orqka55ze.bkt.clouddn.com/FireShot%20Capture%201%20-%20Advanced%20Form_%20-%20http___localhost_63342_Desktop_Exam.png)]

第八章：布局

计划布局

先把页面划分为大的结构性区域，比如容器、页眉、内容器和页脚。
设计有多少个不同的内容区域？它们有什么差异？从布局的角度来说，内容区域是确实不一样，还是可以被同等看待？这些区域可以被视作是承重墙。
最后在各个内容区域中寻找不同的布局结构。是否需要把某些信息分为两列、三列或四列？这些区域可以被视作是隔离墙。
结构设计完成之后，可以开始关注不同类型的内容。给每个内容块起一个有意义的名称，然后分析它们的关系。
查看每个内容块的结构，看看不同的类型中是否有共同的模式。应该尽量采用一般的类名，然后根据上下文应用样式。
找出模式并确定命名约定后，最好马上开始定义将使用的元素。注意提前定义元素比随时添加元素好的多。

设置基本结构

.wrapper {
    width: 920px;/*设置预定的宽度*/
    margin: 0 auto;/*margin设置为0可以让设计自动置中*/
}
</style>
<div class="wrapper">
    <div class="header">
        headerheaderheaderheader
    </div>
    <div class="content">
        contentcontentcontent
    </div>
    <div class="footer">
        footerfooterfooterfooter
    </div>
</div>

基于浮动的布局

双列布局

让一个元素向右浮动，一个元素往左浮动，中间留下空间视作隔离墙

<style>
  .wrapper {
    width: 920px;/*设置预定的宽度*/
    margin: 0 auto;/*margin设置为0可以让设计自动置中*/
    overflow: hidden;
  }
  .content .primary{
    width: 650px;
    padding-right: 20px;/*因为主内容向右浮动，而且主内容左边有20px的隔离带，所以右边也应该留出20px的空间*/
    float: right;
    display: inline;
  }
  .content .secondary{
    width: 230px;
    float: left;
    display: inline;
  }
  .content{
    overflow: hidden;
  }
</style>
<div class="wrapper">
    <div class=""header>
        我是页首
    </div>

    <div class="content">
        <div class="primary">
            我是主内容
        </div>

        <div class="secondary">
            我是次内容
        </div>
    </div>

    <div class="footer">
        我是页脚
    </div>
</div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1cn20YR-1574646148581)(http://orqka55ze.bkt.clouddn.com/15021732742849.jpg)]

三列浮动布局
可以在双列布局的基础上在双列中的某一列中再创建两列，这样总共就是3列了

<style>
  .wrapper {
    width: 920px;
    margin: 0 auto;
    overflow: hidden;
  }
  .content .primary{
    width: 670px;
    float: right;
    display: inline;
  }
  .content .secondary{
    width: 230px;
    float: left;
    display: inline;
  }
  .content{
    overflow: hidden;
  }
  .content .primary .primary{
    width: 400px;
    float: left;
    display: inline;
  }
  .content .primary .secondary{
    width: 230px;
    float: right;
    display: inline;
    padding-left: 20px;
  }
</style>
<div class="wrapper">
    <div class="header">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div class="content">
        <div class="primary">
            <div class="primary">
                cccccccccc
            </div>
            <div class="secondary">
                cccccccccc
            </div>
        </div>
        <div class="secondary">
            bbbbbbbbbbbbbbb
        </div>
    </div>
    <div class="footer">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</div>

固定宽度、流式和弹性布局

宽度以像素为单位的布局称为固定宽度布局，它使开发人员对布局和定位有更大的控制能力，但是随着屏幕尺寸越来越大，这种设计越来越不适应灵活的web开发，而且固定宽度的布局往往适合于浏览器默认文本字号，只要文本字号增加几级，边栏就会挤满空间并且行长太短，导致阅读性差。

为了解决这些问题，可以使用流式布局或弹性布局代替固定宽度布局。

流式布局

使用流式布局时，尺寸是使用百分数而不是像素设置。这使得流式布局能够相对于浏览器窗口进行伸缩。但当窗口较小时，行变得非常窄，很难阅读。因此，有必要添加以像素或em为单位的min-width；从而防止布局变得太窄。但是，如果min-width设置得太大，流式布局也会遇到固定宽度布局相同的限制。

与之相反，如果设计横跨整个浏览器窗口，那么行就变得太长。可以采取几个措施来避免这个问题：

不要横跨浏览器而是让容器只跨越宽度的一部分，比如85%
可以考虑用百分数设置内边距和外边距。这样的话，内边距和外边距的宽度将随着窗口尺寸而变
对于非常严重的情况，可以选择为容器设置最大宽度，防止内容在大显示器上变得过宽

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-icsjg9Of-1574646148582)(http://orqka55ze.bkt.clouddn.com/15021761659696.jpg)]

代码请点击

弹性布局

虽然流式布局可以充分利用可用空间，但是在大分辨率显示器上，行仍然会过长。相反，在窄窗口中或在增加文本字号时，行会变得非常短，内容很零碎。这时候可以使用弹性布局。

弹性布局相对于字号来设置元素的宽度，以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大，这可以将行长保持在可阅读的范围内。

但是弹性布局的一些问题与固定宽度布局一样，比如不能充分利用可用空间。另外，因为文本字号增加时整个布局会加大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条出现。为了防止这种情况，可能需要在容器div上添加100%的max-width。

将固定宽度布局转化为弹性布局要设置基字号，让1em大致相当于10像素。大多数浏览器上默认字号是16像素。

建议内部宽度仍然使用百分数，只以em为单位设置容器的宽度。这样的话，内部宽度仍然是相对于字号的，这样就可以方便地修改布局的总尺寸，不必修改每个元素的宽度，这种方案更灵活和易于维护。

代码请点击

流式和弹性图像

对于需要跨大区域的图像，比如站点页眉或品牌区域中的图像，可以考虑使用背景图像，而不是图像元素。

如果图像需要用作页面上的图像元素，那么将容器元素的宽度设置为100%并且将overflow:hidden。这样的话，图像右边会被截短，使它适合容器元素。而不会随着布局伸缩。

对于常规内容图像，如果希望它们垂直和水平伸缩以避免被剪切，可以将图像元素添加到没有设置任何尺寸的页面上，然后设置图像的百分数宽度，并且向图像添加与图像宽度相同的max-width以避免被放大后像素失真。

.news img{
    width: 25%;
    max-width: 200px;/*假设原图像宽度就是200px*/
    float: left;
    display: inline;
    padding: 2%;
}
.news p{
    width: 25%;
    float: right;
    display: right;
    padding: 2% 2% 0;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DtnkJsic-1574646148582)(http://orqka55ze.bkt.clouddn.com/15021793585498.jpg)]

faux列

为了创建列的效果，需要创建一个伪列。方法是在一个占据布局最大高度的元素上应用重复的背景图像。

对于固定宽度的布局，只需要在容器元素上应用一个垂直重复的背景图像，其宽度与导航区域相同。

为流式布局创建faux列需要按百分比对背景图像进行定位。按百分比定位背景图像可以创建水平比例与布局相同的背景图像。

background-position使用像素为单位设置背景图像的位置时，是图像左上角到元素左上角的距离为指定像素。而使用百分数为单位时，是图像上距离图像左上角的指定百分数的点到父元素上距离父元素左上角为指定百分数距离的位置。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wbn6h4Cy-1574646148584)(http://orqka55ze.bkt.clouddn.com/15021809539040.jpg)]

如图中X(20%,20%)指的是x这个点距离图像的左上角有横向20%,竖向20%的距离。

高度相等的列

如果我们创建三个内容长度不同的列，他们的高度由于列的高度不同所以也会不同。我们可以设置一个很大的下内边距，然后定义相比下内边距稍小一点的负的下外边距，然后这样就会创建出被“一刀切”的下边距。如果必要我们还可以再使用固定定位的图像来修饰下底边。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mO8kP2eY-1574646148585)(http://orqka55ze.bkt.clouddn.com/15022382499138.jpg)]

代码请点击

CSS3列

CSS3也可以创建等高文本列，需要用到colum-count、colum-width和colum-gap属性：

<style>
  .col{
    column-count: 3;
    column-width: 14em;
    column-gap: 2em;
    column-rule: 1px solid #ccc;
  }
</style>
<h1>aaaa</h1>
<div class="col">
    <p>bbbbbbbbb</p>
</div>

CSS列的有点之一是在可用空间小于已定义的宽度时的处理方式。列不会像使用浮动那样回绕，而是会减少列数。

第九章：bug和修复bug

常见的css错误

特殊性和分类次序的问题

将一个规则应用于一个元素时，如果发现没有任何效果，这时往往存在特殊性问题。

不要随便添加更特殊的选择器，因为这可能会给代码的其他部分带来特殊性问题。更好的方法往往是删除额外的选择器，让它们尽可能一般化，只在需要细粒度的控制时添加更特殊的选择器。

外边距叠加的问题

如果元素没有垂直边框或内边距，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。所以有的时候当我们认为我们定义的元素是这样时

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XWEVCEem-1574646148585)(http://orqka55ze.bkt.clouddn.com/15022548994508.png)]
实际上我们的元素是这样的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GbBhmvNv-1574646148586)(http://orqka55ze.bkt.clouddn.com/15022548862466.png)]

有一个简单的解决方案：通过添加一个垂直边框或内边距，外边距就不再叠加了。

捕捉bug的基本知识

尽量一开始就避免bug
通过隔离问题和识别症状，有可能查明问题的原因并修复它。隔离问题的一种方法是在相关的元素上应用边框或轮廓。
首先应该复制出问题文件，删除多余HTML，只留下最基本的内容，然后开始注释样式表，从而查明哪些样式导致了这个问题。
修复问题，而不是修复症状
请求帮助

拥有布局

什么是布局

IE使用布局概念来控制元素的尺寸和定位。那些“拥有布局”（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

IE显示引擎利用布局概念减少它的处理开销。在理想情况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE开发团队只将布局应用于实际需要它的元素，这样可以减少性能开销。

在默认情况下拥有布局的元素包括：

body
html（标准模式中）
table
tr、td
img
hr
input、select、textarea、button
iframe、embed、object、applet
marquee

布局的概念是Windows上的IE特有的，而且不是CSS属性。尽管设置某些CSS属性会使元素拥有布局，但是在CSS中无法显式地设置布局。可以使用JavaScript函数hasLayout来查看一个元素是否拥有布局，这个函数是一个只读属性，不能进行设置值。

设置以下CSS属性会自动使元素拥有布局：

float: left或float: right
display: inline-block
width: 任何值
height: 任何值
zoom: 任何值
writing-node: tb-rl

在IE7中，以下属性也成了布局触发器：

overflow: hidden、scroll或auto
min-width: 任何值
max-width: 除none以外的任何值

解决办法

IE条件注释
条件注释是一种专有的（因此是非标准的）对常规HTML注释的Microsoft扩张。条件注释在其他所有浏览器看来是常规注释，因此本质上是无害的，所以条件注释通常被看做处理IE特有bug的最好方法。

指定IE5以上所以版本中的属性
<!-- [if IE]
	<link rel="stylesheet" type="text/css" href="ie.css">
-->
指定IE6中的属性
<!-- [if IE6]
	<link rel="stylesheet" type="text/css" href="ie.css">
-->
对IE所有版本隐藏样式
<!-- [if !IE]>-->
	<link rel="stylesheet" type="text/css" href="ie.css">
<!--<![endif]-->
对IE5.X隐藏样式
<!-- [if gte IE6]><!-->
	<link rel="stylesheet" type="text/css" href="ie.css">
<!--<![endif]-->

关于hack和过滤器的一个警告：
如果浏览器不理解某个选择器或者属性和值，它会忽略整个规则或声明。利用这点可以确保老式浏览器会平稳退化。使用不被支持的CSS作为过滤机制是一种相对安全的方法，但是这些hack和过滤器常常会使你的代码失效。作为一般规则，应该使用依赖于不被支持的CSS过滤器，而不是依赖于某种浏览器bug的过滤器。最好完全避免使用过滤器。

明智地使用hack和过滤器：使用hack较多时，最好把它们放在自己独立的样式表中。

应用IE for Mac带通过滤器
应用星号HTML hack
应用子选择器hack

分级浏览器支持

首先确定一组浏览器，让站点在这些浏览器中的表现一致。对这些浏览器，希望站点的外观大体上相同，但允许一些细微差异
确定一组已经过时但仍然比较重要的浏览器，在这些浏览器中随机选择几个执行测试，尝试修复问题，但是即使显示效果不完美并且在浏览器之间有差异，也是可以接受的，只要不影响访问内容即可
最后确定一组完全不想正式支持的浏览器，可以确保内容和功能可用，表现方式无所谓。

实例研究：Roma Italia

对于各种标记（HTML元素、属性和值，CSS的选择器、属性和值），能简化就简化。
reset.css可以避免和缓解HTML元素默认样式不一致的问题。
RGBa不透明度和opacity不一样，RGBa不透明度可以应用于特定的属性（比如背景），它只影响这个属性。opacity会影响应用它的元素中的所有东西。
如果文本太长，在包含它的元素中放不下，text-overflow会截断它，使用ellipsis值在被截断的文本后面加上省略号。
对于Ctrl+/-和Command+/-命令，每种浏览器的最新版本现在默认采用页面缩放，而不是文本缩放。页面缩放直接缩放整个页面—布局、格式和文本大小。这意味着px是适合font-size的单位，因为用户分辨不出用绝对单位和用相对单位设置的文本之间的差异。
@font-face可以在设计中使用任何字体显示HTML文本，而不用考虑用户的机器上是否安装了这种字体。
AJAX通常至少包括3个部分：
- 异步的服务器通信，通常使用XMLHttpRequest实现
- 通过操作DOM进行动态显示和交互
- 使用JavaScript把所有部分组合在一起

实例研究：Climb the Mountains

:first-child伪类只选择包含元素的第一个子元素
相邻同胞选择器可以包含多个选择器，由+分隔,注意div ul li + li + li + li{....}/*会选择第四个li元素*/
可以通过组合类（不同样式的类组合成一个你想要的效果）为元素提供更大的灵活性

门豪杰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
《精通CSS-高级Web标准解决方案》笔记

第一章基础知识标记简史使用有意义的标记ID与class的区别div和span微格式文档类型和DOCTYPE浏览器模式和DOCTYPE切换第二章为样式找到应用目标选择器层叠和特殊性层叠特殊性对文档应用样式设计代码的结构删除注释和优化样式表第三章可视化格式模型盒模型概述IE和盒模型外边距叠加定位概述可视化格式模型相对定位绝对定位固定定位浮动行框与清理
复制链接

扫一扫