网站阴影,黔南州建设局网站,企业网站首页设计欣赏,校园app开发1. 说一下CSS的盒模型。 在HTML页面中所有的元素都可以看成是一个盒子。 盒子的组成#xff1a;内容content、内边距padding、边框border、外边距margin。 盒模型的类型#xff1a; 标准盒模型#xff1a;width contentIE盒模型#xff08;怪异盒模型#xff09;#…1. 说一下CSS的盒模型。 在HTML页面中所有的元素都可以看成是一个盒子。 盒子的组成内容content、内边距padding、边框border、外边距margin。 盒模型的类型 标准盒模型width contentIE盒模型怪异盒模型width content padding border 控制盒模型的模式border-sizing: content-box(默认值标准盒模型)、border-box(IE盒模型)。 2. CSS选择器的优先级 CSS的特性继承性、层叠性、优先级 标签、类/伪类/属性、全局选择器、行内样式、id、!important 优先级 !important 行内样式 id 类/伪类/属性 标签 全局选择器 3. 隐藏元素的方法有哪些 display: none; 元素在页面上消失不会占据空间。opacity: 0; 设置元素的透明度为0元素不可见占据空间位置。visibility: hidden; 元素在页面上消失占据空间位置一种不可见的状态。position: absolute; 设置定位移出可见区域。clip-path 4. px、rem、em的区别是什么 px是像素显示器上给我们呈现画面的像素每个像素的大小是一样的绝对单位长度。rem相对单位相对于html根节点的font-size的值直接给html节点的font-size: 62.5%; 1rem 10px; (16px * 62.5% 10px)em相对单位相对于父元素的font-size的值。 5. 重排和重绘有什么区别 重排必定会引发重绘 重排回流布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小。重绘计算好盒模型的位置、大小和其他一些属性后浏览器会根据每个盒模型的的特性进行绘制。 浏览器的渲染机制对DOM元素的大小、位置进行修改后浏览器需要重新计算元素的几何信息会触发重排。只对DOM的样式进行修改比如color和background-color浏览器不需要重新计算DOM元素的集合信息直接绘制了该元素的新样式。这时会触发重绘。 6. 元素水平垂直居中的方式有哪些 flexabsolute marginabsolute transformgirdtable 7. CSS属性中有那些可以被继承那些不可以被继承 能够继承的属性 字体系列的属性font-size、font-family、font-weight、font-style;文本系列的属性 内联元素color、line-height、word-spacing、letter-spacing、text-transform;块级元素text-align、text-indent、 元素可见性visibility 不能被继承的属性 盒子模型的属性width、height、margin、padding、border背景属性background、background-color、background-image定位属性float、clear、position、top、left、right、bottom、overflow、min-width、max-width、min-height、max-height; 8. CSS预处理器 LESS、SASS CSS 预处理器用一种专门的编程语言进行 Web 页面样式设计然后再编译成正常的 CSS 文件以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性无需考虑浏览器的兼容性问题。 优点提高代码复用率和可维护性 缺点需要引入编译过程 有学习成本 9. grid布局基础知识 grid布局的基本概念 grid容器采用grid布局的父元素。 grid项目grid布局中每个格子内部放置的元素。 grid内容显示项目的区域。 行横向 列纵向 网格线网格布局中横向和纵向的线条。 单元格横纵线交汇的区域被称为单元格。 间距网格与网格之间的距离被称为间距。容器属性 容器划分行列 取值为数值 grid-template-rows: 100px 100px 100px; grid-template-columns: 100px 100px 100px;取值百分比 grid-template-rows: 20% 30% 50%; grid-template-columns: 20% 30% 50%;重复函数 repeat grid-template-rows: repeat(3, 20%); grid-template-columns: repeat(3, 100px);自动填充 grid-template-rows: repeat(auto-fill, 15%); grid-template-columns: repeat(auto-fill, 15%);auto自动 grid-template-rows: 100px auto 100px; grid-template-columns: 100px auto 100px;fr片段划分 grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 1fr 2fr 3fr;minmax() grid-template-rows: 200px 200px minmax(100px, 200px); grid-template-columns: 200px 200px minmax(100px, 200px); 调整间距 grid-row-gap: 20px; grid-column-gap: 20px; grid-gap: 20px 10px; gap: 30px 10px;容器内内容的对齐方式 justify-content: center; align-content: center; place-content: center; place-content: space-between space-evenly; 取值范围start、end、center、space-around间距环绕、space-between两端对齐、space-evenly间距平分。网格内项目的对齐方式 justify-items: center; align-items: center; place-items: center; 项目属性 合并单元格属性 grid-row-start: 1; grid-row-end: 2; grid-column-start: 4; grid-column-end: 6; grid-row: 1/2; grid-column: 4/6;单个项目位置 justify-self 和 align-selfjustify-self 属性设置单元格内容的水平位置左中右跟 justify-items 属性的用法完全一致但只作用于单个项目。align-self 属性设置单元格内容的垂直位置上中下跟 align-items 属性的用法完全一致也是只作用于单个项目。.item {justify-self: start | end | center | stretch;align-self: start | end | center | stretch;/* 简写 place-self: align-self justify-self; */}注意点复合属性的书写都是先上下再左右