考核题

考核题总结

1、1.在input表单控件中，value和placeholder；readonly和disable的区别分别是什么？

• 在input表单中value是值的一部分，鼠标点击后需要逐个删除，placeholder的值仅仅在文本框中做背景的作用，点击后消失；
• readonly不可编辑，但可以选择和复制；值可以传递到后台
  disabled不能编辑，不能复制，不能选择；值不可以传递到后台

2、如何区别CSS中的display:none和visibility:hidden？

display:none:元素及其子元素消失，不占据页面位置
visibility:hidden：元素消失，但仍占据位置，影响页面布局

3、描述块级元素与行内元素的区别？写出五个块级元素及五个行内元素？img,input是块级元素还是行内元素？怎么指定元素以块级元素展示？

块级元素独占一行，新的元素另起一行，行内元素多元素可同时在一行，行内元素不能修改宽高，且只能由块级元素包含行内元素。

块级元素：div h1~h5 p ul ol tr
行内元素：span a td em strong
img,input既是块级元素，也是行级元素；
用display:block;设置块级元素

4.请写出BFC的应用场景，以及如何触发BFC。

1.清除浮动 解决margin塌陷
2.

• html根元素
• float 不为 none
• 绝对定位元素 也就是 position 为 absolute 和 fixed
• 行内快元素 display 为 inline-block
• overflow 不为 visible

5。写出元素水平垂直的方法（写出代码）

1.内联元素水平居中
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。
2.单行文本水平垂直居中：text-aligh:center;且让行高等于父元素高度；
3.将块级元素转化成行内块级元素，使用行内元素水平垂直居中方法

   .wrap{
      height: 400px;
      background-color: tomato;
      line-height: 400px;
      text-align: center;
    }
    .wrap>div{
      display: inline-block;
    }

4. margin+transform实现

.wrap{
	overflow: hidden;
}

.box{
	margin: 50% auto;
	transform : translateY(-50%);
}

5. absolute + transform

.wrap{
	position: relative;
}

.box{
	position: absolut;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

6.写出常用的http状态码

7.transform有哪些用法？

1、rotate（旋转）
2、scale（缩放）
3、skew（倾斜）
4、translate（移动）左负右正

8.只用css实现一个三角形（不用css3）

div{
	width:0px;
	height:0px;
	border:20px solid;
	border-color:transparent  transparent transparent green;
}

9.position的属性有哪几个，relative与absolute的用法和区别.

4个；static,absolute,relative,fixed,
定位为relative的元素脱离正常的文本流中，不设置top等属性在本来所在第，设置后以现在位置为标准移动
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在，以父级元素且有定位属性的为标准，若无父级元素有定位属性，则以body为标准；

10.在标准盒模型和ie盒模型下两个盒子的宽度和高度是多少？（画出两个盒模型示意图）。

11.写出选择器权重。

名称	权重值
标签选择器、伪元素选择器	1
属性选择器、伪类选择器、类选择器	10
id选择器	100
内联样式	1000
子代选择器、后代选择器、相邻选择器、通用选择器(*)	0
!important	infinity(最大)

12.什么是浮动，写出几种清除浮动的方法。

• 方法一：给浮动的元素的祖先元素加高度。
  如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
• 方法二：overflow：hidden
  这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
  我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。
  并且,overflow:hidden;能够让margin生效。
• 方法三：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after伪元素。