HTML CSS常用小點

2021-10-09 06:36:28 字數 2260 閱讀 3118

1.塊級元素的顯示與隱藏的三種方法

display:none/block            元素隱藏之後,不占用原來的位置

visibility:hidden/visible       元素隱藏之後,占用原來的位置

opcity: 0/1                          設定透明度來隱藏,占用原來位置

2.表單元素的常用布林屬性

reversed                反轉

checked                選中

disabled                 禁用

readonly                唯讀

multiple                  是否可以多選

selceted                 多選中預設選中

required                 必填

formnovalidate       不驗證表單

3.選擇器權重

1000                  定義在標籤style屬性中

100                   id選擇器

10                   類選擇器、偽類選擇器、屬性選擇器

1                     元素選擇器、偽元素選擇器

4.overflow的三種取值

auto:自適應,在需要時剪下內容並新增滾動條。

scroll:將超出物件尺寸的內容進行裁剪,以滾動條的方式顯示超出的內容(若不設定隱藏滾動條,滾動條一直存在)。

hidden:將超出物件尺寸的內容進行裁剪,不會出現滾動條。

5.行內/塊級元素設定水平垂直居中

行內元素:

text-align:center;

line-height:與父元素同高;

塊級元素:

1.父元素設定相對定位

子元素設定絕對定位 left right bottom top為0 margin:auto;

2.父元素設定絕對定位

子元素設定絕對定位

left:設定子元素寬度的一半

top:設定子元素高度的一半 

3.父元素設定絕對定位

子元素設定絕對定位

left:50%;

top:50%;

margin-left:-子元素寬度的一半

margin-top:-子元素高度的一半

4.父元素設定絕對定位

子元素設定絕對定位

left:calc(50% - 子元素寬度的一半);

top:calc(50% - 子元素高度的一半);

5.父元素設定display:flex;

justify-content:center;

align-items:center;

6.元素的外邊距合併問題

父子級1.給父元素新增overflow:hidden;

2.給父元素加上border

3.給父元素設定為ie盒子,然後加padding-top

4.給父元素或者是子元素,加上float

5.給父元素或者是子元素,加上absolute

6.給父元素或者是子元素,加上fixed(不推薦)

7.給父元素或者是子元素,加上display:inline-block

兄弟級1.若兩個外邊距都為正數,那麼會合併,不會疊加,取值較大的

2.若兩個外邊距都為負數,那麼會合併,不會疊加,取值絕對值較大的

3.若兩個外邊距,乙個為正數,乙個為負數,那麼會疊加,不會合併

7.css中的幾種定位

1)預設定位(static)

static:預設值。即沒有定位,元素在正常的流中,top,right,bottom,left 和 z‐index 屬性無效。

2)相對定位(relative)

relative:生成相對定位的元素,通過 top,bottom,left,right 的位置相對於其正常位置進行定位。

3)絕對定位(absolute)

absolute:生成絕對定位的元素,不再以自己原來的位置定位,而是以網頁的左上角(body)為原定定位。

4)固定定位(fixed)

fixed:通過指定相對於螢幕視窗的位置來指定元素的空間,且元素的位置在螢幕滾動時不會發生變化。

CSS常用小點

1 截字 white space no wrap overflow hidden text overflow ellipsis 2 使文字抗鋸齒 webkit font smoothing antialiased webkit font smoothing none 3 設定滾動條的樣式 webki...

HTML CSS常用總結

1.主流瀏覽器及其核心 2.主流瀏覽器及其核心 3.垂直水平居中 1.塊級元素水平居中 margin 0 auto 2.塊級元素,行級塊元素垂直水平居中 3.所有元素垂直水平居中 flex布局 display flex justify content center 使子專案水平居中 align it...

html css常用單詞

head頭 text文字 division劃分 body身體 password密碼 lable標籤 title標題 submit提及 style樣式 table reset重置 script指令碼 list列表 button按鈕 select選擇 class類 blink閃爍 height高度 it...