图书网站建设源码,网站建设的客户,广告设计公司管理,网站开发方案书博客一、css 1. 说一下css的盒模型 在HTML中所有元素都可以看成是一个盒子 盒子的组成#xff1a; 内容content、内边距padding、边框border、外边距margin 盒模型的类型#xff1a; 标准盒模型 margin border padding content IE盒模型 margin content(border padding) 控制…一、css 1. 说一下css的盒模型 在HTML中所有元素都可以看成是一个盒子 盒子的组成 内容content、内边距padding、边框border、外边距margin 盒模型的类型 标准盒模型 margin border padding content IE盒模型 margin content(border padding) 控制盒模型的方式box-sizing: border-box (IE盒模型) ; content-box (标准盒模型) 2. css选择器的优先级 css的特性 继承、优先、层叠 优先级写css样式时给一个元素多种样式谁的优先级高就显示谁 标签、类/伪类/属性、全局、id、行内、!important 这些选择器优先级!important 行内 id 类 标签 全局 3. 隐藏元素的方法 display: none; 元素在页面上消失不占据空间 visibility: hidde; 让元素隐藏占据空间位置处于不可见的状态 opacity: 0; 元素变透明占据空间位置 position: absolute; 让元素处于页面外不占据空间位置 clip-path 剪切元素 4. px和rem的区别 px是像素在每个显示器上的px大小都是相同的 rem是一个相对的单位它参照的是html节点上的font-size的值, 可以在html节点上设置font-size: 62.5%, 这样的1rem 10px 5. 重排与重绘的区别 重排回流浏览器会根据所有的样式计算出盒模型在页面上的布局和大小如果改变 DOM会影响到预算的几何属性这时浏览器需要重新构造渲染树这个 过程称为重排 重绘浏览器就昂收到影响的部分重新绘制在屏幕上的过程称为重绘 引起重排重绘的原因 * 添加或删除DOM元素 * 元素尺寸位置改变 * 浏览器页面初始化 * 浏览器窗口大小改变注意重排一定导致重绘重绘不一定导致重排比如改变某些元素的背景颜色颜色等减少重排重绘的方法 不在布局信息改变时做DOM查询对于多次重排的元素比如动画使用绝对定位使其脱离文档流不影响其他元素6. 元素水平居中的方式有哪些 1. 定位 margin 通过设置子元素在父元素中上下左右都是0用margin: auto来自动居中 2. 定位 transform 设置子元素在父元素中top和left都是50%用transform的translate(-50%, -50%)实现居中设置子元素在父元素中top和left都是calc(50% - 自身宽高的一半)3. flex布局 justify-content: center align-item: center 4. grid布局 justify-item center align-item: center 5. table布局 display: table 子元素的行设置display: table-row, 列设置display: table-cell
