html牛客刷题笔记-2

外联：使用link标签引入外部的css文件。 内联：在head标签中使用style标签。 嵌入：在标签中使用style属性。

使用 data-* 属性来嵌入自定义数据：

<ul>
<li data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li>
<li data-animal-type="蜘蛛">蝇虎</li>
</ul>

不是所有标签都需要结束标签，例如我们很熟悉的换行标签</br>；

doctype类型会影响页面效果；

HTML标签对大小写不敏感。一般小写。

h5中新增了data-*属性，用来应对浏览器不支持的情况

 

选C。考察的是JavaScript中浏览器的Window对象。

Window 对象表示浏览器中打开的窗口，通过Window对象的属性，比如closed属性检索窗口是否已被关闭。所以A正确。

window对象的属性包含内容：所以B正确。

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所以C不正确，D正确。

^下标文本

_上标文本

<mark>突出显示</mark>

可以看做是气球飘在上方是P，沉在下面是b

 

 clear:both 属性定义了元素的哪边的上方不允许出现浮动元素。

触发一个盒子的BFC  弥补margin塌陷

position：absolute；

display：inline-block；

float：left/right

overflow：hidden；

阅读如下代码：

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

解析:

如果C 没有 display: inline-block; 那么C会直接和a重叠，虽然文本让出位置(c会出现在a的下边界下方). 但是高度仍然是100px.

这里的关键在于  display: inline-block 使得 C内部形成了BFC, BFC不与float元素重叠. 所以会出现在紧贴着a的右边界以及b的下边界的位置出现.

带有id的DOM树元素会成为全局变量。这道题不是很明白……

假设HTML结构为<parent><child>content</child></parent>下列哪些做法可以实现child内容垂直居中？

A:把parent变成table，再把子元素变为table-cell，而vertical-align属性可以设置元素垂直对齐，前提条件：只能应用于内联元素以及display值为table-cell的元素。

B：弹性布局。align-items：center为设置子元素在侧轴方向上居中对齐，弹性布局默认主轴方向为row（即从左到右），侧轴就是就是column(从上到下）。

C：定位。父元素设置相对定位，子元素设置绝对定位，子元素的top值设置为50%（即父元素高度的50%），注意：此时是child元素的左上角（0,0），移到了parent元素的（0,parent高度的50%），而不是子元素的中心点移到了父元素垂直方向的中心点。因此子元素需要往上移动自身高度的50%，即transform：translateY（-50%）。

D：设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。打个比方：有两个行内元素a和b，a和b都是img，如果a加了vertical-align:middle样式，b的底部（基线）就会对齐a的中间位置；如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了。

而伪元素的display属性默认值为inline，行内元素是无法设置宽高的，想要设置宽高需要将之设置为block或者inline-block。所以D有错误，应该将：after设置为inline-block才行