笔记_HTML+CSS精选

1. 如何清除一个标签的子标签的浮动？

清除浮动的几种方法：

1. 父元素有高度，此时就没有浮动的影响了
2. 父元素如果不愿意设置固定死的高度，而是自动适配，就写overflow:hidden;_zoom:1;
3. 后面的元素父盒子加上clear:both;盒子还是没有高度，margin失效；
4. 两个盒子之前加上一个<div class="cl"></div>   .fl{clear:both}，隔墙法，盒子还是没有高度，但是marign有用。
5. 盒子加上::after{content:"",clear:both;} ，内墙法，这个元素自己最后的子元素是一个标准流元素，所以一下子给这个父盒子撑高了。特别好用。

1. 描述一下浮动会造成什么影响，如何居中一个浮动元素？

【脱标】浮动的元素脱离标准文档流，【贴边】左浮动就会贴左边，又浮动贴右边，贴上一个兄弟元素的边，【字围】字会环绕这个浮动元素，【收缩】不区分行内元素和块级元素了，原来的行内元素现在可以设置宽度、高度，原来的块级元素如果不写width现在会自动缩减为内容宽度。

浮动的元素要想居中，必须相对定位。相对定位利用margin-left:50%; left:-宽度一半。

原理就是margin-left:50%;此时元素的左边线就会到屏幕中线，拉回自己的width一半即可。所以要用相对定位拉动。或者transform:translate(-50%,0);

也可以left:50%; margin-left:-宽度一半;

<style type="text/css">

div{

float: left;

width: 500px;

height: 100px;

background-color: orange;

position: relative;

margin-left: 50%;

left:-250px;

}

</style>

1. 简单说明绝对定位和浮动的区别和应用。

绝对定位脱离标准文档流，它的参考点是文档的左上角或者右上角。如果有任何父元素有定位属性，此时就依据“子绝父相”规则来设置自己的定位参考元素。在做网页时候非常的灵活方便。制作覆盖效果的时候，会大量使用绝对定位。

浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both;属性让标准流中的其他元素在此之后依次排列。

1. 当float和margin同时使用时，如何解决IE6的双倍边距？

当浮动的方向和margin是同方向的时候，此时IE6会在这个方向的第一个元素身上产生双倍margin。解决方法：

1) 改变margin的方向，float:left; margin-right:20px;  浮动向左，margin向右

2) 给第一个元素单独写一个类叫做.no1  此时.no1{_margin-left:一半的margin;}

3) 用display:inline;不用浮动了

1. 行内元素和块级元素的区别，行内元素有哪些，块级元素有哪些？

行内元素不能设置宽度、高度，但是能并排显示，浏览器视行内元素是“文本流元素”。span、a、em、b、u、i。

块级元素能设置宽度、高度，但是不能并排显示。div、h1、ul、p、li、section、header。

1. CSS引入的方法有哪些？都有什么区别？

外链式（也叫作外联式）<link href="1.css" type="text/css" rel="stylesheet" />

内嵌式（也叫作内联式）<style type="text/css"></style>

导入式<style>@import url(1.css)</style>

行内式<div style="width:200px;background:red;"></div>

内嵌式速度快，但是改版麻烦，可以减少HTTP请求。

外链式方便多个网页同时使用一个样式表。

行内式通常用于开发时候的临时测试，语义不清晰，不能使用。

导入式不好用，因为页面首先加载，然后导入样式表，页面在1s~2s内会有没有样式表的情况，然后突然有了样式。

1. 在书写高效CSS时，需要考虑哪些问题？

基本原则是：去掉不必要的样式、合并相同的样式、尽可能缩小样式的大小、多用公共类、让css变得不臃肿。

我在工作中，经常使用gulp中有一个插件叫做gulp-csso，可以智能合并相同的样式，比如div p{font-size:10px;color:green;}  p{color:green;} 它会智能变为：div p{font-size:10px;}  p{color:green;}。

回答问题的时候一定要体现自己的知识渊博。

1. 简述一下什么是内容与表现分离。

HTML就是负责语义，其他什么都不需要管。HTML不要用b、u、i来设置加粗、下划线、倾斜，而是写font-weight:bold;  text-decoration:underline; font-style:italic; 用CSS来表示。再比如，logo可以用h1，用背景替换文字来呈递图片。text-indent:-999em;

CSS负责样式，不要写行内样式。

1. 
   CSS层叠是什么？

CSS全名叫做层叠式样式表，cascading style sheet，cascading就是层叠的意思。层叠具体有两层含义：

1） 比如一个标签它可以通过多种手段给他添加属性。

<h1 id="logo" class="spec"></h1>

