CSS盒模型/定位流/浮動流

時間 2020-05-11

標籤 css 模型定位浮動欄目 CSS 简体版

原文原文鏈接

1、盒模型：ide

　　(1) border:寬度樣式顏色；spa

　　(2) padding: 內邊距；orm

　　(3) margin: 外邊距；（垂直方向會合並）圖片

　　(4)content;ci

　　其它操做：it

　　(1) box-sizing: content-box;默認io

　　border-box;固定元素大小function

　　(2)水平居中：1. margin:0 atuo;（盒子居中）form

　　　　　　　2. text-align:center;（內容居中）transform

　　　　　　 3.當圖片大於父元素：父：text-align:center;

　　　　　　　　　　　　　　　　子：margin:0 -100%;

　　(3)垂直居中：line-height:行高；

　　(4)盒子陰影：box-shadow

　　　　box-shadow:h-shadow v-shadow blur_模糊距離 spread_陰影尺寸 color inset_內陰影

　　(5)文字陰影：text-shadow

　　　　text-shadow:h-shadow v-shadow blur color

2、浮動流：脫標

　　　　float:left/right;

　　　　注：1.浮動流不區分行內、塊級和行內塊級。

　　　　2.在浮動流內不論行內、塊級和行內塊級都能設置寬高。

　　清除浮動：

　　　　(1) clear:both; 默認

　　　　　　both; 清除左右浮動；

　　　　　　left; right;

　　　　　　注：使用clear屬性後margin會失效。

　　　　(2) 外牆法：在中間怎加額外的<div>，在此<div>設置clear:both;

　　　　(3) 內牆法：在第一個<div>尾部加一個<div>;

　　　　(4) overflow:hiden; 添加到第一個<div>；在IE6中加*zoom:1;

3、定位流：

　　（1）相對定位relative：不脫標，區分行內塊級。

　　（2）絕對定位absolute：脫標，不區分行內塊級。

　　　　參考點：1.默認以<body>爲參考點。

　　　　　　 2.如祖先元素有定位流，則以該元素爲參考點。（排除靜態定位）

　　　　水平居中：left:50%; margin-left:-xxpx;

　　（3）固定定位fixed：脫標，不區分行內塊級。

　　　　注：用法和絕對定位相同，區別在於不隨滾動條滾動。

　　（4）靜態定位static：默認爲靜態定位。

4、過渡模塊：transition:

　　(1) transition-property: 設置過渡的CSS名稱

　　(2) transition-duration: 設置過渡時間s/ms

　　(3) transition-timing-function: 速度曲線

　　(4) transition-delay: 延時開始時間

　　縮寫：transition:property duration timing-function delay;

　　多個CSS過渡用法：1) transition:property duration , property duration;

　　　　　　　　　 2) transition:all duration;

5、2D轉換：

　　(1) transform:translate(x,y); 平移

　　(2) transform:scale(x,y); 縮放；單位1=100%

　　(3) transform:rorate( ); 旋轉；單位deg

　　縮寫：transform:rorate(deg) translate(x,y);

　　　　注：座標系會依次變更。

　　基點設置：transform-origin:0px 0px;

　　opacity:0; 設置透明度

　　*perspective:500px; 設置近大遠小

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。