整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML常用代碼有哪些?

          TML即超文本標記語言,是目前應用最為廣泛的語言之一,是組成一個網頁的主要語言。在現今這個HTML5華麗麗地占領了整個互聯網的時候,如果想要通過網頁抓住瀏覽者的眼球光靠因循守舊是不行的,程序猿們需要掌握一些必須知道的HTML常用代碼,因為只有熟悉掌握了常用的HTML代碼,程序猿們在編寫網頁的時候才可以做到流暢美觀,用細膩的思維和創意的細節效果打動并留住網頁瀏覽者。

          html+css代碼

          文本設置

          1、font-size: 字號參數

          2、font-style: 字體格式

          3、font-weight: 字體粗細

          4、顏色屬性

          color: 參數

          注意使用網頁安全色

          超鏈接設置

          text-decoration: 參數

          主要用途是改變瀏覽器顯示文字鏈接時的下劃線。

          參數取值范圍:

          underline:為文字加下劃線

          overline:為文字加上劃線

          line-through:為文字加刪除線

          blink:使文字閃爍

          none:不顯示上述任何效果

          背景

          1、背景顏色

          background-color: 參數

          2、背景圖片

          background-image: url(URL)

          URL就是背景圖片的存放路徑,none表示無。

          3、背景圖片重復

          background-repeat: 參數

          參數取值范圍 :

          no-repeat:不重復平鋪背景圖片

          repeat-x:使圖片只在水平方向上平鋪

          repeat-y:使圖片只在垂直方向上平鋪

          如果不指定背景圖片重復屬性,瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。

          4、背景圖片固定

          背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性,瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時轉移瀏覽者的注意力,一般都設為固定

          background-attachment: 參數

          參數取值范圍:

          fixed:網頁滾動時,背景圖片相對于瀏覽器的窗口而言,固定不動

          scroll:網頁滾動時,背景圖片相對于瀏覽器的窗口而言,一起滾動

          區塊

          1、單詞間距

          word-spacing: 間隔距離

          2、字母間距

          letter-spacing: 字母間距

          3、文本對齊

          text-align: 參數

          參數的取值:

          left:左對齊

          right:右對齊

          center:居中對齊

          justify:相對左右對齊

          4、垂直對齊

          vertical-align: 參數

          top:頂對齊

          bottom:底對齊

          text-top:相對文本頂對齊

          text-bottom:相對文本底對齊

          baseline:基準線對齊

          middle:中心對齊

          sub:以下標的形式顯示

          super:以上標的形式顯示

          5、文本縮進

          text-indent: 縮進距離

          12px相當于一個文字距離

          6、空格

          white-space: 參數

          normal 正常

          pre 保留

          nowrap 不換行

          7、顯示樣式

          display: 參數

          參數取值范圍:

          block:塊級元素,在對象前后都換行

          inline:在對象前后都不換行

          list-item:在對象前后都換行,增加了項目符號

          none:無顯示

          方框

          1、height 高度

          2、width 寬度

          3、padding 內邊距

          4、margin 外邊距

          5、float(浮動):可以讓塊級元素在一行中排列,例如橫向菜單。

          6、clear 清除浮動

          邊框

          1、樣式

          border style 參數

          邊框樣式的參數:

          none:無邊框

          dotted:邊框為點線

          dashed:邊框為長短線

          solid:邊框為實線

          double:邊框為雙線

          2、寬度

          border width 參數

          3、顏色

          border color 參數

          列表

          list-style-type 列表樣式

          不同瀏覽器的列表符可能不相同,可能會影響到網頁,所以網頁中的列表大多都是由背景圖片顯示。

          控制用戶界面的樣式

          鼠標

          cursor:鼠標形狀參數

          CSS鼠標形狀參數表:

          鼠標形狀:CSS代碼

          style="cursor:hand"      手形

          style="cursor:crosshair"   十字形

          style="cursor:text"      文本形

          style="cursor:wait"      沙漏形

          style="cursor:move"     十字箭頭形:

          style="cursor:help"      問號形

          style="cursor:e-resize"    右箭頭形

          style="cursor:n-resize"    上箭頭形

          style="cursor:nw-resize"   左上箭頭形

          style="cursor:w-resize"    左箭頭形

          style="cursor:s-resize"    下箭頭形

          style="cursor:se-resize"   右下箭頭形

          style="cursor:sw-resize"   左下箭頭形

          HTML常用代碼之:結構性定義

          文件類型<HTML></HTML> (放在檔案的開頭與結尾)

          文件主題<TITLE></TITLE> (必須放在「文頭」區塊內)

          文頭<HEAD></HEAD> (描述性資料,像是「主題」)

          文體<BODY></BODY> (文件本體)

          標題<H?></H?> (從1到6,有六層選擇)

          標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>

          區分<DIV></DIV>

          區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

          引文區塊<BLOCKQUOTE></BLOCKQUOTE> (通常會內縮)

          強調<EM></EM> (通常會以斜體顯示)

          特別強調<STRONG></STRONG> (通常會以加粗顯示)

          引文<CITE></CITE> (通常會以斜體顯示)

          碼<CODE></CODE> (顯示原始碼之用)

          樣本<SAMP></SAMP>

          鍵盤輸入<KBD></KBD>

          變數<VAR></VAR>

          定義<DFN></DFN> (有些瀏覽器不提供)

          地址 <ADDRESS></ADDRESS>

          大字<BIG></BIG>

          小字<SMALL></SMALL>

          與外觀相關的標簽(作者自訂的表現方式)

          加粗<B></B>

          斜體<I></I>

          底線<U></U> (尚有些瀏覽器不提供)

          刪除線<S></S> (尚有些瀏覽器不提供)

          下標<SUB></SUB>

          上標<SUP></SUP>

          打字機體<TT></TT> (用單空格字型顯示)

          預定格式<PRE></PRE> (保留文件中空格的大小)

          預定格式的寬度<PRE WIDTH=?></PRE>(以字元計算)

          向中看齊<CENTER></CENTER> (文字與圖片都可以)

          閃耀<BLINK></BLINK> (有史以來最被嘲弄的標簽)

          字體大小 <FONTSIZE=?></FONT>(從1到7)

          改變字體大小 <FONTSIZE=+|-?></FONT>

          基本字體大小 <BASEFONTSIZE=?> (從1到7; 內定為3)

          字體顏色 <FONTCOLOR="#$$"></FONT>($$為顏色代碼)

          HTML常用代碼之:修改頁面的實用性HTML代碼

          貼圖:<img src="圖片地址">

          加入連接:<a href="所要連接的相關地址">寫上你想寫的字</a>

          在新窗口打開連接:<a href="相關地址" target="_blank">寫上要寫的字</a>

          移動字體(走馬燈):<marquee>寫上你想寫的字</marquee>

          字體加粗:<b>寫上你想寫的字</b>

          字體斜體:<i>寫上你想寫的字</i>

          字體下劃線: <u>寫上你想寫的字</u>

          字體刪除線: <s>寫上你想寫的字</s>

          字體加大: <big>寫上你想寫的字</big>

          字體控制大小:<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大,h5最小)

          更改字體顏色:<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

          消除連接的下劃線:<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

          貼音樂:<embed src="音樂地址" width="寬度" height="高度" autostart=false>

          貼flash: <embed src="flash地址" width="寬度" height="高度">

          貼影視文件:<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

          換行:<br>

          段落:<p>段落</p>

          原始文字樣式:<pre>正文</pre>

          換帖子背景:<body background="背景圖片地址">

          固定帖子背景不隨滾動條滾動:<body background="背景圖片地址" body bgproperties=fixed>

          定制帖子背景顏色:<body bgcolor="#value">(value值見10)

          帖子背景音樂:<bgsound="背景音樂地址" loop=infinite>

          貼網頁:<iframe. src="相關地址" width="寬度" height="高度"></iframe>

          HTML常用代碼之:常常會遇到的問題

          點擊關閉窗口

          <a href="javascript.:top.window.close();">點擊關閉窗口</a>!

          請問如何去掉主頁右面的滾動條?

          <body scroll="no">

          <body style="overflow-y:hidden">

          如何做到讓一個網頁自動關閉.

          <html>

          <head>

          <OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

          <param name="Command" value="Close">

          </object>

          </head>

          <body >

          這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

          如何在不刷新頁面的情況下刷新css?

          <style>

          button{ color:#000000;}

          </style>

          <button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為  紅色</button>

          請問如何讓網頁自動刷新?

          在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新,你可以更改為任意值。

          如何讓頁面自動刷新?

          方法一,用refresh

          HTML 代碼片段如下:

          <head>

          <meta. http-equiv="refresh" c>

          </head>

          5表示刷新時間

          [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

          方法二,使用setTimeout控制

          <img src=/logo.gif>

          <script>

          function rl(){

          document.location.reload()

          }

          setTimeout(rl,2000)

          </SCRIPT>

          如何讓超鏈接沒有下劃線

          在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼:

          <style. type="text/css"> <!--

          a { text-decoration: none}

          --> </style>

          請問如何去掉IE的上下滾動條?

          <body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>

          </body>

          怎樣才能把RealPlayer文件在網頁做一個試聽連接?

          <embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>

          如何用html實現瀏覽器上后退按鈕的功能?

          <a href="java script.:history.go(-1)">點擊后退</a>

          或者

          <script> history.back() </SCRIPT>

          HTML常用代碼之:你不一定知道的技巧

          ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

          <table borderncontextmenu=return(false)><td>no</table> 可用于Table

          <body nselectstart="return false"> 取消選取、防止復制

          onpaste="return false" 不準粘貼

          oncopy="return false;" ncut="return false;" 防止復制

          <link rel="Shortcut Icon"href="favicon.ico"> IE地址欄前換成自己的圖標

          <link rel="Bookmark"href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

          <inputstyle="ime-mode:disabled"> 關閉輸入法

          永遠都會帶著框架

          <script. language="JavaScript"><!--

          if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網頁

          // --></script>

          防止被人frame.

          <SCRIPT. LANGUAGE=JAVASCRIPT><!--

          if (top.location != self.location)top.location=self.location;

          // --></SCRIPT>

          網頁將不能被另存為

          <noscript><iframe.src=*.html></iframe></noscript>

          查看網頁源代碼

          <input type=button value=查看網頁源代碼

          onclick="window.location = "view-source:"+"http://www.w3cschool.cn"">

          刪除時確認

          <a href="javascript:if(confirm("確實要刪除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>

          屏蔽功能鍵Shift,Alt,Ctrl

          <script>

          function look(){

          if(event.shiftKey)

          alert("禁止按Shift鍵!");//可以換成ALT CTRL

          }

          document.onkeydown=look;

          </script>

          網頁不會被緩存

          <META. HTTP-EQUIV="pragma" CONTENT="no-cache">

          <META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">

          <META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

          或者<META. HTTP-EQUIV="expires"CONTENT="0">

          怎樣讓表單沒有凹凸感?

          <input type=text style="border:1 solid #000000">

          <input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

          不要滾動條?

          讓豎條沒有:

          <body style="overflow:scroll;overflow-y:hidden">

          </body>

          讓橫條沒有:

          <body style="overflow:scroll;overflow-x:hidden">

          </body>

          兩個都去掉?更簡單了

          <body scroll="no">

          </body>

          怎樣去掉圖片鏈接點擊后,圖片周圍的虛線?

          <a href="#"nFocus="this.blur()"><img src="logo.jpg"border=0></a>

          電子郵件處理提交表單

          <form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">

          <input type=submit>

          </form>

          在打開的子窗口刷新父窗口的代碼里如何寫?

          window.opener.location.reload()

          如何設定打開頁面的大小

          <body nload="top.resizeTo(300,200);">

          打開頁面的位置<bodynload="top.moveBy(300,200);">

          在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

          <STYLE>

          body

          {background-image:url(logo.gif); background-repeat:no-repeat;

          background-position:center;background-attachment: fixed}

          </STYLE>

          檢查一段字符串是否全由數字組成

          <script. language="Javascript"><!--

          function checkNum(str){return str.match(//D/)==null}

          alert(checkNum("1232142141"))

          alert(checkNum("123214214a1"))

          // --></script>

          獲得一個窗口的大小

          document.body.clientWidth; document.body.clientHeight

          怎么判斷是否是字符

          if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

          else alert("全是字符");

          TEXTAREA自適應文字行數的多少

          <textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">

          </textarea>

          日期減去天數等于第二個日期

          <script. language=Javascript>

          function cc(dd,dadd)

          {

          //可以加上錯誤處理

          var a = new Date(dd)

          a = a.valueOf()

          a = a - dadd * 24 * 60 * 60 * 1000

          a = new Date(a)

          alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

          } cc("12/23/2002",2)

          </script>

          選擇了哪一個Radio

          <HTML><script. language="vbscript">

          function checkme()

          for each ob in radio1

          if ob.checked then window.alert ob.value

          next

          end function

          </script><BODY>

          <INPUT name="radio1" type="radio"value="style" checked>Style.

          <INPUT name="radio1" type="radio"value="barcode">Barcode

          <INPUT type="button" value="check"nclick="checkme()">

          </BODY></HTML>


          級導航

          具體實現方法如下:

          首先在html中寫出一級菜單列表,然后在每個一級菜單中再嵌套一個列表即可創建一個二級菜單。

          index.html

          <div class="menu">
                  <ul>
                      <li><a href="">一級菜單</a>
                          <ul>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                          </ul>
                      </li>
                      <li><a href="">一級菜單</a>
                          <ul>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                          </ul>
                      </li>
                      <li><a href="">一級菜單</a>
                          <ul>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                              <li><a href="">二級菜單</a></li>
                          </ul>
                      </li>
                  </ul>
              </div>

          接著寫樣式文件,主要是對列表樣式和位置進行修改

          <style>
          	* {
          		padding: 0;/*內邊距:分別左,上,右,下都為0,這樣就不會出現左右上下內間距*/
          		margin: 0/*外邊距:分別左,上,右,下都為0,這樣就不會出現左右上下間距*/
          	}
          	
          	.menu ul li {
          		list-style: none;/*列表樣式*/
          		background-color: burlywood;/*背景顏色*/
          		width: 120px;/*寬度*/
          		text-align: center;/*文本對齊:居中*/
          		height: 40px;/*高度*/
          		position: relative/*定位:一般用這個就可以絕對定位*/
          	}
          	
          	.menu ul li a {
          		text-decoration: none;/*超鏈接下劃線:無*/
          		display: block;/*顯示:正常顯示用block,隱藏none*/
          		line-height: 40px
          	}
          	
          	.menu ul li:hover {
          		background-color: aqua
          	}
          	
          	.menu ul li ul {
          		display: none;
          		position: absolute;
          		left: 120px;
          		top: 0
          	}
          	
          	.menu ul li:hover ul {
          		display: block
          	}
          
          
          		</style>

          這里需要注意的是一級菜單列表的定位方式要設置為relative,二級菜單列表的定位方式要設置為absolute,這樣二級菜單才會在一級菜單相對的位置出現。

          然后通過display這個屬性控制二級菜單的顯示和隱藏就可以了。

          下一個文章:輪播圖

          TML

          src和href的區別

          src和href都是用來加載外部資源,區別如下

          src當瀏覽器解析到該元素時,會暫停其他資源的加載和處理,直到該資源加載完成。 它會將資源內容嵌入到當前標簽所在的位置,將其指向的資源下載應用到文檔內,如js腳本等。常用在img、script、iframe等標簽。

          href指向外部資源所在的位置,和當前元素位置建立鏈接,當瀏覽器解識別到它指向的位置,將其下載的時候不會阻止其他資源的加載解析。常用在a 、 link標簽。

          HTML5新增特性

          • 新增語義化標簽,head、footer、nav、main、section等
          • 新增表單類型屬性,email、number、時間控件、color顏色拾取器、placeholder、autofocus自動獲取焦點...
          • 新增音視頻標簽,video、audio
          • 新增canvas畫布、websocket通信、拖拽等
          • 新增本地存儲localStorage、sessionStorage

          對HTML語義化理解

          根據內容來選擇合適的標簽

          • 方便瀏覽器爬蟲更好的識別內容。
          • 有利于代碼可讀性,開發者能清晰的看出網頁的結構,便于團隊的開發與維護。

          DOCTYPE(?檔類型) 的作?

          DOCTYPE是HTML5中一種標準通用標記語言的文檔類型聲明,是用來告訴瀏覽器的解析器,該用什么樣的方式去加載識別文檔。

          iframe 有那些優點和缺點?

          iframe通常用來加載外部鏈接,不會影響網頁內容的加載。

          優點

          • 可以將網頁原封不動的加載進來
          • 增加代碼的可用性
          • 用來加載顯示較慢的內容,如廣告、視頻等

          缺點

          • 加載的內容無法被瀏覽器引擎識別,對SEO不友好
          • 會阻塞onload事件加載
          • 會產生很多頁面,不利于管理

          Canvas和SVG的區別

          • canvas畫布,是通過javascript來繪制2d圖,是逐像素進行渲染。
          • SVG矢量圖,是基于XML描述的2D圖形語言,每個元素都是可用的,可以為其添加事件。

          script標簽中defer和async的區別

          他倆都是表示異步加載外部JS腳本,不會阻礙頁面的加載解析。 區別

          • 執行順序:有多個async標簽不能保證先后加載順序,而多個defer標簽可以按先后順序加載。
          • 是否立即執行:async加載完腳本后會立即執行,defer是要等文檔解析完成后才執行

          行內元素、塊級元素、空(void)

          • 行內: a、b、span、input、img、select、 strong
          • :p、div、h1、ul、ol、li、dl、dt、dd
          • :<hr>、<br>、<img>、<input>、<link>、<meta>

          怎樣添加、移除、移動、復制、創建和查找節點

          • 添加節點document.appendChild(dom)
          • 移除節點document.removeChild(dom)
          • 移動節點document.appendChild(targetDom)
          • 復制節點dom.cloneNode(true),參數true表示是否復制子節點
          • 創建節點document.createElement(dom)
          • 查找節點: document.getElementById("elementId") document.getElementsByClassName("className") document.getElementsByTagName("tagName") document.querySelector("selector") document.querySelectorAll("selector")

          CSS

          CSS3新增特性

          • 新增CSS選擇器、偽類
          • 特效:text-shadow、box-shadow
          • 線性漸變: gradient
          • 旋轉過渡:transform、transtion
          • 動畫: animation
          • 圓角: border-radius

          盒模型

          盒模型都是由四個部分組成的,分別是margin、border、padding和content。

          標準盒模型和IE盒模型的區別在于設置width和height時,對應的范圍不同。

          • 標準盒模型的width、height只包含了content
          • IE盒模型的的width、height除了content本身,還包含了border、padding

          通過修改元素的box-sizing屬性來改變元素的盒模型

          • box-sizeing: content-box表示標準盒模型(默認值)
          • box-sizeing: border-box表示IE盒模型(IE盒模型)

          CSS選擇器和優先級

          選擇器

          選擇器

          權重

          id選擇器 #id

          100

          類選擇器 .classname

          10

          屬性選擇器 div[class="foo"]

          10

          偽類選擇器 div::last-child

          10

          標簽選擇器 div

          1

          偽元素選擇器 div:after

          1

          兄弟選擇器 div+span

          0

          子選擇器 ui>li

          0

          后代選擇器 div span

          0

          通配符選擇器

          0

          優先級

          • !important
          • 內聯樣式
          • ID選擇器
          • 類選擇器/偽類選擇器/屬性選擇器
          • 標簽選擇器/偽元素選擇器
          • 關系選擇器/通配符選擇器

          CSS可繼承屬性和不可繼承屬性

          可繼承

          • font-weight
          • color
          • font-size
          • line-height
          • cursor
          • ...

          不可繼承

          • margin、padding、border
          • display
          • background
          • overflow
          • width、height
          • position
          • ...

          dislpay的屬性和作用

          屬性

          作用

          block

          塊類型。默認寬度為父元素寬度,可設置寬高,換行顯示。

          inline

          行內元素類型。默認寬度為內容寬度,不可設置寬高,同行顯示。

          inline-block

          行內塊級元素,默認寬度為內容寬度,可以設置寬高,同行顯示

          table

          塊級表格

          flex

          flex容器布局

          none

          隱藏元素

          inherit

          從父類繼承display屬性

          隱藏元素的方式

          • display:none:元素在文檔中不存在,不會占據位置。
          • visibility: hidden:元素在文檔中的位置還保留,仍然占據空間。
          • opacity:0:將透明度設置為0。
          • z-index:負值:直接將元素放置在最下層,利用其他元素來遮蓋。
          • position:absolute:將元素定位到可視區域以外。

          單行、多行文本溢出

          單行

          css

          復制代碼

          overflow: hidden; // 溢出隱藏 text-overflow: ellipsis; // 溢出用省略號顯示 whtie-space: nowrap; //規定段落中的文本不進行換行

          多行

          CSS

          復制代碼

          overflow:hidden text-overflow: ellipsis; // 溢出用省略號顯示 display:-webkit-box; // 作為彈性伸縮盒子模型顯示。 -webkit-box-orient:vertical; // 設置伸縮盒子的子元素排列方式:從上到下垂直排列 -webkit-line-clamp:3; // 顯示的行數

          有了使用過Sass、Less 嗎?他們的區別是什么?

          他們都是 CSS 預處理器,是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成 CSS。 增加了 CSS代碼的復用性,層級,mixin, 變量,循環, 函數等對編寫以及開發UI組件都極為方便。 區別

          1. 編譯環境不一樣 Sass是在服務端處理的,以前是Ruby,現在是Dart-Sass或Node-Sass 而Less是需要引入less.js來處理Less代碼輸出CSS到瀏覽器,也可以在開發服務器將Less語法編譯成css文件,輸出CSS文件到生產包目錄
          2. 變量符不一樣,Less是@,而Scss是$。
          3. Sass支持條件語句,可以使用if{}else{},for{}循環等等。而Less不支持

          link和@import的區別

          • link是HTML提供的標簽,不僅可以加載CSS文件,還可以定義RSS、rel連接屬性等
          • @import是CSS提供等語法規則,只有導入樣式表帶作用。
          • link標簽引入的CSS被同時加載,而@import引入的CSS將在頁面加載完畢后被加載
          • @import是CSS2.1才有的語法,存在兼容性,而link作為HTML標簽不存在兼容性問題

          常見的CSS單位

          • px像素 CSS像素 物理像素
          • 百分比%,作用于父元素, 當瀏覽器的寬度或者高度發生變化時,當前元素依據比例發生變化。
          • em和rem,相對長度單位,它們之間的區別:em相對于父元素,rem相對于根元素。
          • vw/vh是與視圖窗口有關的單位,代表視圖窗口的寬高。

          px、em、rem的區別

          • px 固定像素單位,不能隨其它元素的變化而變化
          • em是相對于父元素的單位,會隨著父元素變化而變化
          • rem是相對于根元素html,它會隨著html元素變化而變化

          兩欄布局

          • 利用浮動,將左邊元素寬度設置為200px,并且設置向左浮動。將右邊元素的margin-left設置為200px,寬度設置為auto(默認為auto,撐滿整個父元素)。
          CSS

          復制代碼

          .outer { height: 100px; } .left { float: left; width: 200px; background: tomato; } .right { margin-left: 200px; width: auto; background: gold; }

          • 利用浮動,左側元素設置固定大小,并左浮動,右側元素設置overflow: hidden; 這樣右邊就觸發了BFC,BFC的區域不會與浮動元素發生重疊,所以兩側就不會發生重疊。
          CSS

          復制代碼

          .left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

          • 利用flex布局,將左邊元素設置為固定寬度200px,將右邊的元素設置為flex:1。
          CSS

          復制代碼

          .outer { display: flex; height: 100px; } .left { width: 200px; background: tomato; } .right { flex: 1; background: gold; }

          • 利用絕對定位,將父級元素設置為相對定位。左邊元素設置為absolute定位,并且寬度設置為200px。將右邊元素的margin-left的值設置為200px。
          CSS

          復制代碼

          .outer { position: relative; height: 100px; } .left { position: absolute; width: 200px; height: 100px; background: tomato; } .right { margin-left: 200px; background: gold; }

          三欄布局

          • 利用絕對定位,左右兩欄設置為絕對定位,中間設置對應方向大小的margin的值。
          • 利用flex布局,左右兩欄設置固定大小,中間一欄設置為flex:1。
          • 利用浮動,左右兩欄設置固定大小,并設置對應方向的浮動。中間一欄設置左右兩個方向的margin值,注意這種方式,中間一欄必須放到最后:
          • 圣杯布局,利用浮動和負邊距來實現。父級元素設置左右的 padding,三列均設置向左浮動,中間一列放在最前面,寬度設置為父級元素的寬度,因此后面兩列都被擠到了下一行,通過設置 margin 負值將其移動到上一行,再利用相對定位,定位到兩邊。
          • 雙飛翼布局,雙飛翼布局相對于圣杯布局來說,左右位置的保留是通過中間列的 margin 值來實現的,而不是通過父元素的 padding 來實現的。本質上來說,也是通過浮動和外邊距負值來實現的。

          水平垂直居中

          • 利用絕對定位,先將元素的左上角通過top:50%和left:50%定位到頁面的中心,然后再通過translate來調整元素的中心點到頁面的中心。該方法需要考慮瀏覽器兼容問題。
          CSS

          復制代碼

          .parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

          • 利用絕對定位,設置四個方向的值都為0,并將margin設置為auto,由于寬高固定,因此對應方向實現平分,可以實現水平和垂直方向上的居中。該方法適用于盒子有寬高的情況:
          CSS

          復制代碼

          .parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

          • 利用絕對定位,先將元素的左上角通過top:50%和left:50%定位到頁面的中心,然后再通過margin負值來調整元素的中心點到頁面的中心。該方法適用于盒子寬高已知的情況。
          CSS

          復制代碼

          .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */ }

          • 使用flex布局,通過align-items:center和justify-content:center設置容器的垂直和水平方向上為居中對齊,然后它的子元素也可以實現垂直和水平的居中。該方法要考慮兼容的問題,該方法在移動端用的較多:
          CSS

          復制代碼

          .parent { display: flex; justify-content:center; align-items:center; }

          flex布局理解

          flex布局是CSS3新增的一種布局方式,能夠根據不同屏幕尺寸的變化來自適應大小。

          常用的屬性:

          • flex-direction屬性決定主軸的方向(即項目的排列方向)。
          • flex-wrap屬性定義,如果一條軸線排不下,如何換行。
          • flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。
          • justify-content屬性定義了項目在主軸上的對齊方式。
          • align-items屬性定義項目在交叉軸上如何對齊。
          • align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。

          flex: 1表示什么

          flex: 1是flex-grow、flex-shrink、flex-basis的縮寫,默認值是0 1 auto。flex:1也表示flex: 1 1 auto。

          1. flex-grow定義項目發大比例,默認為0,即存在剩余空間,也不放大。
          2. flex-shrink定義項目收縮比例,默認為1,即空間不足,也會進行縮小。
          3. flex-basis定義項目給上面兩個屬性分配多余空間之前, 計算項目是否有多余空間, 默認值為 auto, 即項目本身的大小。

          對BFC的理解,如何創建BFC

          BFC是塊級格式上下文(Block Formatting Context,BFC),是CSS布局的一個概念,在BFC布局里面的元素不受外面元素影響。

          創建BFC條件

          • 設置浮動:float有值并不為空
          • 設置絕對定位: position(absolute、fixed)
          • overfilow值為:hidden、auto、`scroll
          • display值為:inline-block、table-cell、table-caption、flex等

          BFC作用

          • 解決margin重疊問題:由于BFC是一個獨立的區域,內部元素和外部元素互不影響,將兩個元素變為BFC,就解決了margin重疊問題
          • 創建自適應兩欄布局:可以用來創建自適應兩欄布局,左邊寬高固定,右邊寬度自適應。
          • 解決高度塌陷問題:在子元素設置浮動后,父元素會發生高度的塌陷,也就是父元素的高度為0解決這個問題,只需要將父元素變成一個BFC。

          什么是margin重疊,如何解決

          兩個塊級元素分別設置上下margin時可能會導致邊距合并為一個邊距,合并到邊距取最大的那個值。需要注意的是,浮動的元素和絕對定位這種脫離文檔流的元素的外邊距不會折疊。重疊只會出現在垂直方向。

          計算規則

          • 都是正數,取最大的。20px 40px ---> 40px
          • 一正一負,用正數減去負數后。20px -50px ---> -30px
          • 都是負數,用0減去兩個中絕對值大的那個。-30px -10px ---> -20px

          解決方案 對于重疊的情況,主要有兩種:兄弟之間重疊(margin合并)父子之間重疊(margin塌陷)

          • 兄弟之間重疊 底部元素變為行內盒子:display: inline-block 底部元素設置浮動:float 底部元素的position的值為absolute/fixed
          • 父子之間重疊 父元素加入:overflow: hidden 父元素添加透明邊框:border:1px solid transparent 子元素變為行內盒子:display: inline-block 子元素加入浮動屬性或定位

          position 常用屬性 默認值是什么

          • static 默認值,沒有定位,元素正常在文檔流中顯示
          • relative 相對定位,相對于原來的位置進行定位
          • absolute 絕對定位,相對于static定位意外以外的一個父元素進行定位。
          • fixed 絕對定位,相對于瀏覽器窗口
          • sticky 粘性定位,基于用戶滾動位置

          實現一個三角形

          通過設置不同方向邊框來實現

          CSS

          復制代碼

          div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; }

          畫一條0.5px的線

          • 使用transform: scale()的方式,該方法用來定義元素的2D 縮放轉換:
          CSS

          復制代碼

          transform: scale(0.5,0.5);

          • 采用meta viewport的方式,這樣就能縮放到原來的0.5倍,如果是1px那么就會變成0.5px。viewport只針對于移動端,只在移動端上才能看到效果。

          如何解決1px

          1px 問題指的是:在一些 Retina屏幕 的機型上,移動端頁面的 1px 會變得很粗,呈現出不止 1px 的效果。原因很簡單——CSS 中的 1px 并不能和移動設備上的 1px 劃等號。

          • 直接寫0.5px
          • 利用偽元素,先放大再縮小
          • 使用viewport縮放來解決


          原文章鏈接:https://juejin.cn/post/7269794410573512758


          主站蜘蛛池模板: 亚洲一区日韩高清中文字幕亚洲| 国产精品无码一区二区三区不卡| 一区二区三区在线|欧| 高清一区二区三区日本久| 91国偷自产一区二区三区| 高清一区二区三区| 性盈盈影院免费视频观看在线一区| 中文字幕一区二区免费| 日韩电影在线观看第一区| 在线观看一区二区三区视频 | 国产一区二区精品久久岳√| 高清国产AV一区二区三区| 国产主播一区二区| 日韩精品无码一区二区三区AV| 日韩精品一区二区三区不卡 | 亚洲视频一区在线播放| 日韩视频一区二区三区| 久久精品免费一区二区三区| 夜夜嗨AV一区二区三区| 国产一区二区精品久久凹凸| 国产AⅤ精品一区二区三区久久| 国产一区二区三区免费视频| 国产在线观看精品一区二区三区91| 无码少妇丰满熟妇一区二区 | 亚洲欧美日韩国产精品一区| 亚洲第一区二区快射影院| 精品少妇ay一区二区三区| 精品女同一区二区三区免费站 | 国产一区二区三区乱码网站| 国产精品福利一区二区久久| 国产成人精品亚洲一区| 国产在线观看91精品一区| 综合激情区视频一区视频二区| 视频一区二区在线观看| 久久国产精品免费一区二区三区| 亚洲人成人一区二区三区| 色妞色视频一区二区三区四区| 国产电影一区二区| 国产伦一区二区三区免费| 久久久久人妻一区精品| 水蜜桃av无码一区二区|