包含cssobject-fit的词条

by intanet.cn ca 前端 on 2024-03-20

本篇文章给大家谈谈cssobject-fit，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、希望手机UC浏览器能支持这两个CSS3属性：object-fit，object-position
2、img固定宽度和高度，不规则图片变形问题的解决方法
3、我在做移动端时遇见的css问题
4、图片在固定宽高盒子中的显示问题
5、前端面试题系列之-CSS及页面布局篇

希望手机UC浏览器能支持这两个CSS3属性：object-fit，object-position

您好，很高兴为您服务！

亲，很感谢您的支持！

请问游尺CSS3属性：object-fit，object-position，具体您是希望以怎样的效果使用在浏览器内呢？您是在什么操作时，需要这燃猜样的文件支持，请您详细说明，以便为您记录提交相关人员优化哦~

如果仍有问题，请您继续向神段高我们反馈，我们会第一时间为您跟进。

[img]

img固定宽度和高度，不规则图片变形问题的解决方法

日常项目中，后端传图不规则，比例大小不一。前端又要去做适应，是悄乱一个让人非常头大的问题。

总结了一个不规则图片不变形的解决方案：

注：先写一个长 300px 宽 200px 带边框的 div ，图片接近方形，实现图片正常显示不变形。

通过背景图的 background-position 属性，可以使图片居中显示。国外一些网站有看到类似的案例，简单好操作。

这样可以显示完整的图片，不变形：

若要图片填满容器，可以将 background-size 属性改为 100% auto ：

如下图：

同样 background-size 的 contain （完整显示）和 cover （填充）属性也能起到相同的效果。

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框，不支持IE。

可用搏罩属性：

fill 不保持纵横比缩放图片，使图片完全适应

contain 保持纵横比缩放图片，使图片的长边能完全显示出来

cover 保持纵横比缩放图片，只保证图片的短边能完全显示出来

none 保持图片宽高不变

scale-down 当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致

inherit 继承

initial 默认值

unset 继承父元素，若父元素没有属性则显示默认值

CSS：

该方法也可以实现以上两种方法的效果。

以容器宽 200px 高 300px ，图片为方形为例：

设置 width: 100% 为图片完整显示，多出部分留白。

设置 height: 100%; 为图片全部填充，这时候需要给图片的容器添加 overflow: hidden; 属性，防止图片超出。

图片等比例缩放，多余部分，还有就是要考虑基运闹IE兼容问题，可以在手机端项目中使用。

js 方法应该比较通用，可以兼容多版本浏览器。

也可以兼容多版本浏览器，需要 jQuery 加持。

图片等比例缩放，多余部分空白填补：

img固定宽度和高度，不规则图片变形问题的解决方法-HTML笔记-w3h5-Web前端开发资源网

我在做移动端时遇见的css问题

关于css常见问题，大多是移动端的。

简单的排版规则：条目与条目之间空两行，每条内容部分分段空一行。标点符号全部用中文字符。css的标点用英文。

条目编号后面紧跟英文字母的，要空一格，比如 4. css，“4.”凯举者和“css”之间有一个空格。

一、在做手机轮播图时，banner图的宽度是手机屏幕的宽度，轮播图加了左右切换按钮，按钮的position:absolute；定位的元素，定位的元素超出父容器时（超出了100%），会出现滚动条。

二、在移动端有3种布局可选。

1.定位布局

说明：头部、尾部是fixed定位。中间内容部分绝对定位，overflow-y:auto；

2. flex布局（朕极力推荐）

说明：这里写的简洁，没有写很多兼容，移动端兼容性比较好，安卓5.1以上都可以用。用的是较新的flex声明。（这个布局是抄袭手淘团队的。）

3.普通的流式布局

说明：头部和尾部依然是fixed定位，但是#content内容部分则是用padding-top和padding-bottom来支撑页面，这种布局相当垃圾，会带来各种页面上下莫名其妙的留白问题。

三、css属性

1. word-wrap:break-word； word-break:break-all；让一行连续的数字或英文字母遇到边界自动换行。

2. -webkit-user-select:none | normal | text；这个属性是禁止用户选择、复制文字，同时还会使input框、select框不能获取焦点，导致无法输入或选择。所以在使用这个属性时，注意防止对input和select的答渗污染。

3. css3属性选择器。li[class*='act']，可以选中所有class中有‘act’的li元素。

