CSS核心樣式

粗細(xì)font-weight

• 作用:設(shè)置文字是否加粗顯示
• 屬性名: font-weight, 屬于font屬性的一個(gè)單-屬性
• 屬性值有兩種方式:單詞類(lèi)型、數(shù)字類(lèi)型

單詞類(lèi)型

數(shù)字類(lèi)型

• 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)行合寫(xiě)，屬性值可以有2到多個(gè)，值之間用空格進(jìn)行分隔

寫(xiě)法一

• font進(jìn)行綜合書(shū)寫(xiě)時(shí)，必須有字號(hào)和字體參與，而且必須字號(hào)在前，字體在后，不能顛倒順序
  如：font:14px "宋體"；

寫(xiě)法二

• font屬性經(jīng)常對(duì)字體、字號(hào)、行高進(jìn)行合寫(xiě)，書(shū)寫(xiě)順序必須是字號(hào)、行高、字體，字號(hào)和行高之間必須用/進(jìn)行分隔
  如：font：14px/28px "宋體"

寫(xiě)法三

• 如果font屬性需要設(shè)置加粗和斜體，兩個(gè)屬性值只能寫(xiě)在最前面，兩個(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ū)域:
• 書(shū)寫(xiě)元素內(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)撐滿(mǎn)父元素的width區(qū)域，如果是<span>元素等不需要獨(dú)占一行的，其width屬性的值是內(nèi)部元素內(nèi)容自動(dòng)撐開(kāi)的寬度

盒模型高度 height

• 作用：設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度
• 特殊應(yīng)用
  如果一個(gè)元素不添加height屬性，默認(rèn)屬性值為auto,瀏覽器會(huì)自動(dòng)計(jì)算出實(shí)際
  高度，也就是是內(nèi)部元素內(nèi)容自動(dòng)撐開(kāi)的高度。元素的高度自適應(yīng)內(nèi)部?jī)?nèi)容的高度

盒模型內(nèi)邊距 padding

• 作用:設(shè)置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離
• 特點(diǎn):可以去加載背景，不能書(shū)寫(xiě)嵌套的內(nèi)容
• 屬性值:常用px為單位的數(shù)值
• padding是-個(gè)復(fù)合屬性，可以根據(jù)內(nèi)邊距的方向不同劃分為四個(gè)方向的單屬性
• 單一屬性：書(shū)寫(xiě)四個(gè)方向單一屬性時(shí)，一般是按照順時(shí)針規(guī)律書(shū)寫(xiě)：上、右、下、左
  簡(jiǎn)寫(xiě)
• 有時(shí)為了化簡(jiǎn)書(shū)寫(xiě)，-般習(xí)慣將四個(gè)方向的單一屬性進(jìn)行合寫(xiě)成padding屬性
• padding屬性值:可以有1-4個(gè)值，值之間用空格進(jìn)行分隔
• 根據(jù)四個(gè)方向?qū)傩灾挡煌?#xff0c;padding有多種值的書(shū)寫(xiě)表示方法
• 根據(jù)padding的屬性值的個(gè)數(shù)不同，區(qū)分了四種表示法:

四值法 p {padding:10px 20px 30px 40px;} 上右下左

三值法 p {padding:10px 20px 40px;}上 左右 下

二值法 p {padding:10px 20px;} 上下 左右

單值法 設(shè)置屬性值只有一個(gè)，分配方向上右下左，四邊的值相同

制作三邊內(nèi)邊距相同，一邊不同

• 方法①:使用四值法、三值法，進(jìn)行屬性值設(shè)置
• 方法②:利用綜合屬性和單一屬性之間的層疊，對(duì)綜合屬性設(shè)置單值法，將四邊內(nèi)邊距設(shè)置相同，在后面使用單一屬性寫(xiě)法，再次定義某個(gè)方向的屬性值不同，可以實(shí)現(xiàn)單一屬性層疊綜合屬性的一部分
• 其中第二種用法更加靈活，推薦使用，使用過(guò)程中注意書(shū)寫(xiě)順序，單一屬性必須書(shū)寫(xiě)在后，才能層疊掉綜合屬性中重復(fù)的部分

盒模型 border

• 作用:設(shè)置的是內(nèi)邊距外面的邊界區(qū)域，作為盒子的實(shí)體化的最外層
• 屬性值:由三個(gè)值組成，分為線的寬度、線的形狀、線的顏色
• border 屬性是一個(gè)復(fù)合屬性，根據(jù)劃分依據(jù)不同可以有兩種單一屬性的劃分分布
  p {
  border: 10px solid #f00;
  }
  按照屬性值的類(lèi)型劃分
