1、實現一個div在不同分辨率下的水平垂直居中
方法1:table-cell
<div class="box box1">
<span>垂直居中</span>
</div>
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2:display:flex
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
方法3:絕對定位和負邊距
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}
方法4:絕對定位和0
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方法5:translate
.box6 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
方法6:display:inline-block
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
方法7:display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{
margin: auto;
}
2、左右固定,中間自適應樣式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
3、闡述清楚浮動的幾種方式(常見問題)
1、浮動的產生
float: left/right(設置后產生浮動)
初衷:浮動原先的設計初衷是為了實現文字環繞效果
結果:父元素高度塌陷,理解起來就是元素浮動飄起來了,失去高度,下面的元素會頂上來,就造成了原有的元素背景不見了,margin/padding也不能正常顯示
2、解決浮動的方法
(1)clear: both,在元素最后下加一個元素設置clear:both屬性,缺點是會增加多余無用的html元素
<div class="container">
<div class="left">left浮動</div>
<div class="right">right浮動</div>
<div style="clear:both;"></div>
</div>
(2)使用after偽元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
(3)給父元素設置明確的高度,缺點是並不是所有元素的高度都是固定
(4)給父級元素設置overflow:hidden, 缺點:不能和position配合使用
4、解釋css sprites ,如何使用?
1、什么是精靈圖
將一些小圖標放在一張圖上
2、精靈圖的優點
減少圖片的總大小
減少下載圖片資源請求,減小建立連接的消耗
3、精靈圖的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一個數是x軸, 第二個數是y軸
5、box-sizing常用的屬性有哪些?分別有什么作用?
(1)content-box
寬高是元素本身的寬高 不包含border+padding
(2)border-box
元素的寬高已經包含了border+padding
(3)inherit
從父元素繼承box-sizing屬性
6、CSS樣式覆蓋規則
!important > 內聯樣式 > id選擇 > (class選擇 = 偽類選擇) > (標簽選擇 = 偽元素選擇)
7、請簡要描述margin重合問題,及解決方式
問題:相鄰兩個盒子垂直方向上的margin會發生重疊,只會取比較大的margin
解決:(1)設置padding代替margin
(2)設置float
(3)設置overflow
(4)設置position:absolute 絕對定位
(5)設置display: inline-block
8、對標簽有什么理解
1、meta是html文檔頭部的一個標簽,這個標簽對用戶不可見,是給搜索引擎看的。
2、meta標簽屬性用法分成兩大類
3、<meta charset="UTF-8"> 使用的編碼格式,大部分是utf-8
9、display none visibility hidden區別?
10、重繪和回流(哪些情況重繪,哪些回流)
11、說說你對語義化的理解?
12、為什么要初始化css樣式?
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值不同,如果不初始化css,會導致不同瀏覽器頁面間的顯示差異。
13、移動端適配1px問題
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
14、居中為什么要使用transform(為什么不使用marginLeft/Top)
transform 屬於合成屬性,不會引起整個頁面的回流重繪,節省性能消耗,但是占用內存會大些
top/left屬於布局屬性,會引起頁面layout回流和repaint重繪。
15、介紹css3中position:sticky
<div class="div1">
元素一
</div>
<div class="div2">
元素二
</div>
.div1 {
width: 100%;
height: 50px;
background-color: yellow;
position: sticky;
top: 0;
}
.div2 {
width: 100%;
height: 1500px;
background-color: pink;
}
設置了sticky的元素,在屏幕范圍(viewport)時該元素的位置並不受到定位影響(設置是top、left等屬性無效),
當該元素的位置將要移出偏移范圍時,定位又會變成fixed,根據設置的left、top等屬性成固定位置的效果。
該元素並不脫離文檔流,仍然保留元素原本在文檔流中的位置。
當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設置了top: 50px,那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。
元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素,如果祖先元素都不可以滾動,那么是相對於viewport來計算元素的偏移量
16、上下固定,中間滾動布局如何實現
<div class="father">
<div class="top">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
.father {
display: flex;
flex-direction: column;
height: 100vh;
}
.header,
.footer {
width: 100%;
height: 100px;
}
.main {
width: 100%;
flex: 1;
overflow: auto;
}
17、css實現border漸變
從上到下的線性漸變(默認情況下):background-image: linear-gradient(#e66465, #9198e5);
從左到右的線性漸變:background-image: linear-gradient(to right, red , yellow);
從左上角到右下角的線性漸變:background-image: linear-gradient(to bottom right, red, yellow);
帶有多個顏色節點的從上到下的線性漸變:background-image: linear-gradient(red, yellow, green);
從左到右的線性漸變,帶有透明度:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
一個重復的線性漸變: background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
顏色節點均勻分布的徑向漸變:background-image: radial-gradient(red, yellow, green);
18、純css實現一個高寬比為1:3的盒子 列舉幾種方式
方法1:使用vh視窗單位;屏幕百分比
方法2:使用padding內邊距顯示內容
<p class="father">
<img src="./p1.png">
</p>
.father {
width: 100px;
height: 0; /* 設置高為0 */
padding-bottom: 50px;
overflow: hidden;
border: 1px solid red;
}
img {
width: 100%;
}
方法3:使用calc計算屬性
div {
width: 100px;
height: calc(100px * 2 / 3); /* 設置高為0,使用padding內邊距顯示內容 */
border: 1px solid red;
}
方法4:使用偽元素::before或者::after,使其變成塊元素,再配合padding或者calc計算寬高比
div::after {
content: "";
display: block;
width: 100px;
/* padding-bottom: 50px; */
height: calc(100px /2);
border: 1px solid red;
}
19、 css實現一個旋轉的圓
transform:rotate(7deg);屬性
20、BFC,IFC,FFC的區別
BFC:塊級格式化上下文
1. 內部的盒子會在垂直方向,一個個地放置;
2. 盒子垂直方向的距離由margin決定,屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊;
3. 每個元素的左邊,與包含的盒子的左邊相接觸,即使存在浮動也是如此;
4. BFC的區域不會與float重疊;
5. BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素,反之也如此;
6. 計算BFC的高度時,浮動元素也參與計算。
哪些元素會產生BFC
* 根元素;
* float的屬性不為none;
* position為absolute或fixed;
* display為inline-block,table-cell,table-caption,flex;
* overflow不為visible
IFC:內聯格式上下文
框會從包含塊的頂部開始,一個接一個地水平擺放。
擺放這些框的時候,它們在水平方向上的外邊距、邊框、內邊距所占用的空間都會被考慮在內。在垂直方向上,這些框可能會以不同形式來對齊:它們可能會把底部或頂部對齊,也可能把其內部的文本基線對齊。能把在一行上的框都完全包含進去的一個矩形區域,被稱為該行的行框。水平的margin、padding、border有效,垂直無效。不能指定寬高。
行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。
GFC(GrideLayout formatting contexts):網格布局格式化上下文
當為一個元素設置display值為grid的時候,此元素將會獲得一個獨立的渲染區域,我們可以通過在網格容器(grid container)上定義網格定義行(grid definition rows)和網格定義列(grid definition columns)屬性各在網格項目(grid item)上定義網格行(grid row)和網格列(grid columns)為每一個網格項目(grid item)定義位置和空間。那么GFC有什么用呢,和table又有什么區別呢?首先同樣是一個二維的表格,但GridLayout會有更加豐富的屬性來控制行列,控制對齊以及更為精細的渲染語義和控制
FFC(Flex formatting contexts):自適應格式上下文
display值為flex或者inline-flex的元素將會生成自適應容器(flex container),可惜這個牛逼的屬性只有谷歌和火狐支持,不過在移動端也足夠了,至少safari和chrome還是OK的,畢竟這倆在移動端才是王道。Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素,而設置為 inline-flex 的容器則渲染為一個行內元素。伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說,Flexbox 定義了伸縮容器內伸縮項目該如何布局
21、css3有哪些新特性
CSS3有哪些新特性?
新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
彈性盒模型 display: flex;
多列布局 column-count: 5;
媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}
個性化字體 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}
顏色透明度 color: rgba(255, 0, 0, 0.75);
圓角 border-radius: 5px;
漸變 background:linear-gradient(red, green, blue);
陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字裝飾 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
邊框效果 border-image:url(bt_blue.png) 0 10;
轉換
旋轉 transform: rotate(20deg);
傾斜 transform: skew(150deg, -10deg);
位移 transform:translate(20px, 20px);
縮放 transform: scale(。5);
平滑過渡 transition: all .3s ease-in .1s;
動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
22、CSS3新增偽類有那些?
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
23、介紹一下標准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
在標准盒模型中,元素寬度 = width + padding + border + margin。
怪異(IE)盒模型中,元素寬度 = width + margin
標准瀏覽器通過設置 css3 的 box-sizing: border-box 屬性,觸發“怪異模式”解析計算寬高
24、display:inline-block 什么時候不會顯示間隙?
原因:
元素被當成行內元素排版的時候,元素之間的空白符(空格、回車換行等)都會被瀏覽器處理,
根據white-space的處理方式(默認是normal,合並多余空白),
原來HTML代碼中的回車換行被轉成一個空白符,在字體不為0的情況下,空白符占據一定寬度,所以inline-block的元素之間就出現了空隙。
這些元素之間的間距會隨着字體的大小而變化,當行內元素font-size:16px時,間距為8px。
解決方案:
* 將子元素放置在同一行
* 為父元素中設置font-size: 0,在子元素上重置正確的font-size
* 為inline-block元素添加樣式float:left
* 設置子元素margin值為負數
* 設置父元素,display:table和word-spacing
25、行內元素float:left后是否變為塊級元素?
行內塊級元素,
設置成這個屬性的元素會同時擁有行內和塊級的特性,最明顯的不同是它的默認寬度不是100%,行內元素默認100%寬度占據一行
這時候給行內元素設置 padding-top 和 padding-bottom 或者 width、height 都是有效果的
26、在網頁中的應該使用奇數還是偶數的字體?為什么呢?
偶數字號相對更容易和 web 設計的其他部分構成比例關系
Windows 自帶的點陣宋體(中易宋體)從 Vista 開始只提供 12、14、16 px 這三個大小的點陣
27、::before 和 :after中雙冒號和單冒號 有什么區別?解釋一下這2個偽元素的作用
單冒號(:)用於css3的偽類
雙冒號(::)用於css3的偽元素
想讓插入的內容出現在其它內容前,使用::before,否者,使用::after;
在代碼順序上,::after生成的內容也比::before生成的內容靠后。
如果按堆棧視角,::after生成的內容會在::before生成的內容之上
::before就是以一個子元素的存在,定義在元素主體內容之前的一個偽元素。
並不存在於dom之中,只存在在頁面之中。:before 和 :after 這兩個偽元素,是在CSS2.1里新出現的。
起初,偽元素的前綴使用的是單冒號語法,但隨着Web的進化,在CSS3的規范里,偽元素的語法被修改成使用雙冒號,成為::before ::after
28、如果需要手動寫動畫,你認為最小時間間隔是多久,為什么?(阿里)
多數顯示器默認頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms。
29、CSS3動畫(簡單動畫的實現,如旋轉等)
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
30、base64的原理及優缺點
優點可以加密,減少了 HTTTP 請求
缺點是需要消耗 CPU 進⾏編解碼
31、流體布局、聖杯布局、雙飛翼布局
流式布局:
* 百分比布局,同時搭配 max-width、min-width使用,解決屏幕差異化
* 缺點:頁面元素寬度是百分比,但是頁面的字體等元素大小是固定的px,導致屏幕如果過大的話,
雖然元素被拉伸邊長了,但是字體沒有變大,導致頁面顯示非常不協調。
聖杯布局: 兩側寬度固定,中間寬度自適應的“三欄布局“
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
container包裹中,先展示center,再讓left和right的float顯示
雙飛翼布局:兩側寬度固定,中間寬度自適應的“三欄布局”
<div id="container">
<div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
* 和聖杯布局不同的是,container 容器只是包裹 center 元素,且 container 容器進行浮動
* left 和 right 都在 container 容器外部浮動
flex實現 三欄布局:他們其實都是差不多的
32、stylus/sass/less區別
都是CSS 預處理器技術
Less 使用 .less 擴展名
Sass 使用.scss 擴展名
Stylus 支持的語法要更多樣性一點,它默認使用 .styl 的文件擴展名
Sass 同時也支持老的語法,就是不包含花括號和分號的方式, 縮進式寫法:
變量的定義:
Less css中變量都是用@開頭的
sass變量必須是以$開頭的,然后變量和值之間使用冒號(:)隔開,和css屬性是一樣的
stylus對變量是沒有任何設定的,可以是以$開頭,或者任何的字符,而且與變量之間可以用冒號,空格隔開,但是在stylus中不能用@開頭
嵌套:
CSS中相同的 parent 引用多個元素
sass,Less,stylus都支持多層嵌套
運算符:
sass,Less,stylus都支持運算
body {
margin: (14px/2);
top: 50px + 100px;
right: 80 * 10%;
}
顏色函數:
sass的顏色處理函數:
lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
Less css顏色處理函數:
lighten(@color, 10%);
darken(@color, 10%);
saturate(@color, 10%);
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Stylus顏色處理函數:
lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
導入 (Import),預處理css的導入最后都會生成一個css文件
@ import "1.css";
@ import "file.{type}";
繼承:
sass可通過@extend來實現, Less 表現的稍微弱一些,更像是混入寫法:
sass如下:
.success {
@extend .message;
border-color: green;
}
less如下:
.success {
.message;
border-color: green;
}
Mixins(混入):::
Sass 的混入語法:
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@ include error(); //這里調用默認 border: 2px solid #F00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@ include error(5px); //這里調用 border:5px solid #F00;
}
Less CSS 的混入語法:
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); //這里調用默認 border: 2px solid #F00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); //這里調用 border:5px solid #F00;
}
.Stylus 的混入語法:
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px);
}
在sass中,還支持條件語句:
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
for循環有兩種形式:
1.@for $var from <start> through <end>
2.@for $var from <start> to <end>。
同時支持each命令,作用與for類似:
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
33、postcss的作用
它可以被理解為一個平台,可以讓一些插件在上面跑
它提供了一個解析器,可以將CSS解析成抽象語法樹
通過PostCSS這個平台,我們能夠開發一些插件,來處理CSS。熱門插件如autoprefixer
npm install -g postcss-cli //全局安裝postcss
npm install -g autoprefixer //全局安裝autoprefixer
autoprefixer 插件會幫我們做好兼容處理
34、垂直塌陷及解決方法
.parent {
margin-top: 200px;
width: 200px;
height: 200px;
background: red;
}
.child {
margin-top: 50px;
width: 100px;
height: 100px;
background: black;
}
parant的margintop=200px,正常效果,但是child的margintop=50px卻沒有給到我們預期的效果
border,給parent加上border,就是說child有了頂部的參考了,所以他的margintop就起效
35、粘性定位通常在什么場景下使用,使用方法,使用條件?
* 場景:場景自定義,我通常用在header,很好用
* 使用方法:設置 position:sticky 同時給一個 (top,bottom,right,left) 之一即可
* 使用條件:
1. 父元素不能overflow:hidden或者overflow:auto屬性。
2. 必須指定top、bottom、left、right4個值之一,否則只會處於相對定位
3. 父元素的高度不能低於sticky元素的高度
4. sticky元素僅在其父元素內生效
36、css有哪些內置函數?舉兩個具體用法?
calc()
cubic-bezier()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
var()