龙空技术网

今天看了几道web基础题,却掉进了这几道基础题里面了

日语学习站 172

前言:

如今看官们对“clear属性的常用值”都比较注重,兄弟们都想要分析一些“clear属性的常用值”的相关文章。那么小编也在网摘上收集了一些有关“clear属性的常用值””的相关知识,希望你们能喜欢,兄弟们快快来学习一下吧!

1.知道语义化吗?说说你理解的语义化,如果是你,平时会怎么做来保证语义化?

像html5的新的标签header,footer,section等就是语义化

一方面,语义化就是让计算机能够快读的读懂内容,高效的处理信息,可以对搜索引擎更友好

另一方面,便于与他人的协作,他人通过读代码就可以理解你网页标签的意义

去掉或者丢失样式的时候能够让页面呈现出清晰的结构

有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义方式来渲染网页

便于团队开发和维护,语义化更具有可读性,是下一步把网页的重要动向,遵循W3C标准的团队都要遵循这个标准,减少差异化

2.介绍HTML5的新特性

新的DOCTYPE声明<!DOCTYPE html>

完全支持css3

video和audio

本地存储

语义化表圈

canvas

新事件如 ondrag onresize

3.如果解决ajax无法后退的问题?

html5里引入了新的API,即:history.pushState,history.replaceState

可以通过pushState和replaceSate接口浏览器历史,并且改变当前页面的URL

onpopstate监听后退

4.websocket和ajax轮询

websocket是html5中提出的新的协议,可以实现客户端与服务器的通信,实现服务器的推送功能

优点是,只要简历一次连接,就可以连续不断的得到服务器推送消息,节省带宽和服务器端的压力。

ajax轮询模拟常连接就是每隔一段时间(0.5s)就向服务器发起ajax请求,查询服务器是否有数据更新

缺点就是,每次都要建立HTTP连接,即使需要传输的数据非常少,浪费带宽

5.web worker和websocket

worker主线程:

通过worker = new worker(url)加载一个js文件来创建一个worker,同时返回一个worker实例

通过worker.postMessage(data)方法来向worker发送数据。

绑定worker.onmessage方法来接收worder发送过来的数据

可以使用worker.terminate()来终止一个worder的执行。

6.垂直居中

单行行内元素

可以设置padding-top,padding-bottom

将height和line-height设为相等

多行行内元素

可以将元素转为tabel样式,再设置vertical-align:middle;

使用flex布局

块级元素

已知高度绝对定位负边距

未知高度transform:translateY(-50%);

flex布局

display: flex;

justify-content: center;

aligin-items: center;

7.rem 和 em的区别?

em相对于父元素,rem相对于根元素

8.清除浮动

利用clear属性进行清理

父容器结尾插入空标签

<div style="clear: both;"></div>

利用css伪元素:

.clearfix:after {

content: ".";

height: 0;

visibility: hidden;

display: block;

clear: both;

}

将父容器形成BFC

BFC能清理浮动主要运用的是它的布局规则:

内部的Box会在垂直方向,一个接一个的放置

box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠

每个元素margin box的左边,与包含快border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此

BFC的区域不会与float box重叠

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此

计算BFC的高度时,浮动元素也参与计算

浮动清理利用的主要是第六条规则,只要将父容器出发为BFC,就可以实现包含的效果。那么出发BFC有哪种方法?

根元素

float属性不为noe

position为absolute或fixed

display为inline-block,table-cell,table-caption,flex,inline-flex

overflow不为visible

9.position的值, relative和absolute分别是相对于谁进行定位的?

relative:相对定位,相对于自己本身在正常文档流中的位置进行定位。

absolute:生成绝对定位,相对于最近一级定位不为static的父元素进行定位。

fixed: (老版本IE不支持)生成绝对定位,相对于浏览器窗口或者frame进行定位。

static:默认值,没有定位,元素出现在正常的文档流中。

sticky:生成粘性定位的元素,容器的位置根据正常文档流计算得出。

10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

选择符:

id选择器(#myId)

类选择器(.myClassName)

标签选择器(div,p,h1)

相邻选择器(h1 + p)

子选择器(ul > li)

后代选择器(li a)

通配符选择器(*)

属性选择器(button[disabled="true"])

伪类选择器(a:hover,li:nth-child)

有多少人和我一样到后面前的基础都忘了差不多了呢?

标签: #clear属性的常用值