盒子模型 box-sizing
box-sizing:content-box|border-box|inherit
标准盒模型:content-box默认值,总宽度=margin+border+padding+width
怪异盒模型:border-box,总宽度=margin+width(width已经包含了border+padding)
inherit:规定应该从父元素继承box-sizing的值
移动端1px边框问题
1、使用after伪类和transfrom和scaleY(.5)
2、使用边框阴影 box-shadow: inset 0px -1px 1px -1px #c8c7cc;
3、border-image
4、background-image
transtion与animation的区别
他们的大部分属性是相同的,都是随着属性的属性值改变而触发,他们的主要区别就是transtion需要触发一个事件才能改变属性,而且是2帧2帧的,而animation是1帧1帧的
不定高的div居中
flex
display:flex;
justify:cenetr;
align-items:center;
transfrom
position:absolute;
top:50%;
left:50;
transfrom:translate(-50%,-50%)
display:table-cell
父盒子设置:display:table-cell; text-align:center;vertical-align:middle;
Div 设置: display:inline-block;vertical-align:middle;
浮动
为什么要清楚浮动,?解决父元素高度塌陷问题,一个块级元素如果没有设置height,其height是由子元素的高度撑开的,对子元素设置浮动之后父元素的高度就没有了,这就是所谓的高度塌陷
清除浮动的方法
1、给父盒子设置高度:只适合内容固定的元素
2、使用空元素:clear:both; 出现很多空标签
3、让父级div一起浮动:会产生新问题
4、父级定义display:table:会产生新的问题
5、父元素设置overflow:hidden、auto来触发BFC,无法显示溢出元素
6、.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } 照顾IE6,IE7就可以了
BFC相关知识
“块级格式化上下文”,是一块独立的渲染区域
特点:
BFC元素的垂直方向的边距会发生重叠,垂直方向的距离由margin决定,取最大值
BFC元素不会与浮动的盒子重叠
计算BFC高度时,浮动元素也参与计算
哪些元素会生成BFC:
根元素
float不为none
position为absolute和fixed
display为inline-block、table-cell、table-caption、flex、inline-flex
overflow不为visible
优先级
!important>style>id>class>tag>*>继承属性>浏览器默认属性
css画一个三角形
width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transprent;
border-right:50px solid transprent;
使元素消失
visibility:hidden、display:noe、z-index:-1、opacity:0
visibility:hidden;元素隐藏起来但是不会改变布局
display:none;把元素隐藏,会改变布局,相当于删除DOM
opacity:0;元素隐藏,但是还占位置,事件也可以触发
为什么css放在顶部js放在底部
浏览器预先加载css后,可以不必等待html加载,可以直接渲染页面
html渲染是一遍解析一边渲染
js写在尾部,是因为js主要的用处是事件处理功能,还有就是很多操作是在页面渲染完成后才执行的。另一方面可以节省加载事件,提升用户体验,
但是随着js的发展,有些js也可以渲染页面,所以把渲染页面的js放在前面,事件处理的放在后面