做图书网站赚钱吗,软文写作范文,建立网站备案的法律依据,沈阳建设工程信息网官方网站1.什么是css盒子模型#xff1f;
盒子模型包含了元素内容#xff08;content#xff09;、内边距#xff08;padding#xff09;、边框#xff08;border#xff09;、外边距#xff08;margin#xff09;几个要素。
标准盒子模型和IE盒子模型的区别在于其对元素的w…1.什么是css盒子模型
盒子模型包含了元素内容content、内边距padding、边框border、外边距margin几个要素。
标准盒子模型和IE盒子模型的区别在于其对元素的width和height的不同解析元素的width和height的大小指的就是我们给元素设置的width和height的大小。 标准盒模型元素的width和height content IE盒模型元素的width和height ( contentborderpadding )
标准盒子模型box-sizing:content-box
宽高指的是内容区域的宽高
元素框的总宽度 元素的width padding的左右边距 border的左右宽度 margin的左右边距 怪异盒模型(IE盒子模型)box-sizing:border-box
宽高指的是borderpaddingcontent区域的宽高
元素框的总宽度 元素element的width margin的左右边距 2.css选择器的优先级
CSS选择器的优先级按照以下顺序排列!important 内联选择器 ID选择器 类别选择器 属性选择器 伪类 元素选择器 通配符选择器 继承选择器。
行内样式style带有 !important 或不带ID 选择器 (#id) 带有或不带 !important类选择器 (class)、属性选择器(input[typetext] )、伪类选择器(:hover:first-child:checked)等带有或不带 !important元素选择器paspan、伪元素选择器::before带有或不带 !important最后定义的同优先级规则对于非 !important 规则
3.使元素水平和垂直居中的不同方法有那些
绝对定位和transform
.container{position: relative;width: 100vw;height: 100vh;
}.container .item {position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%)/*margin-left: 负的宽度的一半*//*margin-top: 负的高度的一半*/
}
Flexbox布局
.container{display: flex;justify-content: center;aligin-items: center; width: 100vw;height: 100vh;
}
Grid布局
.container{display: grid;place-items: center; width: 100vw;height: 100vh;
}
4.什么是响应式设计如何实现
是一种网页设计方法可以适应不同的屏幕尺寸和设备旨在为跨平台的用户提供良好的交互体验。
实现的方法有: 百分比布局 给子元素的宽高设置成% 媒体查询布局 通过media 媒体查询可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。
media (min-width: 768px) and (max-screen:1200px) {...
} rem 响应式布局 rem 是相对于 html 根元素的字体大小font-size的单位。 em: 相对于父级元素的字体大小如果自身定义了font-size按自身来计算如首行缩进 比如html { font-size: 14px;} .box { width: 10rem; height: 20rem;} 此时 1rem 14px所以 box 盒子的宽高分别为140px 和 280px 浏览器默认的font-size16px最小字体为12px 如果设置10px可以使用 scale 进行缩放{transform:scale(0.83)transform-origin: 0 0}默认缩放中心点是在盒子的正中心如果我们需要文本左对齐就需要改变中心点 vw 响应式布局 vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。 1vw 视口宽度* 1%比如浏览器宽度1200px, 1 vw 1200px/100 12 px vminvw和vh中较小的那个。 vmaxvw和vh中较大的那个。 flex 弹性布局
.container{display: flex;flex-direction: column; // 主轴方向为纵向justify-content: space-between; // 两端对齐
}justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */ gird网格布局
.container{display: grid; grid-template-columns: repeat(4, 1fr); /*定义4个相同的列*/grid-gap:10px; /*定义列之间的间距*/
}
自适应网格布局
.container{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /*列宽度最小200px为了适应屏幕自动填充网格中的项目*/grid-gap:10px; /*定义列之间的间距*/
}
砖石布局网格项根据垂直空间定位从而产生视觉上的动态布局, 通过将grid-auto-rows 属性设置为minmax(100px, auto)网格将自动调整每行的高度。例如
.container{display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gird-auto-rows: minmax(100px,auto);grid-gap:10px;
}
5.弹性布局flexbox? { flex:1}表示什么
css3引入的新的布局模式提供了一种灵活的方式来排列容器的元素它的所有子元素自动成为容器成员称为flex项目item。它引入了两个轴主轴和交叉轴。通过设置容器及其子元素的属性可以控制它们的流动和对齐方式。
Flex布局的基本属性 flex-directionrow | row-reverse | column | column-reverse 定义了主轴的方向可以是水平或垂直以及其起始和结束的方向。 flex-wrapnowrap | wrap | wrap-reverse 决定了当容器空间不足时项目是否换行。 flex-flow row | column wrap 这是flex-direction和flex-wrap的简写形式。 justify-content flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... safe | unsafe 设置项目在主轴上的对齐方式。 align-items stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end ... safe | unsafe 定义了项目在交叉轴上的对齐方式。 align-content flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline ... safe | unsafe; 定义了多根轴线时项目在交叉轴上的对齐方式。 gap row-gap、column-gap设置容器内项目间的间距。 使用flexbox可以创建等高列通过在容器上设置display:flex, 并将{ flex:1} 应用于子元素来实现。允许列扩展以均匀地填充可用空间。
.container {display:flex;
}
.container div {flex:1;}
当你设置 flex: 1 时你告诉浏览器这个flex项目应该能够伸展来占据任何额外的空间并且在需要时也可以缩小而且不考虑它的初始大小。可以平均分配空间 flex : 1 其实是代表3个属性的简写flex-grow、flex-shirnk、flex-basis这3个属性是可以单独进行设置的 当设置了 flex:1 属性时代表 flex-grow: 1、flex-shrink1、flex-basis0% flex-grow: 分配剩余空间的相对比例。 属性值负值无效默认为 0 公式原始宽度 剩余空间 / 总共分成多少份 * 当前元素所占分数 flex-shrink: 指定了 flex 元素的收缩规则 属性值负值无效默认值为 1 公式父元素原始宽度 * (原始宽度 / 所有项原始宽度总和) flex-basis: 指定了 flex 元素在主轴方向上的初始大小 属性值content | ‘width’ 即可以百分比也可以具体的数默认值是 auto 注意当设置了flex1时原先给元素设置的width属性是不会生效的
6.css动画
使用css关键帧可以实现脉动动画效果通过定义具有重复循环的旋转动画可以模拟记载旋转器
keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.rotate {animation: rotate 1s linear infinite;
}
7.如何使用css grid创建网格布局?
要创建网格布局需要定义网格容器并指定所需的行数和列数可以使用 grid-template-rows 和 grid-template-columns 属性来设置网络轨道的大小
以下是kds项目中键盘布局
grid-template-rows 和 grid-template-columns 为固定宽高
.keyboard-container {display: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 80px 80px 80px 80px;grid-gap: 1px; //间距是 grid-column-gap 和 grid-row-gap 的合并简写形式grid-template-areas:a b c de f g hi j k lm n o l;
}
// [确认]键占最后一列的两行 l
.enter {grid-area: l;
}. 号表示没有名称的网格项。可将一个单元格或多个单元格留作空白
.item1 {grid-area: myArea;
}
.grid-container {grid-template-areas: myArea myArea . . .;
}
8.使用sass或less等css预处理器有那些优点
css预处理器通过引入变量、嵌套、mixin和函数等功能在增强css的功能。这些功能使代码更加模块化、可重用且更易于维护。
$parmary-color: #f00;.container {color: $parmary-color
}
sass和less的区别 编译环境不一样Sass的安装需要Ruby环境是在服务器端处理的。而Less需要引入 less.js来处理
变量名不一样。Less中使用而Sass中使用$
输出设置 SASS提供了多种输出选项如嵌套、展开、紧凑和压缩这为开发者提供了灵活的控制输出CSS样式的方法。而LESS的输出设置较为简单通常直接输出编译后的CSS代码。
Sass支持条件语句如if…else、for循环等而Less不支持
9.display:none; 和visibility:hidden;的区别是什么
display:none; 彻底消失释放空间。能引发页面的reflow回流重排。visibility:hidden; 就是隐藏但是位置没释放好比opacity:0; 不引发页面回流。
10.回流/重排、重绘是什么 ①、回流的定义 当Rendering Tree 中部分元素的尺寸大小、布局、隐藏等属性改变时浏览器的布局需要调整则需要重新渲染DOM。这个过程就叫回流。回流也叫重排对整个页面进行重新排版。 ②、重绘的定义当元素属性的改变不影响DOM Tree的结构即不会影响浏览器的布局只是“表象”发生变化如background-colorvisibility等那么针对新样式对元素进行重新绘制。
二者的联系
回流一定会引起重绘重绘不一定引起回流。回流需要重新渲染DOM也要重新处理Rendering Tree。即回流的开销比重绘要大。
11.解释CSS中的继承和层叠的概念并举例说明如何影响样式应用
继承是CSS的一个特性它允许一些属性自动应用于特定元素的子元素。例如文本颜色color和字体大小font-size可以从父元素继承到子元素。 层叠 规定了当多个样式作用于同一个元素时如何确定最终的样式。也就是选择器优先级
12.解释什么是CSS的will-change属性并讨论其如何帮助优化页面性能。
will-change属性用于通知浏览器特定css属性即将发生的更改。允许浏览器提前为更改做好准备有助于优化渲染性能。
13.如何优化CSS以提高页面加载速度
尽量少的去对标签进行选择而是用class 选择器优化嵌套尽量避免层级过深属性是可以通过继承而来的避免对这些属性重复指定规则尽量减少页面重排、重绘
