pacerscyc / blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 1 KB

水水水

blog's People

Contributors

Watchers

blog's Issues

JS基本概念

1.CSS和JS在网页中的放置顺序是怎样的？

CSS样式在HTML中的head标签中以link标签形式导入；
JS应在body尾部以script标签形式引入，外部文件链接写入script标签的src属性中，内部则写在script标签内容中，一个script标签不能同时引入JS代码和外部JS文件。

2.解释白屏和FOUC

**白屏：**如果把样式放在底部，对于IE浏览器，chrome等（css全部加载后再呈现,有可能等待长），在某些场景下(新窗口打开，刷新等)页面会出现白屏，而不是内容逐步展现。使用 @import 标签，即使 CSS 放入 link, 并且放在头部,也可能出现白屏。对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。但在加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象。
**FOUC：**Flash of Unstyled Content即无样式内容闪烁，指部分浏览器是边渲染边呈现，CSS放置body标签底部，会出现加载html结束后才一次性加载css样式，从而导致页面闪烁。

3.async和defer的作用是什么？有什么区别？

当浏览器碰到script脚本时
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

defer: 脚本延迟到文档解析和显示后执行，有顺序
async: 不保证顺序

4.简述网页的渲染机制

解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting)

这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

详细渲染机制参考：文章

HTML表单使用方法

Html中的form表单常用于用户信息的填写和提交，在前端开发中使用较为广泛。

form对象

建立一个form表单，提交方式method设置为邮件发送，自动填写autocomplete打开，填写验证novalidate打开
<form action="" method="post" autocomplete="on" novalidate="novalidate"></form>

label对象

属性:

for: 指明绑定控件的id.
formid: 指明所属的一个或多个表单

<label for="username">姓名：</label>
<input id="username" type="text" name="username" placeholder="用户名">

text对象

注意一旦 disabled=true, POST后就没有值,对于别的空间也是
<input id="username" type="text" name="username" placeholder="用户名">

textarea对象

属性和方法：

rows: 显示行数. 输入超过了就下拉
cols: 宽度.
height/width: 也可以控制大小.
readonly: 只读的.
disabled: 不可用,true/false.
name: 名称,用于表单调用.
required: 必须填的.HTML5.
maxlength: 最大字符数
form: 所属的一个或多个表单.
<textarea name="comments" placeholder="ddd" cols="80" rows="20"></textarea>

password对象

<input id="password" type="password" name="password">

radio对象

属性：

checked: 被选中. 也用来最终获取值

<label><input name="Fruit" type="radio" value="" checked/>苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>

checkbox对象

属性：

checked: 被选中. 也用来最终获取值

<label><input name="Fruit1" type="checkbox" value="" checked/>苹果 </label> 
<label><input name="Fruit2" type="checkbox" value="" />桃子 </label> 
<label><input name="Fruit3" type="checkbox" value="" />香蕉 </label> 
<label><input name="Fruit4" type="checkbox" value="" />梨 </label>

select对象

常用属性事件:

text: 显示内容
value: 具体值
index: 返回索引值(下拉时位置)
selected: 是否被选中,可以用于默认值

<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

hidden对象

一般用于储存一些不显示的信息,又可以通过JS进行操作修改,保存内容,被进一步调用等
<input type="hidden" name="country" value="Norway" />

CSS常见样式问题

1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

text-align: center一般使元素内的文本或内容水平居中，作用于块级元素，能够使文本、图片、行内元素以及input标签等实现水平居中，如下图
HTML结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    前端开发
    <span>HTMML</span>
    <p>CSS</p>
    <input type="text">
    <img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="">
  </div>
  <span class="box2">前端开发</span>
  <p class="box3">
    前端开发
  </p>
</body>
</html>

样式

p,span,img{
  border:1px solid;
}
.box1{
  width:400px;
  border:1px solid red;
  text-align:center;
}
.box2{
  border:1px solid red;
  text-align:center;
}
.box3{
  width:200px;
  border:1px solid red;
  text-align:center;
}

效果

2.IE 盒模型和W3C盒模型有什么区别?

IE盒模型：width=content+padding+border (height计算方式相同)
W3C盒模型：width=content(height计算方式相同)

3.*{ box-sizing: border-box;}的作用是什么？

为一个元素设置box-sizing: border-box;样式时，宽高计算采用IE盒模型，其宽度即为元素内容宽度，不包括padding和border。

4.line-height: 2和line-height: 200%有什么区别?

