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属性相连