css基础

0

css

1、盒模型

页面渲染时,dom元素才有的 布局模型。可以通过 box-sizing 进行设置。根据计算宽高的区域可分为:

  • content-box(W3C标准盒模型)
  • border-box(IE盒模型 width包含padding和border)
  • padding-box (padding计算入width内)

ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other

<style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
</style>

clipboard.png

2、BFC

块儿级格式化上下文,是一个独立的渲染区域,让处于BFC内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响

IE下为Layout,可通过zoom:1触发

功能

  • 使 BFC 内部浮动元素不会到处乱跑;
  • 和浮动元素产生边界。
    方法:

    • overflow: auto 让浮动的内容和周围的内容登高
    • overflow: hidden 外边距塌陷
    • display: flow-root 它可以创建无副作用的BFC
`给 <div> display: flow-root 属性后,<div> 中的所有内容都会参与BFC,浮动的内容不会从底部溢出。`

触发条件:

  • 根元素(<html>)
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-
  • footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。

html
float!=none
position = absolute || fixed
display = inline-block || flow-root || table、table-row、 table-row-group、table-header-group、table-

应用场景

  • 阻止margin重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖

层叠上下文

层叠上下文
层叠等级
层叠顺序
z-index

  • 普通元素的层叠等级优先由其所在的层叠上下文决定。
  • 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。

如何产生层叠上下文

  • HTML中的根元素<html></html>本身j就具有层叠上下文,称为“根层叠上下文”。
  • 普通元素设置position属性为非static值并设置z-index属性为具体数值,产生层叠上下文。
  • CSS3中的新属性也可以产生层叠上下文。

    • 父元素的display属性值为flex|inline-flex,子元素z-index属性值不为auto的时候,子元素为层叠上下文元素;
    • 元素的opacity属性值不是1;
    • 元素的transform属性值不是none;
    • 元素mix-blend-mode属性值不是normal`;
    • 元素的filter属性值不是none;
    • 元素的isolation属性值是isolate;
    • will-change指定的属性值为上面任意一个;
    • 元素的-webkit-overflow-scrolling属性值设置为touch。

clipboard.png

4、居中布局

  • 水平居中

    • 行内元素:text-align: center
    • 块儿级元素:margin:0 auto
    • absolute + transform

      • (1) 绝对定位元素的定位基准点是其有定位元素的祖先元素;
      • (2) translate要做偏移,是相对于自身的中心点而言,如果用百分比做单位,参考值就是本身元素的宽度。
    • flex + justify-cennter:cennter
  • 垂直居中

    • ling-heigth:height
    • absolute + transform
    • flex + align-item:center
.center {
          position:absolute;
           top:50%;
           left:50%;
           width:200px;
           height:200px;
           margin-top:-200/2px;
           margin-left:-200/2px;
}
.center {
           position:relative;
            top:50%;
            left:50%;
            width:200px;
            height:200px;
            background:red;
            transform:translate(-50%,-50%); /* 可以做很多动画效果,不兼容 */
            transform-origin:50% 50%; /* 设置旋转元素的基点位置 不兼容*/
}

flex布局解决的一些问题

  • 将内容块垂直居中于其父级内部。
  • 无论有多少宽度/高度,使容器的所有子容器占用相同数量的可用宽度/高度。
  • 使多列布局中的所有列采用相同的高度,即使它们包含不同的内容量。
section {
  display: flex; /* 子元素在section 中水平平均分布*/
}

clipboard.png
布局方向

  • flex-direction: row(默认) || column排布方向
  • flex-wrap: wrap; 自动换行 子元素添加高度 flex: 200px;
flex-direction: row;
flex-wrap: wrap;

等价于
flex-flow: row wrap;

clipboard.png

还有好多。。。

5、选择器优先级

  • !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
  • 选择器从右向左解析

6、清浮动,防止父级塌陷

  • 通过增加尾元素清除浮动

    • :after/ <br/>:clear:both
  • 创建父级BFC 如:display: flow-root
  • 父级设置高度

link与@import的区别

  • link是XHTML标签
  • link标签除了可以加载css外,还可以做很多其他的事情,如定义RSS,定义rel连接属性等,@import只能加载CSS。
  • 加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。
  • 使用dom控制样式时的差别。当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
  • @import可以在css中再次引入其他样式表

8、css预处理器(sass/less/postcss)

css预处理器的原理:是将类css语言通过webpack编译 转换成浏览器可读的真正css,在这层编译之上,便可赋予css更多强大的功能,常用功能:

  • 嵌套
  • 定义变量
  • 循环语句
  • 条件语句
  • 自动前缀
  • 单位转换
  • minxin复用

css动画

  • transition:过渡动画

    • transition-property:属性
    • transition-duration:间隔
    • transition-timing-function:曲线
    • transition-delay:延迟
  • animation/keyframes

    • animation-name:动画名称,对应@keyframes
    • animation-timing-function:曲线
    • animation-delay:延迟
    • animation-iteration-count:次数

      • infinite:循环动画
    • animation-direction:方向

      • alternate:反向播放
    • animation-fill-mode:静止模式

      • forwards:停止时保留最后一帧
      • backwards:停止时回到第一帧
      • both:同时运用
    • 常用钩子:animationend
  • 动画属性:尽可能的使用动画属性进行动画,能拥有较好的性能表现

    • translate
    • scale
    • rotate
    • skew
    • opacity
    • color

你可能感兴趣的

载入中...