html及css总结

常见浏览器及内核

浏览器：IE、谷歌、火狐、苹果、欧朋

内核：Trident、Blink、Gecko、Webkit、Blink

b和strong（i和em）标签的区别

b标签为一个实体标签，被包围的字符设为粗体

strong标签更加有语义化（推荐使用）

i标签为倾斜

em标签更有强调意义的倾斜

引入css的方式有几种

（1）内嵌式

1
2
3
通过<style></style>来书写CSS代码。
只能应用于当前网页，不能被其它网页共享。
注意：<style>标记可以放在网页的任何地方，但一般放在<head>。

（2）外联式

1
2
3
4
通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。
格式：<link href="CSS的URL" rel="stylesheet" type="text/css" />
注意：<link>标记只能放在<head>中

（3）行内样式

1
2
通过style的属性来书写CSS代码。
举例：<p style="font-size:24px;"></p>

单行文本水平垂直居中如何实现

1、水平居中

1
text-align:center;	控制单行文字水平居中

2、垂直居中

1
设置行高，line-height:与元素高度相等的值

选择器优先级如何计算

  • 选择器优先级与权值相关

  • 基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）

  • 复合选择器的权值是所有的单一选择器权值的累加

  • 权值越大，优先级越高；权值相同，后写的会覆盖先写的

  • 继承样式没有权值，权值比0小，子元素设置样式会覆盖继承样式

  • 行间样式权值为1000，优于id选择器

  • !important优于行间样式

那些css属性可以继承

1、字体系列属性

　　font-family：字体系列

　　font-weight：字体的粗细

　　font-size：字体的大小

　　font-style：字体的风格

　　line-height：行高

2、文本系列属性

　　text-indent：文本缩进

　　text-align：文本水平对齐

　　color：文本颜色

3、 list-style属性

margin 存在问题

重叠问题

问题：两格兄弟元素同时设置margin-top和margin-bottom，会重叠，取最大值。

解决方案;

  • 避免同时使用，只需要一方使用
  • 给其中一个盒子套一个大盒子包起来，给大盒子设置overflow:hidden;形成私有区域

塌陷问题

问题：父元素的第一个子元素设置margin-top会传递给父元素

解决方案：

  • 避免使用margin-top
  • 给父元素设置
    • podding-top:1px
    • border-top:1px solid red;
    • overflow:hidden;私有区域

浮动产生的问题？清除浮动的方案？

浮动元素引起的问题：

浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素

清楚浮动的方法：

（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）

（2）在浮动元素的结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个clear的类名，给clear类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。

（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）

（4）给父级div定义伪类：after和zoom（推荐使用）

1
清除浮动代码*/ .clearfix:after{content:"";display:block;clear:both;visibility:hidden;height:0} .clearfix{zoom:1}

然后父级元素添加clearfix类名即可

（5）给父级元素添加浮动（缺点：会产生新的浮动问题）

BFC规则特性，及解决的问题？

BFC规则

  • 我的理解是：只有块级元素参与，BFC是指块级元素在页面中如何排列，如何渲染，并且与内部元素无关-

  • 内部的标签会在垂直方向上一个接一个的放置

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

    每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

    BFC的区域不会与float的标签区域重叠

    计算BFC的高度时，浮动子标签也参与计算

    BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然

BFC解决的问题

解决外边距折叠

特性的第②条：垂直方向上的距离由margin决定。在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。特性的第⑥条：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签，同样外面的标签不会影响到BFC内的标签。所以可以让其中的一个标签处于一个BFC中

自适应两栏或三栏布局

左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。

左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。

浮动的标签会覆盖正常标签根据第④条规则，BFC的区域不会与float的标签区域重叠，

所以我们只需要创建一个BFC，它就会自动缩小，以不被浮动的标签遮盖，就能够实现右侧栏自适应。

防止字体环绕

浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

清除浮动

利用overflow:hidden清除浮动，因为浮动的盒子无法撑出处于标准文档流的父盒子的height。根据特性第⑤条。计算BFC的高度时，浮动子标签也参与计算。

