前端學習總結——CSS布局方式之傳統布局

傳統布局

傳統布局即是早期在平板電腦、智能手機等移動設備并不流行的時候使用的布局方式。

一、表格布局

例如:采用表格方式實現如下簡單模型的布局

布局模型


(1)固定布局

即用具體的像素值來確定模型的寬和高等值。

HTML代碼如下所示

<table border="0"><tr><td colspan="2" class="header">header</td></tr><tr><td class="aside">aside</td><td class="section">section</td></tr><tr><td colspan="2" class="footer">footer</td></tr>
</table>

css代碼

@charset "utf-8";body {margin: 0;
}table {margin: 0 auto;width: 960px;border-spacing: 0;
}.header {height: 120px;background-color: olive;
}.aside {width: 200px;height: 500px;background-color: purple;
}.section {width: 760px;height: 500px;background-color: maroon;
}.footer {height: 120px;background-color: gray;
}

(2)流體布局

即采用百分比設置寬度等值,表格的固定布局采用流體布局的方式比較簡單,只需要將table的width值設置為100%.

流體布局css代碼

@charset "utf-8";body {margin: 0;
}table {margin: 0 auto;width: 960px;border-spacing: 0;
}.header {height: 120px;background-color: olive;
}.aside {width: 200px;height: 500px;background-color: purple;
}.section {width: 760px;height: 500px;background-color: maroon;
}.footer {height: 120px;background-color: gray;
}

二、浮動布局

浮動布局主要采用float和clear方式兩個屬性來構建

(1)固定布局

HTML代碼片段

<body><header>header</header><aside>aside</aside><section>section</section><footer>footer</footer>
</body>

CSS代碼

@charset "utf-8";body {width: 960px;margin: 0 auto;
}header {height: 120px;background-color: olive;
}aside {width: 200px;height: 500px;background-color: purple;float: left;  //左浮動
}section {width: 760px;height: 500px;background-color: maroon;float: right;  //右浮動
}footer {height: 120px;background-color: gray;clear: both;
}

注意:aside和section這兩部分必須要添加浮動并且兩者總長度不能超過body的總長度,否則無法將兩者并排顯示

(2)流體布局

流體布局只要更改 body 元素的限定長度為 auto 或 100%。然后左右兩列分別設置 20% 和 80%即可。

流體布局css代碼

@charset "utf-8";body {width: auto;   //此處改為auto或者100%margin: 0 auto;
}header {height: 120px;background-color: olive;
}aside {width: 20%; //此處改為百分比height: 500px;background-color: purple;float: left;
}section {width: 80%;  //此處改為百分比height: 500px;background-color: maroon;float: right;
}footer {height: 120px;background-color: gray;clear: both;
}

三、定位布局

在使用布局前先了解一下css2關于position屬性的用法。

屬性說明
static默認值,沒有定位
absolute絕對定位,使用top,right,bottom,left來進行位移
relative相對定位,使用top,right,bottom,left來進行位移
fixed以窗口參考定位,使用top,right,bottom,left來進行位移

//absolute 絕對定位:,脫離文檔流,以窗口文檔左上角 0,0 為起點

CSS代碼

@charset "utf-8";body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: absolute;top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}

效果圖如圖所示
這里寫圖片描述

所謂脫離文檔流的意思,就是本身這個元素在文檔流是占位的。如果脫離了,就不占有文檔的位置,好像浮在了空中一般,有了層次感。

由于絕對定位脫離了文檔流,出現層次概念。那么每個元素到底在那一層,會不會沖突覆蓋。這時通過 z-index 屬性來判定它們的層次關系。

屬性說明
auto默認層次
數字設置層次,數字越大,層次越高

示例如下:

html代碼

<body>
body
<header><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</header>
</body>

css代碼

header {position: relative;
}div {width: 150px;height: 150px;position: absolute;
}.div1 {background-color: olive;left: 0px;z-index: -1;   //設置在-1層。
}.div2 {background-color: purple;top: 100px;left: 100px;z-index: 10;   //設置在第10層
}.div3 {background-color: gray;top: 200px;left: 0;z-index: 100;   //設置在100層
}

