欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS學(xué)習(xí)和總結(jié)

  發(fā)布時(shí)間：2022-09-29 08:55:26   作者：佚名   我要評(píng)論
本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

 1.清除浮動(dòng)
老生常談的話題，面試經(jīng)常問(wèn)的問(wèn)題
解決方法有很多種，這里講幾種
1.1 子元素加clear

復(fù)制代碼
代碼如下:

<div class="news">
<p>Some Text</p>
<br class="clear">
</div> .news{
background: gray;
border: solid 1px black;
}
.news p{
float: right;
}
.clear{
clear: both;
}

這種方法可以擴(kuò)展出很多種不同的方法，如JS動(dòng)態(tài)添加，設(shè)置一個(gè)公共的類然后添加，或者直接就是一段內(nèi)聯(lián)style的html代碼，但是原理都是用到了clear這個(gè)屬性
1.2 父元素BFC化
HTML文檔流是盒子模型的，BFC就是組織盒子模型的形式，當(dāng)元素的類型如標(biāo)簽(p和span)不一樣的時(shí)候，其表現(xiàn)出來(lái)的樣子是不一樣的。
所以BFC就是讓這個(gè)元素看起來(lái)像盒子的一種代稱，BFC全稱 Box Formatting Context。CSS2.1還有IFC,即Inline Formatting Context。
BFC布局規(guī)則：
•內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置
•Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
•每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此
•BFC的區(qū)域不會(huì)與float box重疊
•BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此
•計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
產(chǎn)生BFC的條件：當(dāng)然普通的塊級(jí)元素默認(rèn)呈現(xiàn)塊級(jí)的樣子，但是通過(guò)CSS我們可以可以讓某些元素呈現(xiàn)BFC的形態(tài)（塊級(jí)形態(tài)）
1.根元素(html元素)
2.float不為none的元素(包括left,right,inherit三個(gè)，因?yàn)閒loat只有四個(gè)值)
3.position為absolute或fixed
4.display為inline-block,table-cell,table-caption,flex,inline-flex
5.overflow不為visible(包括hidden,scroll,auto,inherit四個(gè)值)
如下面的為在父元素加float屬性使其BFC化

復(fù)制代碼
代碼如下:

<div class="news">
<p>Some Text</p>
<br class="clear">
</div> .news{
background: gray;
border: solid 1px black;
}
.news p{
float: right;
}
.clear{
clear: both;
}

2.透明度
2.1 opacity
熟悉CSS3的應(yīng)該很清楚，不就是opacity嘛。但是在那個(gè)沒(méi)有支持opacity的年代又是怎么做的呢。
opacity屬性設(shè)置元素的不透明級(jí)別。不會(huì)被繼承，值為0.0(完全透明)到1.0(完全不透明)。
不會(huì)繼承父元素的屬性，但是可以設(shè)置inherit來(lái)繼承父元素的值

復(fù)制代碼
代碼如下:

p{
opacity: 0.5;
filter: alpha(opacity=50); /*IE*/
color: #000;
}

2.2 RGBA
RGB擴(kuò)展透明度的一種格式，a代表alpha透明度。

復(fù)制代碼
代碼如下:

p{
background-color: rgba(0,0,0,0.8);
color: #fff;
}

2.3 PNG圖片的問(wèn)題
png圖片的最大優(yōu)勢(shì)是支持alpha透明度，但是IE6不直接支持PNG透明度，PNG透明度自IE7才支持。
好的是現(xiàn)在已經(jīng)逐漸淘汰了IE6，
3.擁有布局的問(wèn)題
默認(rèn)擁有布局的元素：
•body/html
•table/tr/td
•img
•hr
•input/select/textarea/button
•iframe/embed/object/applet/marquee
所以其實(shí)div和span是沒(méi)有布局的。
設(shè)置以下CSS屬性會(huì)讓元素獲得布局。
1.float: left/right
2.display: inline-block
3.width/height
4.zoom: 任何值（只有IE）
IE7中以下屬性也觸發(fā)布局(下面三個(gè)屬性只有IE7+才支持)
1.overflow: hidden/scroll/auto
2.min-width: 任何值
3.max-width: 除none之外的任何值
4.條件注釋
•lt <
•lte <=
•gt >
•gte >=
條件注釋寫法如下，這里的是XHTML寫法，所以后面會(huì)以/>結(jié)尾，HTML5寫法最好是沒(méi)有反斜杠

復(fù)制代碼
代碼如下:

