这些HTML、CSS知识点，面试和平时开发都需要 No1-No4

系列知识点汇总

这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）

这些HTML、CSS知识点，面试和平时开发都需要 No8-No9（知识点：媒体操作、构建表单）

这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）

No1.HTML

1.网页结构

网页结构一般都包含文档声明DOCTYPE，并且在head中的meta应该包含编码格式、关键字、网页描述信息。简单格式如下：

<!DOCTYPE html>

    <html>

    <head>

        <meta charset="utf-8">

        <title>Hello World</title>

    </head>

    <body>

    </body>

</html>

JD首页的meta声明：

<meta charset="gbk" />

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

包含charset编码格式，Keywords关键字，description网站描述。

2.自关闭元素

3.布局最常用的两个元素

（1）div：流布局使用；

（2）span：文字块使用。

4.块级别元素和行级别元素

块级别元素：是指开始在新的行，占领整行宽度。例如div默认是块级别block元素；

行级别元素：仅仅维持内容的宽度，例如文字块的span元素；

通过CSS的display属性声明元素显示级别，一般包括inline行级别、inline-block行内块元素、block、table块级别表格。

5.文字类元素

（1）加粗元素：strong、b。例如：

<p><strong>Caution:</strong> Falling rocks.</p>

<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>

（2）倾斜元素：<em>和<i>。例如：

<!-- Stressed emphasis -->

<p>I <em>love</em> Chicago!</p>

<!-- Alternative voice or tone -->

<p>The name <i>Shay</i> means a gift.</p>

6.HTML5新增的结构化元素

（1）结构化元素包括：<header>, <nav>, <article>, <section>, <aside>, <footer>。

（2）元素级别：都是block级别元素，不包含样式，只用于结构化，每个页面可多次使用。

（3）元素说明：header描述头部信息，nav用于导航模块，article用于可重新覆盖的新闻类内容块，section模块化，aside页面左或右模块，footer底脚模块。

7.页面内跳转

如果需要跳转到页面指定的位置，可在该位置设置元素的id属性，然后为链接添加href="#id"。例如：

<body id="top">

...

<a href="#top">Back to top</a>

...

</body>

No2.CSS

1.选择器类型

选择器类型包括：type、class、id。

2.引用外部css文件

使用link元素，添加rel和href属性：<link rel="stylesheet" href="main.css" />。

3.重置浏览器的css样式

（1）为什么重置：每个浏览器都有自己默认的选择器样式设置，例如元素的margin和padding。为了保持网站的统一性，我们需要重置CSS样式。

（2）怎样重置：把下面的css样式添加到定义的css文件中去，需要放在css文件的最前面位置。

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

4.CSS级联

（1）选择器优先权：type<class<id。例如定义html元素<p id="food">...</p>的样式：

#food {

background: green;

}

p {

background: orange;

}

即使type选择器放在id选择器后面，但id选择器权重高于type选择器。

（2）结合型选择器：被结合的选择器器应该从右往左读，最右边的选择器作为主选择器。

（3）案例分析：

.hotdog p {

    background: brown;

}

.hotdog p.mustard {

    background: yellow;

}

第一个结合选择器，主选择器是类型p，选择class为hotdog元素下的所有p元素。第二个结合选择器，主选择器是type为p并且class类型为mustard的元素，结果是选择class为hotdog下，类型为p并且class为mustard的元素。

（4）降低选择器的权重方法：通过多层的class来设置样式。案例如下：

<!-- HTML代码 -->

<a class="btn btn-danger">...</a>

<a class="btn btn-success">...</a>

<!-- CSS样式 -->

.btn {

    font-size: 16px;

}

.btn-danger {

    background: red;

}

.btn-success {

    background: green;

}

5.颜色

（1）颜色表示方式：关键字、十六进制标记、RGB、HSL值。

（2）关键字：直接使用关键字表示颜色，像red、blue等。关键字可参考：http://www.w3.org/TR/css3-color/。

（3）十六进制：如果是6位标记，前两位表示Red、中间两位表示Green、最后两位表示Blue。

（4）RGB：用三个数字表示颜色，三个数字分别表示red、green、blue的值。例如：background: rgb(128, 0, 0)。

