吴东东-2020-10-30

一、知识总结:

1、页面布局:page 
    <div class="page">
            <!--页眉---->
            <div class="header">
                <!--页眉的左边--->
2、auto(自动适应大小)
/*整个页面*/
.page{
    width: 100%;
    height: auto;
注:确定行或者列另一个自动适配(可以使页面不出现滚动条)
3、position:sticky(粘性定位)
当你没有为一个元素(例如div)指定定位方式时,默认为sticky,
    将元素放到一个合适的地方,取得相对较好的布局效果。
    一般来说,我们不需要指明当前元素的定位方式是static——
    因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。
    粘性定位注意 定位的位置与距离 要给予距离
后面需加top:0px;上距离0px
4、position:relative
在sticky的基础上,如果我想让一个元素在他本来的位置做一些调整(位移),
我们可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。
5、页眉:设置大小
主内容(position:relative)
position:sbsolute(绝对定位,子绝对,父相对)
width:100%(不会出现滚动条)
6、position:sbsolute 绝对定位
将一个元素放至指定位置,你可以使用absolute来定位,
将该元素的position设置为absolute,同时使用top,bottom,left,right来定位。

7、auto(制动适应)
8、display:block(让行级标签拥有块级标签特性)
9、display:inline-block(行级标签拥有块级标签的特性,依旧保留行级标签独占一行)
10、important(增加优先级)
11、outline:none(去掉点的边框)
12、cursor:pointer(鼠标在点击的地方变换)

心得体会:今天学的知识非常的多,也特别实用,但是也深刻的了解到,听得懂跟做得出是两码事
必须自己动手,才能掌握所学的知识,并对所学的各种代码操作加以总结复习,收获很大,
在接下来的几天继续努力。加油

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1