line-height:2 指行高自身为文字大小的2倍
line-height: 200% 指行高为父元素文字大小的2倍
如下例所示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
    <div class="box box1">HTML</div>
    <div class="box box2">CSS</div>
    <div class="box box3">JavaScript</div>
  </div>
</body>
</html>

给父元素设置line-height:2和line-height:200%效果分别如下

line-height:2

line-height:200%

5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

特性：既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距)
去除缝隙：利用父容器font-size为0，然后重新设置元素中font-size来去除设置inline-block样式带来的缝隙，代码和效果如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
    <span class="box">hello</span>
    <span class="box">hello</span>
  </div>
</body>
</html>

样式

.wrap{
  font-size:0;
}
.box{
  width:100px;
  border:1px solid red;
  display:inline-block;
  font-size:16px;
}

效果

顶端对齐：为元素添加样式 vertical-align: top;

6.CSS sprite 是什么?

将不同的图标或图片合并到一张图片中，从而很好地减少网页的http请求，从而大大的提高页面的性能。

7.让一个元素"看不见"有几种方式？有什么区别?

1.display:none元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有
2.visibility: hidden元素消失后，在浏览器位置依然保留
3.opacity: 0 元素透明度设置为0
4.background-color: rgba(0，0，0，0.2)设置背景色透明
5.设置宽高等盒模型属性为0将元素隐藏

margin:0;  
border:0; 
padding:0; 
height:0; 
width:0; 
overflow:hidden;

前端基础知识

怎样理解 HTML 语义化

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有CSS样式情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

怎样理解内容与样式分离的原则

一个网页可以简单的分为三个部分：HTML——结构，CSS——表现，JavaScrip——行为。内容和样式的分离，就是指在网页编码的过程中，要将HTML和CSS两大部分分开。写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构和内容；然后进行 CSS 样式的编写，减少 HTML 与 CSS 契合度（即内容与样式分离）；写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。

样式与结构分离的优点：

浏览器加载网页页面速度变快。分离原则下，页面样式的代码写在了CSS当中，页面体积容量变得更小。
修改网页样式时，更有效率、更省时间。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
可以确保网页都能平稳退化。具备CSS支持的浏览器固然可以把网页呈现的美轮美奂，不支持或禁用了CSS功能的浏览器同样可以把网页的内容按照正确的内容结构显示出来。

有哪些常见的meta标签

<meta charset="utf-8">
编码方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
双核浏览器
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用于移动端的展示合理
<meta name="keywords" content="前端饥人谷">
网页关键字，利于搜索
<meta name="description" content="最有爱的前端学习社区">
搜索引擎优化
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
指定字符集
<meta http-equiv="refresh" content="n;url=">
定时让网页在指定的时间n内跳转
<meta http-equiv="pragma" content="no-cache">
禁用缓存
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
cookie设定，如果网页过期，存盘的cookie将被删除

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

文档声明的作用是告知浏览器页面使用的HTML版本。
严格模式，又叫标准模式，使页面按照 HTML 与 CSS 的定义渲染。
混杂模式，又叫怪异模式，以比较宽松的向后兼容的方式呈现，模拟老式浏览器以兼容老的站点。
<!doctype html> 的作用是告诉浏览器开启标准模式，开启标准模式后浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

浏览器乱码的原因是什么？如何解决

通用的编码方式：

ASCII，全称美国标准信息交换代码（American Standard Code for Information Interchange）的缩写, 针对英语设计。
utf-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。可用于显示中文简体繁体及其它语言（如英文，日文，韩文）。
GBK，**制定的一套汉字编码规则，用2个字节来表示一个汉字，总共可以覆盖2万多个文字。
ISOLatin-1，由于ASCII字符集不包括德、法语中的特殊拉丁字符，因此欧洲人发明了ISO 8859-1Latin 1，简称为ISOLatin-1。它对ASCII做了个扩充，涵盖拉丁字母表中特殊语言字符。

乱码原因：使用编辑器编写 HTML 文件，保存编写的HTML文件，会按照使用的编辑器默认的编码方式进行保存，使用浏览器打开HTML文件。在没有声明的情况下，浏览器并不知道你的这个文件是使用什么编码方式，于是会使用了默认解码方式。例如文件保存为GBK格式，在Chrome打开时默认使用 ISO -8859的解码方式，就会导致编码和解码不匹配，产生乱码。

