岛国AV无码免费无禁网站,囯产精品宾馆在线精品酒店,老太婆交性欧美

當margin的值為百分比形式時，為什么瀏覽器會根據父容器寬度得出計算值？

假如有一個父容器寬度400px，高度600px，其子元素設置 margin:20% 20%后的計算值應該為“margin:120px 80px”還是“margin:80px 80px”呢？在橫向排版時，寬度“有跡可循”，可以把瀏覽器寬度作為參考，所以第二個正確，但是高度是不固定的，所以margin百分比值在計算時會參考父容器的寬度。當書寫模式改為縱向，其計算參考便會變為父容器的高度了。

margin：auto為什么只能實現水平居中，不能垂直居中？

當一個常規流中塊級元素的margin屬性左右值設為關鍵字auto，且它擁有固定寬度時，它便會平分剩余的水平空間，居中顯示。然而如果設置上下值為auto，瀏覽器得到的計算值為0，并不起任何的效果。那么問題來了，為什么垂直方向的auto不生效？
與上一問類似，這與布局相關。網頁排版時，常規流的塊級元素水平方向總是鋪滿瀏覽器窗口，垂直方向各塊級元素按照先后順序從上往下排列，當頁面內容過多時網頁會出現縱向滾動條，因此原理上縱向是可以無限擴展的，計算時找不到一個固定的參考值，所以縱向的auto無法生效。
同樣，margin:auto會受書寫模式的影響。當書寫模式為縱向時，margin：auto垂直方向是可以居中的，水平方向仍然可以居中。不信？請自己寫個demo試試吧。其實受到書寫模式影響的屬性除了這些外，還有margin折疊、padding百分比值的計算等。
margin折疊指的是毗鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距。
觸發條件：毗鄰，沒有被非空內容、padding、border 或 **clear 分隔開的margin特性. **非空內容就是說這元素之間要么是兄弟關系或者父子關系
這些 margin 都處于普通流中，即非浮動元素，非定位元素。
垂直方向外邊距合并的計算：

參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

參與折疊的 margin 都是負值：取的是其中絕對值較大的，然后，從 0 位置，負向位移。

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div>
<div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

參與折疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
相鄰的 margin 要一起參與計算，不得分步計算
　　要注意，相鄰的元素不一定非要是兄弟節點，父子節點也可以，即使不是兄弟父子節點也可以相鄰。
　　而且，在計算時，相鄰的 margin 要一起參與計算，不得分步計算。

<div style="margin:50px 0; background-color:green; width:50px;">             
  <div style="margin:-60px 0;">    
     <div style="margin:150px 0;">A</div>   
  </div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">   
  <div style="margin:-120px 0;">           
    <div style="margin:200px 0;">B</div>   
  </div>
</div>

以上例子中，A 和 B 之間的 margin 折疊產生的 margin，是6個相鄰 margin 折疊的結果。將其 margin 值分為兩組：
　　正值：50px，150px，200px
　　負值：-60px，-100px，-120px
　　根據有正有負時的計算規則，正值的最大值為 200px，負值中絕對值最大的是 -120px，所以，最終折疊后的 margin 應該是 200 + (-120) = 80px。

浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊
創建了塊級格式化上下文的元素，不和它的子元素發生 margin 折疊
以 “overflow : hidden” 的元素為例：

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

元素自身的 margin-bottom 和 margin-top 相鄰時也會折疊
自身 margin-bottom 和 margin-top 相鄰，只能是自身內容為空，垂直方向上 border、padding 為 0。

自身 margin-bottom 和 margin-top 相鄰，只能是自身內容為空，垂直方向上 border、padding 為 0。

以上代碼運行后，我們講得到的是紅色邊框的正方形，方框的寬高都應該是 100px，高度不應該是 150px。

行內級元素可以設置寬高嗎

置換元素可以，非置換元素不可以，如span，strong不可以，但是img,input,select，textarea等可以設置。置換元素本身擁有固有尺寸（高度，寬度，寬高比）的元素，不設置寬高時，會按照本身的寬高進行顯示。

CSS規則根據優先級生效，低優先級的規則會被瀏覽器忽略還是覆蓋？

多個優先級的樣式都會被渲染，只不過高優先級會覆蓋住低優先級，元素呈現為高優先級的樣式。現在請考慮這樣一個問題，在一個div應用了兩條background-image規則，照之前的理論來看，兩條規則都會渲染，那么請問瀏覽器會請求被覆蓋規則的背景圖片嗎？真實情況是瀏覽器會聰明到只請求當前應用的背景圖片

使用margin可以做出圓角按鈕的原理是什么?

當不能使用border-radius時，如何制造一個圓角按鈕？現在有一個制造1px圓角的小技巧：button中嵌套span，設置span的margin為：“margin:1px -1px”。原理就是利用視覺誤差。

.btn {
 padding: 0;
 margin: 0 5px;
 border: none;
 background: #a5a5a5;
 display: inline-block;
 font-size: 26px;
}
<a class="btn"><span>1px圓角</span></a>

清除浮動有N種方式，他們間有什么共同點嗎?

清楚浮動的方法

1 結尾處加空div標簽 clear:both;

<style type="text/css"> 
.div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} /*清除浮動代碼*/ .clearfloat{clear:both} </style> 
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2"> div2 </div>