#logo{}

.spec{}

h1{}

body{}

此时这个标签就被多个选择器添加属性，如果属性有冲突，CSS有精确的权重计算方法来确定“听谁的”。

2） 一个选择器可以同时作用在多个标签身上，也有一些属性可以继承下去。使标签是由多个选择器共同影响而来。此时CSS就可以写的很精简。

1. 请解释浏览器是如何根据CSS选择器选择对应元素的？

#表示id，浏览器会寻找拥有id的元素。.表示类名class属性，空格表示后代，> 表示子元素, + 表示下一个兄弟 ， ~ 后面所有兄弟。

1. 以下有若干个CSS选择器，请给出他们的优先级顺序。

div h1、  #div h1、    div h1 #_h、   div h1.c_h

div h1权重(0,0,2)

#div h1权重（1,0,1）

div h1 #_h权重（1,0,2）  这个最大

div h1.c_h  权重（0,1,2)

1. 在HTML代码中如何做SEO？

1. h标签合理使用，strong标签语义比较强，合理使用。
2. title、<meta name="description" />、<meta name="keywords" />要合理设置
3. a标签要写title，img要写alt
4. div要有合理类名，比如.content、.header、.address，便于搜索引擎爬虫检索
5. HTML层次清晰，id不要重复，便于搜索引擎爬虫检索

1. CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度？

1. 使用百分比布局，用百分比来写宽度、marign、padding
2. 使用rem当做单位，写一点JS让html根元素的字号随着浏览器宽度的变化而等比例变化
3. 使用媒体查询让不同宽度的浏览器使用不同的样式表，<link href="1.css" media="screen and (min-width=900px)" />

1. 一个页面（HTML）由哪几部分构成？分别是什么？作用是什么？

由head和body构成。

head里面放置一些配置信息，比如配置title、keyword、description、charset等等信息，不会显示在浏览器中。

body是内容，会显示在浏览器的屏幕中。

1. 你如何理解HTML的语义化？能否接触或了解重构？

根据语义来选择合适的标签，而不是表现形式。HTML只负责语义，不是说要加粗了，就放一个h，此时可以让开发者能写出优雅的代码，并且利于SEO。

网页重构指的是将Table布局的网页变为标准DIV+CSS代码，让结构和表现分离，方便维护。

1. 如何区别CSS中的display:none和visibility:hidden？

display:none; 释放了自己的位置，后面的元素会上来占据现有位置，并且如果内部有img元素，此时img元素不会加载；

visibility:hidden如同opacity：0；只是不可见了，位置还是保留的。

1. 给文字添加阴影用哪个属性？

text-shadow:1px 1px 1px red;

1. display属性值的常用取值不包括（c）。

A:inline B.block C.hidden D.none

1. 标签上的alt与title属性区别是什么？

alt是alternate的简写，当图片不可以显示的时候的替代文本

title是a、img、label等等标签的悬浮提示文本。

1. 清除浮动和闭合浮动的不同点？

和第1题一样，设置高度的元素叫做闭合浮动。

回答清除浮动的5种方法即可。

1. rem为什么可以缩放，以什么为基准？

rem以html的字号为基准，比如2rem，而html的字号是16px，此时2rem就是32px。写一段JS让html根元素的字号随着浏览器宽度的变化而等比例变化，此时造成页面等比例缩放的现象。

1. 下面哪一个标签可以产生一个回车换行（b）

A.<hr> B.<br> C.<tr> D.<tl>

1. 下面哪一个是&的符号码（B）

A." B.& C.&comp D. 

1. font-size：62.5%，解释一下如此设计字体大小的原因？

因为默认情况下html标签的默认字号是16px，此时如果取默认，那么1em就是16px，此时fotn-size:62.5%; 此时就能将HTML这个根元素的字号变为10px。此时页面上所有元素的尺寸就方便计算了。但是62.5%逐步退出了历史舞台，因为Chrome30版本不支持12px以下的字号了。

1.   前端工程师html<br></br>  
   
   以上代码中不合理的部分有哪些？

首先如果要空格，应该使用css中的text-indent:2em; 并且如果要换行，应该使用语义标签ｐ。非要用ｂｒ，也要写<br />，而不是标签对儿。

1. 常见的网页图像格式有（C）
   A.gif，tiff B.tiff，jpg C.gif，jpg D.tiff，png

1. <img src=”name” align=”left”>的意思是（A）？
   A.图像对于周围的文本左对齐
   B.图像对于周围的文本右对齐
   C.图像对于周围的文本底部对齐
   D.图像对于周围的文本顶部对齐

1. Form中的input可以设置readonly和disable，请问这两项属性有什么区别？

