居中

• 元素水平居中 行內元素水平居中

text-align:center;

• 塊元素水平居中

margin:0 auto ;

• 單行文字垂直居中
  高等于行高

height:n px; #可以注釋 line-height:n px;

網頁的布局方式?

網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的

標準流排版方式

• 垂直排版, 如果元素是塊級元素, 那么就會垂直排版
• 水平排版, 如果元素是行內元素/行內塊級元素, 那么就會水平排版

浮動

浮動流只有一種排版方式, 就是水平排版. 它只能設置某個元素左對齊或者右對齊

• 脫標

當某一個元素浮動之后, 那么這個元素看上去就像被從標準流中刪除了一樣, 這個就是浮動元素的脫標

• 浮動元素排序規則

相同方向上的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面

不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動

• 浮動元素貼靠

父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示

父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元素開始往前貼靠

貼靠了前面所有浮動元素之后都不能顯示, 最終會貼靠到父元素的左邊或者右邊

清除浮動

父元素的高度是由子元素撐開的，且子元素設置了浮動，父元素沒有設置浮動，子元素脫離了標準的文檔流，那么父元素的高度會將其忽略，如果不清除浮動，父元素會出現高度不夠.

理解為何需要清除浮動及清除浮動的方法
作者：要做前端的一股清流

看別人的文章，總是可以學到一些其他的東西。

• 給前面一個父元素設置高度
• 給后面的盒子添加clear屬性

clear屬性取值: none: 默認取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動) left: 不要找前面的左浮動元素 right: 不要找前面的右浮動元素 both: 不要找前面的左浮動元素和右浮動元素

網頁的布局方式

網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的

標準流

• 垂直排版: 如果元素是塊級元素, 那么就會垂直排版
• 水平排版:如果元素是行內元素/行內塊級元素, 那么就會水平排版

外墻法

在兩個盒子中間添加一個額外的塊級元素

給這個額外添加的塊級元素設置clear: both;屬性

內墻法

在第一個盒子中所有子元素最后添加一個額外的塊級元素

給這個額外添加的塊級元素設置clear: both;屬性

• overflow: hidden;作用
  可以將超出標簽范圍的內容裁剪掉
  通過overflow: hidden;讓里面的盒子設置margin-top之后, 外面的盒子不被頂下來

定位流

相對定位

相對定位就是相對于自己以前在標準流中的位置來移動
position: relative;

• 什么是絕對定位?

絕對定位就是相對于body來定位
position: absolute;

絕對定位left: 50px;才有這種等寫法

子絕父相
子元素用絕對定位, 父元素用相對定位

• 如何讓絕對定位的元素水平居中

只需要設置絕對定位元素的left:50%

然后再設置絕對定位元素的 margin-left: -元素寬度的一半px;

練習

實現下面的效果

<div><img src="images/meat.jpg" alt=""><span class="hot"></span><span class="price"></span><p>【2店通用】Love Taste愛味道牛排生活館 雙人套餐，提供免費WiFi</p> </div>

思路：將最大的div相對定位，兩個span絕對定位，在用left等屬性進行定位

div{width: 300px;height: 300px;border: 2px solid #ccc;margin: 0 auto; #水平居中margin-top: 100px;position: relative; } div img{width: 300px;height: 200px; } div .hot{width: 45px;height: 44px;background: url("images/tuangou.png") no-repeat 0px -280px;/*display: inline-block;*/position: absolute;left: 0;top: 0; } div .price{width: 134px;height: 42px;background: url("images/tuangou.png") no-repeat 0px -362px;/*display: inline-block;*/position: absolute;left: -7px;top: 163px; }

實現下面的效果

<div><img src="images/ad.jpg" alt=""><span class="leftArrow">&lt;</span><span class="rightArrow">&gt;</span><ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ol> </div>

css

div{width: 520px;height: 280px;border: 2px solid gold;margin: 0 auto;margin-top: 100px;position: relative; } div span{/*margin-top: 10px;*//*display: block;*/width: 40px;height: 80px;background-color: rgba(0,0,0,0.3);font-size: 50px;color: white;text-align: center;line-height: 80px; } div .leftArrow{position: absolute;left: 0px;top: 100px; } div .rightArrow{position: absolute;right: 0px;top: 100px; } ol{list-style: none;width: 200px;height: 40px;background-color: rgba(255,255,255,0.7);position: absolute;right: 10px;bottom: 10px; } ol li{width: 40px;/*height: 40px;*/line-height: 40px;text-align: center;border: 1px solid gold;box-sizing: border-box;float: left; }

總結

以上是生活随笔為你收集整理的四、CSS知识总结（下篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。