居中

• 元素水平居中 行內(nèi)元素水平居中

text-align:center;

• 塊元素水平居中

margin:0 auto ;

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

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

網(wǎng)頁的布局方式?

網(wǎng)頁的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁中的元素進(jìn)行排版的

標(biāo)準(zhǔn)流排版方式

• 垂直排版, 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版
• 水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版

浮動(dòng)

浮動(dòng)流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊

• 脫標(biāo)

當(dāng)某一個(gè)元素浮動(dòng)之后, 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個(gè)就是浮動(dòng)元素的脫標(biāo)

• 浮動(dòng)元素排序規(guī)則

相同方向上的浮動(dòng)元素, 先浮動(dòng)的元素會(huì)顯示在前面, 后浮動(dòng)的元素會(huì)顯示在后面

不同方向上的浮動(dòng)元素, 左浮動(dòng)會(huì)找左浮動(dòng), 右浮動(dòng)會(huì)找右浮動(dòng)

• 浮動(dòng)元素貼靠

父元素的寬度能夠顯示所有浮動(dòng)元素, 那么浮動(dòng)的元素會(huì)并排顯示

父元素的寬度不能顯示所有浮動(dòng)元素, 那么會(huì)從最后一個(gè)元素開始往前貼靠

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

清除浮動(dòng)

父元素的高度是由子元素?fù)伍_的，且子元素設(shè)置了浮動(dòng)，父元素沒有設(shè)置浮動(dòng)，子元素脫離了標(biāo)準(zhǔn)的文檔流，那么父元素的高度會(huì)將其忽略，如果不清除浮動(dòng)，父元素會(huì)出現(xiàn)高度不夠.

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

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

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

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

網(wǎng)頁的布局方式

網(wǎng)頁的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁中的元素進(jìn)行排版的

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

• 垂直排版: 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版
• 水平排版:如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版

外墻法

在兩個(gè)盒子中間添加一個(gè)額外的塊級(jí)元素

給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性

內(nèi)墻法

在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素

給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性

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

定位流

相對(duì)定位

相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來移動(dòng)
position: relative;

• 什么是絕對(duì)定位?

絕對(duì)定位就是相對(duì)于body來定位
position: absolute;

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

子絕父相
子元素用絕對(duì)定位, 父元素用相對(duì)定位

• 如何讓絕對(duì)定位的元素水平居中

只需要設(shè)置絕對(duì)定位元素的left:50%

然后再設(shè)置絕對(duì)定位元素的 margin-left: -元素寬度的一半px;

練習(xí)

實(shí)現(xiàn)下面的效果

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

思路：將最大的div相對(duì)定位，兩個(gè)span絕對(duì)定位，在用left等屬性進(jìn)行定位

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; }

實(shí)現(xiàn)下面的效果

<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; }

總結(jié)

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

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