display: none; 與 visibility: hidden; 的區別
- 聯系：它們都能讓元素不可見
- 區別：
-
display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見 -
display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility:hidden;是繼承屬性，子孫節點消失由于繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式 - 修改常規流中元素的
display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪 - 讀屏器不會讀取
display: none;元素內容；會讀取visibility: hidden元素內容
-
css hack原理及常用hack
- 原理：利用不同瀏覽器對CSS的支持和解析結果不一樣編寫針對特定瀏覽器樣式。
- 常見的hack有
- 屬性hack
- 選擇器hack
- IE條件注釋
link 與 @import 的區別
-
link是HTML方式，@import是CSS方式 -
link最大限度支持并行下載，@import過多嵌套導致串行下載，出現FOUC -
link可以通過rel="alternate stylesheet"指定候選樣式 - 瀏覽器對
link支持早于@import，可以使用@import對老瀏覽器隱藏樣式 -
@import必須在樣式規則之前，可以在css文件中引用其他文件 - 總體來說：
link優于@import
CSS有哪些繼承屬性
- 關于文字排版的屬性如：
-
fontword-breakletter-spacingtext-aligntext-renderingword-spacingwhite-spacetext-indenttext-transformtext-shadow
line-heightcolorvisibilitycursor
-
display,float,position的關系
- 如果
display為none，那么position和float都不起作用，這種情況下元素不產生框 - 否則，如果
position值為absolute或者fixed，框就是絕對定位的，float的計算值為none，display根據下面的表格進行調整 - 否則，如果
float不是none，框是浮動的，display根據下表進行調整 - 否則，如果元素是根元素，
display根據下表進行調整 - 其他情況下
display的值為指定值 總結起來：絕對定位、浮動、根元素都需要調整display
外邊距折疊(collapsing margins)
- 毗鄰的兩個或多個
margin會合并成一個margin，叫做外邊距折疊。規則如下：- 兩個或多個毗鄰的普通流中的塊元素垂直方向上的
margin會折疊 - 浮動元素或
inline-block元素或絕對定位元素的margin不會和垂直方向上的其他元素的margin折疊 - 創建了塊級格式化上下文的元素，不會和它的子元素發生margin折疊
- 元素自身的
margin-bottom和margin-top相鄰時也會折
- 兩個或多個毗鄰的普通流中的塊元素垂直方向上的
介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
- 有兩種， IE 盒子模型、W3C 盒子模型；
- 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
- 區 別： IE的content部分把 border 和 padding計算了進去;
CSS選擇符有哪些？哪些屬性可以繼承？
id選擇器（ # myid）
類選擇器（.myclassname）
標簽選擇器（div, h1, p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
后代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = "external"]）
偽類選擇器（a:hover, li:nth-child）
可繼承的樣式：
font-size font-family color, UL LI DL DD DT不可繼承的樣式：
border padding margin width height
CSS優先級算法如何計算？
- 優先級就近原則，同權重情況下樣式定義最近者為準
- 載入樣式以最后載入的定位為準
- 優先級為:
!important > id > class > tagimportant 比 內聯優先級高
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> 元素。
:after 在元素之前添加內容,也可以用來做清除浮動。
:before 在元素之后添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中
如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
- 給
div設置一個寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
- 居中一個浮動元素
//確定容器的寬高 寬500 高 300 的層
//設置層的外邊距
.div {
width:500px ; height:300px;//高度可以不設
margin: -150px 0 0 -250px;
position:relative; //相對定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
- 讓絕對定位的div居中
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display有哪些值？說明他們的作用
- block 象塊類型元素一樣顯示。
- none 缺省值。象行內元素類型一樣顯示。
- inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
- list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
- table 此元素會作為塊級表格來顯示
- inherit 規定應該從父元素繼承 display 屬性的值
position的值relative和absolute定位原點是？
- absolute
- 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。
- fixed （老IE不支持）
- 生成絕對定位的元素，相對于瀏覽器窗口進行定位。
- relative
- 生成相對定位的元素，相對于其正常位置進行定位。
- static
- 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right - z-index 聲明）。
- inherit
- 規定從父元素繼承 position 屬性的值
CSS3有哪些新特性？
- 新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）
- 圓角 （border-radius:8px）
- 多列布局 （multi-column layout）
- 陰影和反射 （Shadow\Reflect）
- 文字特效 （text-shadow、）
- 文字渲染 （Text-decoration）
- 線性漸變 （gradient）
- 旋轉 （transform）
- 增加了旋轉,縮放,定位,傾斜,動畫，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
用純CSS創建一個三角形的原理是什么？
// 把上、左、右三條邊隱藏掉（顏色設為 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一個滿屏 品 字布局 如何設計?
- 簡單的方式：
- 上面的div寬100%，
- 下面的兩個div分別寬50%，
- 然后用float或者inline使其不換行即可
經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？
png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一
IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;
-
Firefox下,只能使用getAttribute()獲取自定義屬性。
- 解決方法:統一通過getAttribute()獲取自定義屬性
IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性
li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
- 行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了
為什么要初始化CSS樣式
- 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異
對BFC規范(塊級格式化上下文：block formatting context)的理解？
- 一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型
- 不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響
css定義的權重
// 以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下/// 例子是演示各種定義的權重值：
/*權重為1*/
div{
}
/*權重為10*/
.class1{
}
/*權重為100*/
#id1{
}
/*權重為100+1=101*/
#id1 div{
}
/*權重為10+1=11*/
.class1 div{
}
/*權重為10+10+1=21*/
.class1 .class2 div{
}
// 如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現
display:inline-block 什么時候會顯示間隙？(攜程)
- 移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing
談談浮動和清除浮動
- 浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上
介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
- 盒子模型構成：內容(content)、內填充(padding)、 邊框(border)、外邊距(margin)
- IE8及其以下版本瀏覽器，未聲明 DOCTYPE，內容寬高會包含內填充和邊框，稱為怪異盒模型(IE盒模型)
- 標準(W3C)盒模型：元素寬度 = width + padding + border + margin
- 怪異(IE)盒模型：元素寬度 = width + margin
- 標準瀏覽器通過設置 css3 的 box-sizing: border-box 屬性，觸發“怪異模式”解析計算寬高
box-sizing 常用的屬性有哪些？分別有什么作用？
- box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果
- box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果
- box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值
CSS選擇器有哪些？
- id選擇器 #id
- 類選擇器 .class
- 標簽選擇器 div, h1, p
- 相鄰選擇器 h1 + p
- 子選擇器 ul > li
- 后代選擇器 li a
- 通配符選擇器 *
- 屬性選擇器 a[rel='external']
- 偽類選擇器 a:hover, li:nth-child
CSS哪些屬性可以繼承？哪些屬性不可以繼承？
- 可以繼承的樣式：font-size、font-family、color、list-style、cursor
- 不可繼承的樣式：width、height、border、padding、margin、background
CSS如何計算選擇器優先？
- 相同權重，定義最近者為準：行內樣式 > 內部樣式 > 外部樣式
- 含外部載入樣式時，后載入樣式覆蓋其前面的載入的樣式和內部樣式
- 選擇器優先級: 行內樣式[1000] > id[100] > class[10] > Tag[1]
- 在同一組屬性設置中，!important 優先級最高，高于行內樣式
CSS3新增偽類有哪些？
:root 選擇文檔的根元素，等同于 html 元素
:empty 選擇沒有子元素的元素
:target 選取當前活動的目標元素
:not(selector) 選擇除 selector 元素意外的元素
:enabled 選擇可用的表單元素
:disabled 選擇禁用的表單元素
:checked 選擇被選中的表單元素
:after 在元素內部最前添加內容
:before 在元素內部最后添加內容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，從后向前數
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第n，從后向前數
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 選擇被用戶選取的元素部分
:first-line 選擇元素中的第一行
:first-letter 選擇元素中的第一個字符
請列舉幾種隱藏元素的方法
- visibility: hidden; 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在
- opacity: 0; CSS3屬性，設置0可以使一個元素完全透明
- position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外
- display: none; 元素會變得不可見，并且不會再占用文檔的空間。
- transform: scale(0); 將一個元素設置為縮放無限小，元素將不可見，元素原來所在的位置將被保留
-
<div hidden="hidden">HTML5屬性,效果和display:none;相同，但這個屬性用于記錄一個元素的狀態 - height: 0; 將元素高度設為 0 ，并消除邊框
- filter: blur(0); CSS3屬性，將一個元素的模糊度設置為0，從而使這個元素“消失”在頁面中
rgba() 和 opacity 的透明效果有什么不同？
- opacity 作用于元素以及元素內的所有內容（包括文字）的透明度
- rgba() 只作用于元素自身的顏色或其背景色，子元素不會繼承透明效果
css 屬性 content 有什么作用？
- content 屬性專門應用在 before/after 偽元素上，用于插入額外內容或樣式
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;
請解釋一下 CSS3 的 Flexbox（彈性盒布局模型）以及適用場景？
- Flexbox 用于不同尺寸屏幕中創建可自動擴展和收縮布局
經常遇到的瀏覽器的JS兼容性有哪些？解決方法是什么？
- 當前樣式：getComputedStyle(el, null) VS el.currentStyle
- 事件對象：e VS window.event
- 鼠標坐標：e.pageX, e.pageY VS window.event.x, window.event.y
- 按鍵碼：e.which VS event.keyCode
- 文本節點：el.textContent VS el.innerText
li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
- li排列受到中間空白(回車/空格)等的影響，因為空白也屬于字符，會被應用樣式占據空間，產生間隔
- 解決辦法：在ul設置設置font-size=0,在li上設置需要的文字大小
什么是外邊距重疊？ 重疊的結果是什么？
外邊距重疊就是 margin-collapse
相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。
這種合并外邊距的方式被稱為折疊，結合而成的外邊距稱為折疊外邊距-
折疊結果遵循下列計算規則：
- 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值
- 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和
請寫出多種等高布局
- 在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像
- 模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運行
- css3 flexbox 布局： .container{display: flex; align-items: stretch;}
css垂直居中的方法有哪些？
- 如果是單行文本, line-height 設置成和 height 值
.vertical {
height: 100px;
line-height: 100px;
}
- 已知高度的塊級子元素，采用絕對定位和負邊距
.container {
position: relative;
}
.vertical {
height: 300px; /*子元素高度*/
position: absolute;
top:50%; /*父元素高度50%*/
margin-top: -150px; /*自身高度一半*/
}
- 未知高度的塊級父子元素居中，模擬表格布局
- 缺點：IE67不兼容，父級 overflow：hidden 失效
.container {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
- 新增 inline-block 兄弟元素，設置 vertical-align
- 缺點：需要增加額外標簽，IE67不兼容
.container {
height: 100%;/*定義父級高度，作為參考*/
}
.extra .vertical{
display: inline-block; /*行內塊顯示*/
vertical-align: middle; /*垂直居中*/
}
.extra {
height: 100%; /*設置新增元素高度為100%*/
}
- 絕對定位配合 CSS3 位移
.vertical {
position: absolute;
top:50%; /*父元素高度50%*/
transform:translateY(-50%, -50%);
}
- CSS3彈性盒模型
.container {
display:flex;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
}
圣杯布局的實現原理？
- 要求：三列布局；中間主體內容前置，且寬度自適應；兩邊內容定寬
- 好處：重要的內容放在文檔流前面可以優先渲染
- 原理：利用相對定位、浮動、負邊距布局，而不添加額外標簽
.container {
padding-left: 150px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
width: 190px;
margin-left: -100%;
position: relative;
left: -150px;
}
.right {
float: left;
width: 190px;
margin-left: -190px;
position: relative;
right: -190px;
}
什么是雙飛翼布局？實現原理？
- 雙飛翼布局：對圣杯布局（使用相對定位，對以后布局有局限性）的改進，消除相對定位布局
- 原理：主體元素上設置左右邊距，預留兩翼位置。左右兩欄使用浮動和負邊距歸位，消除相對定位。
.container {
/*padding-left:150px;*/
/*padding-right:190px;*/
}
.main-wrap {
width: 100%;
float: left;
}
.main {
margin-left: 150px;
margin-right: 190px;
}
.left {
float: left;
width: 150px;
margin-left: -100%;
/*position: relative;*/
/*left:-150px;*/
}
.right {
float: left;
width: 190px;
margin-left: -190px;
/*position:relative;*/
/*right:-190px;*/
}
在CSS樣式中常使用 px、em 在表現上有什么區別？
- px 相對于顯示器屏幕分辨率，無法用瀏覽器字體放大功能
- em 值并不是固定的，會繼承父級的字體大小： em = 像素值 / 父級font-size
為什么要初始化CSS樣式？
- 不同瀏覽器對有些標簽樣式的默認值解析不同
- 不初始化CSS會造成各現瀏覽器之間的頁面顯示差異
- 可以使用 reset.css 或 Normalize.css 做 CSS 初始化
解釋下什么是浮動和它的工作原理？
- 非IE瀏覽器下，容器不設高度且子元素浮動時，容器高度不能被內容撐開。
此時，內容會溢出到容器外面而影響布局。這種現象被稱為浮動（溢出）。 - 工作原理：
- 浮動元素脫離文檔流，不占據空間（引起“高度塌陷”現象）
- 浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留
浮動元素引起的問題？
- 父元素的高度無法被撐開，影響與父元素同級的元素
- 與浮動元素同級的非浮動元素會跟隨其后
列舉幾種清除浮動的方式？
- 添加額外標簽，例如
<div style="clear:both"></div> - 使用 br 標簽和其自身的 clear 屬性，例如
<br clear="all" /> - 父元素設置 overflow：hidden; 在IE6中還需要觸發 hasLayout，例如zoom：1;
- 父元素也設置浮動
- 使用 :after 偽元素。由于IE6-7不支持 :after，使用 zoom:1 觸發 hasLayout
清除浮動最佳實踐（after偽元素閉合浮動）：
.clearfix:after{
content: "\200B";
display: table;
height: 0;
clear: both;
}
.clearfix{
*zoom: 1;
}
什么是 FOUC(Flash of Unstyled Content)？ 如何來避免 FOUC？
- 當使用 @import 導入 CSS 時，會導致某些頁面在 IE 出現奇怪的現象：
沒有樣式的頁面內容顯示瞬間閃爍，這種現象稱為“文檔樣式短暫失效”，簡稱為FOUC - 產生原因：當樣式表晚于結構性html加載時，加載到此樣式表時，頁面將停止之前的渲染。
- 等待此樣式表被下載和解析后，再重新渲染頁面，期間導致短暫的花屏現象。
- 解決方法：使用 link 標簽將樣式表放在文檔 head
介紹使用過的 CSS 預處理器？
- CSS 預處理器基本思想：為 CSS 增加了一些編程的特性（變量、邏輯判斷、函數等）
- 開發者使用這種語言進行進行 Web 頁面樣式設計，再編譯成正常的 CSS 文件使用
- 使用 CSS 預處理器，可以使 CSS 更加簡潔、適應性更強、可讀性更佳，無需考慮兼容性
- 最常用的 CSS 預處理器語言包括：Sass（SCSS）和 LESS
CSS優化、提高性能的方法有哪些？
- 多個css合并，盡量減少HTTP請求
- 將css文件放在頁面最上面
- 移除空的css規則
- 避免使用CSS表達式
- 選擇器優化嵌套，盡量避免層級過深
- 充分利用css繼承屬性，減少代碼量
- 抽象提取公共樣式，減少代碼量
- 屬性值為0時，不加單位
- 屬性值為小于1的小數時，省略小數點前面的0
- css雪碧圖
瀏覽器是怎樣解析CSS選擇器的？
- 瀏覽器解析 CSS 選擇器的方式是從右到左
在網頁中的應該使用奇數還是偶數的字體？
- 在網頁中的應該使用“偶數”字體：
- 偶數字號相對更容易和 web 設計的其他部分構成比例關系
- 使用奇數號字體時文本段落無法對齊
- 宋體的中文網頁排布中使用最多的就是 12 和 14
margin和padding分別適合什么場景使用？
- 需要在border外側添加空白，且空白處不需要背景（色）時，使用 margin
- 需要在border內測添加空白，且空白處需要背景（色）時，使用 padding
抽離樣式模塊怎么寫，說出思路？
- CSS可以拆分成2部分：公共CSS 和 業務CSS：
- 網站的配色，字體，交互提取出為公共CSS。這部分CSS命名不應涉及具體的業務
- 對于業務CSS，需要有統一的命名，使用公用的前綴。可以參考面向對象的CSS
元素豎向的百分比設定是相對于容器的高度嗎？
- 元素豎向的百分比設定是相對于容器的寬度，而不是高度
全屏滾動的原理是什么？ 用到了CSS的那些屬性？
- 原理類似圖片輪播原理，超出隱藏部分，滾動時顯示
- 可能用到的CSS屬性：overflow:hidden; transform:translate(100%, 100%); display:none;
什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
- 響應式設計就是網站能夠兼容多個終端，而不是為每個終端做一個特定的版本
- 基本原理是利用CSS3媒體查詢，為不同尺寸的設備適配不同樣式
- 對于低版本的IE，可采用JS獲取屏幕寬度，然后通過resize方法來實現兼容：
$(window).resize(function () {
screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
$("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
$("body").attr("class", "w1400");
}
if(screenWidth > 1800){
$("body").attr("class", "");
}
}
什么是視差滾動效果，如何給每頁做不同的動畫？
視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，具有非常出色的視覺體驗
一般把網頁解剖為：背景層、內容層和懸浮層。當滾動鼠標滾輪時，各圖層以不同速度移動，形成視差的
-
實現原理
- 以 “頁面滾動條” 作為 “視差動畫進度條”
- 以 “滾輪刻度” 當作 “動畫幀度” 去播放動畫的
- 監聽 mousewheel 事件，事件被觸發即播放動畫，實現“翻頁”效果
a標簽上四個偽類的執行順序是怎么樣的？
link > visited > hover > active
- L-V-H-A love hate 用喜歡和討厭兩個詞來方便記憶
偽元素和偽類的區別和作用？
- 偽元素 -- 在內容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。
- 它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素。例如：
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
- 偽類 -- 將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}
::before 和 :after 中雙冒號和單冒號有什么區別？
- 在 CSS 中偽類一直用 : 表示，如 :hover, :active 等
- 偽元素在CSS1中已存在，當時語法是用 : 表示，如 :before 和 :after
- 后來在CSS3中修訂，偽元素用 :: 表示，如 ::before 和 ::after，以此區分偽元素和偽類
- 由于低版本IE對雙冒號不兼容，開發者為了兼容性各瀏覽器，繼續使使用 :after 這種老語法表示偽元素
- 綜上所述：::before 是 CSS3 中寫偽元素的新語法； :after 是 CSS1 中存在的、兼容IE的老語法
如何修改Chrome記住密碼后自動填充表單的黃色背景？
- 產生原因：由于Chrome默認會給自動填充的input表單加上 input:-webkit-autofill 私有屬性造成的
- 解決方案1：在form標簽上直接關閉了表單的自動填充：autocomplete="off"
- 解決方案2：input:-webkit-autofill { background-color: transparent; }
input [type=search] 搜索框右側小圖標如何美化？
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius: 8px;
background:url("images/searchicon.png") no-repeat 0 0;
background-size: 15px 15px;
}
網站圖片文件，如何點擊下載？而非點擊預覽？
<a href="logo.jpg" download>下載</a>
<a href="logo.jpg" download="網站LOGO" >下載</a>
iOS safari 如何阻止“橡皮筋效果”？
$(document).ready(function(){
var stopScrolling = function(event) {
event.preventDefault();
}
document.addEventListener('touchstart', stopScrolling, false);
document.addEventListener('touchmove', stopScrolling, false);
});
你對 line-height 是如何理解的？
- line-height 指一行字的高度，包含了字間距，實際上是下一行基線到上一行基線距離
- 如果一個標簽沒有定義 height 屬性，那么其最終表現的高度是由 line-height 決定的
- 一個容器沒有設置高度，那么撐開容器高度的是 line-height 而不是容器內的文字內容
- 把 line-height 值設置為 height 一樣大小的值可以實現單行文字的垂直居中
- line-height 和 height 都能撐開一個高度，height 會觸發 haslayout，而 line-height 不會
line-height 三種賦值方式有何區別？（帶單位、純數字、百分比）
- 帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
- 純數字：會把比例傳遞給后代。例如，父級行高為 1.5，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px
- 百分比：將計算后的值傳遞給后代
設置元素浮動后，該元素的 display 值會如何變化？
- 設置元素浮動后，該元素的 display 值自動變成 block
怎么讓Chrome支持小于12px 的文字？
.shrink{
-webkit-transform:scale(0.8);
-o-transform:scale(1);
display:inline-block;
}
讓頁面里的字體變清晰，變細用CSS怎么做？（IOS手機瀏覽器字體齒輪設置）
-webkit-font-smoothing: antialiased;
font-style 屬性 oblique 是什么意思？
- font-style: oblique; 使沒有 italic 屬性的文字實現傾斜
如果需要手動寫動畫，你認為最小時間間隔是多久？
- 16.7ms 多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔: 1s / 60 * 1000 ＝ 16.7ms
display:inline-block 什么時候會顯示間隙？
- 相鄰的 inline-block 元素之間有換行或空格分隔的情況下會產生間距
- 非 inline-block 水平元素設置為 inline-block 也會有水平間距
- 可以借助 vertical-align:top; 消除垂直間隙
- 可以在父級加 font-size：0; 在子元素里設置需要的字體大小，消除垂直間隙
- 把 li 標簽寫到同一行可以消除垂直間隙，但代碼可讀性差
overflow: scroll 時不能平滑滾動的問題怎么處理？
- 監聽滾輪事件，然后滾動到一定距離時用 jquery 的 animate 實現平滑效果。
一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度
- 方案1：
.sub { height: calc(100%-100px); } - 方案2：
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; } - 方案3：
.container { display:flex; flex-direction:column; }
.sub { flex:1; }
