2019-05-05

基于CSS盒子模型及其CSS定位详解

CSS盒子模型

CSS盒子模型:
           div标签:
              块级标签: 主要用于网页布局用的,会将其中的子元素内容作为一个独立的整体存在
                特点:
                    默认宽度是页面的宽度,但是可以设置
                    高度默认是没有的,但是可以设置,顶开
                    如果子元素设置了百分比的宽或者高,占据的是div的百分比,而不是页面的
            盒子模型:
                 外边距:
                        margin
                    作用:
                        用于设置元素与元素之间的间隔
                    居中设置:
                            margin: 0px auto  上下间隔0px,左右水平居中
                    可以根据需求单独设置上下左右的外边距
                 边框:
                     border
                          作用:
                                用来设置边框的代销,线条种类,线条颜色
                                也可以单独设置上下左右
                  内边距:
                        padding
                           作用:
                                设置内容和边框的距离
                           注意:内边距不会改变内容区域的大小
                           也可以单独设置上下左右的内容边距
                  内容区域:
                        作用:
                            改变内容区域的大小
                            直接在img里面设置width或者height即可

效果显示

图片.png

盒子模型的简单应用

    
        
        
        
    
    
        

            

                我是div01
            
            

                我是div02
            
        
        

            

                我是div03
            
            

                我是div04
            
        
    

效果显示:

图片.png

CSS定位

CSS定位:
       position:
               相对定位:relative
                       作用:
                            相对元素原有位置的距离(相对的自己的原有位置)
                           可以使用top left,right,bottom 来进行设置
                      注意:
                           其他元素的位置是不变的
               绝对定位: absolute
                        作用:
                           可以使用元素参照界面或者相对父元素来进行移动
                        注意:
                            如果父元素成为参照元素,必须使用相对定位属性
                            默认情况下是以界面为基准进行移动的
                固定定位:
                        fixed
                        作用:
                            将元素固定位页面上的固定位置,不会随着滚动条的移动而改变

                以上定位都是使用top,left,right,bottom

        z-index:此属性是用来显示元素的优先级别的

    
        
        
        
        
    
    
       

           


           
           我是div01
       
 我是div02
       
 我是div03
       

    

效果显示

图片.png