当前位置：首页 > 前端技术 > CSS >内容正文

CSS

面试题准备--CSS

发布时间：2025/6/15 CSS 53 豆豆

生活随笔收集整理的这篇文章主要介绍了面试题准备--CSS 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1、css盒模型

基本概念：

标准模型：box-sizing：content-box；

IE模型：box-sizing：boder-box；

区别：盒子的宽是否包含padding和border，IE包含，标准不包含

2、BFC见博客http://www.cnblogs.com/Mrcatyang/p/8321977.html

3、浮动的方法：

为父元素添加overflow：hidden；

定义公共类，添加伪元素，浮动元素加上clearfloat就可以了，.clearfloat:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

4、垂直居中的方法

parentElement{ position:relative; } ；childElement{ position: absolute; top: 50%; transform: translateY(-50%); }

flex parentElement{display:flex;/*Flex布局*/display: -webkit-flex; /* Safari */align-items:center;/*指定垂直居中*/ }

父元素高度确定的单行文本
设置 height = line-height
父元素高度确定的多行文本
a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle

5、CSS3新特性

选择器 E:last-child 匹配父元素的最后一个子元素E。　　 2）E:nth-child(n)匹配父元素的第n个子元素E。 3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

3.圆角border-radius: 15px;阴影效果（shadow）渐变效果

4.网格布局，兼容性不好，还不够成熟。还不能用在实际项目中。

5.弹性布局flex

6.CSS3制作特效translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）、动画

6、常见布局方法

float

position

flex

table

网格

双飞燕

圣杯

转载于:https://www.cnblogs.com/Mrcatyang/p/8395462.html

总结

以上是生活随笔为你收集整理的面试题准备--CSS的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。