介绍一下标准的CSS的盒子模型
css盒子模型分为IE盒子模型和W3C标准盒子模型，它包括内容（content） 填充（padding） 边界（margin） 边框（border）
他们两者的区别在于:
IE盒模型的宽高等于
content+border+padding
W3C标准盒模型的宽高等于
content
IE盒子模型是更贴合实际生活盒子的，所以W3C在CSS3中新增了box-sizing属性
box-sizing: content-box|border-box|inherit;
inherit：从父元素继承 box-sizing 属性的值，若未设置，默认为 content-box
content-box：元素的宽高 = 元素的宽高+padding+border
border-box：元素的宽高 = 元素的宽高（不包含border,padding）
在这两种模式中，margin产生的效果是一样的，都会占用实际空间，但不改变盒子大小
垂直居中
flex:
.box{
display:flex;
justify-content:center;
align-items:center
}
绝对定位 + transform:
.box {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.children-box {
position: absolute;
background: yellow;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
table-cell:
.box {
width: 200px;
height: 200px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.children-box {
background: yellow;
display: inline-block;
}
外边距重叠场景
- 相邻的两个元素会出现外边距重叠
- 父子元素出现外边距重叠
- 父元素完全没有设定边框border、内边距paddng、高度height、
最小高度min-height 、最大高度max-height
- 父级没有创建BFC或清除浮动
- 空的块级元素
IE兼容问题
- IE9 以下浏览器不能使用
opacity
opacity: 0.5;
//IE6-IE8我们习惯使用filter滤镜属性来进行实现 filter:
filter: alpha(opacity = 50);
//IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
new Date('2019-4-18')IE不兼容
IE中会报NAN的错误 因为IE无法识别new Date('2019-4-18')
解决方法一：new Date('2019/4/18')
解决方法二： val 转换为 Thu Apr 18 2019 15:33:55 GMT+0800 (中国标准时间) 原始格式
- IE事件绑定
W3C绑定事件用addEventListener,IE必须用attachEvent
兼容写法
var eventshiv = {
// event兼容
getEvent: function(event) {
return event ? event : window.event;
},
// type兼容
getType: function(event) {
return event.type;
},
// target兼容
getTarget: function(event) {
return event.target ? event.target : event.srcelem;
},
// 添加事件句柄
addHandler: function(elem, type, listener) {
if (elem.addEventListener) {
elem.addEventListener(type, listener, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, listener);
} else {
// 在这里由于.与'on'字符串不能链接，只能用 []
elem['on' + type] = listener;
}
},
// 移除事件句柄
removeHandler: function(elem, type, listener) {
if (elem.removeEventListener) {
elem.removeEventListener(type, listener, false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type, listener);
} else {
elem['on' + type] = null;
}
},
// 添加事件代理
addAgent: function (elem, type, agent, listener) {
elem.addEventListener(type, function (e) {
if (e.target.matches(agent)) {
listener.call(e.target, e); // this 指向 e.target
}
});
},
// 取消默认行为
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
- 样式兼容
通配符选择器、Normalize.css、定制自己的 reset.css
- IE9 以下浏览器对 html5 新增标签不识别
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
- 浏览器 CSS 兼容前缀
-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句
BFC
BFC就是不影响外界、外界也不能影响它内部的绝缘盒子
触发BFC场景：
- 根元素
<html>; - 元素的
float不是none; - 元素的
position为absolute或fixed; - 元素的
display为inline-block、flex、表格布局（table-cell、table）等； overflow不为visible的块元素；
BFC解决的最典型问题就是外边距重叠问题。
CSS相对定位绝对定位
relative：生成相对定位的元素，相对于其正常位置进行定位absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位static: 默认值。没有定位，元素出现在正常的流中inherit: 继承父元素position属性的值。
flex布局
设置flex布局后，子元素的float/clear/vertical-align属性都会失效。
flex布局有6个容器属性
- flex-direction（决定主轴的方向，及项目的排列方向）
row:主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴在垂直方向，起点在上沿
column-reverse:主轴在垂直方向，起点在下沿
- flex-wrap(如果项目一条轴线上排不下，如何换行)
nowrap:不换行
wrap:换行，第一行在上方
wrap-reverse:换行，第一排在下方
- flex-flow(是flex-direction和flex-wrap的简写形式)
- justify-content(项目在主轴上对齐的方式)
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐，项目之间间隔相等
space-around:每个项目两侧的间隔相等
- align-items(在交叉轴如何对齐)
flex-start:交叉轴起点
flex-end：交叉轴终点
center:交叉轴中心点
baseline:项目第一行文字基线
stretch:默认值，如果项目未设置高度或auto，将占满整个屏幕
- align-content(多根轴线对齐方式，该属性取值与align-items一致)
flex布局有6个项目属性
- order(定义项目的排列顺序，数字越小越靠前)
- flex-grow(定义项目的放大比例，默认为0)
- flex-shrink(定义项目的缩小比例)
- flex-basis(在分配多余空间时，项目占据的主轴空间)
- flex(是 flex-grow, flex-shrink, flex-basis的简写)
- align-self(允许单个项目有跟其他项目不一样的对齐方式，默认值为auto，其他值与align-items完全一致)
内容宽度等分
display:flex
flex:1
左右布局 一侧定宽，一侧自适应撑满
.box{
display:flex;
height:100%
}
.left, .right{
height:100%;
box-sizing:border-box
}
.left:{
width:100px
}
.right:{
width:100%
}
元素隐藏的方法
- visibility: hidden
- display: none
标签设置display: none后，不会占据该标签原来所在的位置。
标签设置visibility: hidden后，仍占据原来的位置。
- v-if 和v-show
- 三元运算符
- opacity: 0
如何实现一个圆形可点击的区域
- map+area或svg
- border-radius
- 纯js实现，需要求一个点在不在圆上的简单算法、获取鼠标坐标等
css单位
px绝对单位，按照页面精确像素展示。这种单位比较稳定准确，但当我们缩放浏览器等操作，就会打破页面布局
em相对单位，基准点为父元素的字体大小。这有个缺点是进行任何元素设置，都有可能得知道他父元素的大小
rem相对单位，基准点为html的字体大小。只需要在根元素确定一个参考值便可以使用。 rem不适用于大屏幕。随着屏幕的变大或缩小不会展现更多内容，适用于app类。它在不同设备下看起来比较协调，会随着设备屏幕的大小等比缩放
css画三角形
.box{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom: 100px solid red;
}
解决移动端1像素边框看起来比较粗的问题
用伪元素::after为div设置transform:{scale(0.5,0.5)}
.box::after{
content: '';
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5)
transform: scale(0.5, 0.5)
}
css选择器有哪些
- id选择器
- 类选择器
- 标签选择器
- 相邻选择器
- 子选择器
- 后代选择器
- 属性选择器
- 伪类选择器
- 通配符选择器
清除浮动
clearfix:afer{
content:'';
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both
}
.clearfix{
zoom:1
}
层叠上下文
html中的根元素本身就具有层叠上下文，称为根层叠上下文- 普通元素设置
position为非static的值并设置z-index属性。产生层叠上下文 - css3中的新属性也可以产生层叠上下文
常见页面布局
- 静态布局
网页外层有固定大小，所有内容以该容器为标准，超出用滚动条
- 流式布局
左侧固定，右侧自适应。如果屏幕跨度太大，就会造成页面无法正常显示
- 弹性布局
是CSS3的布局方式，使用flex
- 响应式布局
为不同屏幕分辨率创建流式布局。我在做响应式布局时，习惯先写非响应式布局，如果完成了非非响应式我再去添加媒体查询和响应式代码。在完成非响应式布局之后，第一件事是在html页面加一句头部代码<meta name="viewport" content="width=device-width", initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">获取手机屏幕宽度、初始作坊比例、允许用户缩放的最小比例、允许用户缩放的最大比例、用户是否可以手动缩放。在响应式布局中，可以使用rem来设置响应式字体，rem相对于html根元素字体大小的，最好要重置html根元素字体大小
css预处理器
less和sass都是css预处理器，用一种专门的编程语言进行网页样式设计，然后再编译成正常的css文件
sass是一个css预处理器，有助于减少css的重复，节省时间。
less扩展了css语言，增加了变量、mixin、函数等特性。使css更易维护和扩展
两者区别是实现方式不同，less是基于javascript运行的，所以在客户端处理。而sass是基于ruby的，是在服务端处理。less由于依赖javascript引擎，而javascript引擎需要额外的时间处理代码。所以一般都选择sass
less和sass在语法上有一些共性
- 混入（mixins）--class中的class
- 参数混入 -- 可以传递参数的class就像函数一样
- 嵌套规则 -- class中嵌套class，从而减少重复代码
- 运算 -- css中用上数学
- 颜色功能 -- 可以编辑颜色
- 名字空间 -- 分组样式，从而可以被调用
- 作用域 -- 局部修改样式
- javascript赋值 -- 在css中使用javascript表达式赋值
css后处理器
css后处理器是对css进行处理，并最终生成css的预处理器。比较火的后处理器是autoprefixer。比如将标准css编译为处理了兼容性的css
CSS3新特性
新增各种css选择器
圆角
多列布局
阴影反射
文字特效和渲染
线性渐变
旋转
缩放、定位、倾斜、动画
css3动画相关的几个属性是transition、transform、animation。我分别理解为过渡、变换、动画。transition指过渡，就像从a点到b点、是有时间的，是连续的。transform指变化，就那几个固定属性旋转、缩放、偏移等。如果单独使用就很干涩机械，配合transition就会更加平滑。anmiation可以通过设置多个节点来精确控制一个或一组动画。比transition更强大。
display有哪些属性值
- none：元素隐藏
- block：会计元素
- inline-block：内联块级元素
- list-item：列表项目
- tabel
- tabel-row
- flex
相邻的两个inline-block节点出现间隔的原因以及解决办法
当元素被当成内元素排版时，原来HTML代码中的回车换行被转成一个空白符，在字体不为的情况下，占据一定宽度。所以出现空隙
解决办法：
- 给父元素设置font-size:0;子元素设置相应的font-size
- 改变div书写方式，元素间空白格就是标签段之间的空格。因此去掉HTML的空格，自然消失
- 设置父元素display:table 和word-spacing:0
display:table会作为块级表格来显示，表格前后带有换行符。
word-spacing 属性增加或减少单词间的空白(即字间隔)
opacity和rgba的区别
- rgba是属性值，而opacity是属性
- rgba后代元素不继承透明度。而opacity后代元素会继承
