CSS 知识碎片 [一] 面试常问

- 日理万妓 2022-12-21 00:59 203阅读 0赞

> 业精于勤 荒于嬉

## 1、css水平、垂直居中的写法，请至少写出4种？ ##

***水平居中***

*  行内元素 text-align : center
 *  块元素：margin 0 auto
 *  display:flex + justify-content: center
 *  position:absolute + left:50%+ transform:translateX(-50%)

***垂直居中***

*  设置line-height 等于 height
 *  display:flex +align-items:center
 *  position:absolute+top:50% +transform:translateY(-50%)
 *  display:table-cell + vertical-align: middle

## 2、画一条0.5px 的直线 ##

> 考察css 的 transform
> 
>     height: 1px;
>     transform: scale(0.5);

## 3、说一下盒模型 ##

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing的使用,box-sizing 的默认值是W3C 标准 content-box

>     box-sizing: content-box 是W3C盒子模型
>      box-sizing: border-box 是IE盒子模型

## 4、画一个三角形 ##

.a {
                width: 0;
                height: 0;
                border-width: 100px;
                border-style: solid;
                border-color: transparent #0099CC transparent transparent;
                transform: rotate(90deg);
                /*顺时针旋转90°* border-color 上 右 下 左 */
            }
    
        <div class="a"></div>

## 5、为什么要初始化CSS样式? ##

*  因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对`CSS`初始化往往会出现浏览器之间的页面显示差异。
 *  当然，初始化样式会对`SEO`有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

## 6、知道css有个content属性吗？有什么作用？有什么应用？ ##

`css`的`content`属性专门应用在 `before/after`伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。

## 7、CSS3动画（简单动画的实现，如旋转等） ##

*  依靠`CSS3`中提出的三个属性：`transition、transform、animation`
 *  `transition`：定义了元素在变化过程中是怎么样的，包含`transition-property、transition-duration、transition-timing-function、transition-delay`。
 *  `transform`：定义元素的变化结果，包含`rotate、scale、skew、translate`。
 *  `animation`：动画定义了动作的每一帧（`@keyframes`）有什么效果，包括`animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction`

## 8、清除浮动的几种方式，各自的优缺点 ##

*  父级`div`定义`height`
 *  结尾处加空`div`标签`clear:both`
 *  父级`div`定义伪类`:after`和`zoom`
 *  父级`div`定义`overflow:hidden`
 *  父级`div`也浮动，需要定义宽度
 *  结尾处加`br`标签`clear:both`
 *  比较好的是第3种方式，好多网站都这么用

> 积跬步 至千里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221120/f80ae1a521d94761bc6368f4fa898154.png