css點滴

<dl>
<dt>列表項標題</dt>
<dd>列表項內容</dd>
<dd>列表項內容</dd>
<dd>列表項內容</dd>
</dl>
dt 是 define list title  
dd是 define list define
dd是dt的解釋  

<ul>
<li>列表項內容</li>
<li>列表項內容</li>
<li>列表項內容</li>
<li>列表項內容</li>
</ul>

7.一個div的庫寬度若是有值，100%之類的也算，那麼這個div的默認寬度就是和父類同樣的寬度，可是行內元素就不會了，橫內元素靠撐大，若是一個塊元素你不知道寬度而且想靠撐大而居中的話，那麼你就最好把他轉化爲行內元素，而後把這個行內元素text-align:center;

8.不少時候，咱們會考慮一個問題，我究竟是用float:left仍是inline-block呢。

記住float:left是撐不起父元素的寬度的。而inline-block能夠的，若是你的父元素須要寬度，須要居中的話，建議用inline-block.

9.inline元素設置寬和高沒有意義，可是inline元素float以後設置就有意義了。而且能夠放，Float以後inline元素裏邊能夠放塊級元素了。因此Float以後橫內就變爲塊了。

10.i標籤是橫內元素，設置寬高的話，必須block,或者float:left;p也是塊元素。

11.文章前面的黑點的實現

12.兩橫文字，用一個h1和span或者一個span一個p。利用塊元素換行的特性。：

13.一個div或者li中一個圖片和一個span標籤想垂直居中的話，最好把文字用line-height來搞，而圖片用vertical-align來搞。就行。

14.行內元素變爲inline-block的緣由是，由於橫內元素設置width和height無效。塊元素變爲inline-block就不說了。比float簡單，能夠設置無定寬居中。

15.若是一個圖片外設置a標籤的話，那麼這個a標籤必須設置width和height，這個a必須是block後者inline-block,或者float;

16.height和width的繼承，一個塊元素，若是沒有寫width屬性，默認100%，若是沒有寫height，那麼默認0,可是若是這個元素內部有塊元素的話，內部塊元素的height會撐高他的高度。若是這個元素內部是行內塊的話，也行。可是若是這個元素是float:left的話就不行了。inline-block的屬性不會默認繼承父div的width100%.

17.inline-block內部也是能夠放塊元素的，而且不改變內快元素的特性。

18.兩個行內元素的對其：vertical-align: top;

19.<h1>咱們都是好孩子</h1> 當咱們在h1外邊的div設置text-align：center;你發現h1中的文字居中，不要覺得是h1居中了，塊元素這樣子是無法居中的，可是塊元素的文字確實能夠居中的。

20.nth-child 這個選擇器，從1開始，必須是父類下的，和jquery下的選擇器不一樣。first-child last-child這個選擇器。時間長了，有的選擇器就忘了.

21.對於一個div中的兩個inline-block元素，底部可能對不齊，這個時候，你用line-height是沒用的，直接發float:left弄成塊元素就行，而後用margin，可是這樣不能垂直居中了，因此須要垂直居中的時候，咱們最好不考慮。

22.float:left與inline-block

float這個看起來比較好，可是inline-block看起來就是有兩層。

float的的話，外邊的div必須設置高度才行。

23.在一個父div中使用margin-top的時候，咱們須要注意。若是這個div沒有border的話，那麼第一個子元素的margin-top就不會已父元素爲準，而是不斷向外透去。若是有float:left就正常了。這個狀況咱們須要記住，子元素的第一個元素，或者子元素第一子元素，margin-top.

這個狀況咱們能夠用clearfix解決。

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

24.若是不考慮到一個元素的垂直居中（長度不定）的問題，那麼就用float，若是考慮到居中就用float。

25. a標籤若是float或者block以後，他的text-align:center;或者line-height以後的字仍是會劇中的

26.添加box-sizing:border-box，容器內子元素增長padding,border，容器寬度都不會被撐開。或者是在容器裏邊添加一個無用的div塊標籤，不指定寬度高度，也是能夠的。

27.當設置min-width的時候，咱們也同時能夠設置overflow-hidden;在小的時候自動隱藏。

28.一個a標籤默認是inline，若是在a標籤裏放一個float的div（200*200）元素的話，那麼這個a標籤仍是0*0,若是裏邊的div沒有float的話，那麼這個a標籤標籤會是100%的寬和200的高。

若是這個a標籤是inline-block的話，那麼a標籤裏邊放一個float的div（200*200）元素的話，那麼這個a標籤會是200*200.若是裏邊的div沒有float的話，那麼這個a標籤也是200*200.

29.寫代碼和作人同樣，某些地方要想人感受不是那麼生硬的話，那麼咱們最好漏出來些，或者多寫之類的。

