文章

HTML-CSS

HTML、CSS

发表于
作者 独行的风
25 分钟阅读
HTML-CSS

HTML、CSS

web 标准的理解

WEB标准不是某一个标准，而是一系列标准的集合。\ 网页主要由三部分组成：结构（html），表现（css）和行为（js）

HTML 语义化

语义化标签：

<header>代表头部

<nav>代表超链接区域

<main>定义文档主要内容

<article>可以表示文章、博客等内容

<aside>通常表示侧边栏或嵌入内容

<footer>代表尾部

  • 更具可读性、可维护性
  • 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析，如盲人阅读器根据语义渲染网页

H5 新特性

  1. 用于绘画 canvas 元素;
  2. 多媒体标签：video 和 audio 元素；
  3. 本地存储：localStorage 、sessionStorage ；
  4. 语义化标签：如 article、footer、header、nav、section；
  5. 表单控件：number、date、time、email、url、search、password。

浏览器及它们的内核

  • IE：trident内核
  • Firefox：gecko内核
  • Safari：webkit内核
  • Opera：以前是presto内核，Opera现已改用GoogleChrome的Blink内核
  • Chrome：Blink(基于webkit，Google与OperaSoftware共同开发)

HTML文件里开头的Doctype的作用

<!DOCTYPE> 声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）

盒子模型

盒模型分为标准盒模型和怪异盒模型(IE模型)

标准盒模型：**box-sizing：content-box**元素的宽度等于width+margin+border+padding

怪异****盒模型：**box-sizing：border-box**** 元素的宽度等于width+margin（其中width包含padding和border**）

1704692539924-b33adf64-50ca-4def-8e61-7d7ec1034d49.png 1704692612968-eaf2d537-4f08-445d-9d68-b61fb55f799f.png

img的alt与title有何异同

  • **alt：**图片加载失败时，显示在网页上的替代文字；
  • **title：**鼠标放上面时显示的文字,title是对图片的描述与进一步说明；

alt是img必要的属性，而title不是，对于网站seo优化来说，title与alt还有最重要的一点： 搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt 属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图 片说明。

css水平、垂直居中的写法

1
2
3
4
5
6
7
8
9
10
11

// 行内元素: 
text-align: center
// 块级元素: 
margin: 0 auto;

position: absolute;
left: 50%;
transform: translateX(-50%);

display: flex;
justify-content: center;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//设置line-height 等于height
height: 100px;
line-height: 100px;

position：absolute;
top: 50%;
transform: translateY(-50%);

display: flex;
align-items: center;

display: table;
display: table-cell;
vertical-align: middle;

块级元素水平垂直居中的方法（处于屏幕的正中央）

1、利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

1
2
3
4
5
6
7
8
9
10

.box{
  height: 200px;
  width: 300px;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

2、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

1
2
3
4
5
6
7
8

.mycss{ 
  width:300px;  
  height:200px;  
  position:absolute;  
  left:50%;  
  top:50%;  
  margin:-100px 0 0 -150px;
}

3、垂直居中一个1616479269236-18ee512c-be6b-48ee-b2bf-acb5e7a03d59.jpeg1616479292892-62369ceb-816a-42e9-a81d-3a66c9cbc45c.jpeg1616479302070-98d215c4-58dd-48d0-bf8d-d13b7abf6e09.jpeg1616479310202-4a20f5db-72fa-43b0-974e-b104adcfccaa.jpeg

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

说一下盒模型

盒模型的组成，由里向外content，padding，border，margin；

  • 在IE盒子模型中，width表示content+padding+border这三个部分的宽度；
  • 在标准的盒子模型中，width指content部分的宽度；

box-sizing的使用

1
2

box-sizing: content-box;  //是标准盒模型 (默认)
box-sizing: border-box;  //是IE盒模型

清除浮动的方法

1：父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2：结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3：父级div定义 伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

4：父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

display:none和visibility:hidden的区别

display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

 link@import
归属属于HTML标签只能用于加载 css
加载当解析到link时，页面会同步加载所引的 css等到页面被加载完再加载
兼容性无兼容问题IE5以上才能识别
权重+ link方式的样式的权重 高于@import的权重。
+ link可以使用 js 动态引入，@import不行		 

position的absolute与fixed共同点与不同点

共同点：

  1. 改变行内元素的呈现方式，display被置为block；
  2. 让元素脱离普通流，不占据空间；
  3. 默认会覆盖到非定位元素上。

不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口；当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

解释下 CSS sprites，以及如何使用它

**CSS Sprites** 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了http2。

减少页面加载时间的方法

  1. 优化图片  

  2. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）  

  3. 优化CSS（压缩合并css，如margin-top,margin-left…)  

  4. 网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）  

  5. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。  

    当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后        面的内容。从而加载时间快了，浏览体验也更好了。）  

  6. 减少http请求（合并文件，合并图片）。

渐进增强和优雅降级

  • **渐进增强（progressive enhancement）：**针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • **优雅降级（graceful degradation）：**一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

**区别：**优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

简述一下src与href的区别

  • src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素：

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

  • href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议        使用link方式来加载css，而不是使用@import方式。

设置DOM的CSS样式方法

  • 外部样式表：引入一个外部css文件
  • 内部样式表：将css代码放在<head>标签内部
  • 内联样式：将css样式直接定义在HTML元素内部

什么是CssHack？ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是Css Hack。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#test {
    width:300px;
    height:300px;
    background-color:blue; /*firefox*/
    background-color:red\9; /*allie*/
    background-color:yellow; /*ie8*/
    +background-color:pink; /*ie7*/
    _background-color:orange; /*ie6*/
}

#test {
  	background-color:purple\9; /*ie9*/
}
@mediaalland(min-width:0px) {
  #test {
    	background-color:black; /*opera*/
  }
}
@mediascreenand(-webkit-min-device-pixel-ratio:0) {
  #test {
    background-color:gray; /*andsafari*/
  }
}

行内元素、块级元素、行内块元素区别

块级元素（block-level）：

  • 独占一行，其宽度自动填满其父元素宽度（即使设置了宽度仍然是独占一行的）
  • 多个块状元素标签写在一起，默认排列方式为自上至下
  • 高度，行高，内外边距（padding、margin）都可控制

div、h1-h6、p、ul、ol、li、nav、aside、header、footer、section、article、address、form、table

内联元素（inline-level**）：**

  • 和相邻的内联元素在同一行，其宽度随元素的内容而变化
  • 设置行高有效，等同于给父级元素设置行高
  • 宽高不可控，对内外边距（padding、margin）仅设置左右方向有效上下无效
  • 内边距（padding）设置上下从显示效果是增加的，但其实设置时无效的，并不会影响周围的元素
  • 行内元素中不能放块级元素，a 链接里面不能再放链接

span、a、label、i、b、strong、em、del(删除线)、ins(下划线)、sub(下标)、sup（上标）

行内块元素（inline-block）：

  • 默认宽度就是它本身内容的宽度，宽高度、行高、内外边距都可控
  • 和相邻元素（行内块）在同一行，但之间会有空白缝隙（设置它上一级的font-size为0，才会消除间隙）

、