三月考核题目总结

input表单控件中,valueplaceholderreadonlydisable的区别分别是什么?

  1. placeholder属性是input框的提示内容,该提示会在输入字段为空时显示,在获得焦点时消失,不占空间
    value属性是input框的默认内容,占空间 。
  2. 如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。
    readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

如何区别CSS中的display:nonevisibility:hidden

display:none:元素不显示也不占据位置
visibility:hidden:元素不显示但占据位置

描述块级元素与行内元素的区别

  1. 行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列。
  2. 行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。
  3. 块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

写出BFC的应用场景,以及如何触发BFC

应用场景:

  1. 防止浮动导致父元素高度塌陷;
  2. 避免外边距折叠;

触发条件:

  1. 浮动元素(元素的 float 不是 none
  2. 绝对定位元素(元素的 positionabsolutefixed
  3. 行内块元素(元素的 displayinline-block
  4. 表格单元格(元素的 displaytable-cellHTML表格单元格默认为该值)
  5. 表格标题(元素的 displaytable-captionHTML表格标题默认为该值)
  6. 匿名表格单元格元素(元素的 displaytabletable-rowtable-row-grouptable-header-grouptable-footer-groupinline-table
  7. overflow 值不为 visible 的块元素
  8. 弹性元素(displayflexinline-flex元素的直接子元素)
  9. 网格元素(displaygridinline-grid 元素的直接子元素) 等等。

写出常用的http状态码

在这里插入图片描述

css实现三角形

position属性relativeabsolute的用法和区别

  1. position值为relative的元素以其前面兄弟元素为参照,并且元素左上角坐标就是后面兄弟元素左上角坐标
  2. position值为absoluteHTML元素其位置是以position样式值为relative最近祖先元素为参照.如果没有则以浏览器左上角(或者body元素)为参照

标准盒模型和ie盒模型

在这里插入图片描述
在这里插入图片描述

浮动及清除浮动的方法

所谓浮动就是让设置的标签产生漂浮效果,脱离原来在页面本应出现的空间位置,不再占用任何文档流空间。元素设置为浮动以后,会生成一个块级元素,而不论它本身是何种元素。且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。
清除浮动

  1. 父级div定义overflow:hidden
  2. 结尾处加空div标签clear:both
  3. 父级div手动定义height(只适合高度固定的布局)
  4. 父级div定义overflow:auto(内部宽高超过父级div时,会出现滚动条。)
  5. 父级div定义伪类:afterzoom

实现水平垂直居中的几种方式

  1. 弹性盒
.parent {
	display: flex;
	justify-content: center;
	align-items: center;	
}
  1. 子绝父相
.parent {
	position:relative;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
  1. 网格布局
.parent {
	display: grid;
}
.child {
	justify-self: center;
	align-self: center;
}
  1. 伪元素
.parent {
	text-align: center;
}
.parent:after {
	content: '';
	height: 100%;
}
.parent:after, .child {
	display: inline-block;
	vertical-align: middle;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值