readonly表示只读，不能更改元素内容。仅仅能作用在text/password/textarea上面。

disabled表示不可用，能作用在所有控件上面，比如select、radio、checkbox。

1. 列举CSS中position的参数和作用？

四种定位：absolute、relative、fixed、static。

展开说三种定位的参考点是什么。

1. 为什么利用多个域名来存储网站资源会更有效？

1. CDN，表示让用户从离自己最近的下载点下载资源。
2. 突破服务器的带宽限制。
3. 节约主域名的连接数，提升并发
4. 更加安全，比如静态资源服务器上面，不能运行任何代码的。

1. 
   定义一个div，在IE8下高度为100px，在IE7下为120px，在IE6下为140px。

  

height:120px;

-height:140px;

height:100px\0;

还有：

<!--[if lt IE 7]><!--您的代码--><![endif]-->

1.  当p的元素设置为bold时，以下哪条CSS语句的说法是正确的（D）

A.<p style=”text-size:bold;”> B.<p style=”font-size:bold;”>

C.p{text-size:bold;} D.p{font-weight:bold;}

1. 网页设计采用div+css有什么好处？

语义清晰，DIV负责结构，CSS负责样式。便于更改，缩减页面代码，对SEO有利。便于改版，便于控制和排班布局。表现和内容相分离。

1. 介绍盒子模型，说说标准盒子模型和IE盒子模型有什么区别，以及触发不同模型的条件？

标准盒子模型padding、margin外扩

IE盒子模型是padding、marign内减。如同写上了box-sizing:border-box;

要加上标准DTD，可以让IE使用标准盒子模型。去掉DTD此时浏览器叫做Quirk(怪异模式)。

1. CSS哪些属性可以继承？

text-开头的、line-开头的、font-开头的、color、cursor。

不能继承的是一切盒模型属性。

1. <!DOCTYPE>标签的定义与用法，你常用的DOCTYPE是什么？

用在html标签之前，定义是HTML什么版本和XHTML什么版本。

我常用<!DOCTYPE html>是html5的声明头。

Strict版本不能使用b、u、i

transitional版本可以使用bui，所以HTML4中我经常使用这个。

1. 介绍你所知道的CSS hack技巧。

hack就是浏览器留的后门，方便对这一个版本的浏览器单独定义样式，

_、-针对IE6，*width、+width用于IE6和IE7。

color:red\0; 是IE8、9、10的hack。

color:red\9\0：是IE9、10的hask

还有HTML中：<!--[if lte IE 7]> 代码 <![endif]-->

1. 请用div+css简单写出一段“返回顶部”的悬浮效果。

<a name="top"></a>

...

...

..

<div class="top">

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

</div>

样式:

.top{position:fixed;right:20px;bottom:20px;width:100px;height:100px;}

1. 内联和important哪个优先级高？

<p style="color:red"></p>   

还有样式表：

p{color:blue !important;}

important优先级高。如果属性是通过继承影响的，此时!important无效。

1. 请解释一下CSS的优先级，并说明优先级如何计算？

当多个选择器定义了同一个属性为不同值，根据优先级来确定以谁为准。

id最大，类第二，标签名第三。数个数即可。比如：

#box ul li.spec  权重就是（1,1,2）

#box ul li权重就是（1,0,2）

如果是继承，权重是0。如果都是继承，有“就近原则”。

1. 如何解决IE6下select优先级高于div而导致的无法遮盖问题？

再写一个div，用此div盖住select。当select应该出现的时候，此时让div盖住它。

1. 定位的值有哪几种？区别是什么？

1. 相对定位相对自己定位
2. 绝对定位默认以文档为参考点。如果自己的祖先元素中有定位的元素，此时以离自己最内层的已经定位的祖先元素为参考点。
3. 固定定位以窗口为参考点。

1. 在HTML页面中，position的默认值是什么？

static。

1. 一个宽度不确定的div里面放三个水平对齐的div，左右2个div宽度固定为150px，中间那个div充满剩余的宽度。

圣杯布局，也叫作双飞翼布局。2004年特别火！

方法1就是固比固的思路，两个固定的元素绝对定位，中间的元素标准流中。此时利用绝对定位无视父盒子的padding，此时给父盒子加padding，错开左右两边的宽度即可。

<style type="text/css">

*{

margin: 0;

padding:0;

}

.part1{

position: absolute;

width:150px;

height: 400px;

background-color: orange;

left:0;

top:0;

}

.part2{

width:100%;

height:400px;

background-color:green;

}

.part3{

position: absolute;

width:150px;

height: 400px;

background-color: orange;

right:0;

top:0;

}

