html+css

元素都有哪些类型：

  • 块状元素

    • display:block

    • <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

    • 标签独占一行，可指定宽、高

  • 内联元素(又叫行内元素)

    • display:inline

    • <a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

    • 标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行

  • 内联块状元素

    • display:inline-block

    • <img>、<input>

    • 同时具备内联元素、块状元素的特点

      • 和其他元素都在一行上

      • 元素的高度、宽度、行高以及顶和底边距都可设置

一个块元素垂直水平绝对居中的方法：

flex布局

.box {
    margin: 50vh auto 0;
    transform: translate(0, -50%);
}

css选择器有哪些，选择器的权重的优先级

选择器类型

名称

示例

ID

#id

class

.class

标签

p

通用

*

属性

[type="text"]

伪类

:hover

伪元素

::first-line

子选择器、相邻选择器

ul>li h1+p

权重计算规则

  1. 第一等：代表内联样式，如: style=””，权值为1000。

  2. 第二等：代表ID选择器，如：#content，权值为0100。

  3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

  4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

  5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

  6. 继承的样式没有权值。

相对定位和绝对定位的差别：

绝对定位：absolute 和 fixed 统称为绝对定位

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位， 则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。 脱离后原来的位置相当于是空的，下面的元素会来占据位置。

相对定位：relative

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中， 元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

隐藏一个元素的方法：

  1. opacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互

  2. visibility：hidden将元素本身及其子元素都置为不可见的, 而元素本身依然占据它自己的位置并对网页的布局起作用，它不会响应用户交互.如果想让子元素显示，则设置子元素的visibility：visible;

  3. display：none使用这个属性，被隐藏的元素对网页的布局不起作用。不仅如此，一旦display设为none任何对该元素直接的用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

  4. position：absolute 将top和left设置成足够大的负数，相当于把元素放到可视区域外，它不会影响布局，能够让元素保持可操作性，在读屏软件上可以被识别。

  5. width、hight：设置为0

总结一下：

  1. opacity,visibility影响布局，前者不影响交互，后者影响交互；

  2. display不影响布局，影响交互；

  3. position 不影响布局，不影响交互；

H5的新特性有哪些：

  1. h5新语义元素（有利于代码可读性和SEO）

  2. 本地存储

  3. 离线web应用

  4. 表单新增功能

  5. CSS3

  6. 地理定位

H5的新特性

Previous项目方面NextJavaScript方面

Last updated