标准盒模型和怪异盒模型?
答:默认是标准盒模型,设置的width和height不包含padding和border,设置padding和border会向外撑大盒子。设置box-sizing:border-box改成怪异盒模型,设置的width和height包含padding和border, 设置padding和border不会向外撑大盒子,会向内挤压盒子内容区域。
水平竖直居中方式?
答:子绝父相,子上下左右均0,然后margin:auto;
父设置flex,子margin:auto
双飞翼布局和圣杯布局?
答:圣杯:中间栏width100%,左右用padding给左右两栏留出位置,三栏全部浮动,左右两栏利用margin-left移动到对应位置,然后左右两栏使用相对定位到指定位置。缺点是中间栏width小于左右栏时会变形。
双飞翼:中间栏两层dom,内层设置左右外边距给左右两栏留出位置,三栏全部浮动,左右两栏利用margin-left移动到指定位置。不会变形,但是要多加一层dom
flex布局属性?
答:display:flex
justify-content: center、space-between、space-around、space-evenly、start、end
align-items:center、strech
flex-direction:row、column
flex-wrap:nowrap、wrap
BFC
答:块级格式化上下文、独立的布局容器、内部元素布局不会影响外部元素、浮动元素高度会计算、内部元素垂直外边距会折叠。开启方式:浮动、定位、overflow、flex、行内块、html根节点
响应式布局如何实现?
答:相对单位:rem、vw、vh
@meida screen (min-width:320px){}
@meida screen (min-width:640px){}
外边距塌陷和解决方式?
答:外边距塌陷指的是子元素设置上外边距会把父盒子带着一起下移。解决办法有把子元素上外边距改为padding、给子元素开启BFC、给父元素设置一个::before伪元素把父元素和子元素隔开
display有哪些值?
答:block、inline-block、inline、flex、none、inherit
重绘和重排?
答:重绘:改变元素的颜色、背景等样式
重排:改变元素大小、位置等样式,引起布局改变
避免重排可以使用transform替代定位
如何隐藏元素?
答:display:none,元素不可见,不再占据文档流位置,会触发重排,绑定的事件自然不会触发
visibility:hidden,元素不可见,还占据文档流位置,不会触发重排,绑定的事件不会触发
opactiy:0,元素不可见,还占据文档流位置,不会触发重排,绑定的事件还会触发
em和rem的区别?
答:em是本身元素的font-size大小,rem是html根节点的font-size大小
css的calc()函数只能计算加减嘛?
答:不是,乘除也可以计算
伪元素和普通标签引入icon的区别?
答:伪元素引入iconfont使用unicode模式,给伪元素添加font-family:iconfont,设置content为对应icon的unicode编码即可,不会出现在dom中;普通标签可以直接使用class模式,设置对应类名即可
伪元素的应用?
答:可以绘制线条,三角形等;还可以用于清除浮动和外边距塌陷
css选择器和优先级?
答:id、class、标签