當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

面试题准备--CSS

發(fā)布時間：2025/6/15 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了面试题准备--CSS 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1、css盒模型

基本概念：

標準模型：box-sizing：content-box；

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

區(qū)別：盒子的寬是否包含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;/*指定垂直居中*/ }

父元素高度確定的單行文本
設(shè)置 height = line-height
父元素高度確定的多行文本
a:插入 table （插入方法和水平居中一樣），然后設(shè)置 vertical-align:middle
b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle

5、CSS3新特性

選擇器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? E:last-child 匹配父元素的最后一個子元素E。? ? ? ? ? ? ? ? ? ? ? ? ? ? ??　　? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2）E:nth-child(n)匹配父元素的第n個子元素E。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3）E:nth-last-child(n) CSS3 匹配父元素的倒數(shù)第n個子元素E。

Font-face 可以用來加載字體樣式，而且它還能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

? ? ? ? ?

? ? ? ? 3.圓角border-radius:?15px;陰影效果（shadow）漸變效果

? ? ? ? 4.網(wǎng)格布局，兼容性不好，還不夠成熟。還不能用在實際項目中。

? ? ? ? 5.彈性布局flex

? ? ? ? 6.CSS3制作特效translate（水平移動）、rotate（旋轉(zhuǎn)）、scale（伸縮）、skew（傾斜）、動畫

6、常見布局方法

float

position

flex

table

網(wǎng)格

雙飛燕

圣杯

轉(zhuǎn)載于:https://www.cnblogs.com/Mrcatyang/p/8395462.html

總結(jié)

以上是生活随笔為你收集整理的面试题准备--CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： max分发-（网络系统克隆）
下一篇： kubernetes集群配置dns服务