CSS基本知識總結2 1

2021-10-04 19:39:04 字數 1297 閱讀 9110

簡單點來說盒子模型就是把html中的布局元素看作是乙個矩形的盒子 

css盒子模型本質上是乙個盒子,封裝周圍的html元素,它包括以上的內容

由邊框寬度、樣式以及顏色組成

add:**的細線邊框border-collapse 控制相鄰單元格的邊框 (collapse屬性值表示相鄰邊框合併)(給**設定邊框時會出現單元格邊框之間的合併,這樣就會解決 )

邊框會影響盒子的實際大小,所以1.測量盒子的時候不測量邊框2.如果測量了邊框,則需要寬/高減去邊框的寬度(記住要減2次)

預設出現在盒子的左上頂部(因瀏覽器而異)

指定padding值之後,內容和邊框之間有了間距,影響了盒子的實際大小(撐大了),也就是說如果盒子已經有了寬度和高度,此時在增加內邊距就會撐大盒子,如果我們想要盒子跟ui提供的效果圖大小一樣,則讓寬/高減去多出的內邊距大小即可(同border類似)

padding的用於還是非常廣泛的 比如果在乙個側邊欄中文字距離左邊框的距離一般不會有文字縮排(text-indenr)而是會直接用padding,這樣會更加準確

如果乙個元素沒有給寬度/高度,那麼此元素的寬/高將繼承父元素的寬/高

比如說乙個盒子裡面巢狀這乙個子元素 如果沒給定此元素的寬高,則此元素會繼承父元素的寬高,此時給子元素乙個padding值時是不會撐開此盒子的,但是如果給定了寬度/高度 則回撐開此盒子

在這裡為什麼要說影響盒子模型的大小(撐開了呢)如果在我們的實際開發中 ,剛開始我們都預定好了box的寬度 並且已經布局完畢,當我們新增具體內容時,如果改變盒子模型的某些值得話因此就會影響到該盒子的大小,繼而影響到其他與之相臨的盒子(比如父元素的寬度固定了 ,可能會將另乙個盒子擠下來),後期也有兩個具體的屬性來控制各自大小

條件:①塊級盒子必須指定寬度②左右外邊距設定auto(此方法對於行內元素和行內塊元素無效,要想使其水平居中 可以text-align)

使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併

1.相鄰塊元素垂直外邊距的合併

當上下相鄰的兩個塊元素(兄弟關係)相遇時,如果上面的塊狀元素有margin-bottom,下面的元素有margin-top,則它們之間的垂直間距不是bottom和top的和,而是取兩者值中最大的乙個生效,這種現象稱為相鄰塊元素垂直外邊距的合併。所以說要想解決此現象可以只給乙個盒子外邊距

對於兩個巢狀關係(父子關係)的塊元素,父元素有上外邊距同時子元素也有上外邊距,如果此時想讓子元素與父元素有間隔,給子元素設定margin-top會無效(父元素連通子元素一起向下移動較大乙個的margin-top值)

解決的方法:1.為父元素定義上邊距 2.為父元素定義上內邊距 3.為父元素新增overflow:hidden

CSS基本知識總結

day 1 eg.eg.不獨佔一行,一行可以顯示多個 高 寬 外邊距及內邊距不可以自行控制,無效果 寬度預設為自己的寬度 靠自己把它撐開 只能容納文字或其他行內元素 注 鏈結不能巢狀鏈結 特殊情況下可以包含塊級元素 其實就是某些行內元素具有塊狀元素的某些特點,比如img input和td form等...

CSS基本知識

選擇符表示要定義樣式的物件,可以是元素本身,也可是一類元素或制定名稱的元素 在css選擇符中,大致可有10種 類選擇符 id選擇符 class選擇符 萬用字元 群組選擇符 包含選擇符 偽類選擇符 偽物件選擇符 關於選擇符的權重問題,css中用四位數來表示權重,權重的表示式如0000 在這裡特別要注意...

CSS 基本知識

html示例 塊級元素 display block 每個塊級元素佔一行,多個塊級元素上下堆疊顯示,它的寬度預設為父元素的寬度,高度由它的內容高度決定 內容撐開 塊級元素有 6級標籤 段落 有序列表 列表項 等等行內元素 display inline 多個行內元素在一行內顯示,當同一行寬度不夠時,才到...