CSS核心的幾個概念

2022-04-11 00:10:55 字數 1035 閱讀 8464

盒模型、position、float。他們是css的基礎,之間看似獨立卻又相輔相成。

元素型別

塊級元素、內聯元素

他們之間有以下區別:

1、塊級元素獨佔一行,除非顯示的修改display屬性。而內聯元素都會在一行內顯示。

2、塊級元素可以設定width、height屬性,而內聯元素不行。

3、塊級元素的width預設為100%,而內聯元素則根據自身的內容或子元素來決定寬度 。

內聯元素不可以設定高度,但可以通過設定display:block;來達到效果。這時元素將以塊級形式呈現。

當display:inline;時,元素以內聯形式呈現。

要讓元素在行內顯示,又能設定高度,可以設定:display:inline-block; 

盒模型頁面上顯示的每個元素都可以看做乙個盒子,即盒模型。

盒模型由四部分組成:content->padding->border->margin

元素寬度的計算...

另外兩種特殊情況

絕對定位、浮動(position、float) 

1、position

這個屬性決定了元素將如何定位。大致有以下五種:

·static:預設值,元素相當於沒有定位,在頁面佔據位置,不能使用top、right、botton、left移動元素。

·relative:相對定位,沒有定位,在頁面佔據位置,可以使用

top、right、botton、left移動元素。

·absolute:絕對定位,相對於最近一級的定位不是static的父元素進行定位,元素在頁面不佔據位置,可以使用

top、right、botton、left移動元素。

·fixed:絕對定位,相對於瀏覽器視窗進行定位,其餘和absolute一樣。

·inhenit:從父元素繼承position的值。 

2、float

顧名思義,就是把元素浮動起來,取值共四個:left、right、none、inherit。

最初的float是用來實現文字環繞的,現在它的應用非常廣泛。

css學習資料大全:

CSS 最核心的幾個概念

元素型別 html 的元素可以分為兩種 塊級元素 block level element 內聯元素 inline element 有的人也叫它行內元素 兩者的區別在於以下三點 塊級元素會獨佔一行 即無法與其他元素顯示在同一行內,除非你顯式修改元素的 display 屬性 而內聯元素則都會在一行內顯示...

CSS 最核心的幾個概念

html 的元素可以分為兩種 兩者的區別在於以下三點 塊級元素會獨佔一行 即無法與其他元素顯示在同一行內,除非你顯示修改元素的 display 屬性 而內聯元素則都會在一行內顯示。塊級元素可以設定 width height 屬性,而內聯元素設定無效。塊級元素的 width 預設為 100 而內聯元素...

CSS核心概念 containing block

在 css2.1 中,很多框的定位和尺寸的計算,都取決於乙個矩形的邊界,這個矩形,被稱作是包含塊 containing block hi 以上 為例,div 和 table 都是包含塊。div 是 table 的包含塊,同時 table 又是 td 的包含塊,不是絕對的。乙個框的包含塊 指的是 該框...