calc() 函数、pointer-events、怪异盒模型、弹性盒知识总结

最新推荐文章于 2024-03-22 16:17:03 发布

Rainbow~小二

最新推荐文章于 2024-03-22 16:17:03 发布

阅读量159

点赞数

文章标签： css flex css3

本文链接：https://blog.csdn.net/weixin_43720739/article/details/105006143

版权

calc（x - y）函数
calc() 函数用于动态计算长度值
每个运算符前后都需要留一个空格

pointer-events：一般用于遮罩层
auto
none：你让点击无效穿透当前元素（一般用于遮罩层）

怪异盒模型
标准盒模型：
宽高是独立的，内边距是独立的，会把元素撑大，边框是独立的
注：宽高不包含内边距和边框
怪异盒模型： box-sizing：border-box；
宽高包含内边距和边框

怪异盒模型触发方式：
    方式一：丢失<!doctype html> 在IE678下会触发
    方式二：box-sizing：border-box


verticle-align 元素垂直对齐方式
    top 顶部对齐
    middle 中间对齐
    bottom 底部对齐
    针对inline-block和inline元素有效

弹性盒布局：display：flex；diaplay：inline-flex；（两个元素在一行显示）

作用：控制子集在“主轴”上排列
显示规则：所有的子元素都会在主轴上排列
    默认X轴为主轴，则Y为侧轴
    如果设置Y轴为主轴，则X为侧轴
设置方法：父元素必须为diaplay：flex；

设置为diaplay：flex；
    1.弹性盒，默认X轴为主轴，子元素默认沿主轴排列
    2.父级元素为弹性盒子，子元素都能设置宽高
    3.父元素为弹性盒子，让子元素在弹性盒中上下左右居中，只要设置margin；

设置display：flex/inline-flex；对于子元素的影响
    子元素的float和clear无效
    vertical-align（元素垂直对齐方式）无效


容器（父元素）

    属性：
        flex-direction 设置主轴
            row  水平方向为主轴
            column 垂直方向为主轴
            row-reverse 水平反向主轴
            column 垂直反向为主轴
        
        flex-wrap 子元素是否换行
            nowrap 不换行
            wrap 子元素换行
            wrap-reverse 子元素反向换行

        flex-flow ：设置主轴 是否换行；（复合写法）

        justify-content：；子元素在主轴上的对齐方式
            flex-start  起始位置
            flex-end    终点位置
            center      居中
            space-around 完全自动分配
            space-between 两端对齐
        align-items：；子元素在侧轴上的对齐方式
            flex-start  起始位置
            flex-end    终点位置
            center      居中
            stretch     默认位置对齐
            baseline    基线对齐
        align-content：;多行元素在侧轴上的对齐方式 多行元素才会生效
            flex-start  起始位置
            flex-end    终点位置
            center      居中
            space-around 完全自动分配
            space-between 两端对齐
            stretch 默认位置对齐


项目（子元素）
    align-self：；子元素在侧轴上的对齐方式
        flex-start  起始位置
        flex-end    终点位置
        center      居中
        stretch     元素被拉伸以适应容器（此元素不设置宽度和高度时会被拉伸）
        auto        默认值 如果父元素设置align-items，子元素将跟随父元素的设置

    order：；数值越大，越靠到后边去 （可以为负数）
    flex：1； 剩余的空间都给指定子元素

Rainbow~小二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
calc() 函数、pointer-events、怪异盒模型、弹性盒知识总结

calc（x - y）函数calc() 函数用于动态计算长度值每个运算符前后都需要留一个空格pointer-events：一般用于遮罩层autonone：你让点击无效穿透当前元素（一般用于遮罩层）怪异盒模型标准盒模型：宽高是独立的，内边距是独立的，会把元素撑大，边框是独立的注：宽高不包含内边距和边框怪异盒模型： box-sizing：border-box；宽高包含内边距和边...
复制链接

扫一扫