4.5CSS-day05

总目录：https://blog.csdn.net/qq_41106844/article/details/105553392

前端 - 子目录：https://blog.csdn.net/qq_41106844/article/details/105553354

 

盒子和布局

盒子

1.基本盒模型
    block类型（div，p）
        这种盒模型的元素默认占据一行。
    inline类型 （span，a）
        这种盒模型的元素不会占据一行。
    inline-block类型
        既不会占据一行，也可以设置宽度和高度。
    inline-table类型
        默认占据一行，也可以设置宽度和高度。
    list-item类型
        将目标元素转换为类似于ul的列表元素
    run-in类型
        此类型默认为block类型，如果兄弟标签有block类型，那么他就变成inline类型。
2.属性
    display属性
        -block
            设置目标对象为block类型
        -inline
            设置目标对象为inline类型
        -inline-block
            设置目标对象为inline-block类型
        -inline-table
             设置目标对象为inline-table类型
        -table
            将目标对象显示为表格。
        -table-caption
            将目标对象显示为表格标题
        -table-cell
            将目标对象显示为单元格
        -table-column
            将目标对象显示为表格列
        -table-column-group
            将目标对象显示为表格列组
        -table-header-group
            将目标对象显示为表格头部
        -table-footer-group
            将目标对象显示为表格页脚
        -table-row
            将目标对象显示为表格行
        -table-row-group
            将目标对象显示为列表行组
        -list-item
            设置目标对象为list-item
        -flex
            设置目标对象为弹性盒子
        -none
            设置目标对象隐藏
    visibility属性
        -visible
            设置目标对象显示。
        -hidden
            设置目标对象隐藏。
    box-shadow属性
        -hOffset
            该属性值控制阴影在水平方向的偏移
        -vOffset
            该属性值控制阴影在垂直方向的偏移
        -blurLength
            该属性值控制阴影的模糊程度
        -spread
            该属性值控制阴影的缩放程度
        -color
            该属性值控制阴影的颜色
        -inset
            该属性值将外部阴影改为内部阴影
3.弹性盒子
    属性
        -flex-flow：作用于弹性盒子，用于控制容器内子元素的排列方向和换行方式。是一个复合属性。
        -flex-direction：指定弹性盒子内子元素的排列方向
            row 横向从左到右排序
            row-reverse 横向从右到左排序
            column 纵向从上到下排序
            column-reverse 纵向从下到上排序
        -flex-wrap：指定弹性盒子内子元素的换行方式
            wrap 换行
            wrap-reverse 反向换行
        -order：指定子元素的排列顺序
        -flex：控制子元素的缩放比例，是一个复合属性。
        -flex-grow：控制各子元素的拉伸因子。
        -flex-shrink：控制各子元素的收缩因子。
        -flex-basis：控制各子元素在缩放之前的基准大小。
        -align-items：作用于弹性盒子，控制弹性盒子内子元素在排列方向的垂直方向上的对齐方式
        -align-self：作用于子元素，控制子元素在排列方向的垂直方向上的对齐方式
            align两个属性通用值：
                flex-start 顶部（左）对齐
                flex-end 底部（右）对齐
                center 居中对齐
                baseline 顶部（左）对齐，但是义元素作为对齐基线。
                stretch 拉伸子元素，铺满盒子。
        -justify-content：作用于子元素，控制子元素在排列方向上的分布方式。
                flex-start 顶部（左）对齐
                flex-end 底部（右）对齐
                center 居中对齐
                space-between 多余的空间平均分布到各子元素的中间
                space-around
        -align-content：作用于弹性盒子，控制内部分布方式。

布局

1.属性
    核心属性
        -float：控制标签浮动
            left 向左浮动
            right 向右浮动
        -clear：清除标签浮动
            left 清除左浮动效果
            right 清除右浮动效果
            both 清除浮动效果
        -overflow：设置滚动条
            auto 当标签不能容纳内容时自动添加滚动条，允许用户使用滚动条。
            hidden 当标签不能容纳内容时自动裁剪掉多余的部分。
            scroll 总是显示滚动条
    其他属性
        -clip：对标签进行裁剪
        -overflow-x：只控制水平方向
        -overflow-x：只控制垂直方向
        -display:设置目标如何显示
        -visibility：设置目标是否显示

表格、列表相关属性

表格

1.属性（表格属性主要用于控制表格外观）
    border-collapse:控制两个单元格边框是否合并
    border-spacing：当border-collapse设置为seperate时，该属性用于设置间隔。
    caption-side：用于设置表格标题位于表格哪边。
    empty-cells：用于控制当单元格为空时，是否显示边框。
    table-layout：设置宽度布局方法。

列表

1.属性
    list-style：这是一个复合属性
        list-style-image：用于指定列表项标记图片
        list-style-position：用于指定列表项标记出现的位置
        list-style-type：用于指定列表项标记的样式
            decimal：阿拉伯数字
            disc：实心圆
            circle：空心圆
            。。。

media query

1.概念
    流式设计,在css中加入media query,会对打开网页的设备类型进行细节匹配。
2.语法
    语法
        @media not|only 设备类型 [and 设备特性]
    解释
        - 设备类型
            screen 计算机
            projection 投影仪
            handheld 手持设备
            all 全部设备
            。。。
        - 设备特性
            width 宽度
            height 高度
            aspcct-ratio 宽度/高度
            color   颜色
            。。。