前端整理——css部分

時間 2019-11-16

標籤前端整理 css 部分欄目 CSS 简体版

原文原文鏈接

（1）盒模型（普通盒模型、怪異盒模型）

一、元素的content（內容）、padding(內邊距)、border（邊框）、margin（外邊距）構成了CSS盒模型二、IE盒模型和W3C盒模型 1）IE盒模型是怪異模式下的盒模型，W3C盒模型是標準模式下的盒模型； 2）IE盒模型的width/height包含了content的width/heigh+padding+border W3C盒模型的width/height只是content的width/height 三、CSS3中的box-sizing 不一樣的人有不一樣的習慣，在css3中增長了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（該屬性的值從父元素繼承）javascript

（2）如何讓元素水平居中

一、絕對定位實現水平垂直居中：css

position: absolute;
top: 0; right: 0; bottom: 0; left: 0; margin: auto;

注意： 1>對父元素要使用 position: relative; 對子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。 2>若是隻要垂直居中，能夠不寫right: 0；left: 0; margin: auto; 能夠換成 margin-top: auto; margin-bottom: auto; 3>若是隻須要水平居中，top: 0; bottom: 0; 能夠省略不寫 margin: auto; 能夠換成 margin-rihgt: auto; margin-left: auto; 。java

二、肯定高度的塊級元素居中：css3

position：absolute;
top:50%; margin-top:(自身高度的值的一半的負值)

三、對不定高的div實現垂直居中 a、利用css3的彈性佈局實現在父元素的css樣式中加入如下代碼：chrome

display：flex；
justify-center:center;
align-items：center；

b、利用平移實現在子組件中加入如下代碼：瀏覽器

position：relative：
left:50%； top:50%; transform:translate(-50%,-50%); -weikit-transform: translate(-50%,-50%);

四、一段文本、一張圖片水平居中 text-content:center; 圖片是行內元素，在 ie, edge, chrome, firefox, opera 中對於 img 的默認顯示方式是： display: inline; 5）塊級元素水平居中，使用margin：auto； 6）單行文本垂直居中，讓height和line-height相等注意：當box-sizing:content-box時，line-height和height相等；當box-sizing:border-box時，line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四個值，也就是說line-height等於content的有效高度。佈局

（3）浮動&清浮動

一、是什麼浮動？浮動的元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另外一個浮動元素。二、爲何要清浮動？浮動會致使父元素的高度塌陷。當父元素不設置高度，由內容撐開時，浮動元素脫離了文檔流，並不佔據文檔流的位置，父元素就不能被撐開，也就沒有了高度。因此須要經過清浮動來解決父元素高度坍塌的問題。三、清浮動的方式： 1）clear清除浮動在浮動元素後面添加一個空的div，設置clear屬性爲both。 clear屬性不容許被清除浮動的元素的左邊/右邊挨着浮動元素，原理在被清除浮動的元素上面或者下面添加足夠的清除空間。 2）clear清除浮動的最佳實踐：利用僞類元素來清除有浮動的標籤 IE8和非ie瀏覽器才支持：after，至關於在該元素後面添加了一個空元素，利用clear：both清除浮動。zoom可解決ie六、ie7的浮動問題。flex

<div class="box clearfix"> <div class="red"></div> <div class="green"></div> </div> <style> .clearfix::after{ //向元素的內容以後添加新內容 display: block; content:''; clear:both; visibility:hidden; height:0 } .clearfix{ zoom:1; } </style>

3）父級div定義overflow：hidden 原理：必需要定義width或zoom：1，同時不能定義高，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。spa

（4）聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局都是三欄佈局，兩邊的盒子寬度固定，中間盒子寬度自適應。 1)聖盃佈局寫結構時優先寫中間盒子，由於中間盒子優先被渲染，設置其自適應，寬度設爲100%。中間欄放在文檔流前面以優先渲染。注意：最好給body加一個最小寬度min-width 聖盃佈局有個問題，就是當面板的main部分比兩個子面板寬度小的時候，佈局就會亂掉。firefox

<body>
   <div id="header">header</div> <div id="container"> <div id="center">center</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> body{ min-width:550px; } #header{ background: black; } #footer{ background: black; clear:both; } #center{ background: pink; width:100%; float:left; } #left{ background: greenyellow; width:200px; float:left; margin-left: -100%; position: relative; left:-200px; } #right{ background: yellow; width:150px; float:left; margin-left:-150px; position: relative; right:-150px; } #container{ padding-left:200px; padding-right:150px; }

2）雙飛翼佈局

<body>
<div class="box"> <div class="main"> <div class="center">center</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> <style> *{margin:0;padding:0;} body{ min-width:500px; } .main{ width:100%; background: palevioletred; float:left; } .left{ width:150px; background: greenyellow; float:left; margin-left:-100%; } .right{ width:200px; background: yellow; float:left; margin-left:-200px; } .center{ margin:0 200px 0 150px; } </style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。