引导者本文目录一览：
- 1、前端面试题系列之-CSS及页面布局篇
- 2、html中video满屏边缘无黑色
- 3、css如何实现图片大于div时的居中显示(代码实例)
- 4、css中如何让p标签里的图片和文字一样大小?
- 5、object-fit的使用
- 6、用html+css怎么写出带按钮的轮播图?
前端面试题系列之-CSS及页面布局篇
1、参考链接： CSS实现不换行/自动换行/文本超出隐藏显示省略号 object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
2、BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
3、面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
4、项目经验篇 项目中遇到的最大挑战以及解决办法 常见的网页优化有哪些？ 作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。
5、前端面试时被问到前端布局，这个怎么回答 你可以说，你对DIV+CSS布局的了解，不懂你先百度吧，我不可能一一说明的。 然后说，盒子模型的了解，还是那句，不懂你百度吧。 然后说，清除浮动的了解，还是那句，不懂你百度。
6、三种基本的选择器类型语法如下：◆标签名选择器，如：p{}，即直接使用HTML标签作为选择器。◆类选择器，如.polaris{}。◆ID选择器，如#polaris{}。所有元素可继承：visibility和cursor。
html中video满屏边缘无黑色
1、在页面加载完成后 获取浏览器高度以及宽度，再设置VIDEO元素高度宽度即可。
2、明显video的宽高比例和视频的宽高比例不一致造成的。你把video标签的高度再设置高点。
3、第一个：在运行程序中输入regedit指令打开注册表。
css如何实现图片大于div时的居中显示(代码实例)
height：300px；position：relative；top：50%；left：50%；margin-left：-250px；margin-top：-150px；}/*思路是使div和img的中心点重合，中心点重合后img就在div中垂直水平居中了。
第一种：将图片的max-width：数值px； 数值设置成你的div2的宽度 第二种：将图片作为div2的背景图， 这种可以不裁剪图片尺寸。
左移和上移的大小就是该DIV宽度和高度的一半。前提是必需设定DIV的宽度和高度。
思路：图片在div里是从左上角开始显示，所以右下角超出的部分会被隐藏，用这个特点，所以再套个div，并对这个div对进定位操作，再对img进行定位，就可以得到我们想要显示的部分了。
css中如何让p标签里的图片和文字一样大小?
另外，如果您的图片尺寸不是固定的，则可能需要使用媒体查询（media query）来调整`background-size`属性的值，以确保文本在不同设备上都能适应图片大小。
最简单的方法是使用浮动。可以用一个最大的div层 包裹住，左边一个div 左浮动，右边一个div右浮动，左边的就是一个logo图，主要处理在右边。
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。
对背景图片设置属性：background-size：cover；可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。
实现div+css实现图片与文字水平对齐，首先需要的是用3个div布局，一个div包裹着其他的2个，给每个div设置好一定的宽度和高度，然后在对包裹的2个div使用float这个属性，float 属性定义元素在哪个方向浮动。
img是内联元素，p标签是块级元素，所以p标签内的文字换行很正常。strong标签是内联元素，所以会跟img处于同一行，想要img跟strong中的文字垂直居中对齐，需要设置img的vertical-align为middle。
object-fit的使用
该设置为找到object-fit这一属性，选择fill就满足需求cssobject-fit了。video标签fill视频拉伸找到object-fit这一属性，选择fill就满足需求了。但是，这一属性兼容性不太好，IE全军覆没，安卓要3以上才支持。
object-fit一般用于img和video标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。您可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。
object-fit主要适合于替换元素，比如：<cssobject-fit；video、object、img、input type=image、svg、svg：image和svg：video等。其默认值为fill。
那就是使用CSS中的 object-fit 属性。该属性一般作用于图片或视频标签上，主要有以下五种属性值：当然还有三个基本上不用的属性，它们显示的效果相当于未设置该属性，本文不做细讲。
方法三直接赋值img标签的src属性即可，最简单但低版 object-fit这个属性决定了像img、video等替换元素的内容应该如何使用他的宽度和高度来填充其容器。
无论使用百度或者是科学上网google都没有解决办法，就连腾讯开发者论坛内相关帖子也都做了删除处理。后面发现，如果要实现小窗播放，只需要把video转化为html5模式，转化方法如下。
用html+css怎么写出带按钮的轮播图?
1、用html和css实现轮播图的两种方法 animation-name：指定需要绑定到选择器的关键帧的名称。Animation-duration：指定完成动画所需的时间，以秒或毫秒为单位。动画-计时-功能：指定动画的速度曲线。
2、设置ul的宽度是500%，li的宽度是20%，这样图片就能一字排开，设置ul的父元素的样式为overflow：hidden；再用CSS3的动画属性，让li中的图片元素位移或者让ul位移。
3、//在自定义css样式中加入下面代码，自定义css在bootstrap.min.css后引入；.carousel .left， .carousel .right {background-image： none；} Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。
4、首先我们创建一个简单的项目，如图所示包括html，css和img三个。这里是html文件，引入css和html代码文件，如图所示。这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
