目錄
1.在盒子中水平垂直居中
2.絕對定位子元素居中
3.清除浮動
3.1偽元素清除浮動
3.2雙偽元素清除浮動
4.定位實現垂直水平居中
4.畫三角形
5.文字圍繞浮動元素
6.單行文字溢位顯示省略號
7.表單輪廓和防止拖拽文字域
8.文字垂直居中對齊
9.底側有空白縫隙解決方案
10.多行溢位文字顯示省略號
11.通過偽元素新增字型圖示
12.外邊距塌陷問題
13.巧用邊框做四方格
// 絕對定位子元素居中
position: absolute;
left:50%;
top:50%;
margin-left:-200px;//子元素寬度的一半
margin-top:-307px/2;//子元素高度的一半
background-color: #fff;
給父盒子新增以下樣式
/* 為元素清除浮動方法： */
.clearfix::after
/* 相容ie6,7 清除浮動 */
.clearfix
/* 清除浮動方法： */
.clearfix:before,
.clearfix::after
.clearfix::after
/* 清除浮動 相容ie */
.clearfix
效果：
效果：
啥也不說，此處省略一萬字
效果：
未解決效果：
解決後效果：
啥也不說，此處省略一萬字,啥也不說，此處省略一萬字此處省略一萬字
未解決效果：
解決後效果：
這種四方格最開始我用margin來做，效果始終不如意，尚且不知道是什麼原因
改用border後反而更簡單：
&:nth-child(even)
&:nth-child(-n+2)
img}
}left，top均設定為50%，同時margin-left設定為絕對定位元素寬度的一半取負，margin-top設定為絕對定位元素高度的一半取負
//例如：絕對定位元素寬度為100px;高度為100px
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
不跳轉
不跳轉不跳轉
不跳轉不跳轉
不跳轉
::v-deep .el-collapse-item__content
//針對webkit核心
::v-deep .el-collapse-item__content::-webkit-scrollbar
web前端學習 CSS樣式設定技巧
一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定text align...
專案創作常用前端樣式及技巧整合
1 siblings selected 解釋 返回所選元素的同級元素列，相當於全選他的兄弟姐妹一起操作。用法 siblings 2 border 解釋 邊框。使用時要同時宣告大小和顏色才會顯示。用法 border 3px solid 181818 3 fadein timer fadeout tim...
前端樣式CSS（Secrets）
上半橢圓 border radius 50 100 100 0 0 左半橢圓 border radius 100 0 0 100 50 左上四分之一圓 border radius 100 0 0 0 平行四邊形 1.平行四邊形是矩形的父集，各條邊兩兩平行，但是角度不一定是直角。2.css建立平行四邊...