• 線寬：border-width
• 線型：border-style
• 顏色：bordr-colors
  線寬border-width
• 作用:設(shè)置邊框線的寬度
• 屬性值:常用px形式的數(shù)值，四個(gè)方向都有邊框,屬性值類(lèi)似于padding,也有四種值的寫(xiě)法
  border-width {
  10px 20px 30px 40px;
  }
  線型border-style
• 作用:設(shè)置邊框的線條形狀
• 屬性值:形狀的單詞，總體也是類(lèi)似padding的綜合屬性寫(xiě)法
• 屬性值的單詞可能性:none solid dashed dotted double grove ridge inset outset 重點(diǎn)記住前三個(gè)
  邊框顏色border-color
• 作用:設(shè)置邊框的顏色
• 屬性值:顏色名或顏色值，整體類(lèi)似padding綜合屬性寫(xiě)法
  根據(jù)邊框的方向劃分
• 上邊框: border-top
• 右邊框: border-right
• 下邊框: border- bottom
• 左邊框: border-left
• 每個(gè)單一屬性都必須與復(fù)合屬性border一致，設(shè)置三個(gè)屬性值
• 根據(jù)方向和類(lèi)型，進(jìn)一步細(xì)分類(lèi)似border-top的單一方向?qū)傩?#xff0c;也可以根據(jù)屬性值類(lèi)型繼續(xù)進(jìn)行單一屬性劃分
• 單一屬性寫(xiě)法: border-方向-類(lèi)型。
• 注意:細(xì)分時(shí)必須先寫(xiě)方向劃分再寫(xiě)類(lèi)型劃分，否則屬性名錯(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

/* 清除默認(rèn)樣式 *//* body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li {margin: 0;padding: 0;} */* {margin: 0;padding: 0;}ul,ol {list-style: none;}a {color: #333;text-decoration: none;}h1,h2,h3,h4,h5,h6,b,strong {font-weight: normal;}/* 設(shè)置初始化的公共樣式 */body {color: #333;font-size: 14px;font-family: Arial,"宋體";}</style>

盒模型高度height應(yīng)用

• 根據(jù)不同的需求，高度屬性可以設(shè)置也可以不設(shè)置
• 如果設(shè)置了高度:盒子占有的高度位置就確定死了，后面的同級(jí)元素會(huì)緊挨著加載
• 如果不設(shè)置高度:會(huì)根據(jù)標(biāo)簽內(nèi)部?jī)?nèi)容高度自動(dòng)撐開(kāi)
• 以<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)部嵌套的子元素，在父元素中居中
• 垂直居中:與多行文字類(lèi)似，讓父元素高度自適應(yīng)，子元素高度自動(dòng)撐開(kāi)父級(jí)的高度，再給父元素設(shè)置相同的上下邊距
  元素水平居中
• 針對(duì)類(lèi)似<div>樣式上必須獨(dú)占一行的盒子，如果子盒子寬度低于父盒子寬度，可以設(shè)置子盒子的margin值，水平方向的值都設(shè)置為auto
• 原因: auto 只在水平方向有作用，水平方向的margin如果設(shè)置為auto,邊距會(huì)自動(dòng)無(wú)限增大，直到撐滿(mǎn)整個(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
• 如果不滿(mǎn)足條件:要么多余的子元素掉下來(lái)不能在一-排， 要么溢出父元素
• 解決方法： 計(jì)算或量取尺寸時(shí)一定要計(jì)算準(zhǔn)確，一像素都不能偏差
  特殊情況:盒模型自動(dòng)內(nèi)減
• 父子盒模型中，只有一個(gè)子元素，且子元素是類(lèi)似<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將邊距分隔開(kāi);更加常用的方法，父子盒模型之間的距離就不要用兒子的margin去踹出來(lái)，而是父級(jí)的padding擠出來(lái)
• 另外注意：水平方向的margin沒(méi)有塌陷現(xiàn)象

標(biāo)準(zhǔn)文檔流

• 在我們遇到的HTML元素中，有的標(biāo)簽元素如<div>、<p>等在瀏覽器中加載時(shí)必須獨(dú)自占滿(mǎn)一行，有的標(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.文字類(lèi)的元素日過(guò)排在一行會(huì)出現(xiàn)一種高低不齊、底邊對(duì)齊的效果
• 3.自動(dòng)換行，元素內(nèi)一行內(nèi)容寫(xiě)滿(mǎn)元素的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)撐滿(mǎn)父級(jí)的width區(qū)域;高度不設(shè)置，會(huì)被內(nèi)容自動(dòng)撐開(kāi)高度
  行內(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)撐開(kāi)
  行內(nèi)塊元素
• a、行內(nèi)塊元素可以設(shè)置寬度和高度
• b、行內(nèi)塊元素可以與其他的行內(nèi)或行內(nèi)塊并排一行顯示
• C、行內(nèi)塊元素如果不設(shè)置寬高，要么以原始尺寸加載要么被內(nèi)容自動(dòng)撐開(kāi)
• 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)撐開(kāi)
  浮動(dòng)性質(zhì)-依次貼邊
