前端测试题查缺补漏

xSing1e

已于 2023-05-08 09:43:01 修改

阅读量102

点赞数

文章标签：前端 css html

于 2023-04-12 15:00:45 首次发布

本文链接：https://blog.csdn.net/weixin_52310583/article/details/130102383

版权

a:link,a:visited,a:hover,a:active 分别是什么意思?

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候

正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .

因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。当鼠标经过已经访问过的链接，会同时拥有a:visited、a:hover两种属性，a:visited离它最近，所以它优先满足a:visited，而放弃a:hover的重复定义。究其原因，是css的就近原则“惹的祸”。

2.

getContent ：获取内容
getContext：返回一个用于在画布上绘图的环境。
request.getContextPath()可以返回当前页面所在的应用的名字;
getGraphics：Java里面的方法。public Graphics getGraphics()。为组件创建一个图形上下文。如果组件当前是不可显示的，则此方法返回 null。
public void paint(Graphics g)绘制此组件。
Canvas 对象的方法就是 getContext()

常见的块元素

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
fieldset – form控制组
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔线
isindex – input prompt
menu – 菜单列表
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表

行内元素 inline element

行内元素的特性

和其他元素都在一行上，遇到父级元素边界会自动换行
高、行高以及内外边距都不可以改变
宽度与内容一样宽，且不可改变
行内元素只能容纳文本或者其他行内元素
对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效

常见的行内元素

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线

行内块元素

行内块元素的特性

元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、外边距、内边距的所有样式的设置

能使字体变粗的css样式

font-weight:bold

其中font-weight的值有bolder（特粗体）、bold（加粗）、normal（正常）、lighter（细体），当然font-weight的值还可以用数值（100~900，必须为整百）进行表示

text-transform用来设置文本的大小写，

值为：none（默认值，不设置）、capitalize（使文本中的每个单词的首字母大写）、uppercase（将文本中的内容转换成大写）、 lowercase（将文本中的内容转换成小写）；

阅读如下代码：

<style type="text/css">
.a, .b, .c {
    box-sizing: border-box;
    border: 1px solid;
}
.wrap {
    width: 250px;
}
.a {
    width: 100px;
    height: 100px;
    float: left;
}
.b {
    width: 100px;
    height: 50px;
    float: left;
}
.c {
    width: 100px;
    height: 100px;
    display: inline-block;
}
</style>
 
<div class="wrap">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

请问 wrap 这个 div 的高度是多少？

150px

BFC 原理：

BFC（Block Formatting Context）基础分析 - 阿胜4K - 博客园 (cnblogs.com)

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

BFC 的区域不会与 float 的元素区域重叠，文字环绕效果。。。

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

同一个 BFC 下外边距会发生折叠
<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>
从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。