css常见10道面试问题

1、css盒模型盒模型组成包括内容、内边距、边框、外边距 2种模式 标准模型盒子的固定宽度只包含内容的宽度 iE模型盒子的固定宽度包含 内容宽度内边距边框 切换方式box-sizing: 默认是content-box,iE模型border-box2、margin合并是指什么怎么解决margin合并是指上下排列的相邻的两个盒子外边距会合并值取较大的外边距的值 如何解决呢可以给其中一个盒子开启BFC设置overflow:hidden或displayinline-block或者用padding代替margin3、什么是BFCBFC指块级格式化上下文内部布局不影响外部的布局方式生成一个独立的渲染区域。 触发BFC的方式浮动float 绝对定位positionabsolute\固定定位(fixed) 行内块(display:inline-block) 表格单元格(display:table-cell) 表格标题(display:table-caption) 溢出overflow: hidden\scroll\auto 弹性盒子display:flex 网格display:grid) 流式根display:flow-rootcss3中专门为触发BFC设计的属性4、css中的伪类和伪元素有什么区别伪类定义元素的特殊状态 如hover、active、first-child、last-child等 伪元素用来创建不存在html中的虚拟元素如before、after5、z-index的作用z-index是用来调节层叠上下文顺序的值越大层级越高、越在上面只在定位元素上生效、也受父级层叠层下文的限制和影响6、flex box布局是什么flex box 指弹性盒子通过设置display:flex控制元素的布局和排列方式实现响应式布局根据不同屏幕的大小自动调整排列方式和比例 主要属性flex-deriction:设置主轴的排列方向 justify-content设置主轴的对齐方式 align-items设置交叉的对齐方式7、grid 布局与flex 布局有什么区别flex布局是一维的比较一行或一列元素的排列 grid是二维的可以同时控制行和列的网格布局。 grid-template-rows控制行的布局 grid-template-columns控制列的布局 gap控制元素之间的间距8、position 有几种方式5种 static静态定位默认的 relative相对定位相对于自身原来位置进行位移不脱离文档喽 absolute绝对定位相对于最近的一个非静态定位的父元素来定位脱离文档流 fixed固定定位相对于浏览器窗口来定位脱离文档流 sticky粘性定位先开始会进行相对定位滚动到阈值后变为固定定位9、transform属性用来改变元素的视角表现的包括位移、缩放、旋转 translate X、translate Y、scale、rotate10、transition属性设置过渡效果的包括过渡属性、过渡的时间、过渡的延迟与animation 动画属性的区别是 过渡是被动的触发通过hover、active触发改变两个状态之间的过渡animation 实现的动画效果更炫酷11、选择器的优先级!important 行内样式ID选择器类、伪类、属性选择器元素、伪元素