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打少了,知识要运用于实践不然都是无用的知识。革命尚未成功,仍需努力。