图片间隙问题，如何解决

方法 1：将图片显示为块：解决下方间隙

1
2
3
img{
	display:block;
}

方法 2：改变图片的 vertical-align :解决下方间隙

1
2
3
img{
	vertical-align:middle; 
}

除了 middle值，还可以设置为 top| bottom 等

方法 3：设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决

1
2
3
4
.imgwrap{
    font-size:0;
    line-height:0;
}

圣杯布局、双飞翼布局的实现原理

  • 圣杯布局
    • HTML结构中，先主体内容后侧边
    • 两侧宽度固定，中间宽度设置100%
    • 两侧盒子和中间盒分别加浮动
    • 将左侧盒子拉到最左边，将右侧盒子拉到最右边
    • 通过左、中、右盒子的父级盒将中间内容露出来
    • 分别还原左侧盒子和右侧盒子
  • 双飞翼布局
    • HTML结构中，先主体结构后侧边
    • 两侧宽度固定，中间宽度设置100%
    • 两侧盒子和中间盒分别加浮动
    • 将左侧盒子拉到最左边，将右侧盒子拉到最右边
    • 在主体结构盒的子盒上设置margin值，将中间内容露出来

精灵图的原理及优缺点？

英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就

是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，

“background- repeat”，“background-position”的组合进行背景定位，background-position 用数字能精确的定位出背景图片的位置。适用于一般小图标，不适合大背景大布局背景

优点：

（1）减少网页的 http 请求，从而大大的提高页面的性能

（2）图片命名上的困扰

（3）更换风格方便

缺点：

（1）必须要限定容器大小符合背景图元素位置，需要计算

html5的新特性

  • 新增语义化的标签

  • 新增表单元素和表单属性

  • 新增网页上绘制图形的canvas元素

  • 新增多媒体相关的video和audio

  • 对本地离线存储的更好支持

处理HTML5新标签的浏览器兼容问题

HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：

1
2
3
4
方案一：使用javascript新增元素的方法解决
	document.createElement(“header”);
	document.createElement(“footer”);
	…

由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效。

1
header,footer{ display:block;}

方案二：使用封装好的插件html5shiv.js解决兼容性问题。

1
2
3
<!--[if lt IE 9]>
	<script type="text/javascript"  src="./html5shiv.js"></script>
<![endif]-->

上面这段代码仅会在IE浏览器下运行。

响应式设计？响应式设计的基本原理？响应式优缺点？

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。响应式布局是根据设备屏幕宽度不同适当调整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面是不同的。

响应式网站的优点：

  • 减少工作量 网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变

  • 节省时间

  • 每个设备都能得到正确的设计

响应式网站的缺点：

  • 会加载更多的样式和脚本资源

  • 设计比较难精确定位和控制

  • 老版本浏览器兼容不好

CSS盒模型

盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

简单来说

​ 就是每一个标签所占的位置就是盒模型

盒模型的计算：

​ 宽高+matgin+padding+border

使用定位实现盒子水平垂直居中的代码

一、定位+margin负值，盒子有宽高

1
2
.father{ position:relative;}
.son{position:absolute;left:50%;margin-left:-小盒子宽度的一半，top：50%；margin-top：-小盒子高度的一半}

二、定位+margin：auto，盒子有宽高

1
2
.father{ position:relative;}
.son{position:absolute;left：0；top：0；right：0；bottom：0；margin：auto}

less

LESS是一种动态语言，属于CSS预处理语言的一种,它扩展了 CSS 语言，使 CSS 更易维护和扩展,可以更便捷的进行 Web 开发，使css的编写有编程思想。

Less 包含一套自定义的语法，用户根据这些语法定义自己的样式规则，最终会通过解析器，编译生成对应的 CSS 文件,只有在被编译成css后才能够被浏览器识别使用。