• 浮動(dòng)屬性值: left、 right。
• 浮動(dòng)方向設(shè)置不同，進(jìn)行布局時(shí)，加載位置方向不同
• 以left為例:
• 父元素寬度足夠，所有子元素會(huì)按照HTML書(shū)寫(xiě)順序，依次向左進(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)類(lèi)似，同級(jí)元素中前面的元素浮動(dòng)，后面的元素不浮動(dòng)，不浮動(dòng)的元素內(nèi)部還有一些文字，浮動(dòng)的藍(lán)盒子會(huì)壓蓋住粉盒子的一部分，但是文字內(nèi)
  容不會(huì)被蓋住，粉盒子中的文字會(huì)讓開(kāi)藍(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)四： 偽類(lèi)
  • 本質(zhì)是使用偽類(lèi)方法利用css代碼書(shū)寫(xiě)-堵內(nèi)墻
  • 偽類(lèi)選擇器:通過(guò)選中的標(biāo)簽添加偽類(lèi)，去選中標(biāo)簽的某個(gè)狀態(tài)或位置
  • :after:這個(gè)偽類(lèi)表示選中的是某個(gè)標(biāo)簽內(nèi)部的最后的位置
  • 書(shū)寫(xiě)方法:前面必須加普通的選擇器，后面連續(xù)書(shū)寫(xiě)偽類(lèi)名稱(chēng)
  • 將偽類(lèi)添加給一個(gè)選中父盒子的選擇器后面，一般給需要清除浮動(dòng)的父盒子設(shè)置一個(gè)clearfix的類(lèi)名
  • .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)簽的偽類(lèi)

• 概念：
• 偽類(lèi)和類(lèi)之間有一定的相似之處，也存在明顯的區(qū)別。
• 普通的類(lèi):必須給標(biāo)簽設(shè)置對(duì)應(yīng)的class屬性值，才能選中標(biāo)簽，而且類(lèi)選擇器后面添加的屬性，會(huì)立即加載到瀏覽器之上
• 偽類(lèi):不需要給標(biāo)簽添加任何屬性，偽類(lèi)名都是語(yǔ)法提前規(guī)定好的，書(shū)寫(xiě)時(shí)偽類(lèi)必須搭配其他選擇器使用，偽類(lèi)選擇器后面添加的樣式不一-定立即加載到瀏覽器之上，
  只有用戶(hù)觸發(fā)了對(duì)應(yīng)的行為，偽類(lèi)的樣式才會(huì)立即加載
• 偽類(lèi)選擇器的權(quán)重與普通的類(lèi)選擇器相同
• 偽類(lèi)選擇器寫(xiě)法：前面是普通的選擇器，后面緊跟：偽類(lèi)名
• <a>標(biāo)簽的偽類(lèi)
  • <a>標(biāo)簽可以根據(jù)用戶(hù)行為不同，劃分為四種狀態(tài)，通過(guò)<a>標(biāo)簽的偽類(lèi)可以將四種狀態(tài)選中設(shè)置為不同的樣式效果，用戶(hù)觸發(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)簽的偽類(lèi)書(shū)寫(xiě)順序

• <a>標(biāo)簽上可能會(huì)同時(shí)觸發(fā)2到3個(gè)狀態(tài)，每個(gè)狀態(tài)的屬性都會(huì)進(jìn)行加載，相同的屬性之間會(huì)發(fā)生層疊
• 偽類(lèi)的權(quán)重是相同的，只能根據(jù)書(shū)寫(xiě)順序，后寫(xiě)的層疊先寫(xiě)的，所以偽類(lèi)書(shū)寫(xiě)順序非常重要
• 要想讓每個(gè)偽類(lèi)的狀態(tài)正常加載，書(shū)寫(xiě)順序必須是:訪問(wèn)前l(fā)ink、訪問(wèn)后visited、鼠標(biāo)移.上hover、鼠標(biāo)點(diǎn)擊active
• 為了方便記憶，利用愛(ài)恨準(zhǔn)則: love hate
  <a>標(biāo)簽的偽類(lèi)實(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偽類(lèi)選擇器:設(shè)置鼠標(biāo)移上時(shí)不一樣的樣式屬性

css常用樣式-背景屬性一

• 背景顏色background-color
  • 屬性名: background-color
  • 作用:在盒子區(qū)域添加背景顏色的修飾。
  • 加載區(qū)域:在border及以?xún)?nèi)加載背景顏色
  • 屬性值:顏色名、顏色值

