css樣式設定

box-sizing初識: box-sizing是css3的新屬性，box-sizing是乙個盒子模型，box-sizing有兩個重要值：content-box和border-box

box-sizing使用總結: box-sizing的預設值為content-box，子元素不會主動繼承父元素的box-sizing，border-box限制了元素的寬高計算方式，寬高=內邊距+邊框+自身寬度

修改css樣式沒有效果怎麼辦?

解決辦法:

1、檢視引用路徑是否正確

2、若路徑正確，可能是瀏覽器快取的是修改之前的樣式，需要清除瀏覽器快取，ctr+ f5即可

cursor: pointer意思是是計算機中把滑鼠指標的形狀弄成-只伸出食指的手，如下圖

滑鼠指標的其他形狀:

cursor: default 箭頭,

cursor: crosshair 十字,

cursor: progress 沙漏等等。

z-index是用來設定元素的前後顯示位置的：

我們在進行網頁製作時都會遇到為元素設定邊距的情況，邊距又分為外邊距和內邊距，即margin和padding.

margin:auto=margin:auto auto auto auto, 表示上下左右都為auto; margin:0 auto=margin:0 auto 0 auto,表示上下為0，左右為auto;

margin: 1px、 2px，則表示上下外邊距為都為1px,左右外邊距都為2px；

margin:auto表示橫豎都居中， margin: 0 auto表示橫居中，豎不居中;

margin:1px、 1px、 1px、 1px, 分別表示上外邊距為1px、右外邊距為1px、下外邊距為1 px、左外邊距為1px。

1、line-height 屬性設定行間的距離(行高)，而行間距的尺寸分配是line-height 與font-size的計算值之差(在css中成為「行間距")分為兩半，分別加到乙個文字行內容的頂部和底部。可以包含這些內容(文字+文字頂部+文字底部)的最小框就是行框(line-box)

2、行間距自動適應行高的方式，最好用的是採用number數值的方式。

3、設定了line-height的行框line-box, 具有的特性:

垂直居中性:由上面對line-height定義可知，line-height是通過line-box行框體現的，而行框包括文字+文字.頂部+文字底部，文字頂部和文字底部是line-height與font-size差值的一半,所以，line-box與文字共用中基線，這就是行高的垂直居中性。

單行文字垂直居中對齊：將line-height屬性設置為所需要的行框高度；

多行文字垂直居中對齊：只需要將行框內的多行文字轉換為內斂元素,比如設定display:inline-height或inline,然後單獨設定內斂元素的行間距，整個內斂元素就在行框內垂直居中對齊了；

注:通過line-height設定文字垂直對齊，如果設定元素垂直對齊,需使用vertical- align:middle;

position屬性值有哪些

1、absolute: 生成絕對定位的元素，相對於static 定位以外的第乙個父元素進行定位。元素的位置通過"left", "top", "right"以及"bottom"屬性進行規定。

2、fixed:生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過"left", "top", "right"以及"bottom"屬性進行規定。

3、relative:生成相對定位的元素，相對於其正常位置進行定位。因此,"left:20"會向元素的left位置新增20畫素。

4、static:預設值。沒有定位，元素出現在正常的流中(忽略top, bottom, left, right 或者z-index宣告)。

left和top屬性:使用必須伴隨設定position，指的是距最近的乙個position屬性為relative或者 absolute的父級元素的左邊或上邊的距離，如果父級屬性未設定position則預設為body.