css基础

头像
小小年128
    阅读 5 分钟

    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
    css
    小小年128
    74 声望5 粉丝

    坚定自己的选择，然后认真的去做每件事

    « 上一篇
    记录一下mongoDB的使用
    下一篇 »
    brew安装mongodb报错

    引用和评论

    推荐阅读
    头像
    报错

    小小年128阅读 1.9k评论 1

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端开发工具

    寒青赞 15阅读 4.8k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.6k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.5k

    0 条评论
    得票最新