資訊專欄INFORMATION COLUMN
摘要：浮動的元素脫離文檔流解決方式一給父元素添加超出部分隱藏解決方式二在父元素內容最后添加擁有清除浮動屬性的元素。
第一步： 清除默認樣式 第二步： 劃分模塊 第三步： 設置模塊的大小以及位置 第四步： 劃分下一級模塊
<link rel="shortcut icon" href="img/...ico">
css樣式表的引入方式 1、外鏈式 <link href="" rel="stylesheet"> 2、嵌入式 <style>style> 3、行內樣式 <div style="width:200px;height:200pxs;">div> 4. @import url()
命名規范 1、嚴格區分大小寫 2、可以采用字母數字下劃線$,數字不開頭 3、命名語義化 4、可以采用駝峰命名法
清楚邊距
*{
margin: 0;
padding: 0;
list-style: none;
}
a標簽清楚下劃線和顏色
a{
color: black;
text-decoration: none;
}css中顏色的表示方式： 1.預定義的顏色【關鍵字顏色】 red pink blue yellow 2.#6位數的色值 #00-00-00 紅綠藍 3.rgb（紅，綠，藍） ：rgb([0-255],[0-255],[0-255]) 4.rgba（red，green，blue，透明度） ：rgba([0-255],[0-255],[0-255]，[0-1]) 0-1: 0全透明，1不透明
html： 標簽： 按照語法分類： 1.單標簽：只有開始標簽 meta img a 2.雙標簽：有開始標簽和結束標簽 <html>html> 3.屬性的語法 語法： 屬性名 = "屬性值" 屬性名 = "屬性值1 屬性值2" 注意: 1、標簽名和屬性名之間要有空格 2、多個屬性之間要有空格 3、多個屬性值之間要有空格 4.開始標簽 標簽名后有空格 按照標簽在頁面中的呈現效果分類： 1、行內元素 行內元素定義:在一行內顯示，只能設置左右間距，不可以設置上下間距。 舉例：span del i em b strong a(title="鼠標移入時顯示的文字";target=" "(新窗口打開的位置 _self:在本窗口打開;_blank:在新窗口打開) ... 2、塊元素 塊元素定義：可以設置寬高，獨占一行。 舉例：div 標題標簽 列表標簽 段落標簽 ... 3、行內塊元素 行內塊元素定義：可以設置寬高，在一行顯示。 舉例：img 【title="鼠標移入時顯示的文字" 】 表單控件 元素的轉換 塊元素： display:block; 行內塊元素：display:inline-block; 行內元素： display:inline; 元素的級別 塊元素 > 行內塊元素 > 行內元素 元素嵌套規范 1、同一級別可以相互嵌套 2、級別高的元素可以嵌套級別低的元素 3、段落標簽只能嵌套行內元素 4、a標簽不可以嵌套a標簽；p不能嵌套p
四部構成： 1、margin 外間距 盒子與盒子之間的距離 2、border 邊框 3、padding 內填充（內間距） 邊框與內容之間的距離。 4、content 內容 margin-top margin-right margin-bottom margin-left margin: 50px; 上 右 下 左 margin: 50px 100px; 上下 左右 margin:0 auto; auto自動 margin: 50px 100px 150px; 上 左右 下 margin: 50px 100px 150px 200px; 上 右 下 左 border: 1px solid red; border-top border-right border-bottom border-left border-top-width：上邊框的寬度 padding:設置方法同margin content: ; width : 數值 百分比 auto height: 數值 百分比 auto 盒子模型的問題： 1.大部分元素的margin和padding默認為0，但有一部分的margin和padding不為0，例如body 標題標簽（h1-h6）（ul ol il等列表標簽） 段落標簽 2.想領的兩個塊元素的margin會重合，值會取最大值 3.margin可以為[負數] ，padding不可以設置[負數]。 4.行內元素margin只有左右，沒有上下 5.如果（1）發生嵌套關系的元素，（2）父元素沒有上邊框，（3）上padding ，（4）父元素與子元素之間沒有別的內容，此時子元素margin-top就會作用到父元素身上 margin-top的解決方式： 1.用父元素的padding-top代替子元素的margin-top； 2.給父元素添加overflow：hidden；
height：auto / 百分比 / px； width：auto / 百分比 / px； height：auto； 參照與父元素 width：auto；參照與內容 box-sizing：border-box； 將邊框算入盒子內； 一個元素實際的寬高 實際寬度 = border-left + padding-left + width +paddint-right + border-right; 實際高度 = border-top + padding-top + height + padding-bottom + border-bottom;
作用：讓塊元素橫排排列
樣式： float：left；從左往右排列
float：right；從右往左排列
原理：讓元素脫離文檔流，讓元素從文檔層浮動到浮動層。
引發的問題：父元素不設置高度，子元素都浮動，浮動的子元素撐不開父元素。（浮動的元素脫離文檔流）
*解決方式一：給父元素添加 overflow：hidden；（超出部分隱藏）
*解決方式二：在父元素內容最后添加擁有清除浮動屬性的元素。
clear：right/left/both ； 別的浮動對它的影響清除掉
例：
.box：after{
content: "";
display:block;
width: 0;
height: 0;
clear:both;
}
*解決方式三：父元素能設置高度的盡量設置高度
浮動之后的塊元素參照內容：屬性值 auto定位的元素脫離文檔層，到達定位層 定位的元素會多出5個樣式： top right bottom left z-index：999 上 右 下 左 層級（層級越高，離用戶越近）【只能在有定位屬性的元素上才能用】 層級： z-index：整數； 定位的幾種方式： 1.相對定位： 相對于自身來定位，在文檔層中保留原來的位置 用法： position：relative； 2.絕對定位： 相對于最近的 定位的 祖先元素 來定位，完全脫離文檔流（其他頂替其位置） 用法： position：absolute； +方向值 3.固定定位： 相對于瀏覽器的四條邊，完全脫離文檔流 用法： position：fixed； top與bottom同時定義，那個樣式會作用到元素身上的判斷關系： top的權重比bottom的權重大 left的權重比right的權重大 元素作用時： 1.如果是 position：relative； left：； margin：； 先作用margin，在作用relative； 2.如果是 position：absolute； left：； margin：； 先作用absolute，在作用margin； 定位元素的居中方式： 方法一： 1.水平居中： position：absolute； left：50%； margin-left：-自身長度的一半； 2.垂直居中： position：absolute； top：50%； margin-top：-自身長度的一半； 3.絕對居中： position：absolute； left：50%； top：50%； margin-left：-自身長度的一半； margin-top：-自身長度的一半； 方法二： 1.水平居中： position：absolute； left：0； right：0
2D和3D屬性： 1.平移樣式 transform:translate(x,y); 向上為負， 向下為正 transform:translateX(100px); transform：rotate（180deg） ； （1turn）轉一圈 平移 transform:translate（） 例子：translate（x，y） translateX（） 旋轉 transform:rotate（） 例子rotate（180deg）順時針 -180deg 逆時針 transform：rotate（）空格translate（）； transform-origin:px px;變換的中心點； left center； 縮放 transform:scale（） 例子：scale（2） 放大為原來的2倍 scale（0.n）縮小為原 來的0.n scale（m，n） x軸m，y軸n 斜切 transform:skew（） 例子：skew（45peg） 左拉伸45° skew（45peg，m） 2. 過渡transition transition：all 0.5s； 全部 時間 3.過渡的屬性樣式： transition-property: ， ; 可以為：屬性的全部樣式 4.過度的總時間： transition-duration：； 5.過渡的時間函數： transition-timing-function：； linear（勻速） ease（開頭結尾慢，中間快） cubic-bezier（1，0.07，0.54，0.21） 貝塞爾曲線 6.延遲 transition-delay：； 3d效果：和2d的一樣transition，transform； prespective：給父元素加prespective（滅點的值） prespective-origin：x y；滅點的位置 調整觀察的角度（大多數情況不設置） transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg） transform：ratateY（45deg） transform：translate3d（0-1，0-1，px） 父元素：transform-style：preserve-3d；
動畫規則：
@keyframes 動畫名（隨便給）{
（動畫規則）
from{}
to{}
}
@keyframes 動畫名（隨便給）{
（動畫規則）
0%{}
50%{}
100%{}
}
@keyframes animation1{
from{
background-color:red;
}
to{
background-color:blue;
}
}
掛載動畫:將動畫加到元素身上
.元素{
animation：animation1 時間 步數 時間函數 延遲時間 次數 ；
}
掛載多個動畫：
.元素{
animation：animation1 時間,animation2 時間,animation1 時間；
其他動畫的相同的可以附件通過animation屬性；
}
animation的樣式
動畫名：animation-name
時間： animation-duration
步數：animation-steps：8；
時間函數：animation-timing-function
延遲： animation-delay
動畫次數： animation-iteration-count：infinite（無限次）/2；
指定下一次動畫是否逆向：animation-direction：alternate（逆向）/ normal（常規）；
最后的狀態：animation-fill-mode：backwards（默認（保持一開始的狀態））/forwards（保持當前的狀態）；
狀態即指定動畫是否運動： animation-play-state: running（運行）/paused（靜止）;按照在頁面中的呈現效果： 1.行內元素：在一行內顯示 ，不可以設置寬高 ：（存放文字） span a b i strong del 2.行內塊元素：在一行內顯示，可以設置寬高：（有縫隙 不常用） img 表單控件 3.塊元素 ：可以設置寬高，獨占一行 div 標題標簽（h1-h6） 列表標簽（ul-li ol-li dl>dt+dd 段落標簽 （p pre）） 元素嵌套規范： 1.同一級別可以相互嵌套 2.級別高的可以嵌套級別低的元素 3.p標簽只能嵌套行內元素 4.a鏈接不能相互嵌套 元素的轉換： 1.塊元素：display：block； 2.行內塊元素：display：inline-block； 3.行內元素：display：inline；
背景圖 先設大小，在引background； background: url(路徑) no-repeat left bottom/contain； //圖片位置 禁止重復 位置（top bottom left right） 1. 路徑：background-image：url（“”），url（“”）；加載多張背景圖 2. 背景圖大小： background-size：100px auto，100px auto； 會重復 3. 背景的圖重復： background-repeat：no-repeat，repeat；（無重復） background-repeat：repeat-x（x方向重復） background-repeat：repeat-y（y方向重復） 4. 背景圖的位置： background-position：x y；（數值 方位值（top/bottom left/right center（可以省略）） ） 5. 背景開始渲染的位置： background-origin: ; padding-box；（默認）從padding位置開始渲染 border-box；從邊框的位置開始渲染 content-box；從內容的位置開始渲染 6. 圖片結束渲染的位置：background-clip: ; padding-box；（默認）從padding位置結束渲染 border-box；從邊框的位置結束渲染 content-box；從內容的位置結束渲染 7. 使得背景圖加載到瀏覽器中 background-attachment: fixed; 8.可以簡寫： background：空格隔開； 9. 背景圖漸變 background: linear-gradiend(top，顏色1，顏色2，顏色n) //漸變開始的方向（默認top） 類似25deg（25度） 10.瀏覽器內核//背景色漸變 1. /* 標準語法 */ 例子：background: linear-gradient(top,#3bbcff,#47eaff); 2. /* 谷歌內核 -webkit- */ 例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff); 3. /* 火狐內核 -moz- */ 例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff); 4. /* 歐鵬內核 -o- */ 例子：background: -o-linear-gradient(top,#3bbcff,#47eaff); 5. /* IE內核 -ms- */ 例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);
絕對路徑：從盤符開始的一條完整路徑 相對路徑：兩個文件的位置關系
border-radius：邊框的半徑 設置圓角 n%或者num像素 border-style:dotted solid double dashed; 上邊框是點狀 右邊框是實線 下邊框是雙線 左邊框是虛線
透明性的選擇：（整個容器都變） opacity：；0-1之間的值；
font-family =“ 字體” //字體樣式可以被繼承
span標簽 cursor：pointer； 鼠標樣式：手型
box-shadow：x軸偏移量 y軸偏移量 陰影的模糊程度 陰影的大小（0和本身一樣大小） 陰影的顏色；
引入字符圖標： 行內元素 隨意 span class=“iconfont 圖標類名” 可調節樣式： 同文字
文檔流： 標準情況下 ，頁面元素從左往右 從上往下 依次排列
容器（父元素）的屬性：【display:flex;】 *flex-direction: 決定主軸方向。 row 主軸在水平方向，從左向右（默認）。 row-reverse 主軸在水平方向，從右向左 column 主軸在垂直方向，從上到下 column-reverse 主軸在垂直方向，從下到上 *flex-wrap: 決定項目換行 wrap: 項目換行 nowrap: 項目不換行（默認值） wrap-reverse： 項目換行且反轉 *justify-content: 決定項目在主軸的對齊方式 flex-start;主軸的起點 flex-end;主軸的終點 center;主軸的中心 space-between;兩端對齊 space-around;項目兩側距離相等 *align-items：項目在交叉軸上的對齊方式（適用于一根軸線與多跟軸線） flex-start:交叉軸的起點 flex-end：交叉軸的終點 Center：交叉軸的中心 baseline： 基線對齊（文本底部） *align-content:定義項目在交叉軸上的對齊方式（僅適用于多根軸線） flex-start;交叉軸的起點 flex-end;交叉軸的終點 center;交叉軸的中心 space-between;兩端對齊 space-around;兩側距離相等 子元素（項目）的屬性： *order：定義項目的排列順序，數值越小，越靠前，默認值為0（可以取負值）。 *flex-grow:定義項目的放大比例。默認值為0，即使存在剩余空間，也不放大。 *flex-shrik：定義項目的縮小比例，默認值為1，空間不足，項目縮小;值為0時,空間不足,項目也不縮小. *flex-basis: 定義項目占據的主軸空間.默認auto或者自己添加像素; *align-self:定義單個項目在交叉軸的對齊方式. flex-start:交叉軸的起點 flex-end：交叉軸的終點 Center：交叉軸的中心
overflow-x：auto；超出部分在x軸的表現形式。
auto：自動；（如果超出，就自動以滾動條的形式顯示）
去滾動條： 加在具有overflow屬性的元素身上
::-webkit-scrollbar{
height：0；
}
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值 描述 測試
visible 不裁剪內容，可能會顯示在內容框之外。 測試
hidden 裁剪內容 - 不提供滾動機制。 測試
scroll 裁剪內容 - 提供滾動機制。 測試
auto 如果溢出框，則應該提供滾動機制。 測試
no-display 如果內容不適合內容框，則刪除整個框。 測試
no-content 如果內容不適合內容框，則隱藏整個內容。 測試swiper(.js).com
<table border="" width="" bgcolor="背景色" cellspacing="設置單元格間的距離" cellpadding="內填充：內容到邊框的距離" > <tr bgcolor="">[行] <td>td>[列] tr> table>
table身上的屬性： border：表格邊框 cellspacing：單元格間的間距 cellpadding：單元格的內容與其邊框的內邊距 bgcolor：表格的背景顏色 background：表格的背景圖片 width：表格寬度 height：表格高度 border-collaspe：collaspe：邊框合并，不疊加 cellspacing：0：邊框合并，但合并之后的邊框寬度等于 前兩個邊框寬度之和 caption：表格標題 background:表格背景圖 cellspacing:單元格之間的間隙寬度 align:表格的水平對齊方式，通常是left，center，right
<caption align="水平對齊方式" valign="標題與表格的相對位置">caption>
width：單元格寬度height：單元格高度 align：單元格內文本的對齊方式,通常是左，中，右 left，center，right valign：單元格內文本的對齊方式,通常是上，中，下 top，middle，bottom nowrap：在為設置單元格寬度時，當文本長度寬于單元格寬度，將要換行時，該標簽會使其不換行 <tr align="center" valign="bottom"> <td align="center" nowrap>手機空中免費充值td> <td width="100px">IP卡td> <td width="100px" bgcolor="#006400" valign="top">網游td> tr>
rowspan：跨行標簽，表示跨了多少行 colspan：跨列標簽，表示跨了多少列 <table border="3" bordercolor="plum" width="300" height="100" align="center" cellspacing="0"> <tr> <td rowspan="6" background="../img/4.jpg">td> <td rowspan="3">td> <td rowspan="2">td> <td>td> tr> <tr> <td >td> tr> <tr> <td rowspan="2">td> <td>td> tr> <tr> <td rowspan="3">td> <td>td> tr> <tr> <td rowspan="2">td> <td>td> tr> <tr> <td>td> tr> table>
thead：定義表格的表頭。 tbody：定義表格主體（正文）。 tfoot：定義表格的頁腳（腳注或表注）。 colgroup：標簽用于對表格中的列進行組合，以便對其進行格式化。 注意：不管thead、tbody、tfoot的代碼先后順序如何，html顯示時，始終是先顯示thead，再顯示tbody，最后顯示tfoot。 1、<thead> 內部必須擁有 <tr> 標簽！ 2、<tfoot> 元素內部必須包含一個或者多個 <tr> 標簽。 3、<tbody> 元素內部必須包含一個或者多個 <tr> 標簽。 4、必須在 table 元素內部使用這些標簽。 5、當不同行間的單元格合并時各單元格所在的行不要加tbody標簽。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1146.html
摘要：每條屬性聲明實現對網頁元素進行某種特定格式的設置，由一個屬性和一個值組成，屬性和值之間使用冒號連接，不同聲明之間用分號分隔，所有屬性聲明放到一對大括號中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...
摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
摘要：即元素脫離文檔流的布局，在頁面的任意位置顯示絕對定位脫離文檔流的布局，遺留下來的空間由后面的元素填充。相對定位不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區域。 1、描述 CSS 指層疊樣式表 (Cascading Style Sheets) Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理...
摘要：之所以寫這篇文章，就是為了告訴你如何寫出干凈整潔的代碼，能夠讓你的網頁在許多設備上都能快速正常的加載運行。在這個過程中，你能夠學會如何搭建易于維護和的網站以及。無論如何，盡量避免同時在和，或者和添加。 個人翻譯，歡迎轉載！ 英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/ 第一次翻...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
