css/div/兼容性及常见bug

css

清除浮动的几种方法

首先，为什么会有清除浮动这一说法？

当有一个父元素里面包含一个子元素或者多个子元素时，给子元素设置浮动，那么会父元素的高度就为0啦，也就是我么常说的高度塌陷。如何解决？

• 给父元素添加height
  原理：如果父元素没有定义高度，那么父元素的高度完全由子元素撑开，给他定义了高度，就解决了父元素无法自动获取到高度的问题。

• 在标签结尾处加空标签 ，给空标签添加clear:both
  原理：添加了空标签，利用CSS提高的clear:both清除浮动，让父级元素能自动获取到高度。优点：简单、代码少、浏览器支持好、不容易出现怪问题。缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，不利于页面的优化。

• 万能清除浮动法，父级定义伪类:after和zoom:1

.clearfix:after{伪元素是行内元素 正常浏览器清除浮动方法
content: “”;
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
zoom: 1;e6清除浮动的方式 只有IE6-IE7执行，其他浏览器不执行
}

原理：元素生成伪类的作用和效果相当于方法2中的原理，但是IE8以上和非IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题，写法是固定的，不理解也可以直接复制使用；（推荐使用此种方法，简单便捷，只需添加一个class即可解决问题）

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

• 父级定义overflow:hidden，IE6需要配合zoom:1使用
  #@ BFC(Block Fromatting Context)块级格式化上下文

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1. 根元素或其它包含它的元素
2. 浮动元素 (元素的 float 不是 none)
3. 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4. 内联块 (元素具有 display: inline-block)
5. 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7. 具有overflow 且值不是 visible 的块元素

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC特性(功能)

1. 使BFC内部浮动元素不会到处乱跑；
2. 和浮动元素产生边界。

css省略号

单行

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap

多行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

css文字排版方向

writing-mode: horizontal-tb; 默认值 //文本流是水平方向的
writing-mode: vertical-rl; //文本是垂直方向的，阅读顺序从右向左(古诗的顺序)
writing-mode: vertical-lr; //文本垂直方向，阅读顺序从左到右(水平变成了垂直展示)

html

盒子水平垂直居中

1、 .center{
   
		width:100px;
		height:100px;
		position:absolute;
		top:50%;
		left:50%;
		margin­top:­50px;
		margin­left:­50px;
	}
2、 .center{
   
		position:absolute;
		margin:auto;
		top:0;
		bottom:0;
		left:0;
		right:0;
	}
	
宽高未知
1、 .center{
   
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(­50%, ­50%);
	}
2、给父元素设置
.container{
   
		display:flex;
		justify­content:center;
		align­items: center;
	}

px、em、em的区别

• px
  相对于显示器屏幕分辨率而言的

特点：
1、IE无法调整那些使用px作为单位的字体大小；
2、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3、 Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

• em
  参考物是父元素的font­size，具有继承的特点。如果自身定义了font­size按自身来计算（浏览器默
  认字体是16px），整个页面内1em不是一个固定的值。
• rem
  css3新单位，相对于根元素html（网页）的font­size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

src和href的区别

href：Hypertext Reference的缩写，超文本引用，它指向一些网络资源，建立和当前元素或者说是
文档的链接关系。在加载它的时候， 不会停止对当前文档的处理 ，浏览器会继续往下走。常用在a、 link等标签。
.src：source的所写，表示的是对资源的引用，它指向的内容会嵌入到当前标签所在的位置。由于
src的内容是页面必不可少的一部分，因此 浏览器在解析src时会停止对后续文档的处理，直到src的内 容加载完毕。常用在 script、img、iframe标签中，我们建议js文件放在HTML文档的最后面。如
果js文件放在了head标签中，可以使window.onload实现js的最后加载。

link和@import的区别

• link是一种标签，@import只是css提供的一种引入方式
• link的加载方式，是随着页面的加载而加载，而@import是等待页面加载完在加载样式
• @import是IE5版本以上才兼容，link标签没有兼容问题
• link加载的样式js的dom可以操作，但是@import加载的样式js的dom不可以操作

定位的区别

• 相对定位：relative

1、5个属性：4个方向，1个层级关系
层级关系可以是负数不能是小数，作用是提高层级，值越大层级越高
2、占位，不脱离文档流
3、根据自己的原位置移动
4、可以设置负值

• 绝对定位：absolute

1、五个属性
2、不占位，脱离文档流
3、先找父元素作为 参照物，如果没有父元素就把浏览器作为参照物进行位置移动
4、影响元素类型的特性：内联可以设置宽高，块级宽度由内容撑开

• 固定定位：fixed

1、五个属性
2、不占位，脱离文档流
3、始终以浏览器窗口作为参照物进行位置移动
4、影响元素类型的特性：内可以设置宽高，块级宽度由内容撑开
取消定位：static

标准盒和怪异盒的区别

盒子包括：实际内容（content）、内边距（padding）、边框（border）、外边距（margin）
标准盒：盒子模型的width（height）=设置的content的宽高+padding+border+margin
怪异盒：盒模型的width（height）=设置的width（height）+外边距margin

弹性盒有哪些属性

设置主轴方向：flex­direction：row,row­reverse，column，column­reserve
设置内容是否换行：flex­wrap：nowrap，wrap,wrap­reverse
设置主轴排序方式：justify­content：flex­start，flex­end，center，space­bwtween，spacearound
设置侧轴对齐方式：align­item：flex­start，flex­end，center，baseline ，stretch
设置行间距：align­content：flex­start，flex­end，center，space­bwtween，space­around，
stretch

flex弹性布局

flex布局属性

flex-direction (适用于父类容器上）设置子元素在父容器中的位置

• row（横向的从左到右排列，默认值）
• row-reverse（横向的从右到左排列)
• column（纵向的从上到下排列）
• column-reverse（纵向的从下到上排列）

flex-wrap（适用于父类容器上）子元素超过父容器时是否换行

• nowrap：默认值，子元素溢出父容器时不换行
• wrap：子元素溢出父容器时换行
• wrap-reverse：子元素溢出父容器时换行，方向与wrap相反；与 width 配合使用

justif