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