水平垂直居中+畫一個三角形

關于編碼規范很好的網站編碼規范
下面列舉幾個最常見的：

  • 不要使用import
  • 根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值
  • 減少標簽的數量
    編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現
  • JavaScript 生成的標簽
    通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免

垂直居中有幾種實現方式，給出代碼范例

  • 單行文本水平（text-align:center）垂直（行高line-height=div高度）居中 ，要是多行只能用padding了
    示例

  • 一個塊級元素包裹多個塊級元素，塊級元素又有文本，只需要讓父元素padding上下相等即可，
    示例

  • 一個塊級元素包裹另一個塊級元素，讓父元素相對定位，子元素絕對定位，top和left各50%，然后 transform: translate(-50%,-50%)
    示例

  • 仍然用absoute，不過是和margin-left搭配
    示例

  • 水平居中好說，就兩種塊級和行內元素

  • 垂直居中：行內：（1）最常見的上下padding相等（2）dispaly:table-cell和vertical-align:middle
    塊級元素：絕對定位：top:50%,然后margin-top:一半的高度或者transform:translateY(-50%)

  • 水平垂直：絕對定位或者flex

實現如下效果，每種效果都只使用一個html 標簽來實現

Paste_Image.png
  • 分析：其實每個三角形狀的東西都是由一個四方形的span經過
  1. 絕對定位后左右上下移動
  2. 旋轉背景色設為空白Border為none等（比如3）
  3. border設置某3個透明只剩下一個三角形
    示例
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容