Auto Lisp 标注子样式_CSS 核心样式
生活随笔
收集整理的這篇文章主要介紹了
Auto Lisp 标注子样式_CSS 核心样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS核心樣式
粗細font-weight
- 作用:設置文字是否加粗顯示
- 屬性名: font-weight, 屬于font屬性的一個單-屬性
- 屬性值有兩種方式:單詞類型、數字類型
單詞類型
數字類型
- 100-900之間的整百數字
- 數字越大，文字顯示越粗
- 其中400等價于normal, 700等價于bold
字體風格font-style
- 作用:設置文字是否斜體顯示
- 屬性名: font-style, 屬于font屬性的一個單- - 屬性
- 屬性值:單詞
行高line-height
- 作用:設置的是一行文字實際占有的高度，文字字號在行高中是垂直居中的
- 屬性名: line-height, 屬于font屬性的-一個單一屬性
字體綜合font
- 字體、字號、行高、加粗、斜體都是font綜合屬性的單一屬性
- font屬性五個單一屬性的值可以進行合寫，屬性值可以有2到多個，值之間用空格進行分隔
寫法一
- font進行綜合書寫時，必須有字號和字體參與，而且必須字號在前，字體在后，不能顛倒順序
如：font:14px "宋體"；
寫法二
- font屬性經常對字體、字號、行高進行合寫，書寫順序必須是字號、行高、字體，字號和行高之間必須用/進行分隔
如：font：14px/28px "宋體"
寫法三
- 如果font屬性需要設置加粗和斜體，兩個屬性值只能寫在最前面，兩個值之間可以互換位置，后面的字號、行高、字體不能更改位置
如： font： bold italic 14px/28px "宋體"；
水平對其 text-aligns
作用：設置文本水平方向的對齊
在盒子中，不論文本是單行還是多行，都會對應方向對齊
屬性值：三個方向的單詞
文本修飾text-decoration
- 作用:設置文本整體是否有線條的修飾效果
文本縮緊
- 作用:設置段落首行是否進行縮進
盒模型又叫框模型
- 包含了五個用來描述盒子位置、尺寸的屬性，分別是寬度width、高度height、內邊距、padding、邊框border、外邊距margin
常見盒模型區域 - 盒模型的屬性中，根據不同屬性的效果，可以劃分區域:
- 書寫元素內容區域: width+height
- 盒子可以實體化的區域: width+height+padding+border
- 盒子實際占位的位置: width+height+padding+border+margin
注：深刻理解盒模型圖
盒模型寬度 width - 作用：設置可以添加元素內容的區域寬度
特殊應用
如果一個元素不添加width屬性，默認屬性值為auto,不同的元素瀏覽器會根據其特點自動計算出實際寬度，例如<div>元素等獨占- -行的，其width屬性的值會自
動撐滿父元素的width區域，如果是<span>元素等不需要獨占一行的，其width屬性的值是內部元素內容自動撐開的寬度
盒模型高度 height
- 作用：設置可以添加元素內容的區域的寬度
- 特殊應用
如果一個元素不添加height屬性，默認屬性值為auto,瀏覽器會自動計算出實際
高度，也就是是內部元素內容自動撐開的高度。元素的高度自適應內部內容的高度
盒模型內邊距 padding
- 作用:設置的是元素的邊框內部到寬高區域之間的距離
- 特點:可以去加載背景，不能書寫嵌套的內容
- 屬性值:常用px為單位的數值
- padding是-個復合屬性，可以根據內邊距的方向不同劃分為四個方向的單屬性
- 單一屬性：書寫四個方向單一屬性時，一般是按照順時針規律書寫：上、右、下、左
簡寫 - 有時為了化簡書寫，-般習慣將四個方向的單一屬性進行合寫成padding屬性
- padding屬性值:可以有1-4個值，值之間用空格進行分隔
- 根據四個方向屬性值不同，padding有多種值的書寫表示方法
- 根據padding的屬性值的個數不同，區分了四種表示法:
制作三邊內邊距相同，一邊不同
- 方法①:使用四值法、三值法，進行屬性值設置
- 方法②:利用綜合屬性和單一屬性之間的層疊，對綜合屬性設置單值法，將四邊內邊距設置相同，在后面使用單一屬性寫法，再次定義某個方向的屬性值不同，可以實現單一屬性層疊綜合屬性的一部分
- 其中第二種用法更加靈活，推薦使用，使用過程中注意書寫順序，單一屬性必須書寫在后，才能層疊掉綜合屬性中重復的部分
盒模型 border
- 作用:設置的是內邊距外面的邊界區域，作為盒子的實體化的最外層
- 屬性值:由三個值組成，分為線的寬度、線的形狀、線的顏色
- border 屬性是一個復合屬性，根據劃分依據不同可以有兩種單一屬性的劃分分布
p {
border: 10px solid #f00;
}
按照屬性值的類型劃分 - 線寬：border-width
- 線型：border-style
- 顏色：bordr-colors
線寬border-width - 作用:設置邊框線的寬度
- 屬性值:常用px形式的數值，四個方向都有邊框,屬性值類似于padding,也有四種值的寫法
border-width {
10px 20px 30px 40px;
}
線型border-style - 作用:設置邊框的線條形狀
- 屬性值:形狀的單詞，總體也是類似padding的綜合屬性寫法
- 屬性值的單詞可能性:none solid dashed dotted double grove ridge inset outset 重點記住前三個
邊框顏色border-color - 作用:設置邊框的顏色
- 屬性值:顏色名或顏色值，整體類似padding綜合屬性寫法
根據邊框的方向劃分 - 上邊框: border-top
- 右邊框: border-right
- 下邊框: border- bottom
- 左邊框: border-left
- 每個單一屬性都必須與復合屬性border一致，設置三個屬性值
- 根據方向和類型，進一步細分類似border-top的單一方向屬性，也可以根據屬性值類型繼續進行單一屬性劃分
- 單一屬性寫法: border-方向-類型。
- 注意:細分時必須先寫方向劃分再寫類型劃分，否則屬性名錯誤
border-top-color: #000;
盒模型 margin
- body{
padding: 0;
margin: 0;
} - 和padding 差不多
盒模型 清除默認樣式
- 大部分標簽都有一個瀏覽器加載的默認樣式，會對布局造成一些影響。為了避免默認樣式對整體布局效果造成影響，一定要清除默認樣式
- 盒模型屬性中內外邊距:大部分容器級標簽都有默認邊距，要么用標簽選擇器的并集方式，要么通配符清除
- <ul>和<ol>兩種列表有默認的列表前綴:清除list--style屬性
<a>標簽的默認樣式，順帶設置頁面中常用的a的公共樣式:設置color和text-decoration - 清除默認加粗效果:設置font-weight
盒模型高度height應用
- 根據不同的需求，高度屬性可以設置也可以不設置
- 如果設置了高度:盒子占有的高度位置就確定死了，后面的同級元素會緊挨著加載
- 如果不設置高度:會根據標簽內部內容高度自動撐開
- 以<div>標簽為例，根據情況不同選擇是否設置高度
overflow屬性 - 設置了高度的盒子，如果內部元素的加載高度超過父級，會出現溢出效果。可以通過一個溢出的屬性overflow,進行溢出部分內容的顯示效果設置
必須不設置高度
- 要求盒子高度必須自適應內部內容的高度
- 或者設置height的屬性值是自動的
盒模型擴展-居中
文本水平居中
- 水平居中: text-align屬性
- 不論單行或多行都可以設置
文本垂直居中 - 單行文本垂直居中: 讓文字行高line-height等于盒子高度heigh
- 多行文本垂直居中: 讓元素高度自適應或者正好等于多行文字的高度，設置元素內邊距上下值相同
元素垂直居中 - 一個元素內部嵌套的子元素，在父元素中居中
- 垂直居中:與多行文字類似，讓父元素高度自適應，子元素高度自動撐開父級的高度，再給父元素設置相同的上下邊距
元素水平居中 - 針對類似<div>樣式上必須獨占一行的盒子，如果子盒子寬度低于父盒子寬度，可以設置子盒子的margin值，水平方向的值都設置為auto
- 原因: auto 只在水平方向有作用，水平方向的margin如果設置為auto,邊距會自動無限增大，直到撐滿整個父元素除了子元素寬度之外剩余的區域，如果兩個水平
方向都是auto,兩邊都要無限大，只能達到一個平衡，兩邊距離相同，導致盒子居中
盒模型擴展-父子盒模型
- 一般情況下，一個父元素內部可以放一個或多個子元素，而且多個子元素要排成行顯示，必須保證父元素的寬度一定要足夠(不考慮溢出情況)，需要遵循一個設
- 置尺寸的規律:所有子元素的寬度加在一起不能大于父元素的寬度width
- 父元素的width≥所有子元素width + padding + border + margin
- 如果不滿足條件:要么多余的子元素掉下來不能在一-排， 要么溢出父元素
- 解決方法： 計算或量取尺寸時一定要計算準確，一像素都不能偏差
特殊情況:盒模型自動內減 - 父子盒模型中，只有一個子元素，且子元素是類似<div>標簽必須占一行的
- 不設置子元素的width屬性，子元素的width屬性值會自動加載父級元素的width
- 如果同時設置了子元素水平方向的padding和border、margin, 不需要手動去進行內減，子元素的width會自動收縮尺寸
- 子元素所有的水平方向的位置所有屬性的加和等于父元素的width
margin塌陷現象
- margin塌陷現象:在垂直方向如果有兩個元素的外邊距有相遇的，瀏覽器中加載的
- 真正的外邊距不是兩個間距的加和，而是兩個邊距中值較大的，邊距值小的塌陷到了邊距值大的值內部
同級元素塌陷 - 上面的元素有下邊距，下面的元素有上邊距，兩個邊距相遇，真正的盒子間距離是較大的那個值
父子元素塌陷 - 父子元素之間也會出現margin塌陷，父元素和子元素都設置了同方向的
- margin-top值，兩個屬性之間沒有其他的內容進行隔離，導致兩個屬性相遇，發生margin塌陷
- 父盒子沒設置margin-top時,本身父元素與上一個元素的距離是0，子元素如果設置了垂直方向的上邊距，會帶著父級一起掉下來
解決margin塌陷問題的方法 - ①同級元素:如果兩個元素垂直方向有間距，只需要設置給一個元素，不要進行拆分
- ②父子元素:讓兩個邊距不要相遇，中間可以使用父元素border或padding將邊距分隔開;更加常用的方法，父子盒模型之間的距離就不要用兒子的margin去踹出來，而是父級的padding擠出來
- 另外注意：水平方向的margin沒有塌陷現象
標準文檔流
- 在我們遇到的HTML元素中，有的標簽元素如<div>、<p>等在瀏覽器中加載時必須獨自占滿一行，有的標簽元素如<a>、<span>等則不會獨占一行，原因是什么?
標準文檔流 - 標準文檔流，指的是元素排版布局過程中，元素會默認自動從左往右，從上往下的流式排列方式。前面內容發生了變化，后面的內容位置也會隨著發生變化
- HTML就是一種標準文檔流文件
- HTML中的標準文檔流特點通過兩種方式體現:微觀現象和元素等級
微觀現象 - 1.空白折疊現象
- 2.文字類的元素日過排在一行會出現一種高低不齊、底邊對齊的效果
- 3.自動換行，元素內一行內容寫滿元素的width時會自動進行換行
元素等級 - 在標準流中，大部分元素是區分等級的，習慣將元素劃分為幾種常見的加載級別:
塊級元素、行內元素、行內塊元素等 - 塊級元素:大部分容器級標簽包括p標簽都是塊級元素，比如<div>、 <h1>等
- 行內元素:大部分的文本級柝笠，比如<span>、 <a>、<b>等
- 行內塊元素:比如<img>、<input>等。
塊級元素 - a、塊級元素可以設置寬高，在瀏覽器中正常加載
- b、塊級元素必須獨占一行，不能與其他任何標簽并排一行
- C、塊級元素如果不設置寬度，會自動撐滿父級的width區域;高度不設置，會被內容自動撐開高度
行內元素 - a、行內元素不能正常加載寬度和高度屬性，其他的盒模型屬性雖然能設置，但是容易出現加載問題
- b、行內元素可以與其他的行內或行內塊元素并排一行顯示
- c、行內元素不論是否設置寬高，寬度和高度都只能被內容自動撐開
行內塊元素 - a、行內塊元素可以設置寬度和高度
- b、行內塊元素可以與其他的行內或行內塊并排一行顯示
- C、行內塊元素如果不設置寬高，要么以原始尺寸加載要么被內容自動撐開
- d、行內塊依舊具有標準流的微觀性質，例如空白折疊現象
顯示模式-display
- 標準流中的元素有自己默認的瀏覽器加載模式，但是加載模式不是-成不變的，后期可以通過display屬性更改一個標簽的顯示模式
- 屬性值:元素根據屬性值不同，可以加載對應元素等級的顯示模式的特點
屬性值
脫離標準流
- display屬性更改的顯示模式并沒有改變標準流本質性質，頁面還是只能從，上往下加載，存在空白折疊現象等微觀性質。要想實現更多的界面布局效果需要脫離標準流的限制
- 標簽元素脫離標準流的方法包括:浮動、絕對定位、固定定位
浮動定義
- 浮動是一種非常重要的布局屬性
- 屬性名：float、漂流、浮動的意思
- 屬性值： left： 左浮動 right： 右浮動
- 作用： 讓元素脫離標準流，同一級的浮動的元素可以并排在一起顯示
浮動的元素脫離標準流 - 標準文檔流特點:區分行塊
- 塊級元素:可以設置寬高，必須獨占一行
- 行內元素:不能設置寬高，可以并排一行
- 浮動的元素脫離了標準流的限制，具備行塊二象性，浮動的元素可以設置寬高，還可以并排一行，而且不會有空白折疊現象，如果元素不設置寬高，可以被元素內容
自動撐開
浮動性質-依次貼邊 - 浮動屬性值: left、 right。
- 浮動方向設置不同，進行布局時，加載位置方向不同
- 以left為例:
- 父元素寬度足夠，所有子元素會按照HTML書寫順序，依次向左進行貼邊，父元素
左邊←子元素1←子元素2←子元素3←子元素4
貼邊性質應用 - 利用浮動的這個依次貼邊性質，可以完成多種網頁布局效果。例如:
- ① 上述平均分布表格效果
- ②導航欄效果
- ③常見的電商或企業網站布局
浮動性質 - 沒有margin塌陷、字圍現象 - margin 塌陷現象出現在標準流中，浮動元素已經脫離標準流，不再具有margin塌陷現象
浮動的元素讓出了標準流的位置 - 元素浮動之后，脫離了標準流，會將原來占有的標準流位置讓給后面的一個同級元素
- 由于瀏覽器中有兼容性的問題，不會使用這種屬性制作壓蓋效果
- 如果沒有特殊需求，不允許一個父元素中的子元素有的浮動有的不浮動，同級元素中有一個浮動其他的也要浮動
字圍現象 - 與前面壓蓋效果結構類似，同級元素中前面的元素浮動，后面的元素不浮動，不浮動的元素內部還有一些文字，浮動的藍盒子會壓蓋住粉盒子的一部分，但是文字內
容不會被蓋住，粉盒子中的文字會讓開藍盒子位置，圍繞它進行加載
浮動的問題 - 標準流中的元素，不設置高度的情況下，都能被內部的標準流元素自動撐高，如果內部的子元素進行了浮動，浮動的子元素是撐不高標準流父親的
清除浮動的方法 - 方法一：
- 清除浮動一： height
- 給標準流的父元素強制給一個合適的高度
- 解決:父元素有了高度，前面的浮動不能影響后面元素的標準流位置和貼邊
- 問題:父元素高度不是自適應，一旦子元素高度變化，問題可能再次出現
- 清除浮動二： clear屬性
- clear,清除
- 作用:清除標簽元素自身受到的前面的浮動元素的影響
- 屬性值:
left 清除前面左浮動帶來的影響
right 清除前面右浮動帶來的影響
both 清除前面所有浮動帶來的影響
給標準流父元素添加clear屬性，父元素不受前面浮動影響，不會再占有浮動讓出的位置 - clear: both
- 解決:浮動元素影響后面元素標準流位置和貼邊
- 問題:父元素不能高度自適應，兩個父元素之間如果有margin效果不正確
- 清清除浮動三:隔墻法
- 外墻法:在兩個大的父盒子之間，添加一個空的<div>標簽，標簽上帶有clear:both屬性
- 解決:浮動影響后面元素標準流位置和貼邊，模擬父元素間的距離
- 問題:父元素沒有高度自適應
內墻法解決了
- 內墻法:在父元素內部，所有的浮動子元素后面添加一個空的元素，標簽高度為0，添加clear屬性
- 解決:父元素高度自適應，浮動影響后面的元素位置和貼邊
- 缺點:浮動是css樣式屬性帶來的問題，內墻法使用HTML結構去輔助解決問題，如果頁面中浮動元素很多，需要添加多個沒有語義的空標簽，造成HTML結構的冗余
- 清除浮動四： 偽類
- 本質是使用偽類方法利用css代碼書寫-堵內墻
- 偽類選擇器:通過選中的標簽添加偽類，去選中標簽的某個狀態或位置
- :after:這個偽類表示選中的是某個標簽內部的最后的位置
- 書寫方法:前面必須加普通的選擇器，后面連續書寫偽類名稱
- 將偽類添加給一個選中父盒子的選擇器后面，一般給需要清除浮動的父盒子設置一個clearfix的類名
- .clearfix:after{
content: "1";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
- 清除浮動五： 溢出隱藏
- 小偏方:給內部有浮動子元素的父元素添加溢出隱藏overflow: hidden;屬性，可以解決浮動的所有問題
- 補充：overflow屬性，元素高度設置后，overflow：hidden；效果是將超過高度的部分直接隱藏
- 高度自適應原因:一個元素沒有設置高度，同時設置了溢出隱藏，瀏覽器在加載盒子尺寸時，遇到溢出隱藏瀏覽器會強制性去檢索內部的子元素的高度，不論子元素
是標準流還是浮動，都會將最高的高度作為父盒子高度加載 - 浮動影響后面的元素:父元素有了高度后，可以管理住內部所有的浮動元素，不會延伸到后面標簽中影響貼邊
- 總結
- 如果父元素高度是固定的，建議使用height屬性解決
- 如果父元素高度需要自適應，建議使用overflow屬性解決浮動問題
a標簽的偽類
- 概念：
- 偽類和類之間有一定的相似之處，也存在明顯的區別。
- 普通的類:必須給標簽設置對應的class屬性值，才能選中標簽，而且類選擇器后面添加的屬性，會立即加載到瀏覽器之上
- 偽類:不需要給標簽添加任何屬性，偽類名都是語法提前規定好的，書寫時偽類必須搭配其他選擇器使用，偽類選擇器后面添加的樣式不一-定立即加載到瀏覽器之上，
只有用戶觸發了對應的行為，偽類的樣式才會立即加載 - 偽類選擇器的權重與普通的類選擇器相同
- 偽類選擇器寫法：前面是普通的選擇器，后面緊跟：偽類名
- <a>標簽的偽類
- <a>標簽可以根據用戶行為不同，劃分為四種狀態，通過<a>標簽的偽類可以將四種狀態選中設置為不同的樣式效果，用戶觸發對應行為，就可以加載對應的樣式
- a:link {
color:gray; ----- 訪問前狀態
} - a:visited {
color:cyan; ----- 訪問后狀態
} - a:link {
color:red; ----- 鼠標懸浮狀態
} - a:link {
color:yellow; ----- 訪鼠標點擊狀態
}
<a>標簽的偽類書寫順序
- <a>標簽上可能會同時觸發2到3個狀態，每個狀態的屬性都會進行加載，相同的屬性之間會發生層疊
- 偽類的權重是相同的，只能根據書寫順序，后寫的層疊先寫的，所以偽類書寫順序非常重要
- 要想讓每個偽類的狀態正常加載，書寫順序必須是:訪問前link、訪問后visited、鼠標移.上hover、鼠標點擊active
- 為了方便記憶，利用愛恨準則: love hate
<a>標簽的偽類實際應用 - 一般會將訪問前和訪問后狀態設置為一樣的效果，保證了頁面的統一性，可以選擇性的設置鼠標移上和鼠標點擊狀態
a:link,a:visited {
color: #666;
}
a:hover {
color: #f00;
} - 更加常用的一種設置方式如下:
- <a>標簽任何普通的選擇器，可以同時選中四種狀態，可以將四種狀態設置為相同的樣式，屬性可以設置所有的<a>默認顯示樣式的屬性，包括盒模型、文字等
- a:hover偽類選擇器:設置鼠標移上時不一樣的樣式屬性
css常用樣式-背景屬性一
- 背景顏色background-color
- 屬性名: background-color
- 作用:在盒子區域添加背景顏色的修飾。
- 加載區域:在border及以內加載背景顏色
- 屬性值:顏色名、顏色值
- 背景圖片background-image
- 屬性名: background-image
- 作用:給盒子添加圖片的背景修飾
- 加載范圍:默認的加載到邊框及以內部分。后期如果圖片不重復加載，加載從border以內開始
- 屬性值： URL（圖片路徑）
url: uniform resource locator,統一資源定位符，小括號內部書寫查找圖片的路徑
- 背景重復background-repeat
- 屬性名: background-repeat
- 作用:設置添加的背景圖是否要在盒子中重復進行加載
- 根據屬性值不同，有四種重復加載方式 repeat no-repeat repeat-x repeat-y
- 背景定位background-position
- 屬性名: background-position
- 作用:主要用于設置不重復的圖片在背景區域的加載開始位置
- 屬性值:分為三種寫法，單詞表示法、像素表示法、百分比表示法。不論哪種寫法，屬性值都有兩個，值之間用空格分隔
- 第一個屬性值：表示背景圖片在水平方向的位置
- 第二個屬性值：表示背景圖片在垂直方向的位置
- 單詞表示法
- 屬性值都是使用代表方向的單詞進行書寫
- 水平方向可選單詞: left、 center、 right
- 垂直方向可選單詞: top、 center、bottom
- 單詞表示圖片與盒子背景區域進行對應方向的對齊
- 像素表示法
- 使用像素值作為背景定位的屬性值
- 第一個屬性值：像素是幾，表示背景圖片左上角針對border以內的左上頂點水平方向位移的距離
- 第二個屬性值：像素是幾，表示背景圖片左上角針對border以內的左上頂點垂直方向位移的距離
- 像素表示法
- 像素值區分正負，正負代表位移方向不同:
- 正數:表示圖片針對盒子的原點向右、向下移動
- 負數:表示圖片針對盒子的原點向左、向上移動
- 像素值區分正負，正負代表位移方向不同:
- 百分比表示法
- 百分比表示法使用百分比數字作為屬性值
- 100%代表的數值:
水平方向，等價于盒子的border以內的背景區域寬度減去圖片的寬度
垂直方向，等價于盒子的border以內的背景區域寬度減去圖片的寬度
- 百分比表示法
- 背景附著background-attachment
- 屬性名: background- attachment
- 作用:設置的是背景圖片是否要隨著頁面或者盒子的滾動而滾動
- 背景附著background-attachment
- 綜合寫法background
- background屬性可以將五個單屬性的值進行合寫
- 屬性值:可以有1-5個屬性值，值之間用空格進行分隔，背景定位的兩個屬性值算作
- 一個屬性值，不能被分開也不能顛倒順序。五個屬性值之間可以互換位置
例如： background: url() no-repeat center top fixed;
- 注意事項
- 注意1: 如果屬性值沒有設置完全，其他沒有設置的單一屬性會按照默認值加載
- 注意2: 如果想去層疊綜合屬性中的一部分，其他的屬性值保持不變，最好使用單一屬性寫法層疊
場景一: 替換插入圖
- <h1>標簽是權重最高的標簽，一般會在內部書寫最重要的內容，比如logo圖片、最大的標題等
- 另外<h1>內部的文字，可以幫助提高SEO搜索排名
- 在設置的是logo圖片時候，如果使用插入圖，就不能書寫搜索關鍵字
背景圖替換插入圖方法
- 如果想解決SEO問題，可以將HTML結構中，插入圖換成搜索關鍵字，然后使用css添加背景圖給<a>標簽或<h1>標簽文字隱藏方法
- ①將字號設置為0。IE8 及以.上或高版本瀏覽器可以隱藏文字，但是IE7及以下有兼容問題
- ②可以設置給<a>標簽一個text-indent屬性，屬性值為負的很大的值，文字會走到盒子外部，直接再設置溢出隱藏屬性，將溢出文字隱藏
場景二：padding區域背景圖
- 制作方法：
在一個盒子中有背景圖部分，而且有文字內容，文字會讓開背景圖區域進行加載，背景區域應該使用padding擠出位置
四個方向padding都可能用于添加背景圖
例如 padding-left區域背景：
.news li {
padding-left: 25px;
background: url(images/s2.png) no-repeat left center;
}
場景三：精靈圖技術
- 當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶
- 然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度
為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術(也稱CSS Sprites、CSS 雪碧)
css精靈 - CSS精靈是一種處理網頁背景圖像的方式。
它將-個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應用于網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖
像即可全部展示出來
css精靈的技術依據 - ①將網頁中需要用到的小尺寸背景圖制作成一張背 景透明的png圖片
- ②利用背景定位技術，將精靈圖的每個小圖片加載到對應的標簽上
制作精靈圖的注意事項 - 1.精靈圖上放的都是小的裝飾性質的背景圖片，插入圖片不能往上放
- 2.精靈圖的寬度取決于最寬的那個背景圖片的標簽寬度
- 3.精靈圖可以橫向擺放也可以縱向擺放，但是每個圖片之間必須留夠足夠的空白，保證背景圖片加載到一個標簽內部時，不能出現多余內容
- 4.在精靈圖的最底端，盡量留一點空白，方便以后添加其他精靈圖
- 精靈圖在線工具可以快速查找
css3新增背景屬性 - 背景半透明
- css3支持背景半透明的寫法，顏色值增加了一種ragb模式
- rgba模式:在rgb基礎.上增加了一個不透明度的設置，不透明度alpha取值范圍在0-1之間，0表示完全透明，1表示完全不透明，0.5 表示半透明
- 半透明其他應用
同樣，可以給文字和邊框透明，都是ragb的格式來寫
背景縮放 background-size - 通過background-size設置背景圖片的尺寸，就像我們設置<img>的尺寸一樣，在移動Web開發中做屏幕適配應用非常廣泛
- 多背景
- CSS3中規定，一個盒子上，可以添加多個背景圖片
- background-image的屬性值書寫時，以逗號分隔多背景的URL路徑地址
- 注意:背景加載時，先寫的背景壓蓋后寫的背景圖片
定位屬性
- 作用：設置定位的元素，他需要根據某一個參考元素發生位置的偏移
- 偏移量屬性
- 定位的元素要想發生位置的移動，必須搭配偏移量屬性進行設置
- 水平方向: left、 right
- 垂直方向: top、bottom
- 屬性值:常用px為單位的數值，或者百分比
相對定位 relative
- 相對定位的性質
- 性質:相對定位的元素不脫離標簽的原始狀態(標準流、 浮動)，不會讓出原來占有的位置
- 元素顯示效果上，原位留坑，形影分離
- 注意事項
- 注意1:偏移量屬性的值是區分正負的
- 正數：表示偏移方向與屬性名相反
- 負數： 表示偏移方向與屬性名相同
- 注意②:同一個方向，不能設置兩個偏移量屬性，如果水平方向同時設置了left 和right屬性，只會加載left屬性。垂直方向只加載top屬性
- 建議：書寫時從水平方向和垂直方向各挑一個屬性進行組合
- 注意③:由于相對定位的參考元素是自身，left 的正值等價于right 的負值，top 的正值等價于bottom的負值
- 為了方便記憶，可以只選擇left、top組合
絕對定位
- 屬性值: absolute, 絕對的意思
- 參考元素:參考的是距離最近的有定位的祖先元素，如果祖先都沒有定位，參考<body>
- 必須搭配偏移量屬性才會發生位置移動
- 性質：絕對定位的元素脫離標準流，會讓出標準流位置，可以設置寬高，也可以隨時定義位置，絕對定位的元素不設置寬高只能被內容撐開
- 注意1: 絕對定位的參考元素是不固定的，不同的參考元素以及不同的偏移量組合，會導致絕對定位元素的參考點不同，具體位移效果不同
- 注意2: 在絕對定位中，由于參考點不同，left正值不再等價于right的負值
- <body>為參考元素的參考點
- 以為參考元素時，參考點的確定與偏移量方向有關。第一，如果有top參與的定位，參考點就是<body>頁面的左上頂點和右上頂點。自
身的對比點是盒子的所有盒模型屬性最外面的左上角或右上角 - 第二，如果有bottom參與的絕對定位，參考點是<body>頁面首屏的左下頂點或右下頂點。對比點是盒子的所有盒模型屬性最外面的左下角或右下角
- 實際應用中，如果以<body>為參考元素，不同分辨率的瀏覽器中，絕對定位的元素位置是不同的，所以較少使用<body>作為參考元素
- 以為參考元素時，參考點的確定與偏移量方向有關。第一，如果有top參與的定位，參考點就是<body>頁面的左上頂點和右上頂點。自
- 祖先級為參考元素
- 如果祖先級中有定位的元素，就不會去參考
- 參考元素： 參考的是祖先元素中任意定位的，在html結構中距離目標最近的祖先
- 根據絕對定位的參考元素的定位類型不同，有三種定位組合方式:子絕父相、子絕父絕、子絕父固，由于相對定位的祖先級位置更穩定，大多使用子絕父相的情況
固定定位
- 屬性值: fixed, 固定的意思
- 參考元素:瀏覽器窗口
- 參考點:瀏覽器窗口的四個頂點。跟偏移量組合方向有關
- 由于瀏覽器窗口的四個頂點位置不會發生變化，會導致固定定位的元素會始終顯示在定位位置
- 性質：固定定位的元素脫離標準流，讓出標準流位置，可以設置寬高，根據偏移量屬性可以任意設置在瀏覽器窗口的位置，固定定位的元素會始終顯示在瀏覽器窗口上
定位應用、壓蓋、居中
positionL: absolute; left: 50%; width: 100px; margin-left: -50px;- 注意：不論子盒子的寬度是否比參考元素更寬，都能使用以上方法進行居中設置
擴展應用 - ①解決標準流中，寬的子盒子在窄的父盒子中的居中，可以設置大的子盒子相對定位，利用相對定位居中的方法進行居中
- ②浮的元素居中，在不改變原始浮動狀態情況下，可以利用相對定位居中方法
定位壓蓋順序 z-index
- 默認壓蓋順序
- 定位的元素不區分定位類型，都會去壓蓋標準流或者浮動的元素
- 如果都是定位元素，在html中后寫的定位壓蓋先寫的定位
- 自定義壓蓋順序注意事項
- ①屬性值大的會壓蓋屬性值小的，設置z-index屬性的會壓蓋沒有設置的
- ②如果屬性值相同，比較HTML書寫順序，后寫的壓蓋先寫的
- ③z-index屬性只能設置給定位的元素才會生效，如果給沒有定位的元素設置，不會生效
- ④父子盒模型中，如果父子盒子都進行了定位，與其他的父子級有壓蓋的部分:父級盒子:如果不設置z-index,后寫的壓蓋先寫的;如果設置了z-index,值大的壓蓋值小
的
靜態輪播圖
鼠標變銷售的狀態： cursorc: pointer
總結
以上是生活随笔為你收集整理的Auto Lisp 标注子样式_CSS 核心样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mot数据集_谈谈ReID与MOT的关系
- 下一篇： background复合属性顺序_CSS