html与css基础试题

Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式?

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，

混杂模式是一种向后兼容的解析方法。

触发标准模式或者说严格模式很简单，就是Html前申明正确的DTD，出发混杂模式可以在html文档开始不声明DTD，或者在DOCTYPE前加入XML声明

浏览器标准模式和怪异模式之间的区别是什么？

这是个历史遗留问题，W3C标准推出前，旧的页面都是根据旧的渲染方式对页面进行渲染的，因此在W3C标准推出后为了保证旧页面的正常显示，保持浏览器的兼容性，这样浏览器上就产生了能够兼容W3C标准渲染的严格模式和保证旧页面显示的怪异模式的标准兼容模式。

具体表现：

1.在严格模式中：width是内容宽度，元素真正的宽度 = margin一left + border一left一width + padding一left + width + padding一right + border一right一 width + margin一right;

在怪异模式中：width则是元素的实际宽度，内容宽度 = width 一 ( padding一left + padding一right + border一left一width + border一right一width)

2）可以设置行内元素的高宽

在标准模式下，给span等行内元素设置wdith和height都不会生效，而在怪异模式下，则会生效。

3）可设置百分比的高度

在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在标准模式下可以使元素水平居中，但在怪异模式下却会失效, 怪异模式下的解决办法，用text一align属性:

body{text一align:center};#content{text一align:left}

5）怪异模式下设置图片的padding会失效

6）怪异模式下Table中的字体属性不能继承上层的设置

7）怪异模式下white一space:pre会失效

tips：上两题详见https://www.cnblogs.com/wuqiutong/p/5986191.html

介绍一下标准的css盒模型，低版本ie盒模型有什么不同

（1）盒模型有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

（3）区别： IE的width部分把 border 和 padding计算了进去;

前端页面由哪三层构成，分别是什么，作用是什么

Html (结构) : 超文本标记语言, 由 HTML 或 xhtml之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

Css (表现) : 层叠样式表 , 由css负责创建。css对“如何显示有关内容”的问题做出了回答。

Js (行为) : 客户端脚本语言 , 内容应该如何对事件做出反应

列举5种IE haslayout的属性及其值

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）

部分的 IE 显示的错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。

    * display: inline一block
    * height: (任何值除了auto)
    * float: (left 或 right)
    * position: absolute
    * width: (任何值除了auto)
    * writing一mode: tb一rl；（实现文字可以垂直显示，具体意义可百度了解）
    * zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

    * min一height: (任意值)
    * max一height: (除 none 外任意值)
    * min一width: (任意值)
    * max一width: (除 none 外任意值)
    * overflow: (除 visible 外任意值)
    * overflow一x: (除 visible 外任意值)
    * overflow一y: (除 visible 外任意值)
    * position: fixed

简述jpg，gif，png-8，png-24的区别，及其各自的使用场景

gif、jpg、png格式的图片在网站制作中的区别

Gif格式特点:
　　1.透明性,Gif是一种布尔透明类型，既它可以是全透明，也可以是全不透明，但是它并没有半透明（alpha透明）。
　　2.动画,Gif这种格式支持动画。
　　3.无损耗性,Gif是一种无损耗的图像格式，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
　　4.水平扫描,Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小
　　5.间隔渐进显示,Gif支持可选择性的间隔渐进显示
　　由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。

Jpeg（jpg）格式特点:
　　1.透明性,它并不支持透明。
　　2.动画,它也不支持动画。
　　3.损耗性,除了一些比如说旋转（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。
　　4.隔行渐进显示,它支持隔行渐进显示（但是ie浏览器并不支持这个属性，但是ie会在整个图像信息完全到达的时候显示）。
　　由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。

Png格式特点:

　　1.类型,Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png和全色的png，你完全可以用256色的png代替gif，用全色的png代替jpeg
　　2.透明性,Png是完全支持alpha透明的（透明，半透明，不透明），尽管有两个怪异的现象在ie6（下面详细讨论）
　　3.动画,它不支持动画
　　PNG图片格式现在包含三种类型：
　　1.PNG8 256色PNG的别名
　　2.PNG24 全色PNG的别名
　　3.PNG32 全色PNG的别名
　　基本上PNG32就是PNG24，但是附带了全alpha通道。就是说每个像素上不仅存储了24位真色彩信息还存储了8位的alpha通道信息，就如同GIF能存储透明和不透明信息一样。当我们把图片放到不太搭配的背景上的时候，透明PNG图片的边缘会显示得更加平滑。
　　当然，我也知道你的想法，“但是Photoshop也能生成带透明通道的PNG图片！”我也知道，它只是表面上这么说是PNG24，让我也产生困惑了。
　　作为一个伤感的Fireworks倡导者，我只使用PNG32支持附带alpha通道的真色彩图片。不管怎样，如果你习惯使用Photoshop，你就应该知道，Photoshop在“存储为WEB格式”中只提供PNG8和PNG24两种PNG格式。
　　我敢肯定你经常会勾选“支持透明”选项，以获得带有透明度的PNG图片，但是这样你就获取了一张PNG32图片。——Photoshop只是觉得把PNG32这个名称给隐藏掉了。。。。

对png8的误解
　　Png8的在ie中的怪异表现：
　　半透明的png8在ie6以下的浏览器显示为全透明。
　　Alpha透明的全色PNG（png32）在ie6中会出现背景颜色（通常是灰色）。
　　由上面可以总结：
　　（a）全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不需要特殊对待，因为在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的加强版。
　　（b）第二个bug没有什么好的方法解决，只能通过影响性能的方法AlphaImageLoader与需要加特殊标签（VML）。
　　因此得出结论就是：请使用PNG8。
Png8的软件问题：
　　Photoshop只能导出布尔透明的PNG8。
　　Fireworks既能导出布尔透明的PNG8，也能导出alpha透明的PNG8.

能够设置文本加粗的样式属性是什么

字体加粗（font一weight）　　

功能：用于设置字体笔划的粗细。　　

属性值：正常度一 normal 　　

相对度一 bold, bolder, light, lighter 　　