2 父級div定義偽類:after和zoom：ie8以上和非IE瀏覽器才支持：after，zoom(IE專有屬性)可解決ie6,ie7浮動問題。

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} /*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style>
 <div class="div1 clearfloat">
  <div class="left">Left</div> 
  <div class="right">Right</div> 
 </div> 
<div class="div2"> div2 </div>

3 父級div定義 overflow:hidden

<style type="text/css">
.div1{
background:#000080;border:1px solid red;width:98%;overflow:hidden;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style>
 <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
4 父級div定義 overflow:auto

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:auto} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} </style> 
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
5 父級div 也一起浮動
原理：所有代碼一起浮動，就變成了一個整體
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作了解。
6 父級div定義 display:table

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} </style> 
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>

原理：將div屬性變成表格
優點：沒有優點
缺點：會產生新的未知問題。
建議：不推薦使用，只作了解。
7 結尾處加 br標簽 clear:both

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.div2{background:#800080;border:1px solid red;height:100px}
 .left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} .clearfloat{clear:both} </style>
 <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <br class="clearfloat" /> </div> <div class="div2"> div2 </div>

原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標簽 clear:both
建議：不推薦使用，只作了解。
8 父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

什么是hasLayout？

在InternetExplorer中，一個元素要么自己對自身的內容進行計算大小和組織，要么依賴于父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎采用了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個布局（layout）
　　當一個元素有一個布局時，它負責對自己和可能的子孫元素進行尺寸計算和定位。簡單來說，這意味著這個元素需要花更多的代價來維護自身和里面的內容，而不是依賴于祖先元素來完成這些工作。因此，一些元素默認會有一個布局。當我們說一個元素“擁有layout”或“得到layout”，或者說一個元素“has layout” 的時候，我們的意思是指它的微軟專有屬性 hasLayout 被設為了 true。一個“layout元素”可以是一個默認就擁有 layout 的元素或者是一個通過設置某些 CSS 屬性得到 layout的元素。如果某個HTML元素擁有 haslayout 屬性，那么這個元素的 haslayout 的值一定只有 true，haslayout為只讀屬性一旦被觸發，就不可逆轉。通過 IE Developer Toolbar 可以查看 IE 下 HTML元素是否擁有haslayout，在 IE Developer Toolbar 下，擁有 haslayout的元素，通常顯示為“haslayout = -1”。
負責組織自身內容的元素將默認有一個布局，主要包括以下元素： body 、html；tabel、tr、td、th；img；hr；input、button、file、select、textarea、fieldset;frameset、frame、iframe等。
對于沒有默認布局的元素，如何激發haslayout？
設置如下css屬性即可：display:inline-block,height/width:(除auto任何值),float:left|right,position:absolue,zoom:除 normal 外任意值，
僅限IE7：overflow非visible，設置min-width或min-height
具有“layout” 的元素如果同時 display: inline ，那么它的行為就和標準中所說的 inline-block很類似了：在段落中和普通文字一樣在水平方向和連續排列，受 vertical-align影響，并且大小可以根據內容自適應調整。這也可以解釋為什么單單在 IE/Win 中內聯元素可以包含塊級元素而少出問題，因為在別的瀏覽器中display: inline 就是內聯，不像 IE/Win 一旦內聯元素擁有 layout 還會變成 inline-block。

zoom:1的原理和作用

Zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例、觸發hasLayout、清楚浮動。
當設置了zoom的值之后，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。

BFC：塊級格式化上下文

BFC自成體系，對自己內部的元素負責，不會與浮動元素重疊，上下margin不會重疊，清楚浮動或者實現一個雙欄布局。如何構造一個BFC：1.float設置為非none值；2.overflow設置為非visible；3.display設置為 table-cell，table-caption，inline-block；4.position設置為absolute或fixed。
ie6/7沒有BFC概念，但是有一個與BFC性質相似的概念：layout。在IE6，7中遇到的很多bug都可以通過讓元素has layout來解決，比如浮動margin雙邊距，躲貓貓，3像素間距等等。
9.圖片和文字居中

  <p>
      <span style="vertical-align:middle;">hello</span>
      <span style=''background(url(...))  vertical-align:middle;'"/>
 </p>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

css一些細問題

css一些細問題

當margin的值為百分比形式時，為什么瀏覽器會根據父容器寬度得出計算值？

margin：auto為什么只能實現水平居中，不能垂直居中？

行內級元素可以設置寬高嗎

CSS規則根據優先級生效，低優先級的規則會被瀏覽器忽略還是覆蓋？

使用margin可以做出圓角按鈕的原理是什么?

清除浮動有N種方式，他們間有什么共同點嗎?

清楚浮動的方法

什么是hasLayout？

zoom:1的原理和作用

BFC：塊級格式化上下文

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

css一些細問題

當margin的值為百分比形式時，為什么瀏覽器會根據父容器寬度得出計算值？

margin：auto為什么只能實現水平居中，不能垂直居中？

行內級元素可以設置寬高嗎

CSS規則根據優先級生效，低優先級的規則會被瀏覽器忽略還是覆蓋？

使用margin可以做出圓角按鈕的原理是什么?

清除浮動有N種方式，他們間有什么共同點嗎?

清楚浮動的方法

什么是hasLayout？

zoom:1的原理和作用

BFC：塊級格式化上下文

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频