web前端有哪些布局技巧-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“web前端有哪些布局技巧”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)主營米易網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā)公司,米易h5重慶小程序開發(fā)搭建,米易網(wǎng)站營銷推廣歡迎米易等地區(qū)企業(yè)咨詢

1.今天在做一個頁面的時候碰到了箭頭居中的效果：由于想實現(xiàn)點擊區(qū)域很大所以用了padding-top:23%。但是在計算23%的時候出現(xiàn)了問題，經(jīng)過研究發(fā)現(xiàn)：padding-top的百分比是根據(jù)期父元素的width而不是height來計算的，很奇怪吧？哪位大牛能給解釋下。
2.某個層加了浮動后又加margin后在ie6下一定會出現(xiàn)雙倍邊距。----------解決方法是display:inline;（雖然知道，但是每次都忘）。
3.左側(cè)定寬右側(cè)自適應(yīng)+左右定寬中間自適應(yīng)的框架一定要會運用，很多時候都會運用上，

demo1（左側(cè)定右側(cè)自適應(yīng)）：

代碼如下:

<span ><span > </span><span ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/tupian/20230522/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雙列布局，左側(cè)定寬，右側(cè)自適應(yīng)</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span >
</span></span>

demo2（左右定中間自適應(yīng)）：

代碼如下:

<span ><span > </span><span ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/tupian/20230522/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雙列布局，左側(cè)定寬，右側(cè)自適應(yīng)</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span >
</span></span>

4.在ie6下插入圖片時候用img標(biāo)簽會有img下會有幾個像素的空白會導(dǎo)致你跟設(shè)計稿做的東西不一樣（會被主管火眼看出來然后挨罵）---解決辦法是將img變成塊級元素;display:block;
5.讓文本在塊內(nèi)垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二個比第一個好用，具體我也不知道為什么。
6.a標(biāo)簽的lvha不是很常用，但是一定會用:a:link{} a:visited{};a:hover{}a:active{}
7.文本截斷不換行貌似很常用（這幾天天天用）：white-space:nowrap;overflow:hidden;text-overflow:ellipsis;（換行為：word-wrap:break-word;）
8.清除浮動的方法很多，這幾天主要用的三種：1）clear:both;2)overflow:hidden;3).我的指導(dǎo)人最愛用的：#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}
9.鼠標(biāo)手勢有的時候在ie下會消失，這個情況這兩天也出現(xiàn)過幾次。----------------解決辦法是corsor:pointer;(注意不能是hand--指導(dǎo)人特別提醒)
10.定義一個只有2像素的高度的容器的時候在ie6下會有bug--解決方法是將各種屬性清零，尤其是font-size:0;height:0;line-height:0;
11.max-width在ie6下會不起作用---解決辦法是_width:*;(上個周遇到過這個問題)
12.!important 規(guī)則--以前從來沒用過這個屬性，直到前天主管看我的代碼時候提醒我在一個頁面響應(yīng)式的時候后來的width會覆蓋本身的width:100%;所以要加width:100%!important;
13.清除浮動非常非常重要---比如有的時候容器無法自適應(yīng)高度你就要用到它的！?。?br/>14.點擊文字的時候也會點擊上單選框或者復(fù)選框了比如csdn的這個功能：方法是用lable包住單選框或者用lable for“id”。
15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。

“web前端有哪些布局技巧”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享文章：web前端有哪些布局技巧-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://muchs.cn/article48/phchp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、做網(wǎng)站、標(biāo)簽優(yōu)化、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容