首页 > 代码库 > 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

系列知识点汇总

     这些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.自关闭元素

    <br>、<embed> 、<hr>、<img>、<input>、<link>、<meta>、<param>、<source>、<wbr>

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="http://www.mamicode.com/#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="http://www.mamicode.com/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>

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)