HTMl基礎篇之區塊和布局(四)

2021-08-21 03:52:33 字數 2585 閱讀 6985

html區塊元素: 大多數html元素為塊級元素或內聯元素

塊級元素: 通常在瀏覽器顯示時會以新行開始(和結束);  例: 等

內聯元素: 在顯示時不會以新的一行開始;  例:

html的幾種布局方式:

通常網頁都是用、來進行布局,css渲染整個布局的樣式使頁面邊的好看

一、流動布局

塊級元素都會自上而下按順序垂直延伸分布,預設狀態下塊級元素的寬預設為100%

內聯元素都會從左到友水平延伸分布

二、浮動布局

在預設布局下,如果我們想讓兩個塊級元素併排顯示,通過float浮動實現,使用後記得清除浮動

三、層模型

通過設定定位position實現 absolute 絕對定位; relative 相對定位 ; fixed  固定定位等

目前前端的幾種布局方式:

一、靜態布局

移動端的話另外建設**單獨設布局

移動端開發中採用靜態布局的兩種方式:

(1)、在viewport meta標籤上設定寬的大小width=320,也頁面的各個元素也以畫素px為單位

通過js動態修改標籤initial-scale使得頁面等比縮放,從而剛好佔滿整個螢幕

(2)、在viewport meta標籤上設定content"width=640,user-scalabel=no",頁面的各個元素以

畫素px為單位。由於640px超出手機寬度,瀏覽器會自動的縮小頁面至全屏

優點:這種布局方式簡單,亦沒有什麼相容問題

缺點:不能根據使用者的螢幕大小做出相應變化

二、流式布局

特點:頁面元素的寬度是按照螢幕的解析度進行適配調整,簡單說使用百分比%設定,再設定max-width,min-width;

等屬性控制尺寸流動範圍;使整體布局不變,代表作網格系統

缺點:如果螢幕過大,相對原始設計過小或過大的螢幕不能正常顯示,因為設定的是百分比;但是文字等元素的

大小是以畫素px為單位的,在大屏下顯示的效果會是寬被拉寬,使整個頁面看起來不協調

三、自適應布局

特點:分別為不同的螢幕分辨定義布局,即建立多個靜態布局,每個靜態區域性對應乙個螢幕的解析度範圍。改變

螢幕解析度可以切換不同的靜態布局,但每個靜態布局中頁面元素大小不隨視窗的大小而改變。位置發生改變

四、響應式布局

概述:隨著css3的**查詢,出現了響應式布局,目標:確保每乙個頁面在所有的終端都能顯示滿意的效果

通常糅合了流式布局與自適應布局 再搭配**查詢技術,

根據不同的螢幕解析度做不同的布局,且寬根據螢幕的解析度做出適配的調整

特點:每個螢幕解析度下面都會有乙個布局樣式,即元素位置大小都會變

優點:適應移動和pc端

缺點:**查詢技術有限只能適應主流的寬高;要匹配足夠多的螢幕大小,工作量大,設計版本多

響應式布局步驟

在head定義:

name="viewport" :名稱=檢視;

width="device-width":頁面寬度=裝置寬度

initial-scale:初始縮放比例

maximum-scale:允許使用者的最大縮放比例

minimum-scale:允許使用者的最小縮放比例

user-scale:是否允許使用者可以手動縮放

media query是響應式設計的核心,它能夠跟瀏覽器進行溝通

結構:@media screen and(max-width:980px)

#content

#footer }

例:iphone:  @media only screen and (width:320px) and (width:768px){}

ipa :  @media only screen and (min-width:768px) and (max-width:1024px){}

字型設定: html

完成後可以定義響應式字型

@meta (min-width:640px)}

@meta (min-width:960px)}

@meta (min-width:1200px)}

寬不固定,可以使用百分比: #head   #content等

詳情可借鑑

五、彈性布局(rem/em布局)

rem、em的區別:都是順應不同網頁字型大小展現而產生的,em相對是父元素,rem始終相對html大小即頁面根元素

使用em相對布局相對與使用百分比%布局更靈活

特點:包裹文字的各元素的尺寸採用em/rem為單位,而頁面的主要劃分區域仍然使用百分比或畫素為單位

rem、em與px區別:

px:畫素,比較精確,不方便左響應式布局

簡單的div布局:

中國某某國際公司

效果圖:

簡單的**布局:

我的世界

效果圖:

HTML5基礎篇之HTML

本文章純屬個人學習之後總結的一些小經驗,望大神指導指導 一 html基本結構 注 html大小寫都可以 但是不要出現這種的 html 要麼全都大寫 要麼全都小寫 所有的標點符號都必須是英文狀態下的!切記!doctype 宣告文件型別 千萬不可以忘記 meta charset utf 8 防止出現亂碼...

HTML基礎之標籤篇(一)

html編輯器我們現在選擇的是notepad 安裝完成後,選擇檔案 新建 輸入你的 後 另存為html檔案 當您儲存 html 檔案時,既可以使用 htm 也可以使用 html 副檔名 啟動您的瀏覽器,然後選擇 檔案 選單的 開啟檔案 命令,或者直接在資料夾中雙擊您的 html 檔案,編寫 即可執行...

linux學習之基礎篇(四)

高階許可權 suid chmod u s file 只能作用於檔案 二進位制可執行檔案 只能設定到user位 作用 任何使用者在執行擁有suid許可權的命令時,都以該命令擁有者的身份執行 sgid chmod g s dir 只能作用於目錄 只能設定到group位 作用 任何使用者在擁有sgid的目...