$('li').attr('class').indexOf('act'); 只是获取第一个li的class，然后判断是否有‘act’;

通过for循环可以进一步操作，

for(var i = 0; i $("li[class*='act']").length; i++){

$("li[class*='act']")[i] . . .

}

4.清除浮动，解决高度塌陷

a.伪类(抄袭bootstrap的做法)

.clearfix{}

.clearfix:after{ display:table; content:' '; clear:both; }

b.王妮的做法

.box{ clear:both; overflow:hidden; }

c.对于子元素写margin-top把父级拖下来的情况

（百度说是W3C的标准，只要破坏了父级子级紧贴的结构就可以了）

给父级写border-top，或者给父级写padding-top。采用b方法也可以，a方法无效。

5. css高度单位和颜色单位

height:calc（100vh - 200px）; 目前来看，兼容性还不错。注意，减号两边是有空格的。

background:rgba（255，255，255，0.5）; rgb颜色值和颜色透明度。

6.关于 padding-top:100%; padding-left:100%;

可以利用这两个属性做绝对正方形。比如微信朋友圈的照片9宫格，qq空间的照片9宫格，sina微博的照片9宫格。屏幕宽度未知，一行排3个，盯薯每个宽度都是33.33333%，但是高度不能写百分比了。在每个宽度为33.3333%的元素里再写一个div，这个div的默认宽度就是父级的33.33333%，再用padding-top:100%;把高度撑开，padding-top:%;就是根据已有宽度计算，padding-top:100%;padding-top的px值就和宽度相同，这样，正方形就做出来了，在正方形里面position:absolute;一个div，width:100%; height:100%;然后在这个div里面布局就好。

每个正方形的间距可以用qq空间的2px的透明边框来做，也可以像sina微博一样，用左右padding和margin-bottom来做。一张图和四张图的时候，sina是另外写两个class来做的。

qq空间是js插件写进去的，最大宽度是290px，高度是根据最大宽度计算出来的。

7. 0.5px的线

a.发现qq空间的细线，兼容2倍屏和3倍屏

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),(min-resolution:120dpi),(-ms-high-contrast:active),(-ms-high-contrast:none) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.5);

-moz-transform: scaleY(.5);

-ms-transform: scaleY(.5);

-o-transform: scaleY(.5);

transform: scaleY(.5)

}

.action.flex .dropdown-menu .btn:after,.action.flex:before,.min-comments:nth-child(1):after {

-webkit-transform-origin: 100% 0;

-moz-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

-o-transform-origin: 100% 0;

transform-origin: 100% 0

}

.action.flex:after,.action.flex.btn:after,.feed .source:after {

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%

}

@media only screen and (-webkit-device-pixel-ratio: 1.5) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.6666);

-moz-transform: scaleY(.6666);

-ms-transform: scaleY(.6666);

-o-transform: scaleY(.6666);

transform: scaleY(.6666)

}