• 背景圖片background-image
  • 屬性名: background-image
  • 作用:給盒子添加圖片的背景修飾
  • 加載范圍:默認(rèn)的加載到邊框及以?xún)?nèi)部分。后期如果圖片不重復(fù)加載，加載從border以?xún)?nèi)開(kāi)始
  • 屬性值： URL（圖片路徑）
    url: uniform resource locator,統(tǒng)一資源定位符，小括號(hào)內(nèi)部書(shū)寫(xiě)查找圖片的路徑

• 背景重復(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ū)域的加載開(kāi)始位置
  • 屬性值:分為三種寫(xiě)法，單詞表示法、像素表示法、百分比表示法。不論哪種寫(xiě)法，屬性值都有兩個(gè)，值之間用空格分隔
  • 第一個(gè)屬性值：表示背景圖片在水平方向的位置
  • 第二個(gè)屬性值：表示背景圖片在垂直方向的位置
  • 單詞表示法
    • 屬性值都是使用代表方向的單詞進(jìn)行書(shū)寫(xiě)
    • 水平方向可選單詞: left、 center、 right
    • 垂直方向可選單詞: top、 center、bottom
    • 單詞表示圖片與盒子背景區(qū)域進(jìn)行對(duì)應(yīng)方向的對(duì)齊

• • 像素表示法
    • 使用像素值作為背景定位的屬性值
    • 第一個(gè)屬性值：像素是幾，表示背景圖片左上角針對(duì)border以?xún)?nèi)的左上頂點(diǎn)水平方向位移的距離
    • 第二個(gè)屬性值：像素是幾，表示背景圖片左上角針對(duì)border以?xún)?nèi)的左上頂點(diǎn)垂直方向位移的距離

• • 像素值區(qū)分正負(fù)，正負(fù)代表位移方向不同:
    • 正數(shù):表示圖片針對(duì)盒子的原點(diǎn)向右、向下移動(dòng)
    • 負(fù)數(shù):表示圖片針對(duì)盒子的原點(diǎn)向左、向上移動(dòng)

• • 百分比表示法
    • 百分比表示法使用百分比數(shù)字作為屬性值
    • 100%代表的數(shù)值:
      水平方向，等價(jià)于盒子的border以?xún)?nèi)的背景區(qū)域?qū)挾葴p去圖片的寬度
      垂直方向，等價(jià)于盒子的border以?xún)?nèi)的背景區(qū)域?qū)挾葴p去圖片的寬度

• • 背景附著background-attachment
    • 屬性名: background- attachment
    • 作用:設(shè)置的是背景圖片是否要隨著頁(yè)面或者盒子的滾動(dòng)而滾動(dòng)
• 綜合寫(xiě)法background
  • background屬性可以將五個(gè)單屬性的值進(jìn)行合寫(xiě)
  • 屬性值:可以有1-5個(gè)屬性值，值之間用空格進(jìn)行分隔，背景定位的兩個(gè)屬性值算作
  • 一個(gè)屬性值，不能被分開(kāi)也不能顛倒順序。五個(gè)屬性值之間可以互換位置
    例如： background: url() no-repeat center top fixed;

• 注意事項(xiàng)
  • 注意1: 如果屬性值沒(méi)有設(shè)置完全，其他沒(méi)有設(shè)置的單一屬性會(huì)按照默認(rèn)值加載
  • 注意2: 如果想去層疊綜合屬性中的一部分，其他的屬性值保持不變，最好使用單一屬性寫(xiě)法層疊

場(chǎng)景一: 替換插入圖

• <h1>標(biāo)簽是權(quán)重最高的標(biāo)簽，一般會(huì)在內(nèi)部書(shū)寫(xiě)最重要的內(nèi)容，比如logo圖片、最大的標(biāo)題等
• 另外<h1>內(nèi)部的文字，可以幫助提高SEO搜索排名
• 在設(shè)置的是logo圖片時(shí)候，如果使用插入圖，就不能書(shū)寫(xiě)搜索關(guān)鍵字

<h1><a href="#"><img src="images/logo.png"/></a> </h1><p data-line="556" class="sync-line" style="margin:0;"></p>

背景圖替換插入圖方法

