css進行布局

2022-08-29 20:42:17 字數 1444 閱讀 2266

在head元素內,link後面新增以下**:

盒狀模型是指,盒子是有元素內容、padding、border、margin構成的,將元素與周圍的元素隔開。預設情況下,css的width指的是元素的內容區域,而瀏覽器顯示的寬度則是內容寬度+padding+border的寬度之和。

將box-sizing:border-box,設定width值等於除margin以外的其他的和。

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box

1)指定元素的顯示方式:display,  其值有block , inline ,inline-block,none。設為none時元素隱藏,不占用空間。

2)控制元素的可見性:visibility ,其值有hidden  visible  ,隱藏後會占用空間

3)width:auto , 元素的父元素則會自動設定元素的寬度,width等於父元素的寬度-border-padding-margin.

4)  指定了width,且margin, 左右外邊距設定為auto, 居中顯示

5)min-height, 至少具有某乙個高度 。 max-width   min-width  max-height

6)  設定邊框  border-width  border-color  border-style  border-top-width  ,  border:none取消邊框

浮動元素脫離了文件流,浮動元素的display變成block。

float:left  float:right   float:none

清除浮動,clear:left () clear:right  clear:both  

讓浮動元素的父元素自清除:

為父元素新增類名clearfix後,新增如下樣式:

.clearfix:before,

.clearfix:after

.clearfix:after

.clear

position: fixed  relative  absolute  static

fixed: 元素是相對於瀏覽器視窗定位

absolute: 元素是相對於設定了position:relative  和 position:fixed 的父元素的定位,絕對定位,脫離了文件劉

relative: 元素是相對於元素自身的初始位置定位

在進行定位時如果元素出現重疊情況,使用z-index來設定顯示的次序,z-index值越大越顯示在上面。

overflow屬性控制元素在盒子外面的部分,其值有visible, hidden , scroll ,auto

vertical-align: sub   sup  baseline  top   bottom  text-top  text-bottom  middle

利用 CSS 進行網頁布局

這裡主要主要介紹如何利用 css 來進行網頁的一欄,兩欄,三欄和混合布局 type text css body top main foot style head class top div class main div class foot div body html 效果 type text cs...

利用css進行網頁布局

網頁布局 又稱版式布局,是網頁ui設計師將有限的視覺元素進行有機的排列組合,將理性的思維個性的化的表現出來,是一種具有個人藝術特色的視覺傳達方式。傳達資訊的同時有美感。網頁設計特點 相對紙媒來說 特點 1 網頁可以自適應寬度2 網頁的長度理論上可以無限延長3 頁面為 頭部,主體部分,底部。分欄又稱為...

用CSS對網頁進行布局

今天學習了用css對網頁進行簡單的布局,感覺還不錯,下面來分享一下。首先用div給頁面分塊是基礎,網頁布局就是將網頁合理的分成乙個乙個塊。接下來寫css層疊樣式,給每個要定義樣式的div定義乙個class或id,在對應的class裡面寫好樣式,這裡最主要的用到的屬性有margin,padding,w...