body{

padding: 0 150px;

}

</style>

方法2： 使用CSS3中的弹性盒属性，就是父元素设置display:-webkit-box；子元素中的两个不写box-flex，只让中间那个写box-flex:1即可。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

 .box{

  display: -webkit-box;

 }

 .box1 , .box3{

  width:140px;

  height:400px;

  background-color: orange;

 }

 .box2{

  -webkit-box-flex:1;

  background-color: gold;

 }

</style>

</head>

<body>

<div class="box">

<div class="box1">1</div>

<div class="box2">2</div>

<div class="box3">3</div>

</div>

</body>

</html>

1. IE如何让超出宽度的文字显示为省略号？

p{

    width: 50px;  /*必须设置宽度*/

    overflow: hidden;  /*溢出隐藏*/

    text-overflow: ellipsis; /*以省略号...显示*/

    white-space: nowrap;  /*强制不换行*/

}

1. 首行缩进2个字符的CSS代码是什么？

text-indent:2em;

1. 为什么在firefox下文本无法撑开容器的高度？

如果我们一个盒子写了height那么此时文本无法撑开盒子高度，请使用min-height。

1. 写一段CSS代码，让Chrome支持小于12px的文字。

font-size:12px; -webkit-transform:scale(0.8);

1. 下面哪一个属性可以在新窗口打开一个链接（B）

A. _parent B. _blank C. _self D. _top

1. 谈谈对CSS Sprites技术优缺点的理解。

CSS精灵技术，优点就是减少HTTP的请求数量，加快网页渲染速度。便于一整套更换，比如圣诞节了，此时可以改变CSS中的各种按钮、logo变成圣诞风格，一下子全变了。

缺点就是不能随意改变之前已经在精灵上面的图片的位置，做repeat-x、repeat-y精灵难以实现。做先导小符号的时候，精灵要靠边。

1. CSS的伪类有哪些？有什么作用？在各个浏览器下都兼容吗？

:hover、:visited、:link、:active。

link没有点击的

visited：点击过的

hover悬停的

active是按下那一瞬间。

都兼容，但是要按照“爱恨准则”link、visited、hover、active放置。

1. 以下链接到电子邮件的正确格式是：（B）

A.<a href=”mailto://123@abcd.com”>邮箱</a>
B.<a href=”mailto:123@abcd.com”>邮箱</a>
C.<a href=”#mailto:123@abcd.com”>邮箱</a>
D.<a href=”mail to://123@abcd.com”>邮箱</a>

<a href="mailto:123@email.com">Email</a>

1. 怎样解决超链接访问过后hover样式不出现的问题？
   但是要按照“爱恨准则”link、visited、hover、active放置。

1. 请列举IE6的一些Bug的解决办法。

双倍margin：浮动的方向设置的和marign方便不相同即可。

有链接的图片的边框：img{border:none}即可。

3px bug ：给容器设置display:inline-block即可。

overflow:hidden失效，用zoom:1;来解决。

png透明度，用js：pngfix.js来解决。

1. 请尽可能多的列举IE6、IE7、Firfox浏览器的常见CSS兼容性差别以及解决办法。

等于上题。

1. 一个网页制作完成后，在发布之前，我们会对页面进行测试，测试内容主要包括哪几个方面？

兼容性、js特效的bug、流畅度、加载速度的测试。

1. 在网页设计与制作时，为了使制作出来的网页下载速度快、布局合理、浏览方便、和谐悦目，应注意哪些问题？

1. 网页文件大小
2. 页面布局
3. 页面导航
4. 图像大小
5. 颜色搭配
6. 背景图像

1. IE6下为什么无法定义1px左右高度的容器？

加上伴生属性 ：   _font-size:0;

1. 写出5条Firefox和IE的脚本兼容问题？

绑定监听：IE是attatchEvent()  、 firefox是addEventListener();

计算样式：IE是computedStyle、 firefox是getComputedSyle();

滚动事件：IE是MouseWheel、 firefox是onmousewheel

表单元素：IE是 document.forms(”formname”) ， firefox是document.forms["formname"]

事件对象： IE是window.event属性， firefox必须给事件处理函数注入实参event

1. 最常遇到的兼容Bug有哪些？有哪些问题解决起来是最麻烦的？

1. DOCTYPE的作用？严格模式和混杂模式的区别，如何触发这两种模式，区分它们有何意义？

上面讲过了。

1. 超链接只能在不同的网页之间进行跳转吗？（判断题）

可以有锚点，<a name="top></a>   <a href="#top">返回顶部</a>

使文字加粗除了<b></b>外，还有font-weight:bold;。