CSS一些基本問題總結

2021-10-24 12:16:44 字數 2324 閱讀 1787

含義:

box-sizing 是用來設定盒模型的尺寸

屬性:

box-sizing: border-box;
總寬高不包含padding和border

box-sizing: content;
總寬高包含padding和border

css盒子模型: 外邊距(margin) 內邊距(padding) 邊框(border) 內容區(width、height)

css盒子模型與低版本ie的盒子模型的區別主要在於:寬和高不一樣

標準的css的盒子模型的寬高:內容區的寬高

低版本ie的盒子模型的寬高:內容區+內邊距+邊框

1、元素水平居中

使用margin:0 auto;可以水平居中;

使用text-align:center;給父元素設定使其行內元素水平居中。

2、元素相對視窗位置

使用position:fixed;固定定位,元素總是根據瀏覽器的視窗進行定位;

使用position:absolute;絕對定位;

使用body和html的width和height屬性填充視窗。

3、元素左右定位

使用float左右浮動;

使用position:absolute;絕對定位進行左右定位。

品字布局title

>

>

*/* 去除所有元素預設的內外邊距的值 */

html, body

/* 預設html,body的高度為0,為其設定高度以使後面的div可以用百分比設定高度 */

.header

.main

.main .left

.main .right

style

>

head

>

>

class

="header"

>

div>

class

="main"

>

class

="left"

>

div>

class

="right"

>

div>

div>

body

>

html

>

有兩種情況:

1、兄弟級的塊之間,margin這個屬性上下邊距,經常會發生重疊的情況,以數值大的為準,而不會相加。

2、父子級的塊之間,子級的上下margin會與父級上下margin重疊,以數值大的為準,而不會相加。

如何解決?

第一種情況:

1、float浮動

或者2、inline-block

第二種情況:

父級加1、overflow:hidden

或者2、加padding

或者3、加border

或者子級加position:absolute

margin:

需要在border外側新增空白時;

空白處不需要背景(色)時;

上下相連的兩個盒子之間的空白,需要相互抵消時。

padding:

需要在border內測新增空白時;

空白處需要背景(色)時;

上下相連的兩個盒子之間的空白,希望等於兩者之和時。

浮動元素引起的問題:

(1)父元素的高度無法被撐開,影響與父元素同級的元素

(2)與浮動元素同級的非浮動元素(內聯元素)會跟隨其後

(3)若非第乙個元素浮動,則該元素之前的元素也需要浮動,否則會影響頁面顯示的結構

解決方法:

使用css中的clear:both;屬性來清除元素的浮動可解決2、3問題,對於問題1,新增如下樣式,給父元素新增clearfix樣式:

.clearfix:after

.clearfix

清除浮動的幾種方法:

1,額外標籤法,

(缺點:不過這個辦法會增加額外的標籤使html結構看起來不夠簡潔。)

2,使用after偽類

3,浮動外部元素

4,設定overflow為hidden或者auto

C C 一些基本問題

自從用了qt之後發現人被慣壞了,一開始用qt只是出於做介面的發現,後來覺得qt中對於基本類的封裝比c 標準庫神馬的做得好,因此就習慣於用封裝好的東西。這幾天想用最簡單的c語言來解決問題的時候發現好多東西被忘掉了,本來當個助教是個很好的複習方法,可惜被我錯過了,遺憾中。1.檔案讀寫 c檔案讀寫操作 c...

C 的一些基本問題

1 全域性變數加 static 和不加有什麼區別?全域性變數 外部變數 的說明之前再冠以static 就構成了靜態的全域性變數。全域性變數本身就是靜態儲存方式,靜態全域性變數當然也是靜態儲存方 式。這兩者在儲存方式上並無不同。這兩者的區別雖在於非靜態全域性變數的作用域是整個源程式,當乙個源程式由多個...

程式設計的一些基本問題

在程式設計中,常用下列三種不同的出錯處理方式 1 用exit語句終止執行並報告錯誤 2 以函式的返回值區別正確返回或錯誤返回 3 設定乙個整型變數的函式引數以區別正確返回或某種錯誤返回 各自的優缺點 1 exit常用於異常錯誤處理,它可以強行中斷程式的執行,返回作業系統。2 以函式的返回值判斷正確與...