前端笔记

CSS

• 当宽度和高度使用百分比时，它们的长宽是相对父级别元素来确定的。比如父级元素宽度为500px，那么子元素宽度设置为50%，它的绝对宽度是250px；

• CSS混合样式(background)和单一(background-color)样式不要混写，如果非要混写，先写混合样式，再写单一样式，否则会被覆盖；

• 背景色填充时，填充到margin以内到区域（不包括margin）

• 文字只会出现在content区域

• margin可以为负数、padding不可以是负数

• margin叠加问题：上下排列的两个盒子同时设置了margin属性时，两个盒子的垂直间距不是两个盒子margin值的叠加，而是取margin较大的那个值；

• margin传递问题：只出现在嵌套结构中，且只出现在margin-top上。当子盒子设置margin-top值时，此时父盒子也会受margin-top的影响，而出现与父盒子上方盒子的距离；

• 当不设置content的width和height时，这两个尺寸会自动计算，默认宽度占满父容器，即使再对盒子正价padding，子盒子也不会超出父盒子；

• 内联元素左右会有白边，解决方案是给父级元素设置font-size=0，然后给内联元素设置合适对font-size

• CSS透明：1.transparent（相当于一个颜色的名称）2.opacity（一个属性名，它的值是在0到1之间到数，代表不同到透明度），当父元素设置opacity时，父元素内的子元素也会透明 3.rgba

• float 只会影响后面的元素；当元素浮动后，如果这个元素没有设置宽度，那么该元素的宽度由元素内的内容撑开（类似于内联）；

• 清除浮动：最完美方式，为子元素设置:after

• 单行文字设置省略号：设置父元素的width属性；white-space:nowrap; overflow:hidden; text-overflow:ellipsis

• 定位(position)
  1.relative：元素不脱离文档流，使用left、right、top、bottom相对自身偏移，不影响其他元素的布局
  2.absolute：元素脱离文档流；可以让内联元素支持宽高(具备块元素的特性)；使块元素的宽度根据内容撑开宽度(类似内敛元素)；如果由祖先元素已经定位，则相对于最近的祖先元素进行偏移，如果没有，相对整个文档发生偏移；
  3.fixed：元素脱离文档流；可以让内联元素支持宽高(具备块元素的特性)；使块元素的宽度根据内容撑开宽度(类似内敛元素)；相对于浏览器窗口进行位置偏移
  4.sticky： 当滚动条滑动到一定位置时，定位的元素固定，适合做长表格的表头，这样当表头到达浏览器顶部是，可以固定下来，再滑动，只是内容滑动