z-index區分

//relative 相對定位,不脫離文檔流,占位偏移

CSS代碼

@charset "utf-8";body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: relative; //相對定位top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}

效果圖如下
relative定位效果

//fixed 以窗口參考定位,脫離文檔流,會隨滾動條滾動而滾動

css代碼

@charset "utf-8";body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: fixed;  // 以窗口參考定位top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}

fixed定位

這三種分別都在各自的情況下使用,均比較常用。但還有一種情況,就是:1.既要脫離文檔流(這樣元素之間不會相互沖突);2.以父元素,比如 body 或其他父元素為參考點(這樣可以實現區域性絕對定位);3.還必須是絕對定位。

HTML代碼

<body><header>header</header><aside>aside</aside><section>section</section><footer>footer</footer>
</body>

CSS代碼

@charset "utf-8";body {width: 960px;margin: 0 auto;//第一步,將需要設置參考點的父元素設置為相對,且不設置坐標position: relative;
}header {width: 960px;height: 120px;background-color: olive;//第二步,如果父元素設置了參考點,子元素的絕對定位將以它為基準 position: absolute;top: 0;left: 0;
}aside {width: 200px;height: 500px;background-color: purple;position: absolute;top: 120px;left: 0;
}section {width: 760px;height: 500px;background-color: maroon;position: absolute;top: 120px;right: 0;
}footer {width: 960px;height: 120;background-color: gray;position: absolute;top: 620px;left: 0;
}

效果圖
這里寫圖片描述

四、box-sizing

在盒模型中,元素盒子如果加入了內邊距 padding 和邊框 border 后,它的總長度會增加。那么如果這個元素用于非常精確的布局時,我們就需要進行計算增減。
為了解決這個精確計算的問題,CSS3 提供了一個屬性 box-sizing,這個屬性可以定義元素盒子的解析方式,從而可以選擇避免掉布局元素盒子增加內邊距和邊框的長度增減問題。

屬性說明
content-box默認值,border 和 padding 設置后用于元素的總長度。
border-boxborder 和 padding 設置后不用于元素的總長度。
inherit規定應從父元素繼承 box-sizing 屬性的值。

示例:設置 border-box 讓 border 和 padding 不在額外增加元素大小

aside {width: 200px;height: 500px;background-color: purple;border: 5px solid green;padding: 10px;box-sizing: border-box;float: left;
}

box-sizing 是 CSS3 推出的,各個廠商在實現時設置了私有前綴。

OperaFirefoxChromeSafariIE
支持需帶前綴2 ~ 284 ~ 93.1 ~ 5
支持不帶前綴10.1+29+10+6+

//完整形式

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

五:resize

CSS3 提供了一個 resize 屬性,來更改元素尺寸大小。

屬性說明
none默認值,不允許用戶調整元素大小。
both用戶可以調節元素的寬度和高度。
horizontal用戶可以調節元素的寬度
vertical用戶可以調節元素的高度。

一般普通元素,默認值是不允許的。但如果是表單類的 textarea 元素,默認是允許的。而普通元素需要設置 overflow:auto,配合 resize 才會出現可拖拽的圖形。
示例如下

HTML代碼

<body><header>header</header><aside>aside</aside><section>section<textarea></textarea></section><footer>footer</footer>
</body>

css代碼

@charset "utf-8";body {width: 960px;margin: 0 auto;
}header {height: 120px;background-color: olive;overflow: auto;  //必須resize: both;  //設置為用戶可以調節元素的寬度和高度。
}aside {width: 200px;height: 500px;background-color: purple;border: 5px solid green;padding: 10px;box-sizing: border-box;float: left;
}section {width: 760px;height: 500px;background-color: maroon;float: right;
}footer {width: 960px;height: 120;background-color: gray;clear: both;
}textarea {resize: none;
}

