css控制td比内容宽5px_前端面试之css相关内容整理

最新推荐文章于 2022-06-30 16:02:30 发布

weixin_39611765

最新推荐文章于 2022-06-30 16:02:30 发布

阅读量95

点赞数

文章标签： css控制td比内容宽5px iis伪静态排除css

1.说说盒模型？ box-sizing常用的属性有哪些？分别有什么作用？

答：css盒模型是css规范的一个模块，每个元素由一个方形的盒子表示。该盒子包含有内容区域(content)、内边框区域(padding)、边框区域(border)、外边框区域(margin)

内容区域：元素真实内容，包含背景、颜色或图片，大小为content-box

内边距区域padding: 如果内容区域设置了背景、颜色或图片，这些样式为延伸到padding上

box-sizing的常用属性：

content-box是默认属性(w3c标准盒模型)，width和height只是内容的宽和高，并不包括padding、border、margin。上面展示的child实际渲染的宽高为260 * 160

border-box(IE盒模型), width和height包含了padding和border,但不不含margin。上面展示的child实际渲染的宽高为220 * 120,多了margin的宽高

2.居中的问题，是不经常碰到呢，哈哈

水平居中

容器上定义一个width,然后设置margin: auto／margin: 0 auto;
父容器的text-align: center,子容器的display:inline-block
绝对定位，left: 50%; (margin-left: -宽度/2 或者css3 transform: translate(-宽度/2, 0),其中宽度不确定情况可以使用translate(-50%, 0))
flex方式， justify-content: center

垂直居中

单行文本line-height
行内块级元素 display:inline-block; vertical-align: middle;
元素高度不定，vertical-align只在父层为td或th时生效，并且父元素display: table，其它不起作用, 子元素display: table-cell; vertical-align:middle;
绝对定位，top: 50%; (margin-top: -高度/2 或者css3 transform: translate(0, -高度/2),其中高度不确定情况可以使用translate(0，-50%))
flex方式，align-items: center;

3.如何确定选择器优先级

答：内敛样式》 id选择器(0100) 》类选择器(属性选择器，伪类) 》类型选择器(伪元素 0001) 》通配符(0000)

但是!important会覆盖上面所有

4.BFC是什么？(这个平时很少关注，但面试也不能遗漏)

答：BFC即为Block-formatting-context(块级格式化上下文)，它是页面的一块渲染区域，这个区域与外部无关。它有自己的渲染规则，决定了子元素的位置以及和其它元素的关系和作用。

规则

哪些会生成BFC

其中，下面第5个问题就会涉及到BFC的相关知识

5.为什么清除浮动？如何清除浮动？

答：一个块级元素的高度如果没有设置height,那么其高度由子元素撑开，如果子元素设置float,它脱离了文档流，父元素的高度会忽略。为了使父元素高度撑起来，需要清除浮动。

清除浮动方法包括操作父元素和操作子元素：

6.页面导入样式时，使用link和@import有什么区别？

答：

7.CSS3哪些新特性? 新增伪类有那些？

答：css3新特性：圆角(border-radius)、阴影(box-shadowext-shadow)、渐变(gradients)、过度与动画(transition and animations),新的布局方式：多列布局(column)、flex、grid。

8.说下行内元素和块级元素的区别？行内块元素的兼容性使用？

答：

布局上：行内元素在一行展示，水平排列；块级元素占据一行，垂直排列
结构上：行内元素不可以插入块级元素，块级元素可以插入行内元素
属性上：行内元素设置width、height无效，margin和padding上下无效。比较常用的行内元素： a、b、em、i、img、input、label、span、strong、sub、sup、textarea

行内块元素的兼容性使用：

9.zoom的作用？

10.父容器width和height分别为200 * 100，子元素设置margin:50%时(考点包括margin百分比都是针对宽度，内联的上下都不起作用)

子元素的margin的百分比针对于父元素的Width
子元素margin:50%时，左右margin为100px,加自身的width超出了父元素宽度的范围，此时后面的元素会换行。因此，图中的'2222'虽然是inline-block方式，也在下一行。除非前一个margin的左右百分比之和小于50%,才会展示在一排
图中可以看出，子元素margin-top也是50%,所以父元素没有全包子元素，如果希望父元素全包子元素，可以通过在父元素添加overflow: scroll破坏BFC