解决方法：在文件保存的时候，自己要清楚是用哪种编码方式保存的（sublime默认保存方式是utf-8,安装了GBK Encoding support插件也可另存为gbk）。如果你的文件是保存为utf-8格式，在html 的里添加；如果你的文件保存为gbk格式，一定在文件里添加，对浏览器进行说明，直接按照声明的编码方式进行解析读取，就不会有乱码问题。

常见的浏览器有哪些，什么内核？

浏览器内核可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

Trident(IE内核)：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；[1] 360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器
Gecko内核： Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon
WebKit内核：chrome、傲游浏览器3、Apple Safari (Win/Mac/iPhone/iPad)、Android 默认浏览器
Blink内核：Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器

常见的HTML标签

标签	场景
`<head>`	用于定义文档头部
`<body>`	文档显示内容
`<div>`	用于页面布局，展示大块内容
`<h>`	h1~h6设置标题
`<p>`	设置段落文本
`<ul>`	无序列表
`<ol>`	有序列表
`<img>`	显示图片
`<a href="#"></a>`	设置链接

浏览器兼容基本认识

1.什么是 CSS hack？

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS hack有三种常见形式：
1.属性级Hack：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
2.选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}
3.IE条件注释Hack：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

2.谈一谈浏览器兼容的思路

1.是否要做

产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）

成本的角度 (有无必要做某件事)

2.做到什么程度

让哪些浏览器支持哪些效果

3.如何做

根据兼容需求选择技术框架/库(如jquery 1.x.x)

根据兼容需求选择兼容工具：html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss

条件注释、CSS Hack、js 能力检测做一些修补

3.列举5种以上浏览器兼容的写法

仅在ie7下加载css

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

ie6、7下采用zoom属性

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效，zoom:1触发hasLayout,起到类似BFC的效果 */
}

inline-block在ie6、7下兼容

.target{
  display: inline-block;
  *display: inline; /*仅对ie67生效*/
  *zoom: 1; /*仅对ie67生效*/
}

利用条件注释给ie9以下浏览器加载js库

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

判断浏览器版本为html添加相应的类

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html  class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html  class="no-js"><!--<![endif]-->

4.以下工具/名词是做什么的

条件注释： 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。

IE Hack： 针对不同版本的IE浏览器编写不同的CSS代码使其正常渲染。

js 能力检测： 能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。

html5shiv.js： HTML5 Shiv可以在旧版Internet Explorer中使用HTML5部分元素，并为Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5样式。

respond.js： 该脚本的目标是提供一个快速和轻便（3kb的/ 1kb gzip压缩）脚本，以便在不支持CSS3媒体查询的浏览器中启用响应式网页设计，特别是Internet Explorer 8及以下版本。

css reset： 对浏览器的默认样式进行重置以规范编码

normalize.css： 更高效规范的CSS重置方式，它具有以下作用

保留有用的默认值，与许多CSS重置不同。
规范各种元素的样式。
更正错误和常见的浏览器不一致。
通过微妙修改提高可用性。
说明使用详细评论的代码。

Modernizr： Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

postCSS： PostCSS是一种使用基于JavaScript的插件来自动执行常规CSS操作的软件开发工具。

5.一般在哪个网站查询属性兼容性？

CSS属性兼容
 hack写法

浮动定位基础知识

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

特征：

设置浮动后的元素（包括行内元素）将自动呈块状显示，可以定义width和height属性
浮动元素未定义宽度时，会自动收缩到能够包含内容的宽度
浮动元素不在文档的普通流中，档普通流中的块级元素感知不到浮动元素的存在
浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止
浮动元素后面的块状元素和内联元素都能够以流的形式环绕浮动元素左右。甚至于上面文本流连成一体
当两个以上相邻元素设置浮动时，若空间足够，则浮动元素在同一行显示且上边线处于同一水平；若空间不足，则后面的浮动元素会下移到能够容纳它的位置

对父元素影响：
若父容器中均为浮动元素，且父元素未设置高度时，父元素高度会塌陷变为0；
由于浮动块脱离了文档流中，所以文档流中的块表现得就像浮动块不存在一样，它不占据空间，父容器的高度不会被撑开，导致父容器高度塌陷。

对其他浮动元素影响：
浮动元素会依次排在其之前浮动元素左边或右边，父元素如果放不下了会被挤到下面一行。

对普通元素影响：
普通元素将会占据其原来的位置，后面的浮动元素会浮在普通元素之上。

对文字影响：
文字会环绕浮动元素显示。

2.清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动是指清除浮动元素给父元素造成的高度塌陷和给其他元素产生的影响。
方法一：
给父元素设置after伪元素

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