效果圖如下
resize 屬性

附 W3School中css3文檔

學習參考資料:李炎恢HTML5第一季視頻教程

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249706.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249706.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249706.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

aspose word for java去除目錄文字藍色樣式以及文字下方藍色下劃線

//去除目錄文字藍色樣式以及文字下方藍色下劃線for(FieldStart field: (Iterable<FieldStart>)doc.getChildNodes(NodeType.FIELD_START, true)){if (field.getFieldType() FieldType.FIELD_HYPERLINK){FieldHyperlink hyperlink (FieldHyperlink)field.getField();//判…

[POI2007]MEG-Megalopolis

傳送門&#xff1a;嘟嘟嘟 第一反應是樹鏈剖分&#xff0c;但是太長懶得寫&#xff0c;然后就想出了一個很不錯的做法。 想一下&#xff0c;如果我們改一條邊&#xff0c;那么影響的只有他的子樹&#xff0c;只要先搞一個dfs序&#xff0c;為什么搞出這個呢&#xff1f;因為有一…

memcache在ThinkPHP中的使用1---PHP下安裝memcache

1.什么是Memcached緩存 Memcached是一套小巧、高效且成熟的內存數據庫。與普通的數據庫不同&#xff0c;Memcached存儲的數據只能是簡單的鍵值對&#xff0c;在查詢時需要根據存放的key獲取數據。 Memcached最大的特點是數據存放于內存&#xff0c;性能會比傳統文件系統高出…

【集合工具類:Collections】

集合工具類&#xff1a;Collections(1) 是針對集合進行操作的工具類(2) 面試題&#xff1a;Collection 和 Collections 的區別A:Collection 是單列集合的頂層接口&#xff0c;有兩個子接口 List 和 SetB:Collections 是針對集合進行操作的工具類&#xff0c;可以對集合進行排序…

骨骼收集器01背包

來源hdu2602 問題描述 許多年前&#xff0c;在泰迪的家鄉&#xff0c;有一個人被稱為“骨頭收藏家”。這個男人喜歡收集各種各樣的骨頭&#xff0c;比如狗狗&#xff0c;牛&#xff0c;還有他去了墳墓...... 骨頭收藏家有一個大容量的V袋&#xff0c;沿著他的收集之旅有很多骨頭…

ZooKeeper的安裝與部署

本文講述如何安裝和部署ZooKeeper。 一、系統要求 ZooKeeper可以運行在多種系統平臺上面&#xff0c;表1展示了zk支持的系統平臺&#xff0c;以及在該平臺上是否支持開發環境或者生產環境。 表1&#xff1a;ZooKeeper支持的運行平臺 | 系統 | 開發環境 | 生產環境| | Linux…

java基礎1之java語言基礎1

一、常量的概述和使用 A:什么是常量 * 在程序執行的過程中其值不可以發生改變 B:Java中常量的分類 * 字面值常量 * 自定義常量(面向對象部分講) C:字面值常量的分類 * 字符串常量 用雙引號括起來的內容 * 整數常量 所有整數 * 小數常量 所有小數 * 字符常量 …

w3c 跨域請求規范

w3c 官方跨域請求規范地址&#xff1a;https://www.w3.org/TR/cors/ 前段時間開發的一個api在IE8/9瀏覽器不能正常響應跨域請求&#xff0c;以下是解決問題中對跨域請求新的認識 1.復雜跨域 post請求在發送請求之前&#xff0c;會先發送options 請求&#xff0c;有的服務器拒絕…

python爬取豆瓣前25個影片內容的正則表達式練習

通過python正則表達式獲取豆瓣top250的第一頁的25個影片排名,影片名字,影片連接,導演,主演,上映日期,國家,劇情,評分,評價人數的內容 網頁html內容: 1 <ol class"grid_view">2 <li>3 <div class"item">4 …

JavaScript 面向對象的程序設計1

