O(∩_∩)O

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。div{ width:200px; height:200px; borde

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。html代码： 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：position : absolutefloat : left 或 float:right元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。如下面的代码，小伙伴们都知

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到HTML文件内，如下面代码：base.css" rel="stylesheet" type="text/css" />注意：1、css样式文件名称以有意义的英文字母命名，如 main.css。2、r

有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况1、使用内联式CSS设置“超酷的互联网”文字为粉色。2、然后使用嵌入式CSS来设置文字为红色。3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三

学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？我们不要着急先来总结一下他们的相同点和不同点：相同点：可以应用于任何元素不同点：1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。下面代码是正确的： 三年级时，我还是一个class="stress">

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元(注意：是第一代，可以并列，不是第一个)。如代码：.food>li{border:1px solid red;}这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如代码：.first span{color:red;} 三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：* {color:red;}

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。关于伪选择符：    关于伪类

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,span{color:red;}它相当于下面两行代码：h1{color:red;}span{color:red;}

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：htm

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码： hi,imooc!css代码：.container{ height:100px; line-height:100px; background:#999;}完整代码：垂直居中

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。代码如下： 1 2 3 css代码：.container{ float:left

什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：1、参照定位的元素必须是相对定位元素的前辈元素： 相对参照元素进行定位从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;

我们在实际工作中常会遇到需要设置水平居中场景，今天我们就来看看怎么设置水平居中的。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码：html代码： 我是文本，哈哈，我想要在父容器中水平居中显示。css代码： div.txtCenter{ text-align:center;

写在前面的话：       由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。       如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。       小菜水平有限，本文仅仅是入门教程，不当之处请谅解！       本文以div元素布局为例。教程开始：       首先要知道，div是块级元素，在页

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：加入 table 标签设置 display;inline 方法设置 position:relative 和 left:50%;这一小节我们来讲一下第一种方法：

第二种方法：改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下例子：html代码： 1 2 3 css代码：.container{ text-align:center;}.container ul{ list-

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。p{color:red;}三年级时，我还是一个胆小如鼠的小女孩。可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：p{color:red;}.first{color:green;}三年级时，我还是一个胆小如鼠的小女孩。p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种cs

一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。语法：联系地址信息如：文档编写：lilian 北京市西城区德外大街10号本文的作者：lilian      在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用

在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用标签了，如下面例子：var i=i+300;注意：在文章中一般如果要插入多行代码时不能使用标签了。  如下代码在浏览器端的显示效果为：1 2 document.getELementById("id1");3 document.getE

在上节中介绍加入一行代码的标签为，但是在大多数情况下是需要加入大段代码的，如下图：怎么办？不会是每一代码都加入一个标签吧，没有这么复杂，这时候就可以使用标签。语法：语言代码段 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如下代码： var message="欢迎"; for(var i=1

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：想在网页上展示上述表格效果可以使用以下代码：创建表格的四个元素：table、tbody、tr、th、td1、…：整个表格以标记开始、标记结束。2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等

表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：摘要摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。    语法：<table summary="表格简介文本">标题用以描述表格内容，标题的显示位置：表格上方。   

标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。下面是一个完整的实例:在浏览器中显示的结果：发送点击链接会打开电子邮件

网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。语法：讲解：1. ：标签是成对出现的，以开始，以结束。2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method ： 数据传送的方式（get/post）。

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:语法：1、type:   当 type="radio" 时，控件为单选框   当 type="checkbox" 时，控件为复选框2、value

下拉列表也可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码：在浏览器中显示的结果：

小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。语法：

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：语法：html4.01版本 xhtml1.0版本 <hr />注意：1. 标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。2. 标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些

的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。      等等，上一节标签不是也是对文本的引用吗？不要忘记标签是对简短文本的引用，比如说引用一句话就用到标签。      如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用blockquote>。语法:blockquote>引用文本如

想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么标签是你所需要的。语法：引用文本如下面例子：最初知道庄子，是从一首诗庄生晓梦迷蝴蝶。望帝春心托杜鹃。开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己

我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。如下面代码:p{color:red;}p{color:gre