• 如果想解決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ì)讓開(kāi)背景圖區(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)用戶(hù)訪問(wèn)一個(gè)網(wǎng)站時(shí)，需要向服務(wù)器發(fā)送請(qǐng)求，網(wǎng)頁(yè)上的每張圖像都要經(jīng)過(guò)一次請(qǐng)求才能展現(xiàn)給用戶(hù)
• 然而，一個(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ù)(也稱(chēng)CSS Sprites、CSS 雪碧)
  css精靈
• CSS精靈是一種處理網(wǎng)頁(yè)背景圖像的方式。
  它將-個(gè)頁(yè)面涉及到的所有零星背景圖像都集中到一張大圖中去，然后將大圖應(yīng)用于網(wǎng)頁(yè)，這樣，當(dāng)用戶(hù)訪問(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支持背景半透明的寫(xiě)法，顏色值增加了一種ragb模式
• rgba模式:在rgb基礎(chǔ).上增加了一個(gè)不透明度的設(shè)置，不透明度alpha取值范圍在0-1之間，0表示完全透明，1表示完全不透明，0.5 表示半透明

.box {width: 100px;height: 100px;background-color: ragb(255,0,0,1);}

• 半透明其他應(yīng)用
  同樣，可以給文字和邊框透明，都是ragb的格式來(lái)寫(xiě)
  背景縮放 background-size
• 通過(guò)background-size設(shè)置背景圖片的尺寸，就像我們?cè)O(shè)置<img>的尺寸一樣，在移動(dòng)Web開(kāi)發(fā)中做屏幕適配應(yīng)用非常廣泛

屬性值說(shuō)明

• 多背景
  • CSS3中規(guī)定，一個(gè)盒子上，可以添加多個(gè)背景圖片
  • background-image的屬性值書(shū)寫(xiě)時(shí)，以逗號(hào)分隔多背景的URL路徑地址
  • 注意:背景加載時(shí)，先寫(xiě)的背景壓蓋后寫(xiě)的背景圖片

background-image: url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

定位屬性

屬性名屬性值

• 作用：設(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ū)寫(xiě)時(shí)從水平方向和垂直方向各挑一個(gè)屬性進(jìn)行組合
  • 注意③:由于相對(duì)定位的參考元素是自身，left 的正值等價(jià)于right 的負(fù)值，top 的正值等價(jià)于bottom的負(fù)值
  • 為了方便記憶，可以只選擇left、top組合

position: relative; right: -50px; bottom: -50px; 等價(jià)于 position: relative; left: 50px; top: 50px;

絕對(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)容撐開(kā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>作為參考元素

• 祖先級(jí)為參考元素
  • 如果祖先級(jí)中有定位的元素，就不會(huì)去參考
  • 參考元素： 參考的是祖先元素中任意定位的，在html結(jié)構(gòu)中距離目標(biāo)最近的祖先

• 根據(jù)絕對(duì)定位的參考元素的定位類(lèi)型不同，有三種定位組合方式:子絕父相、子絕父絕、子絕父固，由于相對(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)行居中

.box p{position: relative;left: 50%;width: 800px;height: 100px;margin-left: -400px;background-color: #000; }

• ②浮的元素居中，在不改變?cè)几?dòng)狀態(tài)情況下，可以利用相對(duì)定位居中方法

定位壓蓋順序 z-index

• 默認(rèn)壓蓋順序
  • 定位的元素不區(qū)分定位類(lèi)型，都會(huì)去壓蓋標(biāo)準(zhǔn)流或者浮動(dòng)的元素
  • 如果都是定位元素，在html中后寫(xiě)的定位壓蓋先寫(xiě)的定位

• 自定義壓蓋順序注意事項(xiàng)
  • ①屬性值大的會(huì)壓蓋屬性值小的，設(shè)置z-index屬性的會(huì)壓蓋沒(méi)有設(shè)置的
  • ②如果屬性值相同，比較HTML書(shū)寫(xiě)順序，后寫(xiě)的壓蓋先寫(xiě)的
  • ③z-index屬性只能設(shè)置給定位的元素才會(huì)生效，如果給沒(méi)有定位的元素設(shè)置，不會(huì)生效
  • ④父子盒模型中，如果父子盒子都進(jìn)行了定位，與其他的父子級(jí)有壓蓋的部分:父級(jí)盒子:如果不設(shè)置z-index,后寫(xiě)的壓蓋先寫(xiě)的;如果設(shè)置了z-index,值大的壓蓋值小
    的

靜態(tài)輪播圖

鼠標(biāo)變銷(xiāo)售的狀態(tài)： cursorc: pointer

總結(jié)

以上是生活随笔為你收集整理的Auto Lisp 标注子样式_CSS 核心样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。