@media only screen and (-webkit-device-pixel-ratio: 3) {

.action.flex .dropdown-menu .btn:after,.action.flex:after,.action.flex:before,.feed .source:after,.min-comments .hr,.min-comments:nth-child(1):after {

-webkit-transform:scaleY(.33);

-moz-transform: scaleY(.33);

-ms-transform: scaleY(.33);

-o-transform: scaleY(.33);

transform: scaleY(.33)

}

b. weui的作法是

.weui-cells:after {

content: " ";

position: absolute;

left: 0;

bottom: 0;

right: 0;

height: 1px;

border-bottom: 1px solid #e5e5e5;

color: #e5e5e5;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

z-index: 2;

}

8.背景图片尺寸background-size，img标签object-fit，object-position。

background-size:contain | cover | auto 90% | 50% auto;

这是以背景图的方式展示图片的，如果用img元素的话，

object-fit:fill | contain | cover | none | scale-down;（和background-size效果类似）

object-position:center; 和background-position的取值一样。

这两个属性一起用的话，就能让img元素src的图片效果像背景图片的效果一样，不会因为图片尺寸不成比例而走形。但是兼容性不太好，目前只适合在移动端用。

9.阻止手机弹出默认菜单，长按img标签或者长按a标签会弹出系统默认菜单（ios上，安卓上没测）。

-webkit-touch-callout:none;

10.给文字写行高时，让文字垂直居中时，要把高度也一起写了，line-height:35px; height:35px;

在用appcan做hybrid app时，发现在华为meta8上，用 ul li 做九宫格，li 浮动排在一行时，每个 li 有文字，高度用li的行高撑开的，没有文字的 li 和有文字的 li 的高度是不一样的。有的格子有文字有的没有文字，导致九个格子没有排在3行，有格子掉下去了，排成了4行。所以，在用行高让文字居中时，高度和行高要都写上。

11. text-align:justify;

p标签内大段文字时，除了最后一行，其余的文字都是左对齐，导致段落文字距离右边间距明显大于左边。

可以利用这个属性不处理最后一行的特性，做这种布局：

上面这个布局有一点bug，最后一行是留白，把父级撑高了，原因是父级认为所有子代，包括空文本节点都是占据空间的，哪怕空格，也占据空间。可以给父级 ul 写 font-size:0；就能把底部留白去除了，然后给子代再写font-size:14px;就可以了。但是，text-align:justify;毕竟是处理空格（拉伸空格来使内部元素水平分散），所以在html中，li 要是连着写和分段写，表现结果是不一样的，所以这种奇妙的布局还是有些许不完美，甚至不能用。

12.去除-webkit-的滚动条

#content::-webkit-scrollbar{ display：none; }

设置滚动条样式

/*滚动条宽度*/

#content::-webkit-scrollbar{ width:5px; }

/*滚动条滑块*/

#content::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.25); border-radius:3px; }

/*滚动条的整个背景*/

#content::-webkit-scrollbar-track-piece{ background:#eee; }

TGuide

/* scrollbar */

::-webkit-scrollbar{width:10px;height:10px}

::-webkit-scrollbar-button{display:none}

::-webkit-scrollbar-track{background-color:black}

::-webkit-scrollbar-track-piece{background:#FFF}

::-webkit-scrollbar-thumb{background-color:#8E8E8E;border-radius:5px}

::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}

::-webkit-scrollbar-corner{background-color:#535353}

/*::-webkit-scrollbar-resizer{background-color:#FF6E00}*/

前面不加选择器表示，所有出现滚动条的元素。

13.设置placeholder的样式

input::-webkit-input-placeholder{ color:#999; }

input::-moz-input-placeholder{ color:#999; }

input:-ms-input-placeholder{ color:#999; }

注意 -ms- 前面是一个 “ ：”。

14.移动端点击某一行 :active 时添加背景色，比如 li:active{ background:#eee; } 时，要给 body标签上写ontouchstart，否则没有效果。

另一方面，给body添加，可以阻止图片被默认拖拽。百度的logo就可以被拖拽。

15.pageshow（）和pagehide（）方法。

问题描述：A页面跳转到B页面，在B页面操作后，返回到A页面，A页面的ajax方法不能被再次触发。appcan里面从B页面返回A页面是直接关闭了B页面，微信里是从缓存里取。这两者都不能再次触发A页面的ajax。比如，修改姓名，修改性别。从A页面点击input跳转到B页面进行修改操作，修改完成之后返回A页面，发现信息没有刷新，此时需要主动触发。

解决方法：可以监听pageshow方法，用addEventListener方法进行监听。pageshow（）方法的触发条件是，只要页面被显示就触发，比如appcan里的B页面覆盖在A页面，把B页面关闭，A页面自然就展现出来了，那么A页面的pageshow方法就会触发；微信里，点击返回，虽然是从缓存里取页面，但也会触发pageshow方法。pagehide（）顾名思义。

16.关于position。

华为meta7，安卓版本4.4.2，position:relative; 的元素比position:absolute; 的元素层级要高。百度新闻的导航效果，也是利用了这个。很奇怪。

这种结构，i.line是absolute，每个div都是relative，安卓4.4.2上 i.line 会被父级的兄弟div遮挡住。

解决办法是，把 i.line 拿出来，和div同级。

17. background:url() no-repeat center, url() no-repeat center; 可以一次性放两个图片，中间用逗号隔开。

18.关于移动端软键盘弹起，盖住页面的问题。

核心解决办法是利用 document.activeElement.scrollIntoView(false); 参数false，表示activeElement的元素与页面下边对齐，true表示activeElement的元素与页面上边对齐。这个方法兼容性很好。

另一个方法与之类似 document.activeElement.scrollIntoViewIfNeeded(); 这个方法效果不是很好，没有上面那个好用。

19.常见于小说、报纸排版的column布局。

常用的5个属性有4个是知晓效果的：

column-width:; 每列的宽度。

column-gap:; 列与列之间的间距。

column-fill:; 不知有何软用。

column-rule:; 列与列直接的分割线，与border属性效果一样。

column-count:; 总共分多少列。（这个属性受column-width限制，当同时写上column-width和column-count时，以column-width优先，比如总宽度800px，height:200px; column-width:400px; column-count:4; 显然，800px最多只能分2列，所以优先以column-width进行计算。）

小兼容：ios上，横向滚动 overflow-x:auto; 的容器不适合直接当成分栏布局的容器，应该在 overflow-x 的元素内嵌套一个div当做分栏布局的容器。否则会出现，分栏线，column-rule不跟随容器滚动的奇异现象。另外，column-gap不适合赋值，应当将column-gap写成0，列与列之间的间距可以用分栏布局的子元素的左右padding来做。

大段文字

.box{ width:300px; height:14em; overflow-x:auto; } /*滚动的容器*/

.col{ height:11.9em; text-align:justify; column-count:2; column-gap:0; } /*分栏的容器*/

.col p{ padding:0 .5em; line-height:1.2; } /*文字内容的容器，加左右padding以增加列与列之间的间距。*/

四、貌似很多webapp都会写两个meta标签

不确定是否支持16进制的颜色值。（好像测试过，16进制颜色没有效果。在appcan里也没有效果。）

五、一般不能上传相同图片

可以用 $('input[type="file"]').wrap('').closest('form').get(0).reset(); 重置后就可以了。

六、在安卓上touchmove出现了神奇的bug，百度上说，安卓上touchmove的一瞬间就会触发touchcancel，touch事件就全部被取消了。IOS上是没有这个问题的。

解决方法是：在touchmove里写e.preventDefault();即可。但是这样的话，手指滑动页面就不能scroll了。页面将无法滚动了。

七、flex布局

1. 2012年以后的版本

给父级添加 display:-webkit-flex; display:flex;

flex盒子内子元素的排列方向称作主轴，与主轴垂直的称作交叉轴。

flex盒子内的子元素可以被作项目。

注意：设为flex后，其子元素的float、clear、vertical-align属性就会失效。

a.作用于父级的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。

//子元素的排列方向

flex-direction:row（默认值，从左到右） | row-reverse（从右到左） | column（从上到下） | column-reverse（从下到上）;

//子元素是否换行

flex-wrap:nowrap（默认值，不换行） | wrap（换行） | wrap-reverse（换行，但第一行在下方）;

//子元素排列方向和子元素是否换行的简写

flex-flow:row nowrap;（默认值，从左到右，不换行。）

//项目（子元素）在主轴上的对齐方式

justify-content:flex-start（默认值，以起点为始） | flex-end（以终点为始） | center（居中） | space-between（首尾两个元素紧贴边界，其余元素之间间隔相等） | space-around（每个项目的两侧间隔相等，相当于给每个项目加了margin，并且左右margin相等。所以首尾元素与边界都是有间距的。）;

//项目（子元素）在交叉轴上的对齐方式

align-items:flex-start（以起点为始） | flex-end（以终点为始） | center（居中） | baseline（与项目的第一行文字的基线对齐） | stretch（默认值，在交叉轴方向撑满父级）;

//多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。

（ align-content：stretch; 第一根轴线与边框对齐，其他轴线均分父级间隙。）

b.作用于项目（子元素）的6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。

//子元素的排列顺序

order:0（默认值） | 1 | 2 | 3 . . .

//项目（子元素）的放大比例

flex-grow:0（默认值，默认不放大，尽管有剩余空间） | 1 | 2 | 3 . . .

//项目的缩小比例

flex-shrink:1（默认值，当空间不足时，该项目将缩小） | 0（不论如何，都不缩小）;

//项目占据的主轴空间

flex-basis:auto（默认值，项目本来的大小） | 固定值（200px，50%，100% . . .）;

//flex-grow，flex-shrink，flex-basis的简写 flex ：0 1 auto；

flex:0 1 auto（默认值，有多余空间也不放大，但空间不足会缩小，默认占据空间就是自身大小）;

flex:auto; = flex：1 1 auto; 根据空间大小，可放大可缩小。（有兼容性问题，chrome可以正常解析 flex：auto; -- flex：1 1 auto; 但 IE 就搞笑了，IE10解析出来的flex：auto -- flex：1 0 auto；只放大，不缩小。IE11解析出来的flex：auto；和chrome一样，可放大可缩小。所以在用这个属性的时候，要写完整值，不要简写。）

flex:none； -- flex：0 0 auto；不放大，也不缩小。

//单个项目与其他项目不一样的对齐方式，会覆盖父级的align-items;

注意要活用align-self：stretch;和align-items：stretch;

2. 2009年的版本

目前新版本被支持的很好，所以旧版的直接写带前缀的。

display:-webkit-box; display:-ms-flexbox;

子元素如果有display：inline的，要把子元素写成display：block; 2012年的版本不需要。

a.父级的5个属性。-webkit-box-pack，-webkit-box-align，-webkit-box-direction，-webkit-box-orient，-webkit-box-lines。

//项目在主轴上的对齐方式

-webkit-box-pack:start（默认值，从起点开始） | end | center | justify;

//项目在交叉轴上的对齐方式

-webkit-box-align:stretch（默认值，交叉轴方向撑满父级） | start | end | center | baseline;

//项目的排列顺序

-webkit-box-direction:normal（默认值，以起点为始） | reverse（以终点为始）;

//主轴方向

-webkit-box-orient:horizontal（默认值，水平方向） | vertical（垂直方向） | inline-axis（行内方式，映射为horizontal） | block-axis（块方式排列，映射为vertical）;

//项目（子元素是否换行）

box-lines:single（默认值，不允许） | multiple（允许）;

经测试，没有浏览器支持，这个属性不能用。

b.子元素的3个属性。box-flex，box-flex-group，box-ordinal-group。

//是否缩放

-webkit-box-flex:0（默认值，不放大也不缩小） | 1 | 2 | 3 . . .;

//子元素排列次序

-webkit-box-ordinal-group:1 | 2 | 3 . . . 从小到大排列。

3. 对 1、2 的小结。

2012年版本比2009年的版本主要多了两个属性，1个是子元素是否换行，flex-wrap，2009年的box-lines不起作用。还有一个是子元素在主轴的对齐方式，2012年的justify-content:space-around; 2009年的没有这个效果，但是可以通过加左右padding值的方式做到。

如果要兼容2009年版本的盒子布局又想换行的，只能改用float布局。

八、html结构嵌套问题

p标签内不要嵌套块元素，其他的像h、p、dl . . .的块元素都会发生解析错误。可以嵌套行间元素。

类似的，还有a标签里不能再出现a标签，嵌套多少层都不行。

html标签嵌套要按照块元素包含行间元素的规则来写。

九、标签

让浏览器用最新内核渲染。

十、form标签一点特性

在移动端，input框获取焦点时，浏览器会弹出软键盘，想让软键盘的enter键变成搜索两个字，需要让这个input按照这种结构写：

说明：onsubmit='return false';阻止表单默认提交，便于自己操作。

input 的 type 必须是 search。

input 的加了style='position：relative;'，防止ios上点击搜索按钮会闪屏（白屏）。

十一、浏览器兼容

1.关于table表格的宽度设置问题。

Firefox和chrome的解析方式是不一样的，chrome会把你写的table宽度全部转化成px。Firefox则不会，所以在td写行间样式宽度时，不能百分比和px混用，要统一，要么每个td都写百分比的宽，要么都写px的宽；不要这几个td写百分比，那几个td写px。

2.某些安卓不识别height:calc（）; 可以用flex布局代替。

十二、KTV字幕效果

实现方式1：

把文字写两遍，两个行间元素span，包裹相同的文字。

首页

或者

首页

实现原理是：让内部两个span宽度相等，其中一个设置width:0%；overflow:hidden; 然后用js动态控制width从0% -- 100%。

实现方式2：（张鑫旭说只适用于chrome，但是我测了下，好像firefox也是可以的。）

实现原理：background-image是覆盖在background-color上的，chrome有个私有属性 -webkit-background-clip:text; 意为背景裁切，以文字为裁切起止。效果就是背景图片只会展示文字的书写路径，除了文字的其他部分空间不展示背景图。再结合-webkit-text-fill-color:transparent; 将文字渲染的颜色写为透明，这样，文字路径就透出了背景图。再改变背景图片的水平位置，就能露出文字和背景图片下的背景颜色，就做到KTV字母效果了。

核心的css属性：

background-image:url(); /*纯色的背景图，用来渲染文字颜色，因为文字是透明的。*/

background-repeat:no-repeat;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-position:0 0;

↑改变他就可以了。

关于实现方式2的图示：

图片在固定宽高盒子中的显示问题

我们经常可能会遇到这样一个情况：

有人可能会说，那还不简单，图片宽高设置成父级盒子的宽高不就行了？

举个例子：

结果很显然，如果图片比例与父级盒子比例不对，则很容易造成图片变形：

所以我们往往会直接不限制图片的高度，让图片溢出部分隐藏。

但是这并不是最佳的显示效果，最佳效果应该是让整个图片居中放置。所以有些人可能会用JS去计算，而有些人直接就用背景图片替代，因为背景图片可以直接设置 background-size: cover ，效果就像这样：

然而，事实上，还有一种既可以不用JS，又可以不用背景图片的完美解决方案。

那就是使用CSS中的 object-fit 属性。

该属性一般作用于图片或视频标签上，主要有以下五种属性值：

当然还有三个基本上不用的属闷没性，它们显示的效果相当于未设置该属性，本文不做细讲。

接下来以具体实例分别讲讲以上五个主要的属性值。

图片可能变形，效果同图一。

类似于 background-size: contain ，图片可以完整显示，如图四。

类似于 background-size: cover ，图片会被裁切（只有当图片实际宽高比与样式设置的宽高比正好一致时才不会被裁切），效果同图三。

图片宽高保持不变，可能蚂悔纳出现以下两种情况。

① 图片实际宽度大于样式设置的宽度（或图片实际高度大于样式设置的高度）

图片会被裁切，如图五。（图片实际宽高为512*512）

② 图片实际宽度小于样式设置的宽度（或图片实际高度小于样式设置的高度）

图片不会被裁切，如图六。

图片宽高比保持不变，同样也可能出现以下两种情况。

① 图片实际宽度大于样前尘式设置的宽度（或图片实际高度大于样式设置的高度）

效果与 object-fit: contain 一致，如图四。

② 图片实际宽度小于样式设置的宽度（或图片实际高度小于样式设置的高度）

效果与 object-fit: none 一致，如图六。

object-position 属性规定了指定元素的替换内容在其盒子内的对齐方式，与 background-position 类似，默认为居中，该属性实际用到的情况比较少，本文不再具体展开。

兼容性整体还可以，移动端基本没什么问题，只可惜还是IE……

前端面试题系列之-CSS及页面布局篇

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。

采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：

设置到项目上的属性：

(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所搏并组成）都会垂直的沿着其父元素的边框排列。

上述方法都可以创建BFC，但是会带来一些负面影响：

::before是css3的写法，:before是css2的写法，用来设置对象前的内容

:before的兼容性要比::before好

更准确的说法

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2、animation 配合 @keyframe 可以不触发时间就触发宴裂这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

常规方法

不需要使用transform属性时

webkit内核

参考链接：

CSS实现不换行/自动换行/文本超出隐藏显示省略号

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能

@import规则一定要先于除了@charset的其他任何CSS规则。

不推荐使用@import:

因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

伪元素和伪类的区别总结

css继承指的是被包在内部的标签将拥有外部标签的样晌银闭式性，即子元素可以继承父元素的属性。

包含cssobject-fit的词条

希望手机UC浏览器能支持这两个CSS3属性：object-fit，object-position

img固定宽度和高度，不规则图片变形问题的解决方法

我在做移动端时遇见的css问题

图片在固定宽高盒子中的显示问题

前端面试题系列之-CSS及页面布局篇

最近发表

文章归档

标签列表

包含cssobject-fit的词条

希望手机UC浏览器能支持这两个CSS3属性：object-fit，object-position

img固定宽度和高度，不规则图片变形问题的解决方法

我在做移动端时遇见的css问题

图片在固定宽高盒子中的显示问题

前端面试题系列之-CSS及页面布局篇

相关阅读

校园网拓扑结构图（校园网拓扑结构图片）

好玩的docker（好玩的docker 推荐）

网络信息安全企业（网络信息安全企业排行榜）

wingetui的简单介绍

docker安装influxdb（docker安装包）

jshtyd（介绍和田玉的话术）

最近发表

文章归档

标签列表