（5）RGBa：和RGB相似，后面多了一个透明度参数，a表示alpha透明度，透明度的值范围是0到1的小数。

6.长度单位

（1）绝对长度：用像素表示，单位为px。

（2）相对长度：Percentages百分比，例如width: 50%。

（3）em相对长度单位：相对于对象内文字的font-size，如果未设置font-size则相对于浏览器的字体默认尺寸，经常用于spacing、margin和padding。

7.CSS3属性使用

（1）加前缀保证兼容性：在css3成为标准之前，很多浏览器都开始支持css3属性，但由于当时css3还不是标准，所以运营商都通过添加前缀的方式来支持。例如box-sizing属性的设置：

div {

    -webkit-box-sizing: content-box;

    -moz-box-sizing: content-box;

    box-sizing: content-box;

}

（2）各个运营商前缀：

Chrome(谷歌浏览器) ：-webkit-

 Safari(苹果浏览器) ：-webkit-

 Firefox(火狐浏览器) ：-moz-

 IE(IE浏览器) ：-ms-

 Opera(欧朋浏览器) ：-o-

No3.盒子模型

1.盒子模型属性

（1）包含的CSS属性：width、height、padding、border、margin。

（2）盒子模型宽度计算：margin-right + border-right + padding-right + width + padding-left + border-left + margin-left。

（3）盒子模型高度计算：margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom。

（4）margin设置：margin： 10px、margin: 10px 20px，上下左右; margin: 5px 0 10px 0，上有下左。

（5）border设置： border: width style color，也可单独设置每个值border-width、border-style、border-color。border-style属性值包括olid, double, dashed, dotted, and none。

（6）border单方向设置：border-top, border-right, border-bottom, and border-left，例如border-bottom: 6px solid #949599。

（7）border-radius设置：一个值border-radius: 5px，两个值border-radius: 5px 10px，四个值表示top-left、top-right、bottom-right、bottom-left。

（8）border-radius单个方向设置：border-(top/bottom)-(left/right)-radius:value，例如border-top-right-radius: 5px;

2.Box Sizing

（1）box-sizing作用：CSS提供了box-sizing用于规定元素尺寸的计算方法。

（2） box-sizing属性值：包括content-box、padding-box、border-box。

（3）content-box：是box-sizing的默认值，计算的实际size为width或height值加上padding、border、margin的总和。

（4）padding-box：一个div的width为400px，设置padding为20px，那么实际的尺寸还是400px，只是把content压缩了。如果设置border为10px，那么实际的尺寸为400px + 10px = 410px。

（5）border-box:如果div的width为400px，设置padding为20px，border为10px，那么元素width还是为400px，但内容被缩放。

（6）box-sizing的推荐值：border-box。

No4.内容布局

1.列举场景

同一行布局三个元素。三个元素等比显示，并且其他元素不会围绕这三个元素。如下要让下面的三个column等比显示在一行：

2.通过Float属性实现

（1）float:left, 对于块级别的div可设置float:left让几个元素同行显示。但需要阻止其他元素追尾。

（2）解决追尾方案一：在Column3的后面添加一个div，并设置css属性:clear:both。这个大家应该都很熟悉。

（3）解决追尾方案二：设置容器的公共class样式，设置class的before和after伪类，但需要考虑兼容性。所以完整的解决方案代码如下：

.group:before,

.group:after{

    content: "";

    display:table;

}

.group:after{

    clear:both;

}

.group{

    clear:both;

}

3.通过设置display为inline-block实现

（1）display为inline-block的元素不会占满一行，所以设置三个column的display为inline-block可是三个元素同行显示。但linline-block元素之间会存在空白，需要解决存在的空白。

（2）解决空白方案一：把每一个新的inline-block元素的闭环tag和下一个开环tag放在一行。代码如下：

<section>

...

</section><section>

...

</section><section>

...

</section>

（3）解决空白方案二：在闭环tag的后面添加一个打开的注释标签，在下一个开环tag的后面添加一个关闭注释的标签。代码如下：

<header>...</header>

<section>

  ...

</section><!--

--><section>

  ...

</section><!--

--><section>

  ...

 </section>

 <footer>...</footer>