[成都|内门弟子]CSS-何俊|2020年06月08日的日报-技能树.IT修真院

发表于： 2020-06-08 21:39:55

1 1547

今天完成的事：

1.解决了圆框挤压变形问题

                display: flex;
                justify-content: center;
                align-items: center;
                width: 30px;
                height: 30px;
                border: 1px solid white;
                border-radius: 50%;
                box-shadow: 0 0 5px #888888;
                border: 1px solid #eeeeee;
                /*  */
                padding: 30px;

通过给圆框设置padding撑开元素就不会挤压变形

给父元素盒子设置

                justify-content: space-between;

使图片与框在左右两侧，解决图片向右问题，但文字会在拉伸页面时居中显示不满足要求，通过个中间的文字元素设置

                text-align: left;

不会向右对齐，但给文字元素添加

width: 100%;

时，会向右对齐，目前原理不明

3.学习栅格系统的非常规布局方式，常规的设置为能被12除的数，如2.3.4.6等

今天使用5栅格列完成企业栏

4.发现栅格系统的不同版本会对布局有不同影响，同一段代码

使用3.版本的代码样式

        <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
        <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

使用4.版本的代码样式

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>