做商城類項目的時候,我們可能都會經(jīng)歷過“優(yōu)惠券”這類需求,筆者在過往工作中,都是直接要求UI切圖來實現(xiàn),直到有一天產(chǎn)品告訴我一個奇思妙想:這個優(yōu)惠券的寬度會隨內(nèi)容變化的!一下子讓我陷入了人生的大思考,這樣圖片方式可不好整吶,因此萌生一個想法:能不能用純css實現(xiàn)這些效果呢?
首先我們來看下css如何實現(xiàn)內(nèi)倒角
.card {
width: 200px;
height: 100px;
position: relative;
background-image:
radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px),
radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at 100px top, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at 100px bottom, #fff, #fff 10px, transparent 11px);
background-color: red;
}
效果圖:
內(nèi)倒角效果圖
其實最先想到的是畫圓形,在這個例子當中,主要是利用了設置背景圖的屬性與radial-gradient漸變來實現(xiàn),實際效果差不多,在形狀上呢還是保持整體方形,相信大家也看出來副作用,首先這個添加的漸變需要和背景顏色同步,比如設置的倒角是白色,背景是灰色的,那就露餡啦。
使用圓形的可能情況為倒角設置顏色的效果 | |
上面實現(xiàn)了內(nèi)倒角,接下來就要考慮虛線了,既然要純css,能不能把虛線也給優(yōu)雅地實現(xiàn)了呢,其實線性漸變就可以做到,一起來看看:
.line {
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 12px 1px;
background-repeat: repeat-x;
}
代碼效果:
虛線
/* 稍微調(diào)整下size屬性就能改變虛線寬度 */
background-size: 20px 1px;
虛線2
同樣是利用徑向漸變,我們嘗試下波浪框效果:
.card {
background: red;
width: 200px;
height: 100px;
position: relative;
}
.card:after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: -5px;
width: 10px;
height: 100%;
background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
background-size: 10px 10px;
}
bolang
通過以上例子,優(yōu)惠券剪卡風格的效果已經(jīng)呼之欲出了,我們只需要把這些效果組合起來,對顏色位置寬度等細節(jié)進行調(diào)整~
豎型優(yōu)惠券例子效果:
.card1 {
width: 120px;
height: 150px;
position: relative;
background-image:
radial-gradient(circle at left 90px, #fff, #fff 10px, transparent 10px),
radial-gradient(circle at right 90px, #fff, #fff 10px, transparent 11px);
background-color: red;
border-radius: 4px;
}
.card1 > .line {
position: absolute;
bottom: 60px;
left: 14px;
width: 96px;
height: 1px;
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
background-size: 12px 1px;
background-repeat: repeat-x;
}
究極組合,橫型優(yōu)惠券剪卡風格效果:
.card2 {
width: 200px;
height: 100px;
position: relative;
background-image:
radial-gradient(circle at 130px top, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at 130px bottom, #fff, #fff 10px, transparent 11px);
background-color: red;
border-radius: 4px;
}
.card2 > .line {
position: absolute;
top: 50px;
right: 31px;
width: 78px;
height: 1px;
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
background-size: 12px 1px;
background-repeat: repeat-x;
transform:rotate(90deg);
}
.card2:after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
right: -5px;
width: 10px;
height: 100%;
background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
/* 這里可以優(yōu)化一下,變?yōu)榘雸A,right也可以設置為0了 */
background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);
background-size: 10px 14px;
}
是不是有那么點味道了呢,僅用徑向漸變和線性漸變就能做出來效果,一想到UI小姐姐都不用切圖給我,可以早早下班回去陪她男朋友了,我趕緊向她展示了成果,沒想到小姐姐跟我說,你這沒陰影不好看呀,這下子讓我又一次陷入了人生的大思考。
回到工位上,我放棄了思考,顫抖的手胡亂地加了一個shadow,果然,露餡了啊!
但是我們要冷靜,之前的思路是先畫一個方形,然后放置圓形或半圓疊蓋,所以最終還是會原形畢露,結(jié)果還是必須掏空那段半圓缺口啊,可css明顯是做不到的
等等,這時候就需要逆轉(zhuǎn)想法,不是先畫一個方形再剔除半圓,而是一開始就不畫半圓這個缺口,將整個不規(guī)則形狀填充出來,也就不需要剔除半圓了,先來看看下面這段css以及它的效果:
width: 300px;
height: 100px;
background:
radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,
radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,
radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,
radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;
按這個思路將上面的例子轉(zhuǎn)為畫上下兩瓣方形,給透明徑向漸變繪制的circle以外的區(qū)域填上顏色,而陰影部分就用filter來處理
.card2 {
width: 200px;
height: 100px;
position: relative;
background:
radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,
radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;
border-radius: 4px;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
/* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); */
}
.card2 > .line {
/* 沒變化 */
}
最終效果如下,為了看清陰影故意加深了:
沒辦法,波浪框還是覆蓋上去的半圓,所以設置不上貼合的陰影效果,但是基本的券卡形式總算是完美實現(xiàn)了。
第二天UI小姐姐跟我說,她改了設計圖,叫我看看,我說停停,要不你還是切圖給我吧。
以上就是文章的全部內(nèi)容,希望對你有所幫助!如果覺得文章寫的不錯,可以點贊收藏,也歡迎關注,我會持續(xù)更新更多前端有用的知識與實用技巧,希望與你共同成長~關于作者茶無味de一天
一篇,小編分享了怎么使用CSS,接下來小編分享CSS中最最重要的部分-選擇器;選擇器可分為基礎選擇器、高級選擇器;今天先給大家分享基礎選擇器;
什么是選擇器?就是規(guī)定/匹配了哪些元素能夠使用{}內(nèi)的樣式;
1.通配選擇器—*:匹配頁面中所有的標簽元素;語法規(guī)定是:*{屬性:值};常用于定義全局樣式,如字體大小顏色等
2.元素/標簽選擇器—p、div、span等:就是匹配某一類標簽;語法規(guī)范:p{屬性:值}
3.類選擇器—“.className”:就是匹配某一個或一組class名的標簽“語法規(guī)范:.className{屬性:值}
4.分類選擇器—“p.name”:就是匹配某一標簽中,指定類名的目標標簽,語法規(guī)范:p.name{屬性:值} 就是匹配p標簽中類名為name的p標簽;
5.id選擇器—“#idName”:就是匹配某一個id值的標簽,語法規(guī)范:#idName{屬性:值},注意這個匹配絕對是只有一個目標,因為id是不允許重復的,唯一的,因為id對應的目標元素也是唯一的,這個方式定位到目標元素是最準確的。
6.群組選擇器:這個選擇器,不是特別的選擇器,是指多個元素在有相同樣式的情況下,可以通過在選擇器之間加","隔開,這樣能使多個元素運用{}后的樣式,語法規(guī)范:p,div{屬性:值},意思即p div有相同的樣式,這個方式使得CSS代碼能加簡潔,方便
7.后代選擇器:這個方式就通過元素的位置來匹配,后代選擇器是指某一個元素即<標簽></標簽>內(nèi)所有的元素,通過選擇器1 選擇器2的方式定位到某一元素的后代元素;如<div> <p>我的div的后代1</p><p>我的div的后代2</p></div>語法規(guī)范:div p{屬性:值} 這樣就能選擇匹配到div后代所有的p了,不管是第一層還是第n層的p;
8.子代選擇器:這個方式也是通過元素的位置來匹配,和后代選擇器不同的時,子代選擇器匹配到的是某一個標簽的第一層后代,僅僅是父子關系,方式也和后代選擇器不同,方式是通過“>”;語法規(guī)范:div>p{屬性:值}
9.偽類選擇器:這個選擇器通過匹配識別元素的某一個狀態(tài);偽類選擇器分類:a)鏈接偽類:適用于未訪問的鏈接a即a:link,適用于訪問過后的鏈接a即a:visited。b)動態(tài)偽類:適用于鼠標懸停時即:hover,適用于元素被激活時即:active,適用于元素獲取焦點時(一般是指表單)即:focus.c)目標偽類。d)元素狀態(tài)偽類。e)結(jié)構(gòu)偽類。f)否定偽類。
以上是CSS選擇器中的基礎選擇器;
結(jié)下來,小編給大家分享一些常用屬性
1.顏色單位
顏色的表達方式有3種,數(shù)值、英文字母、英文單詞;數(shù)值表示方式語法規(guī)范:rgb(xxx,xxx,xxx)其中,rgb對應的顏色分別:紅色、綠色、藍色;XXX數(shù)值的范圍是0-250-255,常見紅色為(255,0,0),綠色為(0,255,0),藍色(0.0,255)。英文字母方式語法規(guī)范:color:#xxxxxx其中xx取值范圍0-9a-fA-F,比如白色即color:#ffffff,如果2個1、2或3、4或者5、6的值是一樣的,那么可以縮寫為1個字母,如#fff。英文單詞就比較簡單了,如black、red等,這個方式比較單一,顏色比較簡單。
2.尺寸
常用于設置寬度和高度;width、height;只有塊級元素才能設置寬度和高度、行內(nèi)元素不能設置寬度和高度
如果設置的width或者height過大,超出它父級的范圍那么就涉及到溢出問題了。當內(nèi)容溢出時可以處理方式有:溢出可見(visible)、隱藏(hidden)、設置滾動條(scroll)、自動(auto)、橫向溢出(overflow-x)、縱向溢出(overflow-y)
3.邊框:border 語法規(guī)范:border:邊框的寬度 邊框的樣式(虛線還是實線) 邊框的顏色====border:1px solid red
這個可以統(tǒng)一設置上下左右四邊的邊框樣式,也可以單獨設置某一邊的邊框樣式,語法規(guī)范:border-放心-屬性,如border-top-color:red即表示上邊的邊框顏色;
4.邊框倒角,即邊框4個腳的圓弧設置,語法規(guī)范:border-readius:xx xx xx xx,如果有4個值那么就是表示從左上角、右上角、右下角、左下角的邊框倒角;如果只有1個值,那么表示這個4個邊框倒角為統(tǒng)一值。
預告:下一篇: 前端開發(fā)教程之CSS(三) 其他屬性
. HTML
1. img標記屬于什么類型元素?
答案:屬于行內(nèi)(inline)元素.
2.結(jié)構(gòu)標記有哪些?他們與div有什么相同之處,又有什么不同之處?
答案:header,nav,section,aside,footer,article
都是用來做布局的,但結(jié)構(gòu)標記提高了語義性和可讀性.
3. 行內(nèi)元素,塊元素,空元素有哪些?
答案:
(1)行內(nèi)元素:
a, span,i,img,b ,s,u,sup,sub,label
(2)塊元素:
div ,dl,dt,dd,ul,li,ol,p,h1,h2,h3,h4,h5,結(jié)構(gòu)標記
(3)空元素:
br-換行,hr-水平分割線
4. 什么是前端?
答案:
用HTML/CSS/JavaScript以及更多的框架技術,編寫網(wǎng)站頁面、App應用、小程序、2D&3D游戲、Web VR&AR等應用,通過內(nèi)容設計、交互動畫、數(shù)據(jù)操作構(gòu)建項目與用戶的交互界面。前端工程師在項目中可以與UI設計師和后臺程序員合作,實現(xiàn)設計意圖并調(diào)用后臺接口,也可以獨立工作完成強用戶交互的各類應用。
5. HTML、CSS、JavaScript的作用是什么,為什么會產(chǎn)生這三種語言?
答案:這三種語言都是用來編寫網(wǎng)頁的,HTML用于搭建網(wǎng)頁結(jié)構(gòu)展示內(nèi)容,CSS用于修飾HTML元素,JavaScript用于添加網(wǎng)頁的交互驗證。
6. 說說HTML5,CSS3的新特性,平時使用過哪些?
答案:
H5新特性:
結(jié)構(gòu)標記(header,footer,section,article,aside,nav),新表單元素(url,email,number,date,month,color等),canvas,audio,video,地理定位,拖放,web存儲,Web Workers,WebSocket等。
CSS3新特性:
復雜選擇器器(屬性選擇器,偽類選擇器,偽元素選擇器,兄弟選擇器等),邊框倒角,邊框陰影,漸變,轉(zhuǎn)換,過渡,動畫,彈性盒子,媒體查詢技術等。
7、Doctype 作用? 嚴格模式與混雜模式如何區(qū)分?它們有何意義?
(1)、 聲明位于文檔中的最前面,處于 標簽之前。告知瀏覽器的解析器,用什么文檔類型 規(guī)范來解析這個文檔。
(2)、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。
(3)、在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
(4)、DOCTYPE 不存在或格式不正確會導致文檔以混雜模式呈現(xiàn)。
8、對語義化如何理解?
答案:用正確的標簽做正確的事情!
HTML 語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化,便于對瀏覽器、搜索引擎解析;在沒有樣式 CCS 情況下也以一種文檔格式顯示,并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重,利于 SEO。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護理解。
9、iframe 有那些缺點?
iframe 會阻塞主頁面的 Onload 事件;
iframe 和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的并行加載。使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe,最好是通過 javascript 動態(tài)給 iframe 添加 src 屬性值,這樣可以可以繞開以上兩個問題。
10.對 WEB 標準以及 W3C 的理解與認識?
答案:
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈 css 和 js 腳本、結(jié)構(gòu)與行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設備所訪問、更少的代碼和組件,容易維護、改版方便,不需要變動頁面內(nèi)容、提供打印版本而不需要復制內(nèi)容、提高網(wǎng)站易用性.
11.XHTML 和 HTML 有什么區(qū)別?
答案:
HTML 是一種基本的 WEB 網(wǎng)頁設計語言,XHTML 是一個基于 XML 的置標語言最主要的不同:
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
12.img 標簽上 title 與 alt 屬性的區(qū)別是什么?
答案:alt ,當圖片不顯示時,在圖片位置所顯示的文字。
title,鼠標移入到元素上時,為該元素添加提示信息。
13.你如何對網(wǎng)站的文件和資源進行優(yōu)化?
答案:解決方案包括:
文件合并
文件最小化/文件壓縮
使用 CDN 托管
緩存的使用.
二. CSS3
1.隱藏網(wǎng)頁中的元素有幾種方式?這些方法有什么區(qū)別?
答案:三種方法,
display:none; 脫離文檔流,不占頁面空間,會改變頁面布局。
visivility:hidden ;不會脫離文檔流,不會改變頁面布局,仍占頁面空間
opacity:0,該元素隱藏起來了,但不會改變頁面布局,并且,如果該元素已經(jīng)綁定一些事件,如click事件,那么點擊該區(qū)域,也能觸發(fā)點擊事件
2.如何解決子元素的上外邊距溢出?
答案:在父元素的第一個子元素位置處添加一個空的table標記.
3.常用來設置透明度的方式有幾種?他們之間有何區(qū)別?
答案:opacity或rgba
opacity能設置與元素相關各種顏色的透明度
rgba()只能設置當前某一種顏色的透明度
4.浮動會對父元素的高度帶來什么影響?如何解決這個問題?
答案:子元素一旦浮動,父元素的高度為0,在父元素最后一個子元素位置處添加一個空的塊級元素,并設置其clear屬性值為both.
.clear:after{
display:block;
content:””;
clear:both;
}
5.哪些元素默認有外邊距?
答案:body,p,h1-h6,ul,ol,dl,pre
6.網(wǎng)頁中如何定義錨點?如何連接到錨點位置?
答案:a標記用name定義錨點,其他標記用id屬性定義錨點,
連接到錨點的位置:href="#錨點名稱"
7.框模型默認的計算方式是什么?要改變默認的計算方式用哪個屬性及值?
答案:
實際占地寬度=左右外邊距+左右邊框+左右內(nèi)邊距+width
實際占地高度=上下外邊距+上下邊框+上下內(nèi)邊距+height
改變計算方式 box-sizing:border-box
8.實現(xiàn)時針轉(zhuǎn)動效果需要用到CSS中哪些關鍵技術?
答案:旋轉(zhuǎn),動畫,絕對定位
9.設置行內(nèi)元素居中對齊用什么屬性?
答案:text-align:center
10.如果要將表單中控件的值提交給服務器必須為控件設置什么屬性?
答案:name和value屬性
11.transition和animation的區(qū)別?
答案:
Animation和transition大部分屬性是相同的,他們都是隨時間改變元素的屬性值,他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性,
而animation不需要觸發(fā)任何事件的情況下也會隨時間改變屬性值,并且transition為2幀,從from .... to,而animation可以一幀一幀的,也可以理解為一個animation是由多個transition組成。
12. 如何實現(xiàn)水平垂直居中?
答案:
1、定位+外邊距 盒子寬高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
2、定位+transform 盒子高寬已知,
#container{ position:relative; border:1px solid red; width:800px; height:600px; }
#center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
3、flex 布局
父級:
display: flex;
align-items: center;
justify-content: center;
13. 盒子模型你是怎么理解的?
答案:
元素框處理元素內(nèi)容,內(nèi)邊距外邊距以及邊框的計算方式。
盒子模型有兩種,W3C和IE盒子模型
(1)w3c的盒模型width=content,不包括margin,padding,border
(2)IE盒模型width=content+padding+border
(3)box-sizng border-box在已設定的寬度和高度之內(nèi)去設定padding和border
content-box在已設定的高度和寬度之外設置padding和border
14. src和href的區(qū)別?
答案:
(1)href:
href是Hypertext Reference的縮寫,表示超文本引用。用來建立當前元素和文檔之間的鏈接。
并行下載該文檔,不會停止對當前文檔的處理
(2)src:
src是source的縮寫,src指向的內(nèi)容會嵌入到文檔當前標簽所在位置
如img、script、iframe當瀏覽器解析到該元素時,會暫停瀏覽器的渲染,直到該資源加載完畢。
15. 說出link和import的區(qū)別?
答案:
(1)使用方法不同:
link一般在html頭部定義,作為html標簽,鏈接資源,主要用于鏈接外部的樣式表
import一般定義在css內(nèi)部,并且一定要在其他所有規(guī)則之前,也就是一般寫在文件頭部,并且專門拿來鏈css的。
(2)加載順序差別
import比link延遲一些,它會等到頁面下載完后才加載,因而可能會產(chǎn)生閃爍
16. 改變頁面元素位置的定位方式及他們的區(qū)別?
答案:
relative 相對定位 相對于自身原來位置進行偏移,仍處于標準文檔流中;
absolute 絕對定位 相對于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標準。如果無已定位祖先元素, 以body元素為偏移參照, 完全脫離文檔流;
fixed 固定定位的元素會相對于視窗來定位,這意味著即便頁面滾動,它還是會停留在固定的位置。固定定位也會脫離文檔流。
17. display有哪些值,說明他們的作用?
答案:
display的取值可以是none/inline/block/inline-block/table
none:元素隱藏不可見,并且元素也不占頁面空間。
Inline:元素將呈現(xiàn)行內(nèi)元素的特點,多個元素在一行中顯示,不允許修改尺寸,也不能設置垂直外邊距。
block:元素將呈現(xiàn)塊級元素的特點,每個元素獨占一行,允許修改尺寸。
inline-block:元素將呈現(xiàn)行內(nèi)塊元素的特點,多個元素在一行中顯示,但是可以修改尺寸。
table:元素將呈現(xiàn)表格的特點,由內(nèi)容決定表格的顯示方式。元素獨占一行,允許修改尺寸。
18. 有兩個div,外框和內(nèi)框高度寬度都不定,內(nèi)框垂直水平居中,利用css如何實現(xiàn)?
答案:.center{
display:flex;
justify-content:center;
align-items:center;
}
19. 說說em和rem的區(qū)別
答案:rem是基于html元素的字體大小來決定,而em則根據(jù)使用它的元素的字體大小決定(很多人錯誤以為是根據(jù)父類元素,實際上是元素繼承了父類的屬性才會產(chǎn)生的錯覺)
20、瀏覽器的內(nèi)核分別是什么?
答案:IE 瀏覽器的內(nèi)核 Trident、Mozilla 的 Gecko、Chrome 的 Blink(WebKit 的分支)、 Opera 內(nèi)核原為 Presto,現(xiàn)為 Blink;
21、為什么要初始化 CSS 樣式?
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對 CSS 初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。當然,初始化樣式會對 SEO 有一定的影響,但力求影響最小的情況下初始化。最簡單的初始化方法就是: * {padding: 0; margin: 0;} (不建議)淘寶的樣式初始化: body, h1, h2, h3, h4, h5, h6, hr, p,, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
ul, ol{ list-style:none;}
a{text-decoration:none; }
a:hover {text-decoration:underline; }
img{ border:0;}
button,input, select,textarea{ font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
22、CSS哪些屬性可以繼承?優(yōu)先級算法如何計算? CSS3 新增偽類有那些?
答案:
可繼承的樣式: font-size ,font-family ,color, background等;
不可繼承的樣式:border, padding ,margin ,width ,height ;
優(yōu)先級就近原則,同權重情況下以最近者為準;
優(yōu)先級為: !important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高
CSS3 新增偽類:
:first-child 選擇屬于其父元素的首個元素。
:last-child 選擇屬于其父元素的最后一個元素。
:only-child 選擇屬于其父元素唯一的元素。
:nth-child(n) 選擇屬于其父元素的任意一個子元素。
:empty 選擇沒有子元素的元素。
:not(selector) 將滿足指定選擇器的元素給排除在外。
23.描述 css reset 的作用。
答案:reset 重置瀏覽器為元素設置的默認樣式,瀏覽器的種類不同,樣式可能不同,重置是為了讓他們統(tǒng)一樣式。
24.清除浮動帶來影響的幾種方式,各自的優(yōu)缺點
答案:
1、直接設置父元素高度,但不是每次都知道父元素的高度。
2、設置父元素也浮動,但不是任何時候父元素都需要浮動,而且浮動會影響后續(xù)元素。
3、為父元素設置 overflow屬性,但如果有內(nèi)容需要溢出顯示的話,也會一同被隱藏。
4、在父元素中,追加空子元素,并設置其clear:both,但頁面中會多出一個空元素。
5、用內(nèi)容生成的方式:after{content:””;display:block;clear:both;}
25.px 和 em 的區(qū)別
px 和 em 都是長度單位,區(qū)別是,px 的值是固定的,指定是多少就是多少,計算比較容易。em 得值不是固定的,并且 em 會繼承父級元素的字體大小。
瀏覽器的默認字體高都是 16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em
三. AJAX
1.用post方式異步向服務器端提交數(shù)據(jù)時,需要在發(fā)送請求前設置什么?提交的數(shù)據(jù)放在什么位置?
答案:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
數(shù)據(jù)放在send()括號中
2.什么是異步數(shù)據(jù)加載?
答案:瀏覽器在向服務器發(fā)送請求的時候,不耽誤用戶在網(wǎng)頁上做其它操作,可以同時開啟多個任務,并且可以以無刷新的效果來更改頁面中的局部內(nèi)容。
3.異步請求數(shù)據(jù)的步驟分為哪幾步?
答案:創(chuàng)建異步對象,綁定監(jiān)聽事件,創(chuàng)建異步請求,發(fā)送異步請求
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var resText=xhr.responseText;
}
}
xhr.open(method,url,true);
xhr.send(body);
4.異步請求中滿足什么條件時才能取出響應的結(jié)果數(shù)據(jù)?
答案:請求狀態(tài)碼為4,響應狀態(tài)碼為200時
5.如何理解JSON?
答案:
JSON是JS對象的一種表現(xiàn)方式,即以js對象的數(shù)據(jù)格式表現(xiàn)出來的字符串,JSON中的兩個api如下:
將JSON字符串轉(zhuǎn)換成JSON對象 JSON.parse()
將JSON對象轉(zhuǎn)換成JSON字符串 JSON.stringify()
6. http和https的區(qū)別?
答案:
http傳輸?shù)臄?shù)據(jù)都是未加密的,也就是明文的
https協(xié)議是由http和ssl協(xié)議構(gòu)建的可進行加密傳輸和身份認證的網(wǎng)絡協(xié)議,比http協(xié)議的安全性更高。
兩者使用不同的鏈接方式,端口也不同,一般而言,http協(xié)議的端口為80,https的端口為443
7.列舉幾種常見的3和4開頭的狀態(tài)碼以及他們的意義?
答案:
301 :永久性重定向
302 :臨時重定向
304 :請求資源未被修改,命中緩存
400 (錯誤請求) 服務器不理解請求的語法。
403 (禁止) 服務器拒絕請求。
404 (未找到) 服務器找不到請求的網(wǎng)頁。
8. 什么是ajax?有哪些優(yōu)缺點?
答案:AJAX是“Asynchronous JavaScript and XML”的縮寫。他是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術。
優(yōu)點:
1.局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗。
2.減輕服務器的壓力,按需取數(shù)據(jù),最大程度的減少冗余數(shù)據(jù)請求。
3.基于xml標準化,并被廣泛支持,不需安裝插件。
4.促進頁面和數(shù)據(jù)的分離。
缺點:
1.AJAX破壞了瀏覽器的Back和History功能
2.AJAX安全問題
3.對搜索引擎支持較弱
4.破壞程序的異常處理機制
5.AJAX不是很好支持移動設備
四. Bootstrap
1.用bootstrap中的柵格做網(wǎng)頁布局的基本結(jié)構(gòu)是什么?默認將一行分為多少列?
答案:容器中設置行,行內(nèi)設置列
默認將一行分為12個單元格(列)
2.如何編寫響應式網(wǎng)頁?
答案:
(1)聲明viewport元標簽
(2)所有容器/文字/圖片 使用相對尺寸
(3)流式布局+彈性布局
(4)使用CSS3 Media Query技術
3.同時監(jiān)聽多個scss文件的命令是什么?
答案:node-sass -w scss文件夾 –o css文件夾
4.在scss中如何定義混合器以及引用?
答案:
@mixin 混合器名稱{ 樣式聲明 }
通過@include來使用混合器。
5.對于各類尺寸的設備,Bootstrap設置的class前綴分別是什么?
答案
超小設備手機(<768px):.col-xs-
小型設備平板電腦(>=768px):.col-sm-
中型設備臺式電腦(>=992px):.col-md-
大型設備臺式電腦(>=1200px):.col-lg-
6.Bootstrap如何設置響應式表格?
增加class="table-responsive"
7、使用Bootstrap激活或禁用按鈕要如何操作?
激活按鈕:給按鈕增加.active的class
禁用按鈕:給按鈕增加disabled="disabled"的屬性
8、Bootstrap有哪些關于<img>的class?
(1).img-rounded 為圖片添加圓角
(2).img-circle 將圖片變?yōu)閳A形
(3).img-thumbnail 縮略圖功能
(4).img-responsive 圖片響應式 (將很好地擴展到父元素)
9、Bootstrap中有關元素浮動及清除浮動的class?
class="clearfix" 清除浮動
10、Bootstrap如何制作下拉菜單?
(1)將下拉菜單包裹在class="dropdown"的<div>中;
(2)在觸發(fā)下拉菜單的按鈕中添加:class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
(3)在包裹下拉菜單的ul中添加:class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"
(4)在下拉菜單的列表項中添加:role="presentation"。其中,下拉菜單的標題要添加class="dropdown-header",選項部分要添加tabindex="-1"。
11、Bootstrap如何制作按鈕組?
用class="btn-group"的<div>去包裹按鈕組;class="btn-group-vertical"可設置垂直按鈕組。
12、Bootstrap中的導航都有哪些?
(1)導航元素:有class="nav nav-tabs"的標簽頁導航,還有class="nav nav-pills"的膠囊式標簽頁導航;
(2)導航欄:class="navbar navbar-default" role="navigation";
(3)面包屑導航:class="breadcrumb"
13、Bootstrap中設置分頁的class?
默認的分頁:class="pagination"
14、Bootstrap中如何制作徽章?
<span class="badge">26</span>
15、Bootstrap中超大屏幕的作用是什么?
設置class="jumbotron"可以制作超大屏幕,該組件可以增加標題的大小并增加更多的外邊距。
16、Bootstrap 網(wǎng)格系統(tǒng)列與列之間的間隙寬度是多少?
間隙寬度為30px(一個列的每邊分別是15px)。
17、用Bootstrap,如何設置文字的對齊方式?
class="text-center" 設置居中文本
class="text-right" 設置向右對齊文本
class="text-left" 設置向左對齊文本.
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。