2020-04-04

css基础

1.内联元素的盒模型

标题display:inline,block,inline-block,none,table

.box{
             width:500px;
             height:500px;
            background-color:#bfa;
            display:inline-block;
            }
            
.box1{
             width:500px;
             height:500px;
            background-color:#bfa;
            display:none;
            }

visibility:visible,hidden

.box2{
             width:500px;
             height:500px;
            background-color:#bfa;
            visibility:visible;
            }
            
.box3{
             width:500px;
             height:500px;
            background-color:#bfa;
            visibility:hidden;
            }

2.轮廓阴影与圆角

轮廓阴影

.box1:hover{
             width:200px;
             height:200px;
            outline:10px red solid;
            }

.box3{
             width:500px;
              height:500px;
            background-color:orange;
              box-shadow:10px 10px 10px 10px rgba(0,0,0,.3);
            }

圆角

.box3{
             width:200px;
             height:200px;
             background-color:#bfa;
            border-top-left-radius:50px;
            }

.box3{
             width:200px;
             height:200px;
             background-color:#bfa;
            border-radius:50px;
            }

3.浮动（float:none,left,right）

浮动元素会从文档流中脱离
脱离文档流后，不需要崽区分块与行内元素

.box{
             width:200px;
             height:200px;
             background-color:#bfa;
             float:none;
            }

4.高度塌陷

子元素浮动使父元素塌陷

开启bfc：

作用：1、该元素会变成一个独立的布局区域2、子元素不会与父元素外边距重叠3、父元素包含子元素
方法：设置浮动、将元素设置为行内块元素、将元素的overflow设置为非visible值

5.clear(left,right,both)

clearfix

6.定位(position:relative,absolute,fixed,sticky)

偏移量：top，bottom，right，left
绝对定位是相对于其包含块进行的
包含块:当前元素最近的开启了定位的祖先块元素、如果没有开启看根元素
可设置：auto，margin，width，left，right

7.元素的层级

用z-index来设置

8.垂直对齐

baseline：基线对齐 top，bottom，middle

心得：学习的过程是需要缓缓的过程，欲速则不达，css基础十分重要，所以要扎实且尽力地学。对于仿站，刚知道考核内容对时候是觉得挺困难的，后来发现是自己demo打少了，知识要运用于实践不然都是无用的知识。革命尚未成功，仍需努力。