CSS面试题汇总（四）

最新推荐文章于 2024-11-11 18:20:16 发布

2401_86637638

最新推荐文章于 2024-11-11 18:20:16 发布

阅读量997

点赞数 13

文章标签： css c# 前端

本文链接：https://blog.csdn.net/2401_86637638/article/details/141972322

版权

.mul-col {

column-count: 3;

column-gap: 5px;

column-rule: 1px solid gray;

border-radius: 5px;

border: 1px solid gray;

padding: 10px;

}

4. 多背景图

/* backgroundimage:url('1.jpg),url(‘2.jpg’) */

5. CSS3 word-wrap 属性

p.test {

word-wrap: break-word;

}

6. 文字阴影

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

7. @font-face 属性

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”;

}

/* 淘宝网字体使用 */

@font-face {

font-family: iconfont;

src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);

}

8. 圆角

border-radius: 15px;

9. 边框图片

CSS3 border-image 属性

盒阴影

/* box-shadow: 水平方向的偏移量垂直方向的偏移量模糊程度扩展程度颜色是否具有内阴影 */

盒子大小

CSS3 box-sizing 属性

媒体查询

CSS3 @media 查询

CSS3 动画

@keyframes

@keyframes abc {

from {

transform: rotate(0);

}

50% {

transform: rotate(90deg);

}

to {

transform: rotate(360deg);

}

animation 属性

/* animation ： name duration timing-function delay interation-count direction play-state */

渐变效果

background-image: -webkit-gradient(linear,

0% 0%,

100% 0%,

from(#2a8bbe),

to(#fe280e));

CSS3 弹性盒子模型

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 过渡

div {

transition: width 2s;

-moz-transition: width 2s;

/* Firefox 4 */

-webkit-transition: width 2s;

/* Safari 和 Chrome */

-o-transition: width 2s;

/* Opera */

}

CSS3 变换

rotate()旋转
translate()平移
scale( )缩放
skew()扭曲/倾斜
变换基点
3d 转换

参考

33. display 有哪些值？说明他们的作用

参考答案：

display： none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

解析：

默认值：inline

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：指定对象为内联元素。

block：指定对象为块元素。

list-item：指定对象为列表项目。

inline-block：指定对象为内联块元素。（CSS2）

table：指定对象作为块元素级的表格。类同于html标签

（CSS2）

inline-table：指定对象作为内联元素级的表格。类同于html标签

（CSS2）

table-caption：指定对象作为表格标题。类同于html标签（CSS2）