淘先锋技术网

首页 1 2 3 4 5 6 7

考核题总结

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;
    }
  1. margin+transform实现
.wrap{
	overflow: hidden;
}

.box{
	margin: 50% auto;
	transform : translateY(-50%);
}
  1. 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
!importantinfinity(最大)

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

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