Html / CSS常見問題 解決方案

 解決Safari下input光標過大

input {
  line-height: normal;
}

設置浮層

html, body {
 /*只有父元素設置寬高為100%子元素設置寬高100%時才能撐滿整個頁面*/
  width: 100%;
  height: 100%;  
}
.shade {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.3;
}

CSS繪制三角形

.caret {
    width: 0;
    height: 0;
    border-top: 4px solid #000;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

文字超出顯示省略號

/*<p class='text-ellipsis'></p>*/
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

清除浮動

1.浮動元素父級添加樣式

.father {
  overflow: auto;
  /*overflow: hidden;*/
  clear: both;
  zoom: 1;   /*解決ie兼容問題*/
}

 

2.父元素后添加偽元素

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}

3.同樣可以使用如下方式（兼容IE）

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

注：使用 display: block/table；是因為定義 display 為 block 或 table 的元素前后會自動添加換行符。（HTML DOM display 屬性）
4.在浮動元素后添加 div.clear

.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

5. 在浮動元素后面添加 br 元素

<br clear="all">

注意：

1. clearfix 應用在包含浮動子元素的父級元素上 

2. 使用 clear 清除浮動會發生margin重疊顯現,使用BFC清除浮動（在浮動元素的父元素上添加overflow: hidden;）則會把整個元素包起來，從而不會發生margin重疊現象

設置元素div3高度為瀏覽器高度100%

若html結構如下:

body > div1 > div2 > div3

若要使得  div3 占滿整個屏幕高度，CSS設置如下:

html, body {
  height: 100%;
}

.div1, div2, div3 {
    height: 100%;
}

*元素的高度100%只相對於父元素

CSS書寫順序

/* 位置屬性 */
position, top, right, z-index, display, float

/* 大小 */
width, height, padding, margin

/* 文字系列 */
font, line-height,  color, text-align

/* 背景 */
background, border

/* 其他 */
animation, transition

錨點鏈接

h5中使用 id 作為錨點鏈接，如下：

<a href="#item1"></a>
<div id="item1"></div>

父元素寬度不夠導致浮動元素下沉

為父元素添加負值的margin-right

.father {
  margin-right: -32px;
}

判斷有無滾動條

if($("body").scrollTop()<=0 ){  
    // do()...
}

滾動條滾動到頁面最底部

if ($(document).scrollTop() >= $(document).height() - $(window).height()) {

滾動條滾動到指定元素位置

$("html,body").animate({scrollTop:$("#elem").offset().top},1000);

元素高寬未知時設置水平和垂直居中

div {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

隱藏滾動條

在出現滾動條的元素上添加樣式：

.noScrollBar {
    overflow-x: hidden;
    overflow-y: hidden;
}