css背景樣式 列表樣式 盒子模型 浮動

2021-08-08 19:39:53 字數 1012 閱讀 2291

1.

對於背景的樣式來說,背景的樣式是重點,

background-repeat控制背景是否重複

background-size控制大小,contain不會失幀但是可能會不完全覆蓋

cover會導致的缺失

百分之百可能會讓失幀

背景定位用background-position 2.

使用列表樣式注意刪除列表原始樣式

文字垂直居中要是行高等於容器高度

偽類 hover 能改變其滑鼠停留時的樣式 3.

在沒有改變盒子模型時,改變padding和border會撐大模型導致布局錯亂

div中包裹乙個div要改變內部div的margin時要給父元素新增

overflow:hidden元素

box-shadow

: 10

px

10px

5px

0px

#cccccc;

/*x 軸方向

y 軸方向 模糊距離 模糊範圍 顏色

*/4浮動

消除浮動bug有三個法

1.在會產生錯誤的div下方加乙個塊級元素。並且消除浮動,以消除錯誤。但是會多乙個無關元素,影響頁面載入速度

2.在大容器中新增overflow:hidden,但是一旦包含非浮動元素,頁面會顯示不正常

3.新增乙個偽類after 讓content:『』;

display:block;

clear:both;

浮動元素一定要定義width

box-sizing

:border-box;

/* **盒模型

*/**盒模型能讓border和padding對頁面布局不影響

運用浮動時首先分好區會事半功倍

CSS基礎 背景樣式與盒子模型

在我們的程式設計過程中,經常不光會使用到設定字型樣式,還會用到設定背景顏色,背景等樣式,今天我們就來學習一下關於背景的樣式設定 1.背景顏色 background color 顏色這個屬性我們為我們的標籤設定背景顏色,其中我們有三種屬性值的書寫方式 1.預定義的顏色表示 red,blue,green...

(3)CSS樣式 盒子模型

盒子模型的內容範圍包括 margin border padding content 內邊距padding 1.在content外,邊框內部 2.內邊距屬性 padding 設定所有邊距 padding bottom 設定底邊距 padding left 設定左邊距 padding right 設定右...

css盒子模型和樣式更改

取自菜鳥教程 margin 外邊距,多個盒子排列時外邊距取較大的那乙個,並不是相加 border 邊框 padding 內邊距 content 內容 這個基礎應用直接放 了哦 box1 下面這種寫法只需要記住,順序為從上開始順時針旋轉就可以了 box2 也可以分開寫,等價於box2 box3 預設情...