30.按鈕的顏色淺一些，裏邊的按鈕顏色重一些。

31.不知道爲何boostrap的輸入框聚焦的時候，藍色就比較淡，可是若是咱們本身寫一個輸入框和bootstrap同樣額樣式，可是藍色會很重。

32.https://gold.xitu.io/post/5854e137128fe100698e6271

33.若是兩列布局，

</div>

.left{width:200px;float:left;}

這個時候，咱們就會發現，在right中，咱們就發現不能用clear:both,若是用了，就發現把左邊的浮動清除了。

34.before和after的僞類

35.簡單的tab效果。注意必定要在控制檯沒有打開的狀況下哈，若是控制檯打開就不對了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab簡潔版</title>
<style type="text/css">
#box1{
    width:400px;
    height: 1000px;
    margin:100px auto;
  }
  #tab_nav li{
    float:left;
    margin:20px;
  }
  #tab_content{
    width: 400px;
    height: 200px;
    overflow:hidden;
  }
  #tab_content div{
    width:100%;
    height: 200px;
    background:#FFF; overflow:hidden;
  }
  #t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
 <ul id="tab_nav">
    <li><a href="#t_1">tab_1</a></li>
    <li><a href="#t_2">tab_2</a></li>
    <li><a href="#t_3">tab_3</a></li>
    
 </ul>
 <br style="clear:both;">
 <div id="tab_content">
    <div id="t_1">tab_1</div>
    <div id="t_2">tab_2</div>
    <div id="t_3">tab_3</div>
 
 </div>
</div>


</body>
</html>

36.咱們須要明白，即便一個元素及時display:none。可是jquery的.height()仍是能夠看出他的高度。可是他在原來的位置確實消失了，而且不佔位置的。

37.小三角的顯示：jiao sanjiao

38.父元素去除浮動而後，撐起高度的作法。

1.手動設置高度。

2.自適應的高度。

#box:after{

cleat:both;

visibility:hidden;

}

39.一個三列布局。中間自適應。

.left{
float: left;
width:100px;
}
.center{
margin-left:100px;
margin-right: 100px;

}
.right{
float: right;
width:100px;
}

40.css中這個後邊必須有分號。

41.padding和一個圓可能致使下面的圖片，看上去仍是美美的。

42.一直覺得用個人clearfix就能夠解決浮動的撐起高度和一切的問題，今天發現他是不完美的，1.不能有absoute的超出div，超出會隱藏，這種，狀況手動設置高，能夠解決。

（2）若是咱們設置高度，而且後邊的div覆蓋他的上邊的話，那麼對於div中的元素咱們不能用float,若是用了，那麼及時你使用clear:both也是沒有效果的。這個時候咱們把float:right；改爲了text-align:right;這樣子問題就解決了。

43.兩列布局的時候，你必定要清楚的知道，左側一欄的寬度是多少，你用float以後，，右側的時候margin-left.左側是寬度必須明確。

若是你用兩個float來完成兩列布局話，那麼咱們必定要記住兩個寬度都是必須的。

44.

效果：

45.background-size:100% 100%;這個屬性，咱們能夠知道，若是一個圖片不夠div的大小時候，不重複的狀況下是顯示不滿的，這個時候，咱們能夠考慮使用 background-size:100% 100%;這個時候，就能夠填充滿了。

=============================

零點寫頁面的成長

46.當:hover和active的時候，咱們須要明白hover須要出發的，可是active不須要。

47.一個div中的img水平和垂直都居中

text-align:center; vertical-align:middle; display:table-cell;這樣子的話，會失效,margin-left和margin-right;

48.這兩個屬性不能共存。

49.鼠標滑過文字，光標改變。的狀況

http://www.cnblogs.com/caidupingblogs/p/5522647.html

50.使用calc(100% - 500px)

注意—號兩邊必須都是空格,注意父元素必須設置height：100%才行。

51.

/*自適應一個動態的圖片*/
.square{
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
}
.square img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;//img圖片居中顯示
object-fit: cover;//img圖片居中顯示
}

52.

/*一個文字超過指定寬度自動變爲...,必須指定寬度*/
.textHidden{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}

如今開始研究一下特別的css屬性。

53.display

當爲display:list-item;這個屬性何時用？

相關聯的樣式：

list-style:square inside url('/i/arrow.gif');

54.不管是一行文字仍是兩行文字都想垂直居中的話，那麼用display:table.

55.background和background-image設置圖片的效果不一樣，若是圖片有透明的部分，background-image會保留圖片的底色的部分，可是background則不會。

56.padding:20px auto;添加了一個auto就會報錯。

57.當只有一個max-width的時候表示超過了600px的時候咱們用這個樣式

