整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
1. 常規流
2. 浮動
3. 定位
1. 文字環繞
字體環繞
2. 橫向排列
修改float屬性值為：
- left：左浮動，元素靠上靠左
- right：右浮動，元素靠上靠右
默認值為none
1. 當一個元素浮動后，元素必定為塊盒(更改display屬性為block)
2. 浮動元素的包含塊，和常規流一樣，為父元素的內容盒
1. 寬度為auto時，適應內容寬度
2. 高度為auto時，與常規流一致，適應內容的高度
3. margin為auto，為0.
4. 邊框、內邊距、百分比設置與常規流一樣
1. 左浮動的盒子靠上靠左排列
2. 右浮動的盒子考上靠右排列
3. 浮動盒子在包含塊中排列時，會避開常規流塊盒
4. 常規流塊盒在排列時，無視浮動盒子
5. 行盒在排列時，會避開浮動盒子
6. 外邊距合并不會發生
> 如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒。
高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子
清除浮動，涉及css屬性：clear
- 默認值：none
- left：清除左浮動，該元素必須出現在前面所有左浮動盒子的下方
- right：清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
- both：清除左右浮動，該元素必須出現在前面所有浮動盒子的下方
<table>標簽：
<table>指的是表格，用表格來搭建界面布局，即用表格的嵌套，來搭建界面布局。
<table>布局優勢：
table優勢：開發時間短（使用DW開發速度快）；純table各瀏覽器不會有兼容問題；內容可自適應；在搜索引擎排名能靠前；
但是 table如果布局變更，需要重新開發；如果table里有div ul 等，可能會出現瀏覽器兼容問題；加載速度慢；table嵌套的太多，運維是非常困難的。
<div>塊級（block-level）標簽：
DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。
<div>布局優勢：
一.精簡代碼，減少重構難度。
網站使用DIV+CSS布局使代碼很是精簡，css文件可以在網站的任意一個頁面進行調用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話，需手動改很多頁面，而且看著那些表格也會感覺很亂也很浪費時間，但是使用css+div布局只需修改css文件中的一個代碼即可。
二.網頁訪問速度
使用了DIV+CSS布局的網頁與Table布局比較，精簡了許多頁面代碼，那么其瀏覽訪問速度自然得以提升，也從而提升了網站的用戶體驗度。
三.SEO優化
采用div-css布局的網站對于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結構化的代碼更加有利于突出重點和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網頁，在使用不同瀏覽器情況下會發生錯位，而div+css則不會，無論什么瀏覽器，網頁都不會出現變形情況。
1.流動式布局：是HTML網頁默認的布局方式
特點：
1.塊級元素都會在所處的包含元素內自上而下按順序處置延伸分布，且默認狀態下，塊級元素占整個文檔流，默認寬度為100%。
2.內聯元素都會在所處的包含元素內從左到右水平分布顯示，不占整個文檔流。
常見的塊級（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見的內內聯（行內）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動布局（float）
特點：
浮動布局依靠【 浮動屬性 float：left/right/... 】來使標簽脫離文檔流，達到兩個塊級元素并排顯示的效果。
float：left ； 浮動脫離當前文檔流浮動。
同時可以依靠【展示屬性display：inline/block/inline-block】來進行行內元素和塊級元素的效果切換。從而達到靈活運用塊級元素和行內元素布局的效果。
3.層模型布局又叫定位布局
特點：
當我們應擁div布局是，在第一層塊界面上來做第二層塊界面的開發時，就要用到我們所說的定位布局。
通過運用【定位屬性position:absolute/relative/fixed】 來進行第二層界面的定位布局。
網頁是靜態的，網頁上的定位
position：absolute ；絕對定位脫離文檔流，不受浮動影響，就是相對于窗體（body）邊界的margin定位。
position：relative； 相對定位不脫離文檔流，相對于父級標簽元素的位置定位。
position:fixed；固定位置，不會受任何因素影響。
滾動條移動前
滾動條移動后
優先層顯示方法：【屬性：z-index:0/1/2...】
特點： 數值越大，越優先顯示。
注意：只有元素使用了position屬性的，才具有z-index屬性。
本文部分內容來自網絡，如有侵權，請聯系修改。
今天我們一起來了解下HTML，
首先HTmL包含三層結構，分別是結構層，表現層，行為層。
結構層：html => 網頁上有什么，比如說文字啊、按鈕啊、圖片啊等等。
表現層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。
行為層：JavaScript => 具體怎么操作，比如說點擊按鈕讓圖片放大縮小等等。
===============================
在了解了html的三層結構之后，我們來學習如何寫html。html不是編程語言，它是一套標簽。最簡單的html文本是下圖1這個樣子。我們可以在電腦桌面上新建一個記事本文件，然后把后綴名改一下（.txt=>.html），把這段標簽代碼粘貼到html文件里，這樣一個空白的網頁就做成了。如果需要在網頁上添加內容，我們只需要在第10行的位置添加各種各樣的標簽即可。比如我在圖二添加了一個按鈕標簽和一段文字標簽，雙擊html文件，頁面上就從左到右，從上到下顯示對應的內容。是不是很簡單。我們日常瀏覽的網頁都是這樣一個標簽一個標簽畫上去的。
我給大家總結了一張圖，基本上覆蓋了工作中常用的知識點。同時分享幾個小技巧。
1.最簡單的網頁寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個VSCode軟件（類似于記事本，是現在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號回車就自動生成了，學編程不要死記硬背。
2.控件的標簽不需要記憶，直接百度html XXX標簽，例如：百度搜“html按鈕標簽”，他就會告訴我們是<button>，用的時間長了自然就記住了。是不是省力。
3.標簽的屬性很重要，可以不去記他的寫法，因為寫可以百度，重要的是你需要記住標簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因為工作中，有的時候會遇到這樣一種情況，明明設置一個屬性可以完成的功能，我們不知道，花費了大力氣用css和js去實現，結果還存在著特定場合的bug，讓人很無奈。
4.對于html還有兩個標簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學完了，有興趣，學習一下。
5.給大家推薦一個小白學習html的網站，w3cschool，圖里不明白的可以去上邊學學練練。
6.如果覺得一個人學習前端有難度，我建了一個小白前端學習交流群，可以私聊我，大家在群里多多交流，我會經常給大家答疑，組織大家練習，一起做小項目。有方向，少走彎路。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