渐变度一 100, 200, 300, 400(相当于normal), 500, 600, 700(相当于 bold、 lighter、 bolder、以及数值100－900。　　

语法为：h1 {font一weight: 属性值}

Html和xhtml有什么区别?

html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。

最主要的不同:

XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

编写一个布局，页面宽度自适应，最小宽度300px，左边定宽35%，右边定宽65%

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <style>
        .container{
            height: 600px;
            _width: 300px;
            min一width: 300px;
        }
        .left{
            width: 35%;
            height: 100%;
            background: #ff0;
            float: left;
        }
        .right{
            overflow:hidden;
            width: 65%;
            height: 100%;
            background: #f0;
        }
    </style>

View Code

Css的基本语句构成是？

语法:
（自定义的样式名称）｛
样式内容（属性：属性值；）
｝

行内元素有那些。块级元素有那些。空元素有哪些

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素； span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span select strong（强调的语气）img input（内联元素）

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：

鲜为人知的是：

tips：详见：http://www.cnblogs.com/fanlinqiang/p/7741263.html

css引入的方式有哪些，link和@import的区别是什么

有四种形式:

1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用<link rel="stylesheet" type="text/css" href="*.css">链接这个样式表文件.

2.内部样式表,就是把样式表放到页面的<head>区里.

 <style type="text/css">

    div {height: 600px;}

</style>

3.导入外部样式表,用@import,在<head>与</head>之间，

<style type="text/css">

    @import "*.css"

</style>

4.内嵌样式,就是在标签内写入style="",比如:

<div style="background:#cccccc"></div>设置div背景色为灰色.

区别：

1）. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2）. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3）. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4）. link支持使用Javascript控制DOM去改变样式；而@import不支持。

语义化的理解？

1.html语义化就是让页面的内容结构化，便于浏览器、搜索引擎解析；

2.在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

请写出至少20个HTML5标签

Html5有那些新增的表单元素

表单控：color，calendar，date，datetime，datetime一local，time，mouth，week，email，url，search，range，tel

新的表单元素：datalist，keygen，output

Html5中datalist是什么

<datalist> 标签定义选项列表，与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

请写出XHTML和css如何注释

XHTML:<!一一注释内容一一>

css:/* 注释内容*/

现在想调节一下父元素的透明度，但是又不影响子元素的透明度，怎么办？

方法1：用RGBA

方法2：再加一层与父元素同级的div装载子元素定位到子元素原位置

H5中新增的单位rem是什么意思，和em的关系，以及rem在自适应布局中的应用方法

Rem为单位：

rem是相对于根元素<html>的“font一size”为基准。比如说我们给html设置font一size为100px，

那么我们要给html中的p标签设置16px的字体，font一size设置.16rem就可以，在这里16px=.16rem。

Em为单位：

这种技术需要一个参考点，一般都是以<body>的“font一size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

这个单位与em有什么区别呢？

区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

清楚浮动的几种方法，各自的优缺点

1、父级div定义伪类:after和zoom

<style type="text/css">

 　  .div1{background:#000080;border:1px solid red;}

    .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}

 　  .left{float:left;width:20%;height:200px;background:#DDD}

 　  .right{float:right;width:30%;height:80px;background:#DDD}

　   /*清除浮动代码*/

 　  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

 　  .clearfloat{zoom:1}

</style>

<div class="div1 clearfloat">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

     div2

</div>

View Code

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题。

优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

2、父级div定义overflow:hidden

<style type="text/css">

 　 .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}

     .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px;width:98%}

 　 .left{float:left;width:20%;height:200px;background:#DDD}

 　 .right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

　　div2

</div>

View Code

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好。

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

3、结尾处加空div标签clear:both

<style type="text/css">

　   .div1{background:#000080;border:1px solid red}

　   .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}

 　  .left{float:left;width:20%;height:200px;background:#DDD}

　   .right{float:right;width:30%;height:80px;background:#DDD}

　   /*清除浮动代码*/

　   .clearfloat{clear:both}

</style>

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

　　<div class="clearfloat"></div>

</div>

<div class="div2">

　　div2

</div>

View Code

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。

优点：简单，代码少，浏览器支持好，不容易出现怪问题。

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽。

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。

4、父级div定义height

<style type="text/css">

　　   .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}

　　   .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}

 　　  .left{float:left;width:20%;height:200px;background:#DDD}

　　   .right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

　　div2

</div>

View Code

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握。

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。

建议：不推荐使用，只建议高度固定的布局时使用。

5、父级div定义overflow:auto

<style type="text/css">

 　　  .div1{background:#000080;border:1px solid red;

         /*解决代码*/width:98%;overflow:auto}

 　.div2{background:#800080; border:1px solid red; height:100px; margin- top:10px;width:98%}

 　　  .left{float:left;width:20%;height:200px;background:#DDD}

　　   .right{float:right;width:30%;height:80px;background:#DDD}

</style>

<div class="div1">

　　<div class="left">Left</div>

　　<div class="right">Right</div>

</div>

<div class="div2">

　　div2

</div>

View Code

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度。

优点：简单，代码少，浏览器支持好。

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

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

title 是鼠标放上去的额外信息

alt 是图片不能正常显示的时候，用文字代替

Css选择符有哪些？哪些属性可以继承？优先级算法如何计算？

选择符/选择器

1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul < li） 6.后代选择器（li a）

7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a: hover, li: nth 一 child）

优先级 ( 选择符的权重 )

css中用四位数字表示权重，权重的表达方式如：0，0，0，0

内联样式的权重为1000

id选择符的权重为0100

class选择符的权重为0010

属性选择符的权重为0010

伪类选择符的权重为0010

类型选择符的权重为0001

伪元素选择符的权重为0001

子选择符的权重为0000

继承样式的权重为0000

包含选择符的权重：为包含选择符的权重之和

tips：优先级为: !important > id > class > tag ， important 比内联优先级高，优先级就近原则，样式定义最近者为准；载入样式以最后载入的定位为准;

可继承样式与不可继承样式

可继承： font一size font一family color,;

不可继承：border padding margin width height （除可继承样式外）

单行文本溢出使用省略号表示?

1、容器宽度：width：value；

2、强制文本在一行内显示:white-space：nowrap;

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis;

tips：详见 http://www.cnblogs.com/fanlinqiang/p/7741264.html

是否做过有上百图层的psd切图？ps隐藏其他图层，只显示其中一个图层的快捷键

Alt + 当前图层前眼睛

了解响应式布局吗？请大体说一说

响应式布局概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

设计步骤：

1．设置meta标签

2．根据媒体查询设置样式

3．设置多种视图宽度

4．注意点：

5．宽度使用百分比

6．处理图片缩放问题

详见：http://caibaojian.com/356.html

BFC

w3c规范中的BFC定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline一blocks, table一cells,和 table一captions),以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的 BFC (块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin一left)会触碰到容器的左边缘(border一left)(对于从右到左的格式来说，则触碰到右边缘）。

BFC的通俗理解：

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

详细参见：

http://www.cnblogs.com/fanlinqiang/p/7741248.html

http://www.w3cplus.com/css/understanding一bfc一and一margin一collapse.html

https://www.zhihu.com/question/28433480

说说flex布局？

display: flex | inline-flex
flex-direction: row | row-reverse | colunm | column-reverse
flex-wrap: wrap | nowrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-items: flex-start | flex-end | center | baseline | stretch

order: <integer>
flex-grow: <number>
flex-shrink: <number>
flex-basis: <length>
flex: [flex-grow] [flex-shrink] [flex-basis]
align-self: auto | flex-start | flex-end | center | baseline |stretch

a链接的四状态？

a:link {color:#FF0000;}/* 未被访问的链接 */

a:visited {color:#00FF00;}/* 已被访问的链接 */

a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}/* 正在被点击的链接 */

如何检查自己写的代码是否符合h5标准？

https://validator.w3.org/

posted @ 2017-11-19 09:30 fanlinqiang 阅读(2099) 评论(0) 收藏举报

刷新页面返回顶部

FAN

html与css基础试题

Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式?

浏览器标准模式和怪异模式之间的区别是什么？

介绍一下标准的css盒模型，低版本ie盒模型有什么不同

前端页面由哪三层构成，分别是什么，作用是什么

列举5种IE haslayout的属性及其值

简述jpg，gif，png-8，png-24的区别，及其各自的使用场景

能够设置文本加粗的样式属性是什么

Html和xhtml有什么区别?

编写一个布局，页面宽度自适应，最小宽度300px，左边定宽35%，右边定宽65%

Css的基本语句构成是？

行内元素有那些。块级元素有那些。空元素有哪些

语义化的理解？

请写出至少20个HTML5标签

Html5中datalist是什么

请写出XHTML和css如何注释

现在想调节一下父元素的透明度，但是又不影响子元素的透明度，怎么办？

H5中新增的单位rem是什么意思，和em的关系，以及rem在自适应布局中的应用方法

清楚浮动的几种方法，各自的优缺点

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

Css选择符有哪些？哪些属性可以继承？优先级算法如何计算？

单行文本溢出使用省略号表示?

是否做过有上百图层的psd切图？ps隐藏其他图层，只显示其中一个图层的快捷键

了解响应式布局吗？请大体说一说

说说flex布局？

a链接的四状态？

如何检查自己写的代码是否符合h5标准？

公告