Vue 学习总结（二）之样式布局

一，学习网站：https://zh.learnlayout.com/
二，常用属性学习
1，diaplay
    通常值有 block 和 inline 、none
    block 表示块级元素，常见块级元素 div、p、form、header、fooder、section等
    inline 表示 行内元素，常见行内元素 span、a等
    none 表示 在不删除元素情况下 隐藏 或 显示元素 与 visibility:hidden 区别在于 不会占据本来应该显示的空间
    list-item
    table
2，max-width 最大宽度 可替代 width
3，margin
    可以定义四个值，依次为 上、右、下、左，当定义一个值时表示 四个方向值相同
    两个值 表示 上下、左右
4，position 定位
    static：默认值，表示 元素不会被特殊的定位
    relative：表示相对定位，在一个相对定位的元素上设置top、right、bottom和left属性会使其偏离正常位置
    fixed：表示固定定位，会相对视窗来定位
    absolute：表示绝对定位，与 fixed有点相似，不同点在于 其是相对于父类元素的位置进行定位，如果没有父类，则相对于body进行定位
5，float属性
    表示浮动，一般用于文字环绕图片
6，clear 属性表示控制浮动
    一般用于 某个元素使用了浮动，这时候新的元素如果直接布局会让上面浮动元素产生效果，这时候该元素使用clear可以使其浮动失效
7，overflow 表示 清除浮动，解决父元素与子元素高度差问题
    auto： 自动清除浮动
    hidden：隐藏浮动
    
8，百分比宽度 ---自适应
9，媒体查询 一般页面进行缩小、放大 拉伸时使用
    响应式设计 是一种让网站针对不同的浏览器和设备呈现不同显示效果的策略，这样可以让网站在任何情况下显示的很棒
    @media(min-width:600px){//表示宽度为 600px时触发媒体查询
        nav{
            float:left;
            width:25%;
        }
        section:{
            margin-left: 25%;
        }
    }
    @media(max-width:599px){//表示宽度为 600px时触发媒体查询
        nav li{
            dispaly: inline;
        }
    }