當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用

發(fā)布時(shí)間：2024/7/5 CSS 34 豆豆

生活随笔收集整理的這篇文章主要介紹了六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

7. 拓展@

7.1 margin負(fù)值之美

1). 負(fù)邊距+定位：水平垂直居中

咱們前面講過(guò)，一個(gè)絕對(duì)定位的盒子，利用父級(jí)盒子的 50%，然后往左(上) 走自己寬度的一半，可以實(shí)現(xiàn)盒子水平垂直居中。

2). 壓住盒子相鄰邊框

上圖第一個(gè)div的右邊框與第二個(gè)div的左邊框沒(méi)有重疊 1px + 1px = 2px ，所以邊框線變粗

可以通過(guò)給每個(gè)div加上
margin-left: -1px;
margin-top: -1px;
讓第一個(gè)div的右邊框與第二個(gè)div的左邊框完全重疊 ，這樣邊框的寬度還是為1px!

實(shí)現(xiàn)鼠標(biāo)懸浮邊框變成橙色：

方法一：
我們只要保證當(dāng)前的這個(gè)盒子是定位就會(huì)壓住標(biāo)準(zhǔn)流和浮動(dòng)盒子*/
position:relative；
我們只能用相對(duì)定位它是占位置的

方法二：添加z-index:1; 實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)某個(gè)div時(shí)，提高當(dāng)前div的層級(jí)

7.2 CSS三角形之美

div {width: 0; height: 0;line-height:0；font-size: 0;border-top: 10px solid red;border-right: 10px solid green;border-bottom: 10px solid blue;border-left: 10px solid #000; }

一張圖，你就知道 css 三角是怎么來(lái)的了, 做法如下：

我們用css 邊框可以模擬三角效果

寬度高度為0

我們4個(gè)邊框都要寫，只保留需要的邊框顏色，其余的不能省略，都改為 transparent 透明就好了

為了照顧兼容性低版本的瀏覽器，加上 font-size: 0; line-height: 0;

京東案例：

7.3 文字圍繞浮動(dòng)元素的巧妙運(yùn)用

只需要為裝有圖片的元素添加float:left; 浮動(dòng)，文字便會(huì)自動(dòng)圍繞圖片來(lái)顯示

7.4 行內(nèi)塊元素的巧妙運(yùn)用

為父元素box添加text-align: center,則其所有的子元素(必須是行內(nèi)塊元素)都會(huì)實(shí)現(xiàn)水平居中對(duì)齊

在一行內(nèi)顯示多個(gè)行內(nèi)塊元素時(shí),行內(nèi)塊元素之間會(huì)自然產(chǎn)生一個(gè)空白的間距

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>行內(nèi)塊元素的巧妙運(yùn)用</title><style type="text/css">* {margin: 0;padding: 0;}.box {text-align: center;/* 為父元素box添加text-align: center,則其所有的子元素(必須是行內(nèi)塊元素)都會(huì)實(shí)現(xiàn)水平居中對(duì)齊 */}.box a {display: inline-block; /* 在一行內(nèi)顯示多個(gè)行內(nèi)塊元素時(shí),行內(nèi)塊元素之間會(huì)自然產(chǎn)生一個(gè)空白的間距 */width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;font-size: 14px;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {width: 45px;height: 36px;border: 1px solid #ccc;outline: none;/* 取消選中后的邊框 */}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style></head><body><div class="box"><a href="#" class="prev"><<上一頁(yè)</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">...</a><a href="#" class="next">>>下一頁(yè)</a>到第<input type="text">頁(yè)<button>確定</button></div></body> </html>

7.5 CSS三角形的巧妙運(yùn)用

1）效果圖：

2）原理：將直角三角形用子絕父相的方法定位到紅色區(qū)域的右邊，并把直角三角形的顏色改為白色

實(shí)現(xiàn)直角三角形的方法：

1）正常的寫法：

2）簡(jiǎn)寫：

效果圖的實(shí)現(xiàn)代碼：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS三角巧妙運(yùn)用</title><style type="text/css">*{margin: 0;padding: 0;}.price {width: 160px;height: 22px;border: 1px solid red;margin: 0 auto;line-height: 24px;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700;margin-right: 8px;}.miaosha i {position: absolute;top: 0;right: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 22px 10px 0 0; /* 第一個(gè)值相當(dāng)于三角形的高度,第二個(gè)值相當(dāng)于三角形的寬度 */}.origin {font-size: 12px;color: gray;text-decoration: line-through; /* 設(shè)置刪除線 */}</style></head><body><div class="price"><span class="miaosha">$1650<i></i></span><span class="origin">$5650</span></div></body> </html>