web前端基础知识——css篇

一、元素的定位：
          

1. absolute  绝对定位
2. relative    相对定位
3. fixed        固定定位

• 元素默认在文档流上占位值
• 元素在定位之后可以多使用5个属性   zindex  分层  left  right  bottom top
• 文档流默认层0

            position: relative;
            left: 10px;
            top: 10px;
            z-index: -1;
relative:  给元素设置相对定位 ，默认位置不变 ，相对自身的位置进行左上右下移动以及分层。

absolute:  给元素设置绝对定位，元素脱离文档流 ，不占位置 ，默认相对于浏览器 ，相对浏览器左上右下移动。

如果让绝对的元素相对父元素定位 ，给父元素设置相对定位 ，子元素就在会在父元素的内部上下左右移动以及分层。

fixed  ：  固定定位是元素脱离文档流，设置上下左右之后 ，滑动滚动条位置固定不变。

元素绝对定位或者固定定位没有宽和高，得设置
元素在绝对定位或者固定定位之后 初始位置 ，得看前面有没有元素占位置 有默认位置在这个元素的下边。

代码如图：

                     

网页如图：

二、元素的水平浮动：

子元素在默认情况会自动撑开父元素
元素水平浮动   left   right
元素在浮动之后会脱离文档流  就不占位置

子元素浮动   父元素撑不开  怎么处理？

1. 给父元素设置固定高
2. 给父元素设置  超出部分隐藏    overflow: hidden;
3. 在父元素内部设置一个空的div   <div style=" clear: left;"></div>

子元素浮动导致父元素的问题可以直接处理 ，父元素底下的兄弟元素里面的内容会收上边浮动的隐藏是用上面的第三种方案解决，或者在兄弟元素样式里面写清除浮动。

代码如图：

      

网页如图：

三、行元素和块元素相互转化：

元素分为行元素 、 块元素

块元素转化行元素   display: inline;

块元素转化行级块    display: inline-block;

行元素转化块元素  display:block

行元素转化行级块  display: inline-block;

元素在转化为行级块的时候默认 有间隙给父元素设置字体大小为  0

代码如图：

网页如图：

四、控制元素显示隐藏：

display:block;  显示同时元素也是块元素  display:none;  隐藏

代码如图：

网页如图：

五、伪类  ：

:hover  鼠标悬停伪类
:active 激活伪类
:visited 访问之后的伪类
:link   访问之前的伪类

代码如图：

网页如图：

六、css盒子模型：

• 所有的元素都可以看做盒子用来设计或者布局的时候用
• 元素设置行级块的时候水平的和垂直的元素之间的外边距都是累加的
• 元素水平放置两个之间的外边距是累加的
• 子元素全部浮动的时候元素之间的外边距也是累加的
• 正常默认情况元素上下外边距不会累加而是走最大值
• 给元素设置内间距值默认会把元素撑开
• 如果想设置内间距又不想撑开
• box-sizing: border-box; 是让元素边框和内间距向盒子内部走
• box-sizing:content-box; 相当于默认情况
• margin复合属性 padding复合属性

（转为行级块的情况 代码如图：

     

网页如图：

（浮动类型的情况，只截取了部分代码开头和结尾都与第一个一样）代码如图：

      

网页如图：

（正常情况下）代码如图：

     

网页如图:

内间距：

代码如图：

    

网页如图：

七、垂直对齐：

让父元素里面的子元素  垂直对齐：

子元素大小一致：

使用padding 让元素垂直对齐

如果子元素大小不一致：

使用行高让文本垂直对齐 水平对齐
设置text-align：center  文本水平对齐   line-height:100px; 行高设置和高度一致  单行文本垂直对齐。

代码如图：

 

     

网页如图：

八、布局模式：

1.固定布局  固定像素布局  px
2.流动布局  百分比布局    %
网站布局  layout布局
浮动布局   ---就是元素左右浮动  堆叠产生布局模式
定位布局   ---就是元素使用各种定位 产生的布局模式
弹性盒子布局  ---flex 进行布局
多列布局
grid布局  

网格布局

代码如图（弹性盒子）：

       

网页如图：

代码如图（网格布局）：

   

网页如图：

代码如图（多列布局）：

  

网页如图：