CSS随笔记

1、介绍一下标准的CSS的盒子模型与低版本IE的盒子模型有什么不同的标准盒子模型宽度内容的宽度**content border padding margin**低版本IE盒子模型宽度内容宽度**contentborderpadding margin**2、box-sizing属性用来控制元素的盒子模型的解析模式默认为content-boxcontext-boxW3C的标准盒子模型设置元素的 height/width 属性指的是content部分的高/宽border-boxIE传统盒子模型。设置元素的height/width属性指的是border padding content部分的高/宽3、CSS选择器有哪些哪些属性可以继承CSS选择符id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 p)、子选择器ul li、后代选择器li a、通配符选择器*、属性选择器a[rel”external”]、伪类选择器a:hover, li:nth-child可继承的属性font-size, font-family, color不可继承的样式border, padding, margin, width, height优先级就近原则!important [ id class tag ] !important 比内联优先级高4、CSS优先级算法如何计算元素选择符 1class选择符 10id选择符100元素标签1000!important声明的样式优先级最高如果冲突再进行计算。如果优先级相同则选择最后出现的样式。继承得到的样式的优先级最低。5、CSS3新增伪类有那些?p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素 p:nth-child(2) 选择属于其父元素的第二个子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。6、如何居中div如何居中一个浮动元素如何让绝对定位的div居中divborder:1px solid red;margin:0auto;height:50px;width:80px;浮动元素的上下左右居中border:1px solid red;float:left;position:absolute;width:200px;height:100px;left:50%;top:50%;margin:-50px00-100px;绝对定位的左右居中border:1px solid black;position:absolute;width:200px;height:100px;margin:0auto;left:0;right:0;还有更加优雅的居中方式就是用flexbox我以后会做整理。7、display有哪些值说明他们的作用?inline默认–内联 none–隐藏 block–块显示 table–块级表格来显示在这里插入代码片 list-item–项目列表【列表显示】 inline-block–行内块元素8、position的值static默认按照正常文档流进行排列忽略 top, bottom, left, right 或者 z-index 声明relative相对定位不脱离文档流参考自身静态位置通过 top, bottom, left, right 定位absolute(绝对定位)参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位fixed(固定定位)所固定的参照对像是可视窗口。9、CSS3有哪些新特性RGBA和透明度 CSS3 还支持 HSL 颜色声明方式及其透明度color:hsla(112,72%,33%,0.68);background-image background-origin(content-box/padding-box/border-box)【确定背景的位置】 background-size【背景大小】 background-repeat background-clib(确定背景的画区) background-break【用来控制背景怎样在这些不同的盒子中显示】word-wrap对长的不可分割单词换行word-wrapbreak-wordtext-overflow(设置或检索当当前行超过指定容器的边界时如何显示)text-decoration支持对文字的更深层次的渲染div{-webkit-text-fill-color:black;//文字内部填充的颜色-webkit-text-stroke-color:red;//文字边界填充的颜色-webkit-text-stroke-width:2.75px;//文字边界的宽度}文字阴影text-shadow 5px 5px 5px #FF0000;水平阴影垂直阴影模糊距离阴影颜色和盒阴影box-shadow: 10px 10px 5px #888888及反射reflect效果.classReflect{-webkit-box-reflect:below 10px-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(255,255,255,0.51)));}-webkit-box-reflect:below 10px/*反射在元素下方 10px 的地方再配上渐变效果*/font-face属性定义自己的字体可以加载字体样式还能够加载服务器端的样式font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}font-face{font-family:Runic;src:url(RUNICMT0.eot);}.border{FONT-SIZE:35px;COLOR:black;FONT-FAMILY:BorderWeb}.event{FONT-SIZE:110px;COLOR:black;FONT-FAMILY:Runic}圆角边框半径border-radius 属性用于创建圆角边框图片border-image: url(border.png) 30 30 round媒体查询定义两套css当浏览器的尺寸变化时会采用不同的属性新增加的选择器E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:only-childE:only-of-typeE:emptyE:checkedE:enabledE:disabledE::selectionE:not(s)CSS3 的多列布局multi-column layout.multi_column_style{-webkit-column-count:3;//布局几列-webkit-column-rule:1px solid #bbb;//标识列与列之间的间隔条的样式-webkit-column-gap:2em;//表示列与列之间的间隔}11.渐变效果Gradientbackground-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));/*linear 线性渐变 radial径向渐变*/12**.盒子模型**目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox支持13.Transitionstransform和animation10、请解释一下CSS3的flexbox弹性盒布局模型,以及适用场景该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中block 布局是把块在垂直方向从上到下依次排列的而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制可以由开发人员自由操作。试用场景弹性布局适合于移动前端开发在Android和ios上也完美支持。11、用纯CSS创建一个三角形的原理是什么首先需要把元素的宽度、高度设为0。然后设置边框样式。width:0;height:0;border-top:40px solid transparent;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:40px solid #ff0000;12、一个满屏品字布局如何设计?第一种真正的品字三块高宽是确定的上面那块用margin: 0 auto;居中下面两块用float或者inline-block不换行用margin调整位置使他们居中。第二种全屏的品字布局:上面的div设置成100%下面的div分别宽50%然后使用float或者inline使其不换行。13、常见的兼容性问题不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}IE6双边距bug块属性标签float后又有横行的margin情况下在IE6显示margin比设置的大。hackdisplay:inline;将其转化为行内属性。渐进识别的方式从总体中逐渐排除局部。首先巧妙的使用“9”这一标记将IE浏览器从所有情况中分离出来。接着再次使用“”将IE8和IE7、IE6分离开来这样IE8已经独立识别。{background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9;/*IE6、7、8识别*/background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}设置较小高度标签一般小于10px在IE6IE7中高度超出自己设置高度。hack给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。IE下可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性Firefox下只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。超链接访问过后hover样式就不出现了被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}14、为什么要初始化CSS样式因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的如果没对CSS初始化往往会出现浏览器之间的页面显示差异。15、absolute的containing block计算方式跟正常流有什么不同无论属于哪种都要先找到其祖先元素中最近的 position 值不为 static 的元素然后再判断若此元素为 inline 元素则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形否则,则由这个祖先元素的 padding box 构成。如果都找不到则为 initial containing block。补充static(默认的)/relative简单说就是它的父元素的内容框即去掉padding的部分absolute: 向上找最近的定位为absolute/relative的元素fixed: 它的containing block一律为根元素(html/body)16、CSS里的visibility属性有个collapse属性值在不同浏览器下以后什么区别visibility的属性hiddenvisiblecollapseinherit当一个元素的visibility属性被设置成collapse值后对于一般的元素它的表现跟hidden是一样的。chrome中使用collapse值和使用hidden没有区别。firefoxopera和IE使用collapse值和使用displaynone没有什么区别。17、display:none与visibilityhidden的区别displaynone 不显示对应的元素在文档布局中不再分配空间回流重绘visibilityhidden 隐藏对应元素在文档布局中仍保留原来的空间重绘18、position跟display、overflow、float这些特性相互叠加后会怎么样display属性规定元素应该生成的框的类型position属性规定元素的定位类型float属性是一种布局方式定义元素在哪个方向浮动。类似于优先级机制positionabsolute/fixed优先级最高有他们在时float不起作用display值需要调整。float 或者absolute定位的元素只能是块元素或表格。19、对BFC规范(块级格式化上下文block formatting context)的理解FC的全称是Formatting Contexts是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域并且有一套渲染规则它决定了其子元素将如何定位以及和其他元素的关系和相互作用。BFC块级格式化上下文BFC规定了内部的Block Box如何布局。定位方案内部的Box会在垂直方向上一个接一个放置。Box垂直方向的距离由margin决定属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box 的左边与包含块border box的左边相接触。BFC的区域不会与float box重叠。BFC是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。计算BFC的高度时浮动元素也会参与计算。满足下列条件之一就可触发BFC根元素即htmlfloat的值不为none默认overflow的值不为visible默认display的值为inline-block、table-cell、table-captionposition的值为absolute或fixedIFC【inline formatting context】内联格式化上下文IFC的line box线框高度由其包含行内元素中最高的实际高度计算而来不受到竖直方向的padding/margin影响)IFC中的line box一般左右都贴紧整个IFC但是会因为float元素而扰乱。float元素会位于IFC与与line box之间使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的当插入块级元素时如p中插入div会产生两个匿名块与div分隔开即产生两个IFC每个IFC对外表现为块级元素与div垂直排列。那么IFC一般有什么用呢水平居中当一个块要在环境中水平居中时设置其为inline-block则会在外层产生IFC通过text-align则可以使其水平居中。垂直居中创建一个IFC用其中一个元素撑开父元素的高度然后设置其vertical-align:middle其他行内元素则可以在此父元素下垂直居中。GFC【GridLayout】:网格布局格式化上下文当为一个元素设置display值为grid的时候此元素将会获得一个独立的渲染区域我们可以通过在网格容器grid container上定义网格定义行grid definition rows和网格定义列grid definition columns属性各在网格项目grid item上定义网格行grid row和网格列grid columns为每一个网格项目grid item定义位置和空间。那么GFC有什么用呢和table又有什么区别呢首先同样是一个二维的表格但GridLayout会有更加丰富的属性来控制行列控制对齐以及更为精细的渲染语义和控制。FFC【Flex】自适应格式化上下文display值为flex或者inline-flex的元素将会生成自适应容器flex container可惜这个牛逼的属性只有谷歌和火狐支持不过在移动端也足够了至少safari和chrome还是OK的毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说Flexbox 定义了伸缩容器内伸缩项目该如何布局。20、为什么会出现浮动和什么时候需要清除浮动清除浮动的方式浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。浮动带来的问题父元素的高度无法被撑开影响与父元素同级的元素与浮动元素同级的非浮动元素内联元素会跟随其后若非第一个元素浮动则该元素之前的元素也需要浮动否则会影响页面显示的结构。清除浮动的方式父级div定义height最后一个浮动元素后加空div标签 并添加样式clear:both。包含浮动元素的父标签添加样式overflow为hidden或auto。父级div定义zoom21、上下margin重合的问题在重合元素外包裹一层容器并触发该容器生成一个BFC。例子div classaside/div div classtext div classmain/div /div !--下面是css代码-- .aside{margin-bottom:100px;width:100px;height:150px;background:#f66;}.main{margin-top:100px;height:200px;background:#fcc;}.text{/*盒子main的外面包一个div通过改变此div的属性使两个盒子分属于两个不同的BFC以此来阻止margin重叠*/overflow:hidden;//此时已经触发了BFC属性。}22、设置元素浮动后该元素的display值是多少自动变成display:block23、移动端的布局用过媒体查询吗通过媒体查询可以为不同大小和尺寸的媒体定义不同的css适应相应的设备的显示。head里边 link rel”stylesheet” type”text/css” href”xxx.css” media”only screen and(max-device-width:480px)”CSS:mediaonlyscreenand(max-device-width:480px){/css样式/}24、使用 CSS 预处理器吗Less sass25、CSS优化、提高性能的方法有哪些避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么避免important可以选择其他选择器尽可能的精简规则你可以合并不同类里的重复规则26、浏览器是怎样解析CSS选择器的CSS选择器的解析是从右向左解析的。若从左向右的匹配发现不符合规则需要进行回溯会损失很多性能。若从右向左匹配先找到所有的最右节点对于每一个节点向上寻找其父节点直到找到根元素或满足条件的匹配规则则结束这个分支的遍历。两种匹配规则的性能差别很大是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点叶子节点而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS 解析完毕后需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree最终用来进行绘图。在建立 Render Tree 时WebKit 中的「Attachment」过程浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果Style Rules来确定生成怎样的 Render Tree。27、在网页中的应该使用奇数还是偶数的字体为什么呢使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体中易宋体从 Vista 开始只提供 12、14、16 px 这三个大小的点阵而 13、15、17 px时用的是小一号的点。即每个字占的空间大了 1 px但点阵没变于是略显稀疏。28、margin和padding分别适合什么场景使用何时使用margin需要在border外侧添加空白空白处不需要背景色上下相连的两个盒子之间的空白需要相互抵消时。何时使用padding需要在border内侧添加空白空白处需要背景颜色上下相连的两个盒子的空白希望为两者之和。兼容性的问题在IE5 IE6中为float的盒子指定margin时左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的displayinline解决。29、元素竖向的百分比设定是相对于容器的高度吗当按百分比设定一个元素的宽度时它是相对于父容器的宽度计算的但是对于一些表示竖向距离的属性例如 padding-top , padding-bottom , margin-top , margin-bottom 等当按百分比设定它们时依据的也是父容器的宽度而不是高度。30、全屏滚动的原理是什么用到了CSS的哪些属性原理有点类似于轮播整体的元素一直排列下去假设有5个需要展示的全屏页面那么高度是500%只是展示100%剩下的可以通过transform进行y轴定位也可以通过margin-top实现overflowhiddentransitionall 1000ms ease31、什么是响应式设计响应式设计的基本原理是什么如何兼容低版本的IE响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。32、视差滚动效果视差滚动Parallax Scrolling通过在网页向下滚动的时候控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。CSS3实现优点开发时间短、性能和开发效率比较好缺点是不能兼容到低版本的浏览器jQuery实现通过控制不同层滚动速度计算每一层的时间控制滚动效果。优点能兼容到各个版本的效果可控性好缺点开发起来对制作者要求高插件实现方式例如parallax-scrolling兼容性十分好33、::before 和 :after中双冒号和单冒号有什么区别解释一下这2个伪元素的作用单冒号(:)用于CSS3伪类双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在定义在元素主体内容之前的一个伪元素。并不存在于dom之中只存在在页面之中。:before 和 :after 这两个伪元素是在CSS2.1里新出现的。起初伪元素的前缀使用的是单冒号语法但随着Web的进化在CSS3的规范里伪元素的语法被修改成使用双冒号成为::before ::after34、你对line-height是如何理解的行高是指一行文字的高度具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height没有定义height属性最终其表现作用一定是line-height。单行文本垂直居中把line-height值设置为height一样大小的值可以实现单行文字的垂直居中其实也可以把height删除。多行文本垂直居中需要设置display属性为inline-block。35、怎么让Chrome支持小于12px 的文字p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例36、让页面里的字体变清晰变细用CSS怎么做-webkit-font-smoothing在window系统下没有起作用但是在IOS设备上起作用-webkit-font-smoothingantialiased是最佳的灰度平滑。37、position:fixed;在android下无效怎么处理38、如果需要手动写动画你认为最小时间间隔是多久为什么多数显示器默认频率是60Hz即1秒刷新60次所以理论上最小间隔为1/601000ms 16.7ms。39、li与li之间有看不见的空白间隔是什么原因引起的有什么解决办法行框的排列会受到中间空白回车空格等的影响因为空格也属于字符,这些空白也会被应用样式占据空间所以会有间隔把字符大小设为0就没有空格了。解决方法可以将代码全部写在一排浮动li中floatleft在ul中用font-size0谷歌不支持可以使用letter-space-3px40、display:inline-block 什么时候会显示间隙有空格时候会有间隙 解决移除空格margin正值的时候 解决margin使用负值使用font-size时候 解决font-size:0、letter-spacing、word-spacing41、有一个高度自适应的div里面有两个div一个高度100px希望另一个填满剩下的高度外层div使用positionrelative高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 042、png、jpg、gif 这些图片格式解释一下分别什么时候用。有没有了解过webppng是便携式网络图片Portable Network Graphics是一种无损数据压缩位图文件格式.优点是压缩比高色彩好。 大多数地方都可以用。jpg是一种针对相片使用的一种失真压缩方法是一种破坏性的压缩在色调及颜色平滑变化做的不错。在www上被用来储存和传输照片的格式。gif是一种位图文件格式以8位色重现真色彩的图像。可以实现动画效果.webp格式是谷歌在2010年推出的图片格式压缩率只有jpg的2/3大小比png小了45%。缺点是压缩的时间更久了兼容性不好目前谷歌和opera支持。43、style标签写在body后与body前有什么区别页面加载自上而下 当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析当解析到写在尾部的样式表外联或写在style标签会导致浏览器停止之前的渲染等待加载且解析样式表完成之后重新渲染在windows的IE下可能会出现FOUC现象即样式失效导致的页面闪烁问题44、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?参数是scroll时候必会出现滚动条。参数是auto时候子元素内容大于父元素时出现滚动条。参数是visible时候溢出的内容出现在父元素之外。参数是hidden时候溢出隐藏。45、阐述一下CSS Sprites将一个页面涉及到的所有图片都包含到一张大图中去然后利用CSS的 background-imagebackground- repeatbackground-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求从而大大的提高页面的性能CSS Sprites能减少图片的字节。45、CSS3的Transitions,Transforms和AnimationsTransition 有下面些具体属性transition-property用于指定过渡的性质比如 transition-property:backgrond 就是指 backgound 参与这个过渡transition-duration用于指定这个过渡的持续时间transition-delay用于制定延迟过渡的时间transition-timing-function用于指定过渡类型有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezierdiv idtransDiv classtransStart transition /div .transStart{background-color:white;-webkit-transition:background-color 0.3s linear;-moz-transition:background-color 0.3s linear;-o-transition:background-color 0.3s linear;transition:background-color 0.3s linear;}.transEnd{background-color:red;}Transforms:指拉伸压缩旋转偏移等等一些图形学里面的基本变换 .skew{/*倾斜*/-webkit-transform:skew(50deg);}.scale{/*缩放*/-webkit-transform:scale(2,0.5);}.rotate{/*旋转*/-webkit-transform:rotate(30deg);}.translate{/*平移*/-webkit-transform:translate(50px,50px);}.all_in_one_transform{-webkit-transform:skew(20deg)scale(1.1,1.1)rotate(40deg)translate(10px,15px);}46、css属性clip-path创建一个裁剪区域该区域设置应显示元素的哪一部分。区域内的部分显示区域外的隐藏。/* Keyword values */clip-path:none;/* clip-source values */clip-path:url(resources.svg#c1);/* geometry-box values */clip-path:margin-box;clip-path:border-box;clip-path:padding-box;clip-path:content-box;clip-path:fill-box;clip-path:stroke-box;clip-path:view-box;/* basic-shape values */clip-path:inset(100px 50px);clip-path:circle(50px at 0 100px);/*circle(40%)*/clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);clip-path:path(M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z);/* Box and shape values combined */clip-path:padding-boxcircle(50px at 0 100px);/* Global values */clip-path:inherit;clip-path:initial;clip-path:unset;46、css属性writing-modewriting-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时应在根元素上设置它对于 HTML 文档应该在 html 元素上设置。 它采用以下值之一horizontal-tb (default)【内容从左到右水平流动】 | vertical-rl 【对于左对齐(ltr)脚本内容从上到下垂直流动下一垂直行位于上一行左侧】| vertical-lr【对于左对齐(ltr)脚本内容从上到下垂直流动下一垂直行位于上一行右侧】。47、css属性shape是一个 CSS 模块用于定义在 CSS 值中使用的几何形状。shape-outside — 允许定义基本形状。shape-image-threshold — 设定一个渗出阈值。如果一幅图像被用于定义形状那么只有在大于等于渗出阈值的部分才会显示其他部分不会显示出来。.shape-margin — 在形状外面加上边框。/* 关键字值 */shape-outside:none;shape-outside:margin-box;shape-outside:content-box;shape-outside:border-box;shape-outside:padding-box;/* 函数值 */shape-outside:circle();/*百分比*/shape-outside:ellipse();/*shape-outside: ellipse(130px 140px at 20% 20%);*/shape-outside:inset(10px 10px 10px 10px);shape-outside:polygon(10px 10px,20px 20px,30px 30px);/* url 值 */shape-outside:url(image.png);/* 渐变值 */shape-outside:linear-gradient(45deg,rgba(255,255,255,0)150px,red 150px);/* 全局值 */shape-outside:initial;shape-outside:inherit;shape-outside:unset;48、IOS文字全屏填充word-break:break-all;word-wrap:break-word;text-align:justify;49、折叠窗口hover的时候显示和隐藏第一种使用js实现 const dom document.querySelector(.ctx);let dom_h 0;document.querySelector(.test).addEventListener(mouseenter, () {dom_h dom.offsetHeight || dom_h;dom.style.height 0px;dom.clientHeight;// 触发重绘 dom.style.transition height 0.3s ease;dom.style.height dom_h px;});document.querySelector(.test).addEventListener(mouseleave, () {dom.style.height 0px;});第二种使用interpolate-sizeallow-keywords实现 .test:hover .ctx{height:auto;}.ctx{width:100px;height:0px;transition:0.3s;interpolate-size:allow-keywords;// 启用关键字尺寸动画 numeric-only默认 只对数值做动画 allow-keywords 允许 数值 ↔ 内在尺寸 动画也可以存放在根目录全局使用 :root{interpolate-size:allow-keywords;}overflow:hidden;}第三种使用calc-size()对“内在尺寸”做计算 例如auto、fit-content 和 max-content .ctx{width:100px;height:0;transition:height 0.3s;overflow:hidden;}.test:hover .ctx{height:auto;height:calc-size(auto,size);}