方法二：
为父元素创建BFC，将浮动元素限定在BFC区域，避免影响其他元素。
如

overflow: hidden/auto/scroll
float: left/right
position: absolute/fixed
display: inline-block/table-cell/table-caption

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

定位方式	实现方式	使用场景
static	默认布局，按照文档流定位	默认布局
relative	相对于元素自身正常位置进行定位，元素在文档流中仍占据原来空间，只是表现出来的位置会相对原来的位置偏移	适用于层叠效果
absolute	绝对定位，相对于有除static外定位属性的第一个父元素偏移，absolute定位元素会脱离文档流	适用于小区块的布局使用频繁
fixed	相对浏览器窗口定位，设置的偏移属性，是相对于浏览器窗口的位置	适用于广告等意图一直出现在用户眼前的信息

4.z-index 有什么作用? 如何使用?

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
z-index值

值	描述
auto	默认，堆叠顺序与父元素相等
number	设置元素的堆叠顺序
inherit	规定应该从父元素继承 z-index 属性的值

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

position: relative：可以使元素相对于元素自身正常位置发生偏移，有relative定位属性的元素仍然在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化。

负margin：通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，所以其他元素的位置发生了变化。

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC(Block formatting context)指块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
可对元素设置如下属性触发BFC：

float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素

BFC作用：
1.解决margin重叠问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

css样式

.box{
  width:100px;
  height:100px;
  margin:50px;
}
.box1{
  background:red;
}
.box2{
  background:blue;
}

效果

给box2添加父元素并设置overflow:hidden得到效果

2.两栏布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="side"></div>
  <div class="ct"></div>
</body>
</html>

CSS样式

.side{
  float:left;
  width:80px;
  height:150px;
  background:red;
}
.ct{
  width:300px;
  height:300px;
  background:yellow;
}

效果

给ct添加overflow: hidden后得到

3.清除浮动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

CSS样式

.wrap{
  width:400px;
  border:3px solid blue;
}
.box{
  width:100px;
  height:100px;
  float:left;
  background:yellow;
  margin-right:30px;
}

效果

给父元素添加overflow: hidden后

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

外边距合并： 两个块级元素位于普通流中，垂直方向上的margin发生叠加，取最大值进行合并。
不让相邻元素外边距合并： 将其中一个元素用父元素包裹，并建立BFC。
父子外边距合并：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
    <div class="box"></div>
  </div>
</body>
</html>

CSS样式

.wrap{
  width:400px;
  height:200px;
  background:pink;
  margin:20px;
}
.box{
  width:100px;
  height:100px;
  background:blue;
  margin:50px;
}

效果

可通过给父元素添加边框、内边距、非空内容等解决边距重叠问题

HTML、XML、XHTML有什么区别

HTML

超文本标记语言，是语法较为松散的、不严格的web语言。HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

XML

可扩展标记语言，主要用于存储数据和结构参考。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

XHTML

可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格参考。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
XHTML中元素必须有结束标签，元素必须嵌套；
XHTML不支持属性最小化，如下
正确：非最小化属性
<input checked="checked">
不正确：最小化属性
<input checked>

pacerscyc / blog Goto Github PK

blog's People

Contributors

Watchers

blog's Issues

1.CSS和JS在网页中的放置顺序是怎样的？

2.解释白屏和FOUC

3.async和defer的作用是什么？有什么区别？

4.简述网页的渲染机制

form对象

label对象

text对象

textarea对象

password对象

radio对象

checkbox对象

select对象

hidden对象

1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

2.IE 盒模型和W3C盒模型有什么区别?

3.*{ box-sizing: border-box;}的作用是什么？

4.line-height: 2和line-height: 200%有什么区别?

5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

6.CSS sprite 是什么?

7.让一个元素"看不见"有几种方式？有什么区别?

怎样理解 HTML 语义化

怎样理解内容与样式分离的原则

有哪些常见的meta标签

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

浏览器乱码的原因是什么？如何解决

常见的浏览器有哪些，什么内核？

常见的HTML标签

1.什么是 CSS hack？

2.谈一谈浏览器兼容的思路

3.列举5种以上浏览器兼容的写法

4.以下工具/名词是做什么的

5.一般在哪个网站查询属性兼容性？

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

2.清除浮动指什么? 如何清除浮动? 两种以上方法

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

4.z-index 有什么作用? 如何使用?

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

HTML

XML

XHTML

网页编码发展趋势：HTML >> XHTML >> XML

Recommend Projects

Recommend Topics

Recommend Org