58.水平和垂直都居中的方法。

59.absolute以後設置left,top,bottom,right以後他的高度和寬和天然有了。

60.html,body開始都設min-height的話，那麼html有效，可是body無效了，因此開始的時候都設置height:100%;就比較好。

61.這個放到less中是不行的，height: calc( 100% - 60px )

62.用not比較簡單的使用；

除了最後一個；

.nav li:not(:last-child) {
border-right: 1px solid #666;
}

除了第一個。

.nav li:first-child ~ li {
border-left: 1px solid #666;
}

63.:before和:after必須添加content屬性才行。

64.absolute中設置了left:0,right:0,bottom:0,top:0,這樣子就能夠的。

65.absolute若是不設置top:0.他的佈局和沒有absolute同樣，不過他不佔空間，後邊的會在他的上邊顯示。他仍是可使用margin之類的。

66.inlineblock能夠支撐起子元素float以後的高度麼。

我試了下能夠的，float以後應該是block了，不過懸浮的，

67.font-size這個是相對於父元素的font-size的大小的，若是body或者html直接設置字體100%這個是利用瀏覽器默認的字體大小。

68.line-height 這個對漢子的垂直居中還能夠，可是對英文就不友好了。

69.當有圖片之類的時候出現左右對不齊的時候，注意使用vertical-align: top;這個。

70.

題主你要回家補習下css繼承的體現，height、padding、margin等是不繼承的，繼承的有例如：color, line-height, font-size, font-family等，多數都是文本有關的樣式。

若是想要高度繼承的話，height: 100%，或者 height: inherit 試試

71. 父div不管是block仍是inline-block

若是父div設置了高度300px，父含有背景顏色綠色，裏邊子的內容是1000px。裏邊的內容會撐出來,可是子內容不會有顏色。

若是父div沒有設置高速的話，字內容的高度會撐高父內容的高度。

72.

http://www.w3cplus.com/css3/css3-object-fit-and-object-position-properties.html

73.h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}

這樣子h1,h2,h3,h4,h5,h6就自動繼承了父類的樣式和normal

74.css若是後邊寫的樣式會自動覆蓋前面的樣式。

blue會自動覆蓋前邊的樣式。

75.user-select 這個表示是否能夠選擇文本。

none：文本不能被選擇text：能夠選擇文本

all：當全部內容做爲一個總體時能夠被選擇。若是雙擊或者在上下文上點擊子元素，那麼被選擇的部分將是以該子元素向上回溯的最高祖先元素。

element：能夠選擇文本，但選擇範圍受元素邊界的約束

兼容性

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

76.文字超出隱藏

<div class="app">這就是咱們的世界這就是咱們的世界這就是咱們的世界</div>

.app{
border:1px solid pink;
width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

還有另一種,若是父類這樣子乾的話，子類也是能夠...的注意這個時候父類是不能出現font-size:0

<div class="app"><span>這就是咱們的世界這就是咱們的世界這就是咱們的世界</span></div>

.app{
border:1px solid pink;
width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding:0 20px;
}

77. backdrop-filter 和filter 寫出高斯模糊效果以及二者區別

http://www.javashuo.com/article/p-htrmclrg-s.html

78.這裏咱們能夠看出來last-child的這樣子用在css的組合器中

79.有時候對齊的時候margin和padding失效了，能夠試試下邊的。

position: relative;
top: -6px;

80.clearfix能夠解決最長碰見的頭部的margin合併的問題。

81.不管是開發仍是測試的時候,一個容器,咱們首先考慮的是這個容器的margin,而後是padding，若是父容器能夠解決的問題,那麼子容器不必用margin或者padding.

不要把父元素應該添加的margin，應該是四周都有的你沒有考慮到。

82.父元素的rgba設置和#ff0000設置的區別和聯繫

#app{
height:100px;
background:rgba(255,0,0,0.2)
}
.children{
height:50px;
background:blue;
}

83.由於父繼承了line-height:100px;因此子元素的button和span自動撐高。

vertical-align屬性起做用的前提必須是做用在內聯元素上。 即display計算值爲inline inline-block inline-table table-cell的元素。因此若是元素設置了float: left或者position: absolute，則其vertical-align屬性不能生效，由於此時元素的display計算值爲block了。

做者：幻靈爾依
連接：https://juejin.im/post/5ce607a7e51d454f6f16eb3d
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

1. 點點滴滴
2. MyBatis——點點滴滴
3. Git點點滴滴
4. DNS點點滴滴
5. osx 點點滴滴
6. Docker 的點點滴滴
7. 優化滴滴點點
8. 開發點點滴滴
9. Activity的點點滴滴
10. Calendar類點點滴滴積累
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。