三月考核题目总结

最新推荐文章于 2023-12-08 10:41:17 发布

不要香菜葱花

最新推荐文章于 2023-12-08 10:41:17 发布

阅读量118

点赞数

分类专栏：学习总结

本文链接：https://blog.csdn.net/dhhka/article/details/115007415

版权

学习总结专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

应用场景：

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

触发条件：

浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group或 inline-table）
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等。

写出常用的`http`状态码

在这里插入图片描述

用`css`实现三角形

`position`属性`relative`与`absolute`的用法和区别

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

标准盒模型和ie盒模型

在这里插入图片描述

浮动及清除浮动的方法

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

父级div定义overflow:hidden
结尾处加空div标签clear:both
父级div手动定义height（只适合高度固定的布局）
父级div定义overflow:auto（内部宽高超过父级div时，会出现滚动条。）
父级div定义伪类:after和zoom

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

弹性盒

.parent {
	display: flex;
	justify-content: center;
	align-items: center;	
}

子绝父相

.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;
}

网格布局

.parent {
	display: grid;
}
.child {
	justify-self: center;
	align-self: center;
}

伪元素

.parent {
	text-align: center;
}
.parent:after {
	content: '';
	height: 100%;
}
.parent:after, .child {
	display: inline-block;
	vertical-align: middle;
}