<!-- [if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->
<!-- [if !IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->
<!-- [if gte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->

5.IE常見(jiàn)的BUG及其解決方法
下面這些BUG都是很有代表性的，在我做的項(xiàng)目中下面的bug基本都遇到了。-_-!!這運(yùn)氣真不是一般好。
當(dāng)然現(xiàn)在說(shuō)起IE6兼容很多人可能會(huì)嗤之以鼻，但是我覺(jué)得在天朝大國(guó)這個(gè)連學(xué)校都在用著XP的地方，身為一名合格的前端，IE6兼容必須要過(guò)關(guān)。
5.1 雙外邊距浮動(dòng)BUG
在元素有外邊距且浮動(dòng)的時(shí)候

復(fù)制代碼
代碼如下:

div.someone{
float: left;
margin-left: 20px;
}

解決方法
對(duì)float的元素設(shè)置display:inline

復(fù)制代碼
代碼如下:

div.someone{
float: left;
margin-left: 20px;
display: inline;
}

5.2 3像素文本偏移bug
當(dāng)文本與一個(gè)浮動(dòng)元素相鄰時(shí)這個(gè)bug有可能出現(xiàn)

復(fù)制代碼
代碼如下:

div.myFloat{
float: left;
width:200px;
}
p{
margin-left:200px;
}

解決方法(IE6以上)

復(fù)制代碼
代碼如下:

p{
height: 1%; /*擁有布局*/
margin-left: 0;
}
.myFloat{
margin-left: -3px; /*重要的一句，等于左邊的浮動(dòng)元素的寬度縮小了3px*/
}

5.3 IE6的重復(fù)字符bug
當(dāng)一系列浮動(dòng)元素排列在一排，如果最后的元素重復(fù)出現(xiàn)則是這個(gè)bug。
ps：通常是代碼有添加注釋的情況
解決方法
1.運(yùn)用負(fù)外邊距
2.清除注釋
5.4 IE6的“躲貓貓”bug
當(dāng)一個(gè)浮動(dòng)元素后面跟著一些非浮動(dòng)元素，然后是一個(gè)清理元素，所有這些元素包含在一個(gè)設(shè)置了背景顏色或圖像的父元素中。如果清理元素碰到了浮動(dòng)元素，那么中間的非浮動(dòng)元素看起來(lái)像消失了，只有在刷新頁(yè)面的時(shí)候才出現(xiàn)。
解決方法
1.去掉父元素上的背景顏色或圖像
2.避免清理元素與浮動(dòng)元素接觸
3.容器指定行高
4.將浮動(dòng)元素和容器元素的position屬性設(shè)置為relative

相關(guān)文章

  • 簡(jiǎn)要總結(jié)CSS編程中的響應(yīng)式設(shè)計(jì)

    這篇文章主要介紹了CSS編程中的響應(yīng)式設(shè)計(jì),是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-08-03

  • CSS的一些編程規(guī)范總結(jié)

    這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開(kāi)發(fā)者的共識(shí),樹(shù)立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下
    2015-07-09

  • 10個(gè)必備的CSS技巧總結(jié)

    這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請(qǐng)收藏~需要的朋友可以參考下
    2015-06-29

  • CSS清除浮動(dòng)方法總結(jié)

    在阿里云首頁(yè)看到很多div都有加上:before和:after的屬性.但是大都只是做了類似的如下處理,請(qǐng)問(wèn)這樣的意義是什么呢?研究了一番，原來(lái)是清除浮動(dòng)用的，下面來(lái)總結(jié)下清除浮動(dòng)
    2014-06-17

  • css 調(diào)試方法與經(jīng)驗(yàn)總結(jié)

    主要記錄本人調(diào)試過(guò)程中所終結(jié)的經(jīng)驗(yàn)與方法，css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品
    2014-06-15

  • CSS多瀏覽器兼容總結(jié)(個(gè)人經(jīng)驗(yàn))

    多瀏覽器兼容一直都是前端開(kāi)發(fā)者需要考慮的重要問(wèn)題之一，由于一直困擾著大家，因此本文整理了一些個(gè)人的實(shí)戰(zhàn)經(jīng)驗(yàn)與大家分享下，看過(guò)之后感覺(jué)不錯(cuò)的可以收藏哦
    2013-10-30

  • CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)

    進(jìn)行css布局的同時(shí)，沒(méi)有足夠的基礎(chǔ)知識(shí)是不可能的，本文為初學(xué)者整理了一些，經(jīng)常使用的css屬性，感興趣的朋友可以參考下，或許有所幫助
    2013-10-05

  • 深入CSS3 動(dòng)畫效果的總結(jié)詳解

    本篇文章是對(duì),CSS3中的動(dòng)畫效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下
    2013-05-09

  • IE下css常見(jiàn)問(wèn)題總結(jié)及解決

    本文整理了ie中div的垂直居中問(wèn)題、margin加倍的問(wèn)題、ie6下頁(yè)面min-width/height與max-width/height問(wèn)題、ie6 3px bug及ie6捉迷藏的問(wèn)題等等，感興趣的朋友可以參考下哈
    2013-04-01

  • CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語(yǔ)總結(jié)

    CSS（Cascading Style Sheet ）級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫DOCTYPE等文檔類型定義,接下來(lái)詳細(xì)為您介紹，需要了解的朋友可以參考下
    2013-01-03

最新評(píng)論