好处：

  • 结构清晰，便于扩展，易维护。

  • 可以方便地屏蔽浏览器私有语法差异。

  • 可以轻松实现多重继承。

  • 完全兼容 CSS 代码，可以方便地应用到老项目中。

支持内联元素宽高

1
2
display:block\inline-block
float:left\right

css三大特性

  • 层叠性：通过相同的选择器选中同一个标签，给该标签设置同一个样式，其中一个会覆盖掉另一个
  • 继承性：给父元素设置样式后，子元素能够应用上父元素的样式 ：以font-（font-size、font-family、font-weight、font-style） line-（line-height) text-(text-align、text-decoration、text-indent、text-shadow) 开头的样式 以及 color 是可以继承的
  • 优先级：
    • 优先级计算方式：多个基本选择器的权重相加
    • !important 1000 > id 100 > class 10 > 标签 1 > * 0
    • 权重一样，选中的标签一致，遵循就近原则
    • 权重不同，选中的标签一致，优先使用权重大的样式
    • 选中不同的标签，遵循继承来的样式优先级没有自己本身优先级高
    • ！important 优先级高于行间样式，但还是得遵循继承来的样式优先级没有自己本身优先级高

BFC

BFC：英文：Block Formatting Context，全称”块级格式化上下文”，BFC：只有块级元素参与的，BFC是指块级元素在页面中如何排列，如何渲染，并且与内部元素无关

BFC特性

  1. 内部标签在垂直方向上一个接一个的放置
  2. 迟滞方向上的距离是由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
  3. 每个标签的左外边距会与包含块的左边距相接触（从左到右），浮动元素也是如此
  4. BFC区域不会与浮动区域发生重叠
  5. 计算BFC区域的高度时，浮动子元素也参与计算
  6. BFC就是页面中的一个隔离的独立容器，容器里面的字标签不会影响外面的标签，反之亦然。

BFC的生成

1
2
3
4
5
根目录
display:inline-block;
float:left|right;
position:absolute|fixed;
overfiow:hidden|auto|scroll;

BFC解决问题

兄弟元素的外边距塌陷问题
产生原因：BFC特性（2）
解决方法：让他们处于不同的BFC区域，给其中一个兄弟元素套一个盒子，给父元素设置overflow:hidden

两|三栏自适应
产生原因：浮动会脱离文档流，但是不脱离文本流，所以左侧盒子浮动之后，右侧盒子中的文字会环绕在左侧盒子的周围
解决问题：根据特性（4），可以让右侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠

放止文字环绕
文字环绕产生的原因：图片浮动会脱离文档流，但是不脱离文本流，左侧盒子中的文字会环绕在图片的周围
解决问题：根据特性（4），可以让左侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠

清浮动：给父元素添加overflow:hidden清浮动时，根据特性（5），让父元素在BFC区域中，那么计算高度时浮动子元素也会参与计算

css预处理 less

  1. less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件,只有在被编译后才能够被浏览器识别使用。
  2. 好处
    • 结构清晰，便于扩展
    • 可以方便地平布浏览器私有语法差异
    • 可以轻松实现多重继承
    • 完全兼容css代码，可以方便的用到老项目中
  3. 编译工具：
    • Visual Studio Code 插件 easyless
  4. less语法
    • 注释：
      • 多行注释 /* comment */ ，会保留到编译后的文件。
      • 单行注释 // comment，只保留在less源文件中，编译后被省略。
    • @import “导入文件的地址”;（.css 后缀名不能省略，引入 .less 文件可以省略扩展名）
    • 变量
      • 定义：@变量名:值;
      • 使用：
        • 变量以@开头,变量名与变量值之间用【冒号】分隔 width: @变量名;
        • 如果变量需要镶嵌在字符串之中，就必须需要写在@{}之中 border-@{dir}:1px solid red;
    • 嵌套： 选择器嵌套，在嵌套的代码块内，使用&引用父元素
    • 继承： &:extend(.box1);
    • 运算：任何数字、颜色或者变量都可以参与运算；在运算中以()进行优先级计算