前端 網頁布局基礎

2021-08-28 17:21:17 字數 1398 閱讀 5987

1、盒子模型的第一層到第五層:

border、padding+content、background-image、background-color、margin

2、清除浮動。對受到浮動影響的標籤作以下操作:

1、clear: both;

2、clear: right;  clear: left;

3、設定寬度width: 100%(或者固定寬度)+overflow: hidden;

3、兩種清除浮動方法的使用場景:

1、當子元素設定了浮動,父元素沒有設定浮動而導致的父元素高度不能自動擴充套件,縮成一條線,子元素從父元素中溢位時,適合使用同時設定width:100%(或固定寬度值)+overflow:hidden的方式來清除浮動;此法可同時去除緊鄰的塊級受到的浮動影響,而不需要再對受到浮動影響的緊鄰塊級元素設定去除浮動。   

2、如果是緊鄰的塊級元素受到浮動影響,對該受到影響的塊級設定clear:both或者clear:left,clear:right更為合適。

注意:width設定為100%就是繼承父容器的寬度。左右撐滿整個容器,為自己清除浮動建立條件。再加溢位隱藏,就可以把包裹 浮動的部分去除。

4、絕對定位特點:

未設定偏移量時:(left、top)

無論是否存在已經定位的祖先元素,都保持在元素初始位置 脫離標準文件流

設定偏移量時:偏移參照的基準:

無已定位的祖先元素:以為偏移參照基準;

有已定位的祖先元素:以距其最近的已定位的祖先元素為偏移參照基準。

注意:當乙個元素設定了絕對定位,沒有設定寬度時,元素的寬度根據內容進行調節。

練習題:已知乙個設定了絕對定位的元素b,位於其父元素a中,a元素為靜態元素,則b元素將以(html)為基準進行偏移。

答案是因為a為靜態位置,所以要以根元素為基準進行偏移,也就是html元素(靜態定位是position:static,是元素的預設定位屬性。只有設定了absolute或relative或fixed才算已定位的父級元素。

5、隱藏按鈕文字的小技巧:

text-indent: -999px;

overflow: hidden;

先使用text-indent:-999px;語句把被設定元素「擠出去」了,然後設定溢位的元素都隱藏起來,也就是被擠出去的元素隱藏起來。

6、**查詢:

可被用於css中的@media和@import規則上,也可被用在html和xml中。

1)@media screen and (width: 800px)

2)@import url(example.css) screen and (width: 800px);

3)0

網頁布局基礎

網頁製作的基礎,在w3c盛行的今天 div css 布局網頁 布局分為 流式布局 浮動布局 絕對定位布局 涉及標準文件流 盒子模型 float屬性 position屬性 1.自動居中 列布局 盒子模型的使用方法 2.浮動布局 float屬性來實現上中下布局和橫向兩列甚至多列布局,解決浮動影響的常用方...

網頁布局基礎

由全球資訊網聯盟指定的一系列標準,包括 機構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript w3c標準倡導結構 樣式 行為分離。css中存在3中定位機制 1 標準文件流 normal flow 特點 從上到下,從左到右,輸出文件內容 由塊級元素和行級元...

網頁布局基礎

1 css 規定的定位機制有三種,分別是 標準文件流 normal folw 浮動 floats 絕對定位 absolute positioning 2 w3c標準 由全球資訊網制定的一系列標準,包括 結構化標準語言 html和xml 表現標準語言 css 行為標準語言 dom和ecmascript...