企业在网站建设后期需要做什么,新式装修,本地搭建asp网站,成都公司做网站的2、css
2.1 说说你对盒子模型的理解
是什么
当对一个文档进行布局#xff08;layout#xff09;的时候#xff0c;浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型#xff08;CSS basic box model#xff09;#xff0c;将所有元素表示为一个个矩形的盒子#xf…2、css
2.1 说说你对盒子模型的理解
是什么
当对一个文档进行布局layout的时候浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型CSS basic box model将所有元素表示为一个个矩形的盒子box
一个盒子由四个部分组成content、padding、border、margin
content即实际内容显示文本和图像
boreder即边框围绕元素内容的内边距的一条或多条线由粗细、样式、颜色三部分组成
padding即内边距清除内容周围的区域内边距是透明的取值不能为负受盒子的background属性影响
margin即外边距在元素外创建额外的空白空白通常指不能放其他元素的区域
分类
标准盒子模型
width/height 只是内容高度不包含 padding 和 border值
盒子总宽度 width padding border margin;盒子总高度 height padding border margin
怪异盒子模型:
盒子总宽度 width margin;盒子总高度 height margin;
也就是width/height 包含了 padding和 border值
Box-sizing
定义了引擎应该如何计算一个元素的总宽度和总高度
box-sizing: content-box|border-box|inherit:content-box 默认值元素的 width/height 不包含paddingborder与标准盒子模型表现一致border-box 元素的 width/height 包含 paddingborder与怪异盒子模型表现一致inherit 指定 box-sizing 属性的值应该从父元素继承
2.2 css选择器有哪些优先级哪些属性可以继承
有哪些
id选择器#box选择id为box的元素类选择器.one选择类名为one的所有元素标签选择器div选择标签为div的所有元素后代选择器#box div选择id为box元素内部所有的div元素子选择器.oneone_1选择父元素为.one的所有.one_1的元素相邻同胞选择器.one.two选择紧接在.one之后的所有.two元素群组选择器div,p选择div、p的所有元素伪类选择器:hover 鼠标指针浮动在上面的元素伪元素选择器:before : 选择器在被选元素的内容前面插入内容属性选择器[attribute] 选择带有attribute属性的元素层次选择器p~ul选择前面有p元素的每个ul元素
优先级
内联 ID选择器 类选择器 标签选择器
到具体的计算层⾯优先级是由 A 、B、C、D 的值来决定的其中它们的值计算规则如下
如果存在内联样式那么 A 1, 否则 A 0B的值等于 ID选择器出现的次数C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数D 的值等于 标签选择器 和 伪元素 出现的总次数
比较
从左往右依次进行比较 较大者优先级更高如果相等则继续往右移动一位进行比较如果4位全部相等则后面的会覆盖前面的
如果外部样式需要覆盖内联样式就需要使用!important
继承属性 字体系列属性 font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体文本系列属性 text-indent文本缩进
text-align文本水平对刘
line-height行高
word-spacing增加或减少单词间的空白
letter-spacing增加或减少字符间的空白
text-transform控制文本大小写
direction规定文本的书写方向
color文本颜色元素可见性 visibility表格布局属性 caption-side定位表格标题位置
border-collapse合并表格边框
border-spacing设置相邻单元格的边框间的距离
empty-cells单元格的边框的出现与消失
table-layout表格的宽度由什么决定列表属性 list-style-type文字前面的小点点样式
list-style-position小点点位置
list-style以上的属性可通过这属性集合引用 quotes设置嵌套引用的引号类型光标属性 cursor箭头可以变成需要的形状继承中比较特殊的几点
a 标签的字体颜色不能被继承h1-h6标签字体的大下也是不能被继承的
无继承
display文本属性vertical-align(设置元素垂直对齐方式)、text-decoration(文本装饰效果)盒子模型的属性宽度、高度、内外边距、边框等背景属性背景图片、颜色、位置等定位属性浮动、清除浮动、定位position等生成内容属性content、counter-reset、counter-increment轮廓样式属性outline-style、outline-width、outline-color、outline页面样式属性size、page-break-before、page-break-afte
2,3 说说em/px/rem/vh/vw区别?
单位相对基准适用场景px固定像素精确尺寸图标、图片em父元素字体大小嵌套文本、动态调整rem根元素字体大小整体响应式设计vh视窗高度全屏布局、背景vw视窗宽度自适应容器、响应式设计
像vw、vh比较容易混淆的一个单位是%不过百分比宽泛的讲是相对于父元素
2.4 说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别
概念定义特点适用场景设备像素屏幕上实际存在的最小物理单位固定设备出厂后不可变描述屏幕分辨率CSS像素CSS中使用的逻辑单位相对单位取决于DPR和缩放比例网页布局和样式设计设备独立像素虚拟单位用于抽象设备分辨率与设备无关的逻辑像素代表可以通过程序控制使用的虚拟像素是一个总体概念包括了CSS像素跨设备布局设计DPR设备像素与CSS像素的比值决定一个CSS像素对应多少设备像素高分辨率屏幕适配PPI每英寸所包含的像素数量衡量屏幕清晰度PPI越高显示越细腻屏幕显示质量评估
无缩放情况下1个CSS像素等于1个设备独立像素
设备像素由屏幕生产之后就不发生改变而设备独立像素是一个虚拟单位会发生改变
PC端中1个设备独立像素 1个设备像素 在100%未缩放的情况下
在移动端中标准屏幕160ppi下 1个设备独立像素 1个设备像素
设备像素比dpr 设备像素 / 设备独立像素
每英寸像素ppi值越大图像越清晰
2.5 谈谈你对BFC的理解
BFC形成一个相对于外界完全独立的空间让内部的子元素不会影响到外部的元素.
渲染规则
内部的盒子会在垂直方向上一个接一个的放置对于同一个BFC的俩个相邻的盒子的margin会发生重叠与方向无关。每个元素的左外边距与包含块的左边界相接触从左到右即使浮动元素也是如此BFC的区域不会与float的元素区域重叠计算BFC的高度时浮动子元素也参与计算
触发条件
根元素即HTML元素浮动元素float值为left、rightoverflow值不为 visible为 auto、scroll、hiddendisplay的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-gridposition的值为absolute或fixed
应用场景
防止margin重叠
stylep {color: #f55;background: #fcc;width: 200px;line-height: 100px;text-align:center;margin: 100px;}
/style
bodypHaha/p pHehe/p
/body我们可以很明显的看到margin发生了重叠。
因为同一个BFC的俩个相邻的盒子的margin会发生重叠
解决可以在p外面包裹一层容器并触发这个容器生成一个BFC那么两个p就不属于同一个BFC则不会出现margin重叠
清除内部浮动 !-- 2、清除内部浮动 --div classuse2你好div classchild/divdiv classchild/div/div我们可以看到内部的浮动会影响布局
解决方案BFC包裹 .par {border: 5px solid #fcc;width: 300px;overflow: hidden;}而且BFC在计算高度时浮动元素也会参与内部浮动元素计算高度时候也会计算
自适应多栏布局
每个元素的左外边距与包含块的左边界相接触
因此虽然.aslide为浮动元素但是main的左边依然会与包含块的左边相接触
而BFC的区域不会与浮动盒子重叠
所以我们可以通过触发main生成BFC以此适应两栏布局 2.6 元素水平垂直居中的方法有哪些如果元素不定宽高呢
一、知道子元素宽高时
绝对定位 margin: auto 父元素设置 position: relative。子元素设置 position: absolute并定义具体的 top、right、bottom、left 值通常设为 0然后使用 margin: auto。原理子元素通过绝对定位脱离文档流并占据整个父容器的空间由 top/right/bottom/left: 0 定义。margin: auto 会在水平和垂直方向上平均分配剩余空间从而实现居中。 表格布局 (Table-Cell) 父元素设置 display: table-cellvertical-align: middletext-align: center。子元素设置 display: inline-block。原理利用表格单元格的垂直居中vertical-align: middle和内联元素的文本居中text-align: center特性。
二、都可以
绝对定位 transform 父元素设置 position: relative。子元素设置 position: absolute将 left 和 top 都设置为 50%然后使用 transform: translate(-50%, -50%) 进行反向偏移。原理left: 50% 和 top: 50% 将子元素的 左上角 定位到父容器中心。translate(-50%, -50%) 将子元素自身向左和向上移动自身宽高的 50%使其中心点与父容器中心对齐。 Flexbox 布局 父元素设置 display: flexjustify-content: center水平居中align-items: center垂直居中。 Grid 布局 父元素设置 display: gridjustify-items: center或 justify-content: centeralign-items: center或 align-content: center。
2.7 如何实现两栏布局右侧自适应三栏布局中间自适应呢 style.demo1 {width: 100%;height: 200px;display: flex;align-items: center;}.demo1 .right {flex: 1;background-color: blue;height: 100%;}.demo1 .main {width: 60%;background-color: pink;height: 100%;}.demo2 {display: flex;align-items: center;width: 100%;height: 200px;}.demo2 .content {flex: 1;background-color: green;height: 100%;}.demo2 .left {width: 30%;height: 100%;background-color: red;}.demo2 .right {background-color: blueviolet;width: 40%;height: 100%;}/style
/headbodydiv classdemo1div classmain我是main/divdiv classright右侧自适应/div/divdiv classdemo2div classleft我是左侧/divdiv classcontent我是中间部分/divdiv classright我是右侧/div/div/body
两栏布局中右侧使用 flex: 1 实现自适应。三栏布局中中间部分使用 flex: 1 实现自适应。
2.8 说说flexbox弹性盒布局模型,以及适用场景
默认存在两条轴主轴和交叉轴呈90度关系。项目默认沿主轴排列通过flex-direction来决定主轴的方向
属性
父元素
flex-direction决定主轴的方向flex-wrap是否可换行flex-flow是flex-direction属性和flex-wrap属性的简写形式justify-content主轴上的对齐方式align-items交叉轴上如何对齐align-conten多根轴线的对齐方式
子元素
order定义项目的排列顺序flex-grow项目的放大比例flex-shrink项目的缩小比例flex-basis主轴上的初始尺寸flexflex-grow, flex-shrink 和 flex-basis的简写align-self允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性
2.9 grid布局
Grid 布局即网格布局是一个二维的布局方式由纵横相交的两组网格线形成的框架性布局结构能够同时处理行与列
属性
display :grid-template-columns 属性设置列宽grid-template-rows 属性设置行高
grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式
grid-template-areas 属性:用于定义区域一个区域由一个或者多个单元格组成
justify-items 属性设置单元格内容的水平位置左中右align-items 属性设置单元格的垂直位置上中下
justify-content属性是整个内容区域在容器里面的水平位置左中右align-content属性是整个内容区域的垂直位置上中下
2.9 CSS3新增了哪些新特性
1.选择器的增强
CSS3引入了更多灵活和精确的选择器包括
属性选择器伪类选择器伪元素选择器
2.新样式
边框与圆角 圆角边框通过 border-radius 属性可以轻松为元素添加圆角甚至创建圆形或椭圆形边框。例如 阴影效果使用 box-shadow 为元素添加阴影增强页面的层次感text-shadow 则用于为文本添加阴影效果。例如
背景
CSS3支持两种渐变方式
线性渐变通过 linear-gradient 创建从左到右、从上到下或对角线方向的渐变。径向渐变通过 radial-gradient 创建圆形或椭圆形的渐变效果。background-clip用于确定背景画区background-origin:当我们设置背景图片时图片是会以左上角对齐但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的background-size:background-size属性常用来调整背景图片的大小主要用于设定图片本身。
字体与文本效果
自定义字体通过 font-face 规则可以引入外部字体文件丰富文本样式。文本阴影使用 text-shadow 为文本添加阴影效果。文本溢出控制例如 text-overflow: ellipsis 可以在文本溢出时显示省略号。
3.transition过渡
transition CSS属性花费时间效果曲线(默认ease)延迟时间(默认0)4.treansform转换
transform: translate(120px, 50%)位移transform: scale(2, 0.5)缩放transform: rotate(0.5turn)旋转transform: skew(30deg, 20deg)倾
5.animation动画
animation也有很多的属性
animation-name动画名称animation-duration动画持续时间animation-timing-function动画时间函数animation-delay动画延迟时间animation-iteration-count动画执行次数可以设置为一个整数也可以设置为infinite意思是无限循环animation-direction动画执行方向animation-paly-state动画播放状态animation-fill-mode动画填充模式
2.10 css动画
transition实现渐变动画
transition的属性如下
property:填写需要变化的css属性duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线delay: 动画效果的延迟触发时间
transform转变动画
包含四个常用的功能
translate位移scale缩放rotate旋转skew倾斜
和transition配合使用
animation实现自定义动画
通过 keyframes 来定义关键帧 animation: name duration timing-function delay iteration-count direction fill-mode;总结
属性含义transition过度用于设置元素的样式过度和animation有着类似的效果但细节上有很大的不同transform变形用于元素进行旋转、缩放、移动或倾斜和设置样式的动画并没有什么关系就相当于color一样用来设置元素的“外表”translate移动只是transform的一个属性值即移动animation动画用于设置动画属性他是一个简写的属性包含6个属性
2.11 怎么理解回流跟重绘什么场景下会触发
回流就像移动或改变了一个物体的形状或大小导致它周围或内部的其他元素也需要跟着移动或改变。浏览器需要重新计算元素在页面中的几何结构位置和尺寸然后重新绘制。重绘就像给一个物体重新上色但物体的形状和大小没变。浏览器只是重新绘制了元素的外观。
浏览器渲染规则
解析HTML生成DOM树解析CSS生成CSSOM树将DOM树和CSSOM树结合生成渲染树(Render Tree)Layout(回流):根据生成的渲染树进行回流(Layout)得到节点的几何信息位置大小Painting(重绘):根据渲染树以及回流得到的几何信息得到节点的绝对像素Display:将像素发送给GPU展示在页面上
触发回流的场景通常也会触发重绘
添加或删除可见的DOM元素 比如动态添加一个div或者移除一个元素。元素位置改变 比如改变margin、padding、left、top等属性。元素尺寸改变 比如改变width、height、font-size等。内容变化 比如用户在input中输入文字或者动态修改了元素的innerHTML。浏览器窗口大小改变 比如用户调整浏览器窗口大小导致需要重新计算布局。改变了影响布局的CSS属性 比如设置display: none彻底隐藏并移出文档流、改变float、position等。滚动页面 浏览器需要不断计算可见区域内的元素布局。
只触发重绘的场景不改变元素大小和位置
改变元素的背景色、文字颜色。改变元素的透明度opacity。改变元素的边框颜色。
2.12 什么是响应式设计响应式设计的基本原理是什么如何做
什么是响应式设计
是一种网页设计方法旨在使网站能够根据用户设备的屏幕尺寸、分辨率和方向自动调整布局和内容
响应式设计的基本原理是什么
流式布局Fluid Grids
使用相对单位如百分比、em、rem代替固定单位如像素使页面元素能够根据屏幕尺寸自动调整大小。
媒体查询Media Queries
使用CSS3的媒体查询功能根据设备的特性如屏幕宽度、分辨率应用不同的样式规则。
视口设置Viewport
通过设置视口元标签确保页面内容根据设备屏幕动态缩放
如何实现
CSS框架、Flexbox/Grid布局、响应式图片和断点设置
2.13 如果要做优化CSS提高性能的方法有哪些 内联首屏关键CSS 页面首要内容出现在屏幕的时间影响着用户的体验而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染 异步加载CSS:在CSS文件请求、下载、解析完成之前CSS会阻塞渲染 使用javascript将link标签插到head标签最后 资源压缩 利用webpack、gulp/grunt、rollup等模块化工具将css代码进行压缩 合理使用选择器 不要嵌套使用过多复杂选择器最好不要三层以上使用id选择器就没必要再进行嵌套通配符和属性选择器效率最低避免使用 减少使用昂贵的属性 box-shadow/border-radius/filter/透明度/:nth-child等会降低浏览器的渲染性能 不要使用import import会影响浏览器的并行下载使得页面在加载时增加额外的延迟增添了额外的往返耗时
2.14 如何实现单行多行文本溢出的省略样式
单行文本
text-overflow规定当文本溢出时显示省略符号来代表被修剪的文本white-space设置文字在一行显示不能换行overflow文字长度超出限定宽度则隐藏超出的内容
多行文本
-webkit-line-clamp: 2用来限制在一个块元素显示的文本的行数为了实现该效果它需要组合其他的WebKit属性display: -webkit-box和1结合使用将对象作为弹性伸缩盒子模型显示-webkit-box-orient: vertical和1结合使用 设置或检索伸缩盒对象的子元素的排列方式overflow: hidden文本溢出限定的宽度就隐藏内容text-overflow: ellipsis多行文本的情况下用省略号“…”隐藏溢出范围的文本
需要注意的是如果文本为一段很长的英文或者数字则需要添加word-wrap: break-word属性
2.15 如何使用css完成视差滚动效果?
什么是视差滚动
多层背景以不同的速度移动形成立体的运动效果带来非常出色的
background-attachment作用是设置背景图像是否固定或者随着页面的其余部分滚动
完成滚动视觉差就需要将background-attachment属性设置为fixed让背景相对于视口固定。背景一开始就已经被固定在初始的位置。
2.16 CSS如何画一个三角形原理是什么
在CSS中我们可以利用元素的边框border来画一个三角形。具体做法是
设置元素尺寸为0把元素的 width 和 height 都设为 0这样它本身不占空间。利用边框斜角给元素的三个边框设置宽度并让它们都变成透明的solid transparent。然后给剩下的一个边框设置一个具体的颜色比如 solid red。形成三角形因为只有一条边框是有颜色的另外两条是透明的这三条边框的斜角就会自然地组合在一起形成一个三角形的视觉效果。”
原理上这其实是利用了边框在元素角落交汇时形成的斜角。当三条边框中有两条是透明的时候有颜色的那条边框的斜角就“露”了出来看起来就像一个三角形。
2.17 说说对Css预编语言的理解有哪些区别?
CSS预处理器是一种扩展CSS的工具它允许我们使用更高级的语法如变量、嵌套、混入、函数等来编写样式这些代码在编译后会转换为标准的CSS供浏览器使用。常见的预处理器包括Sass、Less和Stylus
有哪些
Css预编译语言在前端里面有三大优秀的预编处理器分别是
sasslessstylus
不同点
语法差异
Sass支持两种语法SCSS类似CSS使用花括号和分号和缩进语法不使用花括号和分号类似Python。Less语法接近CSS使用花括号和分号。Stylus语法非常灵活可以省略花括号和分号也可以使用类似CSS的写法。
变量定义
Sass使用 $ 符号定义变量。Less使用 符号定义变量。Stylus可以使用 $ 或 定义变量。
适用场景
Sass功能全面适合大型复杂项目。Less语法简单适合中小型项目。Stylus语法灵活适合实验性开发或需要快速调整的项目。
