摘要:不推薦,特別是九宮格通過來實現。有一定的兼容性問題元素高度可變,需要元素內部元素水平垂直居中主要是垂直方案通過實現,給最外部元素,同時添加一個次外層元素設置,這時第三層的元素即可垂直居中。
常用前端布局,CSS技巧介紹 對前端常用布局的整理總結,并對其性能優劣,兼容等情況進行介紹 css常用技巧之可變大小正方形的繪制
1:若通過設置width為百分比的方式,則高度不能通過百分比來控制. 在這個地方可以使用padding來實現,首先,元素的高度=height+padding*2+border*2;所以我們可以將widht設置為0, 然后用padding來實現盒子的高度(若元素padding的值是一個百分比,則是基于其父元素的寬度來計算的)
width: 50%; height: 0; background: red; padding-bottom: 50%;
2:通過在元素中添加一個正方形的圖片實現,設置圖片寬度100%,高度auto,元素不設置高度即可。(不推薦,特別是九宮格) 3:通過vw,vh來實現。(有一定的兼容性問題)元素高度可變,需要元素內部元素水平垂直居中(主要是垂直)方案
1:通過display:table實現,給最外部元素display:table,同時添加一個次外層元素 設置display:table-cell,vertical-align: middle;這時第三層的元素即可垂直居中。
.container { display:table; widht:50%; height:50vw; } .center { display: table-cell; vertical-align: middle; } .center > span { display: block; widht: 20px; height: 20px; background: #ff0000; margin: 0 auto; }
2:通過flex布局,父元素設置為justify-content:center,align-items:center; 3:通過grid布局,父元素設置為justify-content:center,align-items:center; 4:通過position + transform(margin)實現,如果使用margin則需要知道子元素的寬高且這個寬高不可變(這是由于magin如果設置為百分比是基于父元素的widht來計算的), 如果使用transform則沒有這個限制(transform的值是基于元素本身的widht和height來計算的),但又一點兼容的問題(推薦使用transform的方式)
對于單行文本和多行文本超出部分 ....parent { width: 200px; height: 200px; position: relative; background: yellow; } //transform: translate(-50%, -50%); .child { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -50px; background: green; }
//注意是單行文本可用自定義文本選擇樣式這時一段單行文本
.text{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; } //多行文本 需要注意盒子的高度要調整適當,不然會出行最后一行文字只顯示一半的情況 //該方法適用于WebKit瀏覽器及移動端這時一段多行文本
.text{ height: 100px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
雜項Select some of this text.
//全局設置選中文本樣式 ::selection { background: aquamarine; color: black; } //針對某個class設置 .custom-text-selection::selection { background: deeppink; color: white; }
//文字陰影 text-shadow: 1px 1px #ad6969; //CSS3 filter(濾鏡) 屬性 fliter: blur(50px); //設置高斯模糊 單位px 會導致邊緣變大 filter: grayscale(100%); //灰度100% filter: brightness(150%) //設置亮度 filter: contrast(180%); //設置對比度 ... clip: rect(0,0,0,0) //元素剪切(只在定位元素中生效) cubic-bezier屬性 三階貝塞爾曲線 用戶控制動畫速度 用法:transition: transform 1s cubic-bezier(); user-select: none; //文本不能選擇css變量使用
//基礎用法var-dynamic
.body { --customize-height: 100px; } .var-dynamic { height: var(--customize-height); } //擴展高級 通過js來控制css中的變量值var-dynamic
.var-dynamic { height: var(--customize-height); } //和less sass等預處理器的變量比較 1:預處理器的變量不是實時的,在media中試圖改變變量的值是不可行的,css變量可以 2:不繼承,不級聯
查看詳情
border為1像素的邊框//由于設備的dpr不同,我們設置的1px邊框在不能的設備中呈現的效果不一。 //那么通過設備dpr來設置不同的border的值不可以嗎? //我們需要知道border-widht的最低值為1px,低于1的無效 //使用 box-shadow: 0 0 0 0.5px; 來處理 //Browser Support 95.5% .hairline-border { box-shadow: 0 0 0 1px; } @media (min-resolution: 2dppx) { .hairline-border { box-shadow: 0 0 0 0.5px; } } @media (min-resolution: 3dppx) { .hairline-border { box-shadow: 0 0 0 0.33333333px; } } @media (min-resolution: 4dppx) { .hairline-border { box-shadow: 0 0 0 0.25px; } }對于列表元素針對某個元素的樣式做多帶帶處理(:not 選擇器)
//對每個li元素 添加右border 最后一個不加
//通過border的方式間接實現 .triangle { width: 0; height: 0; border-top: 20px solid #333; border-left: 20px solid transparent; border-right: 20px solid transparent; } //css3 clip-path裁剪屬性 clip-path: polygon(50% 0px, 100% 100%, 0px 100%);一個小小的loading動畫
@keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .donut { display: inline-block; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: #7983ff; border-radius: 50%; width: 30px; height: 30px; animation: donut-spin 1.2s linear infinite; }css實現switch
.switch { position: relative; display: inline-block; width: 40px; height: 20px; background-color: rgba(0, 0, 0, 0.25); border-radius: 20px; transition: all 0.3s; } .switch::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 18px; background-color: white; top: 1px; left: 1px; transition: all 0.3s; } input[type="checkbox"]:checked + .switch::after { transform: translateX(20px); } input[type="checkbox"]:checked + .switch { background-color: #7983ff; } .offscreen { position: absolute; left: -9999px; }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114178.html
摘要:不推薦,特別是九宮格通過來實現。有一定的兼容性問題元素高度可變,需要元素內部元素水平垂直居中主要是垂直方案通過實現,給最外部元素,同時添加一個次外層元素設置,這時第三層的元素即可垂直居中。 常用前端布局,CSS技巧介紹 對前端常用布局的整理總結,并對其性能優劣,兼容等情況進行介紹 showImg(https://segmentfault.com/img/bVbjkih); css常用技...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要:絕對底部前端掘金來自國外的設計達人,純,可以實現當正文內容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人,純CSS,可以實現: 當正文內容很少時,底部位于窗口最下面。當改變窗口高度時,不會出現重疊問題。甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
閱讀 3360·2021-11-11 16:54
閱讀 3502·2021-10-11 10:58
閱讀 1246·2021-08-30 09:41
閱讀 1802·2019-08-30 15:54
閱讀 2025·2019-08-30 14:00
閱讀 2696·2019-08-29 17:13
閱讀 1656·2019-08-29 15:19
閱讀 601·2019-08-29 15:14