小編推薦： Fundebug提供JS尽棕、微信小程序、微信小游戲髓考，Node.js和Java錯誤監(jiān)控。真的是一個很好用的錯誤監(jiān)控服務(wù)，眾多大佬公司都在使用。 摘要： CSS炫技舆瘪。 ...
發(fā)簡信
IP屬地：江蘇
-
45個值得收藏的 CSS 形狀 -
-
瀏覽器兼容性介陶？！序章 談?wù)劇盀g覽器兼容性”的問題色建？很多前端的面試或筆試中哺呜，都有比較籠統(tǒng)的“說說你所知道的各瀏覽器存在的兼容問題”，個人感覺這個問題問的太“大”了些箕戳，從樣式到腳本某残，都會有很多不...
-
JavaScript的API背誦篇
js的API不算太多，不熟悉的分別百度之陵吸。講究的是全局觀玻墅，沒事時候就過過，熟記于心壮虫。 1.全局對象 值屬性: NaN Infinity undefined 函數(shù)屬性: eva...
-
快速上手ES6
es6中有很多特性澳厢，使javascript語法更加豐滿环础，總結(jié)一波常用的es6知識點。 1.變量聲明const和let 在ES6之前剩拢，我們都是用var關(guān)鍵字聲明變量线得。無論聲明在...
-
前端布局神器display:flex2009年，W3C提出了一種新的方案--Flex布局徐伐，可以簡便贯钩、完整、響應(yīng)式地實現(xiàn)各種頁面布局办素。目前已得到所有現(xiàn)在瀏覽器的支持角雷。 flex瀏覽器支持 一、Flex布局是什么性穿？...
-
近一萬字的ES6語法知識點補充
前言 ECMAScript 6.0（簡稱ES6）勺三，作為下一代JavaScript的語言標(biāo)準(zhǔn)正式發(fā)布于2015 年 6 月，至今已經(jīng)發(fā)布3年多了需曾，但是因為蘊含的語法之廣檩咱，完全消...
-
js對象(原型對象/原型鏈)一個對象的結(jié)構(gòu)(屬性+操作)屬性：（1）我們要說屬性的來源，它有兩個來源胯舷，第一來自于自己如上圖的x,y屬性，第二來自于原型鏈的繼承绊含，如上圖的z桑嘶，當(dāng)我們訪問obj.z時，會首先...
-
首月前端實習(xí)心得
前端躬充，一個當(dāng)初以為自己已經(jīng)入門了的職業(yè)逃顶，天真以為會點html + CSS + Js，掌握基礎(chǔ)的公司前端所用框架Vue的用法就可以了充甚，但實習(xí)后才發(fā)現(xiàn)原來自己連前端的門是什...
-
最全的常見 Css 布局
本文概要 本文將介紹如下幾種常見的布局： 一以政、單列布局 常見的單列布局有兩種： header,content 和 footer 等寬的單列布局 header 與 footer...
-
【歸納】flex布局說到flex布局，在我之前的影響中伴找，只知道這是一種較傳統(tǒng)布局較方便的布局盈蛮，這種布局對我來說是全新的。在flex布局出現(xiàn)之前技矮，我們使用的傳統(tǒng)布局主要有以下幾種： normal ...
-
【西 3:23】 無論作什么衰倦，都要從心里作袒炉，象是給主作的，不是給人作的樊零。
-
-
干貨：關(guān)于Git的超贊講解注：看到掘金上有一篇關(guān)于Git的寫的很好的文章夺艰，轉(zhuǎn)載一下芋哭，希望能幫助到大家。若有任何問題劲适，可與本人聯(lián)系楷掉，如侵必刪，謝謝霞势。文章出處：一篇文章烹植，教你學(xué)會Git作者：Ruheng ...
-
居中
水平居中：
1.對于inline元素：為父元素設(shè)置text-align: center;即可（子元素所有內(nèi)容都會居中，所以最好在子元素中使用text-align:left;歸位）愕贡。
2.對于block元素：為元素設(shè)置寬度草雕，再設(shè)置margin: 0 auto;（IE6還是需要在父元素設(shè)置text-align: center;）
3.對于float元素：為元素設(shè)置寬度，再設(shè)置position:relative;固以，再設(shè)置left:50%;墩虹，最后margin-left設(shè)置為該元素寬度的一半乘以-1。
.content { height: 30px;background-color: rgb(89, 157, 197); /* 無關(guān)緊要的代碼 */ float: left; width: 300px; position: relative; left: 50%; margin-left: -150px; }
4.對于position:absolute元素：
法一：為元素設(shè)置寬度憨琳，再設(shè)置left:50%;诫钓，最后margin-left設(shè)置為該元素寬度的一半乘以-1。
法二：為元素設(shè)置寬度篙螟，再設(shè)置左右偏移為0（left: 0;和right: 0;）菌湃，最后設(shè)置左右外邊距為margin: 0 auto;。
垂直居中：
1.對于單行文本垂直居中：設(shè)置高度遍略，再設(shè)置line-height值等于設(shè)置的高度值惧所。
2.父容器高度不知，兩種方法：
法一：父容器設(shè)置position:relative;绪杏，子容器設(shè)置position: absolute; top: 50%; transform: translateY(-50%);下愈。
.main { position: relative; width:100%;height: 500px;background-color: rgb(199, 196, 43); /* 無關(guān)緊要的代碼 */ } .content { background-color: rgb(89, 157, 197); /* 無關(guān)緊要的代碼 */ position: absolute; top: 50%; transform: translateY(-50%); }
法二：（父容器下只有這個子元素時使用）子容器設(shè)置position: relative; top: 50%; transform: translateY(-50%);。
.main { width:100%;height: 500px;background-color: rgb(199, 196, 43); /* 無關(guān)緊要的代碼 */ } .content { background-color: rgb(89, 157, 197); /* 無關(guān)緊要的代碼 */ position: relative;top: 50%; transform: translateY(-50%); }
注：transform: translate中的translate是根據(jù)自身百分比寬高在X/Y軸上移動蕾久。所以如果在子元素使用position: absolute;left:50%; transform:translate(-50%,0);則可以實現(xiàn)水平居中势似。
▲ 3.flex簡單粗暴：
.main{ width: 100%; height: 400px; background-color: aqua; /* 無關(guān)緊要的代碼 */ display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/ // justify-content:center; /*指定水平居中*/ } .content { width: 200px;height: 200px;background-color: rgb(89, 157, 197); /* 無關(guān)緊要的代碼 */ }
【個人筆記，只作分享討論】 -
旋之華，專注于跨平臺和全棧方向霹抛。<br><br>點擊以下鏈接查看所有課程<br><a href="https://links.jianshu.com/go?to=http%3A%2F%2Fm.study.163.com%2Fprovider%2F1028237382%2Findex.htm%3Fshare%3D2%26shareId%3D1028237382" target="_blank">http://m.study.163.com/provider/1028237382/index.htm?share=2&shareId=1028237382</a><br><br>獲取資料搓逾、技術(shù)交流，請?zhí)砑游襐X：yejh9522
-
知道這20個正則表達(dá)式杯拐，能讓你少寫1,000行代碼正則表達(dá)式霞篡，一個十分古老而又強大的文本處理工具世蔗，僅僅用一段非常簡短的表達(dá)式語句，便能夠快速實現(xiàn)一個非常復(fù)雜的業(yè)務(wù)邏輯朗兵。熟練地掌握正則表達(dá)式的話污淋，能夠使你的開發(fā)效率得到極大的提...
-
學(xué)習(xí)前端我推薦這5本書
前言 作為一名前端開發(fā)人員，如果你告訴我你沒有看過任何關(guān)于前端的書籍余掖，那么我完全可以認(rèn)為你不是一名合格的前端開發(fā)工程師寸爆。為什么我要以“看書”來衡量合格前端的標(biāo)準(zhǔn)？因為前端作為...