一、理解對象 1.創建一個對象&#xff0c;然后給這個對象新建屬性和方法。 ①常見的創建方式 var person new Object(); //創建一個Object 對象person.name XIE; //創建一個name 屬性并賦值person.age 20; //創建一個age 屬性并賦值person.sayName function () { //創建…

Zookeeper 使用

安裝和配置詳解 本文介紹的 Zookeeper 是以 3.2.2 這個穩定版本為基礎&#xff0c;最新的版本可以通過官網 http://hadoop.apache.org/zookeeper/來獲取&#xff0c;Zookeeper 的安裝非常簡單&#xff0c;下面將從單機模式和集群模式兩個方面介紹 Zookeeper 的安裝和配置。 單…

Asp.Net Core 工作單元 UnitOfWork UOW

Asp.Net Core 工作單元示例 來自 ABP UOW 去除所有無用特性 代碼下載 &#xff1a; 去除所有無用特性版本&#xff0c;原生AspNetCore實現 差不多 2278 行代碼&#xff1a; 鏈接&#xff1a;https://pan.baidu.com/s/1NoEIDSAPNr46xNHYEx9KCA 提取碼&#xff1a;570i 包含C…

網站性能優化--CRP

網站性能優化–CRP 為了把HTML、CSS和JavaScript轉化成活靈活現、絢麗多彩的網頁&#xff0c;瀏覽器需要處理一系列的中間過程&#xff0c;優化性能其實就是了解這個過程中發生了什么-即CRP(Critical Rendering Path&#xff0c;關鍵渲染路徑)。首先&#xff0c;我們從頭開始快…

Dubbo+zookeeper基礎講解

一、dubbo是什么&#xff1f; 1&#xff09;本質&#xff1a;一個Jar包,一個分布式框架,&#xff0c;一個遠程服務調用的分布式框架。 既然是新手教學&#xff0c;肯定很多同學不明白什么是分布式和遠程服務調用&#xff0c;為什么要分布式&#xff0c;為什么要遠程調用。我簡…

What Are You Talking About HDU1075

一開始我也想用map 但是處理不好其他字符。。 看了題解 多多學習&#xff01; 很巧妙 就是粗暴的一個字符一個字符的來 分為小寫字母和非小寫字母兩個部分 一但單詞結束的時候就開始判斷。 #include<bits/stdc.h> using namespace std;int main() {string a,b;map&l…

開通博客第一天

今天是開通博客第一天&#xff0c; 第一次寫博客&#xff0c;也不知道寫什么&#xff0c; 以后寫點技術文&#xff0c;把我的經驗分享給大家&#xff0c; 不對的地方請大家指正&#xff0c;一起進步。我要把我每遇到的難題以及學到的知識和技術為大家踩坑&#xff0c; 做研究。…

學習File API用于前端讀取文件

1. File API簡介 File API對于某些專門的網站的不可或缺的。現在常用它實現對文件的預覽等功能。 File API規定怎么從硬盤上提取文件&#xff0c;直接交給在網頁中運行中的Javascript代碼。然后代碼可以打開文件探究數據&#xff0c;無論是本地文件還是其他文件。注意&#x…

kafka筆記1

Kafka是一款基于發布和訂閱的消息系統。一般被稱為分布式提交日志或分布式流平臺。 Kafka系統是按照一定的順序持久化保存的&#xff0c;可以按需讀取。 Kafka的數據單元被稱為消息。類似于數據庫中表的一行記錄&#xff0c;消息由字節組成&#xff0c;所以沒有特別的格式和含義…

Dubbo入門教程

服務端&#xff08;dubbo-server&#xff09; 1. pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaL…

NSAssert和NSParameterAssert

2016.05.05 18:34* 字數 861 閱讀 5127評論 0喜歡 17https://www.jianshu.com/p/3072e174554fNSAssert和NSParameterAssert在開發環境中經常被使用&#xff0c;調試和驗證代碼參數的完整性&#xff0c;斷言為真&#xff0c;則表明程序運行正常&#xff0c;而斷言為假&#xff0…