Ⅰ WEB前端怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
Ⅱ Web前端面試之css高頻面試題
今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
1.什麼是BFC機制
BFC(BlockFormattingContext)，塊級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
·___シ⑻跫(以下任意一條)
§_loat的值不為none
§_verflow的值不為visible
§_isplay的值為table-cell、tabble-caption和inline-block之一
§_osition的值不為static或則releative中的任何一個
在IE下,Layout,可通過zoom:1_シ
·___FC布局與普通文檔流布局區別:
BFC布局規則:
1._浮動的元素會被父級計算高度(父級元素觸發了BFC)
2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)
3._margin不會傳遞給父級(父級觸發BFC)
4._屬於同一個BFC的兩個相鄰元素上下margin會重疊
5._普通文檔流布局:浮動的元素是不會被父級計算高度
6._非浮動元素會覆蓋浮動元素的位置
7._margin會傳遞給父級元素
8._兩個相鄰元素上下的margin會重疊
·___⒅械撓τ
§_柚_argin重疊
§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)
§_允視α嚼覆季
§_梢宰柚乖乇桓《馗哺
2.CSS3中新增的選擇器以及屬性
這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章
·___糶匝≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素
E[att$="val"]
屬性att的值以"val"結尾的元素
E[att*="val"]
屬性att的值包含"val"字元串的元素
·___峁刮崩嘌≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
選擇器
含義描述
E:root
匹配文檔的根元素，對於HTML文檔，就是HTML元素
E:nth-child(n)
匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n)
匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n)
與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n)
與:nth-last-child()作用類似，但是僅匹配使用同種標簽的元素
E:last-child
匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type
匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)
E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素
·___ss3新增屬性
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3
text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3
border-colors
為邊框設置多種顏色
FF3+
boder-image
圖片邊框
FF3.5,Safari4,Chrome3
text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10
word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3
border-radius
圓角邊框
FF3+,Safari4,Chrome3
opacity
不透明度
all
box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3
outline
外邊框
FF3+,safari4,chrome3,opera10
background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10
background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+
background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3
rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10
3.居中布局
·___驕又
1._行內元素:_ext-align:center
2._塊級元素:_argin:0auto
3._絕對定位和移動:_bsolute+transform
4._絕對定位和負邊距:_bsolute+margin
5._flex布局:_lex+
justify-content:center
·___怪本又
1._子元素為單行文本:_ine-height:height
2._absolute+transform
3._flex+align-items:center
4._table:_isplay:table-cell;vertical-align:
middle
5._利用position和top和負margin
·___醬怪本又_HAPE*MERGEFORMAT
1.已知元素寬高:絕對定位+margin:auto:
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
2.已知元素寬高:_遠ㄎ+負margin
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
3.absolute+transform
_div{
__width:200px;
__height:200px;
__background:
green;
__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}
4.flex+justify-content
+align-items
.box{
_height:600px;
_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_
4.清除浮動有哪些方法,各有什麼優缺點
·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如
Ⅲ 如何把web前端網頁做成自適應
1.首先，在網頁代碼的頭部，加入一行viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9，對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度：width: xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
Ⅳ 前端畫三角形只有邊線
是的。
畫三角形代碼原理採用的是均分原理。 在矩形的直角，兩條邊的樣式要均分，比如左上角 border-top 和 border-left 的樣式要均分 如果border-left 無色透明， border-top有色， 就會出來一個45度的銳角。
Ⅳ web前端開發，怎麼處理css3中邊框倒角屬性
CSS3 使用border-radius屬性設置圓角效果
該屬性可以通過設置圖片或塊級元素四個角的圓角半徑像素數來實現該效果。W3C規定該屬性的可能取值為：
none，默認值，表示元素沒有圓角效果
length，由浮點數字和單位標識組成的長度值
%，由百分比設置的圓角值
該屬性可以分別設置元素的四個圓角效果，採用下列格式來實現。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四個方向的角半徑均採用length取值來實現，該取值必須為浮點數字和單位標識共同組成。同時規定，該取值不得取負數。
例1：利用整數來實現圓角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述實例設置了一個div塊級元素，其寬度為200px，高度為150px。為了能夠看到其圓角效果，增加了顏色為#ff5857的背景顏色，並且添加了1px大小的邊框，其邊框為實線，邊框顏色為#aaaaaa。最後設置其圓角效果，左上角和右下角均為10px，右上角和左下角均為5px。
例2：查看下列CSS代碼。
（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;
上述四組代碼中，只有組（1）提供了完全符合格式的四個數據，其他三組均只提供了小於四個的數據。這種情況下，數據依然按照「左上角 右上角 右下角 左下角」的順序進行排列，沒有涉及到的角方向按照其對角的圓角數據進行設置。
因此，組（2）的數據表示：左上角為10px，右上角為5px，右下角為15像素，左下角為右上角的像素設置，即5px。請同學們根據這樣的方法，理解一下組（3）的圓角含義。
組（4）就設置了一個數據，這表示四個方向的角半徑均為10px。
二、獨立設置元素的四個圓角效果：
若只想設置一個塊級元素右上角的圓角效果，該如何實現呢？這里W3C為border-radius屬性派生出了表示四個方向的獨立圓角效果的子屬性。
border-top-left-radius, 定義左上角的圓角效果
border-top-right-radius, 定義右上角的圓角效果
border-bottom-right-radius, 定義右下角的圓角效果
border-bottom-left-radius, 定義左下角的圓角效果
上述四個子屬性的取值規則和border-radius屬性的取值規則是完全相同的。
例3：設置p標記的圓角效果，其中左下角沒有圓角效果，其他三個方向角的圓角效果均為25px。
方法1：利用border-radius屬性統一設置。
p{border-radius: 25px 25px 25px 0;}
方法2：利用border-radius屬性的派生子屬性設置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3：利用border-radius屬性設置所有角方向均為25px，再利用border-radius屬性的派生子屬性設置左下角沒有圓角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}
Ⅵ 前端如何實現點擊評論，彈出一個框啊，而且是帶三角的
想簡單就是做一個帶三角的評論框背景圖，然後在評論裡面寫一個div，背景放這張圖，絕對定位到評論的下方，div裡面放一個input；
具體樣式自己弄；
然後就是通過JS來實現點擊評論顯示出評論框；
$(".pinglun").click(function(){
$("plDialog").show()
})
Ⅶ 前端編程：在頁面繪制三角形
div+css畫三角形代碼原理採用的是均分原理。
在矩形的直角，兩條邊的樣式要均分，比如左上角 border-top 和 border-left 的樣式要均分
如果border-left 無色透明， border-top有色， 就會出來一個45度的銳角。
Ⅷ 各位web前端開發的大神們，問一下，僅div+css如何實現，點左邊導航欄，右邊出現內容
正常來講js、jquery都可以實現的
但是要用html 和css來做的話 需要使用到框架
<html>
<framesetcols="25%,50%,25%">
<framesrc="frame_a.htm"/>
<framesrc="frame_b.htm"/>
<framesrc="frame_c.htm"/>
</frameset>
</html>
Ⅸ web前端開進入瀏覽器怎麼設置
web前端開進入瀏覽器設置第一步就是和伺服器建立連接send和rec之間。
等待瀏覽器發送請求，拿到數據解析，http報文，返回給客戶端知道了用戶請求後，伺服器在特定的目錄中找到文件，read出來（文件操作），拿到數據，把數據組織成http返回報文，返回前端即可。
Ⅹ 在web前端里,用css怎麼實現半形的效果
如果網頁背景是白色的，可以設一個小的span定在想實現半形的那個地方，設置寬高為0，給設置邊框 例如
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>帶缺角的水平菜單 </title>
<style>
#menu{ font-family:Arial; font-size:14px; }
#menu a , #menu a:visited{ float:left; display:block; position:relative; background:#c00;color:#fff; text-decoration:none; padding:6px ; margin:1px 0 0 1px ; }
#menu a span{ height:0; width:0; border-bottom:6px solid #c00; border-left: 6px solid #fff; position:absolute; top:0;left:0; overflow:hidden;}
#menu a:hover{ color:#333; background:#f90;}
#menu a:hover span{ border-bottom:6px solid #f90;}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>