前端考核总结

css学习考核总结

1.readonly和disable的区别
Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）
2.display：none和visibility:hidden的区别
visibility: hidden：将元素隐藏，但是在网页中该占的位置还是占着,它仍具有高度、宽度等属性值.

display: none：将元素的显示设为无，即在网页中不占任何的位置。
3.BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC的作用
1.避免margin塌陷
父子元素之间垂直方向的margin会粘合到一起，取最大的那个值。此时我么可以触发BFC，将子元素用div包裹起来，可以设置overflow：hidden。

2.解决浮动元素令父元素高度坍塌
当我们不给父元素设置高度，子元素设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。

3.自适应两栏布局
给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响
触发BFC

触发方法	语法
给父级设置绝对定位	position: absolute
给父级设置行级块元素	display: inline-bolck
给父级设置设置浮动	float: left/right
给父级添加溢出隐藏	overflow: hidden

BFC的三个特性：

• 阻止外边距折叠
• 可以包含浮动的元素
• 可以阻止元素被浮动元素覆盖

CSS两种盒模型

在html中盒模型可以分为标准盒模型(W3C盒子模型)和怪异盒模型(IE盒子模型)。

在标准的盒子模型中，width指content部分的宽度。

边框模型的宽度为内容的宽度，加上内边距的宽度，再加上边框的宽度
公式为： width = 内容的宽度 + padding + border

总结：

• 盒模型在定义width宽度后，后面写padding和border是会改变盒子实际大小。如果需要保持固定大小，需要进行计算。
• 边框模型在定义width宽度后，不管怎么写padding和border宽度都固定在书写时的width。但是有可能导致内容被压缩，导致布局异常。

块状元素，行内元素，行内块元素
常见的行内元素
<span> 、<a>,<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>

行内块元素
<a> ,<abbr>表示一个缩写形式,定义只取首字母缩写
<b>字体加粗<bdo>可覆盖默认的文本方向
<big>大号字体加粗<br>换行<cite>引用进行定义
<code>定义计算机代码文本<dfn>定义一个定义项目
<em>定义为强调的内容<i>斜体文本效果<img>向网页中嵌入一幅图像<input>输入框<kbd>定义键盘文本
<label> ,<q>,<samp>定义样本文本<select>,<small>,<span>组合文档中的行内元素<strong>,<textarea>多行的文本输入控件

块级元素
<address>、<center>、<h1>~<h6>、<hr>、<p>、<pre>、<ul>、<ol>、<dl>、<table>、<div>、<form>
权重

选择器	选择器权重
继承或者通配	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选则器	0，0，1，0
行内样式最高	1，0，0，0

权重特性：
1.!important 在指定的选择器后加 !important 则此时权重最高。
2.继承的权重是0，如果该元素没有直接选中，不管父选择器权重多高，子元素的权重都是0。
3.选择器由四位组成，不会进位。
4.等级判断从左向右，如果某一位数值相同，则判断下一位。
5.如果权重相同，则根据层叠性 就近原则。

常见的http码

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。
400 Bad Request 请求出现语法错误。
500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。
502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。

清除浮动的常用方法
额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>，或则其他块级标签等亦可。
优缺点

通俗易懂，书写方便，但是添加许多无意义的标签，结构化较差

父级添加overflow属性方法
overflow为hidden|auto|scroll都可以实现

优缺点
代码简洁，但是内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，
.clearfix:after {
    content: ""; 
	display: block;
	height: 0; 
	clear: both;
	visibility: hidden; 
	} 
.clearfix {*zoom: 1;}  /* IE6、7 专有 */

考核总结
通过这次的考核，发现许多自己之前学习的一些遗漏的知识点，例如HTTP状态码，及visibility:hidden属性，还有一些学习过但已经遗忘或者记忆不清的知识点，之后会在学习新知识的同时多去复习复习，实现，加深记忆。