日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔！

生活随笔

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

CSS

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

發(fā)布時(shí)間：2024/7/5 CSS 50 豆豆
生活随笔 收集整理的這篇文章主要介紹了 六、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">&lt;&lt;上一頁(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">&gt;&gt;下一頁(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>

    總結(jié)

    以上是生活随笔為你收集整理的六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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