CSS day06

or0fun 发布于2019-08-30 15:44 / 2951人阅读

摘要：布局使用块元素搭建网页结构改变默认文档流的方式，让其在一行中显示多列。

布局

使用块元素搭建网页结构,改变默认文档流的方式，让其在一行中显示多列。【让块在一行中显示】


    
    
    


    
    
    


浮动布局
    float
        float:left/right
        可以使块元素脱离当前的文档流
            1) 宽度如果没有手动指定那么就由内容决定
            2) 多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行
            3) 浮动元素失去了对父元素的支撑

    clear
        clear:left/right/both
        清理左边/右边/左右两边的浮动元素，一般使用这个特性强制子元素换行，达到支撑父元素的目的

    一行多列：
        全部浮动
        ul>li{
            float:left
        }
    一行两列
        方法一：
            两列都浮动
            .left {float:left }
            .right {float:right; }
        方法二：
            一列浮动，一列添加margin-left
            .left {float:left; width:200px}
            .right {margin-left:220px;}

    overflow
    overflow-x
    overflow-y
        auto/none/visible/scroll
    当父元素的宽/高固定，子元素的宽/高超过了父元素就可以使用这个特性


    display
        block/inline/inline-block/...
        块/行内/行内块
        行内块
            可以与其他行内元素共享一行空间
            可以指定宽高

定位布局
    position 
        static        静态（默认）     非定位元素

        relative     定位元素（相对定位）
            参照点：原先所在的位置
            特性：不脱离文档流（宽度默认为为100%，原来在文档流的位置不会被抢占），但是可以覆盖在其他元素上


        absolute     定位元素（绝对定位）
            参照点：距离它最近的父定位元素，如果没有，参照视口
            特性：脱离文档流（宽度由内容决定，原来在文档流的位置被其他元素抢占）


        fixed         定位元素（固定定位）
    只能定位元素才能使用定位属性
        top 、left、bottom、right

云服务器混合云 ruby06 Days day DAY44

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116177.html

Day06 - Fetch、filter、正则表达式实现快速古诗匹配

摘要：正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。 Day06 - Fetch、filter、正则表达式实现快速古诗匹配作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

Warren 2019-08-20 18:17 评论0 收藏0
Day06 - Fetch、filter、正则表达式实现快速古诗匹配

摘要：正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。 Day06 - Fetch、filter、正则表达式实现快速古诗匹配作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

Carl 2019-08-29 12:59 评论0 收藏0
Day06 - Fetch、filter、正则表达式实现快速古诗匹配

摘要：正则表达式实现快速古诗匹配作者简介是推出的一个天挑战。数据匹配操作使用基础参考文档项目源码分析正则找出匹配的诗句替换高亮的标签构造值会返回带搜索关键字的新数组。执行对大小写不敏感的匹配。 Day06 - Fetch、filter、正则表达式实现快速古诗匹配作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

StonePanda 2019-08-01 17:13 评论0 收藏0
JavaScript 30 - 一起做一次了不起的挑战

摘要：加入我们，一起挑战吧扫码申请加入全栈部落 JavaScript 30 - 一起做一次了不起的挑战 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑...

1treeS 2019-08-20 18:11 评论0 收藏0