ZG前端學習第二天2020-10-30

今日週五 老師外出自習一天
學習內容 ：
css選擇器中的屬性選擇器 M[attr] { }通過標籤的屬性進行匹配
*= 部分匹配 = 完全匹配 ^= 起使匹配 $= 結尾匹配 使用M[attr *= '所需要的屬性‘]{ }
層次選擇器 M N M>N M~N M+N
css詳細的優先順序 行內(1000) > id (100) > class(10) = 屬性選擇器 = 偽類 >標籤(1)=偽元素 > 通配

css盒子模型中存在的幾個問題 margin疊加 (解決： 只給一個元素新增margin或者採用BFC規範) 和 margin內嵌的傳遞(用padding來代替margin-top 加一個邊框 或者BFC規範）
所謂的BFC規範 （塊級格式化上下文）形成一個獨立的容器不受到外界的影響
使用 ：float除了none position中的absolute和fixed overflow除了visible預設的 display中的 inline-block 和table-cells 和flex
應用場景除了上面margin的2個問題還有浮動和覆蓋。
屬性的繼承與不可繼承：

• 不可繼承的： width min-width max-width height min-height max-height
  display margin padding left right top buttom background overflow position z-index float clear table-layout vertical-align page-break-after page-bread-before 和unicode-bidi

• 所有元素可以繼承 visibility cursor

• 內聯元素可以繼承 letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction

• 塊狀元素可繼承 text-indent text-align

• 列表元素可繼承 list-style list-style-type list-style-positon list-style-image

• 表格元素可繼承 border-collapse

css的省略號寫法：

• 固定width
• 不允許折行 white-space:nowrap
• 溢位隱藏 overflow：hidden；
• 新增省略號 text-overflow:ellipsis

瀏覽器的核心和字首

瀏覽器                 核心                    字首
IE                     Trident                     -ms-
Chrome               Webkit              -webkit-
Firefox               Gecko                     -moz-
Opera                 presto                      -o-
Safari             Webkit                     -webkit
美化表單中label和input的使用是通過 label的for屬性和input的id屬性相連