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

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2024/7/5 CSS 39 豆豆
生活随笔 收集整理的這篇文章主要介紹了 六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

7. 拓展@

7.1 margin負值之美

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

咱們前面講過， 一個絕對定位的盒子， 利用 父級盒子的 50%， 然后 往左(上) 走 自己寬度的一半 ，可以實現盒子水平垂直居中。

2). 壓住盒子相鄰邊框



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

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


實現鼠標懸浮邊框變成橙色：

方法一：
我們只要保證當前的這個盒子是定位就會壓住標準流和浮動盒子*/
position:relative；
我們只能用相對定位它是占位置的

方法二：添加z-index:1; 實現鼠標經過某個div時，提高當前div的層級

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 三角是怎么來的了, 做法如下：

  • 我們用css 邊框可以模擬三角效果
  • 寬度高度為0
  • 我們4個邊框都要寫， 只保留需要的邊框顏色，其余的不能省略，都改為 transparent 透明就好了
  • 為了照顧兼容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;

    • 京東案例：



    7.3 文字圍繞浮動元素的巧妙運用

    只需要為裝有圖片的元素添加float:left; 浮動，文字便會自動圍繞圖片來顯示


    7.4 行內塊元素的巧妙運用

  • 為父元素box添加text-align: center,則其所有的子元素(必須是行內塊元素)都會實現水平居中對齊
  • 在一行內顯示多個行內塊元素時,行內塊元素之間會自然產生一個空白的間距

    • <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>行內塊元素的巧妙運用</title><style type="text/css">* {margin: 0;padding: 0;}.box {text-align: center;/* 為父元素box添加text-align: center,則其所有的子元素(必須是行內塊元素)都會實現水平居中對齊 */}.box a {display: inline-block; /* 在一行內顯示多個行內塊元素時,行內塊元素之間會自然產生一個空白的間距 */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;上一頁</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;下一頁</a>到第<input type="text">頁<button>確定</button></div></body> </html>

    7.5 CSS三角形的巧妙運用

    1）效果圖：

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

    實現直角三角形的方法：

    1）正常的寫法：

    2）簡寫：

    效果圖的實現代碼：

    <!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS三角巧妙運用</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; /* 第一個值相當于三角形的高度,第二個值相當于三角形的寬度 */}.origin {font-size: 12px;color: gray;text-decoration: line-through; /* 設置刪除線 */}</style></head><body><div class="price"><span class="miaosha">$1650<i></i></span><span class="origin">$5650</span></div></body> </html>

    總結

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

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