css基礎小記

原創

2020-06-30 16:41

1.z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

註釋：元素可擁有負的 z-index 屬性值。

註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

JavaScript 語法： object.style.zIndex="1"

z軸，距離用戶遠近，是基於屏幕的垂直距離屬性。

使用這個屬性可以實現頁面元素的堆疊順序。好用

2.display屬性取值有：block,inline-block;table;inline-table,table-row,table-cell,table-caption;list-item等，這都是基本的用法

如:在jQuery中可以：

$("#div").css("display":"block");來顯示隱藏想要的DOC對象；

1、block與inline-block屬性其實都是塊級元素，不過inline-block一個是行內的塊級元素；

2、table,table-row,table-cell,table-caption,list-item;

相信大部分的很少去了解這些屬性值，其實這些都是對應的在表格table中的對應項跟ul標籤中的li項，其中display:table其實就是一個table表格，而table-row與table-cell分別對應table表格中的tr跟td標籤，list-item就是li標籤；其實這些屬性在移動前端開發中用的也挺多的，而且對應的也符合table標籤的一些屬性,如在td中vertical-align用div display:table-cell同樣可以實現，這樣可以幫我們解決一些較前衛的瀏覽器中減少很多不必要的困擾。

display:-webkit-box

Flexbox爲 display 屬性賦予了一個新的值（即 box 值）, flexbox的屬性有很多，記錄一些比較常用的屬性：

用於父元素的樣式：

display:box; 該屬性會將此元素及其直系子代加入彈性框模型中。（Flexbox 模型只適用於直系子代）
box-orient: horizontal | vertical | inherit;該屬性定義父元素的子元素是如何排列的。
box-pack: start | end | center | justify; 設置沿 box-orient 軸的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，則父元素的子元素是水平的排列方式，反之亦然。（表示父容器裏面子容器的水平對齊方式--垂直排列時--定寬）
box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同級屬性。設置框的子代在框中的排列方式。如果方向是水平的，該屬性就會決定垂直排列，反之亦然。（表示父容器裏面子容器的垂直對齊方式--水平排列時--定高）

用於子元素的樣式：

box－flex: 0 | 任意數字; 該屬性讓子容器針對父容器的寬度按一定規則進行劃分。

父元素：

display: -webkit-box;
-webkit-box-orient: horizontal;/* 默認的排列方式是水平的*/

子元素：

child1：-webkit-box-flex: 1;/*子元素按照比例進行水平排列*/

child2：-webkit-box-flex: 2;

child3：-webkit-box-flex: 3;

這樣父元素的3個子元素會按照1:2:3的比例在父元素的寬度下進行水平排列。假設其中一個沒有設置box-flex屬性，那麼剩下2個子元素在父元素寬度減去未設置的子元素的寬度下進行比例水平排列。

box，box-flex

前者是flex 2012年的語法，也將是以後標準的語法，大部分瀏覽器已經實現了無前綴版本。
後者是2009年的語法，已經過時，是需要加上對應前綴的。
所以兼容性的代碼，大致如下
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

display:flex；/*彈性佈局*/，用法

一、頁面行排列布局