css-layout

CSS - 布局

  1. 盒子模型

    padding:内边距,顺时针,会导致盒子的宽高增加,主要用于父子盒子 重要

    border:style,width,color

    border-width:thin,medium,thick,像素值

    border-style:none,dotted,dashed,soild,double

    border-radius:10px,圆角

    outline:外边框

    margin:长度上下合并,左右叠加(body相对于html有一个默认的margin),主要用于兄弟盒子

     1、当父盒子没有设置border时,子元素设置margin-top会导致父盒子下沉。
     2、设置盒子的padding,需要减小宽高以保持盒子的整体尺寸不变
    

    注意:常用Html标签具有默认的内外边距,开发之前会统一清除

  2. 浮动

    • 行内元素:在一行上,span,a,img,input等,水平排列,没有宽高,和内容等宽

    • 块级元素:相当于图层,div,h1,p,ul,li,table等.独占一行,可设置宽高,和页面等宽

        * 块级元素和行级元素的转变:display属性,block;inline;none
      
    • float属性:left;right;none,float布局会使页面高度塌陷,解决办法:给浮动元素的父级元素添加overflow:hidden扩展盒子高度

      • 浮动元素脱离标准文档流,使父容器失去高度,影响了后续元素

          * 浮动元素的位置空出来,由非浮动元素占据
          * 浮动元素不论是块级还是行级元素,都可以水平排列,同时设置宽度和高度
        
      • 浮动元素具有相互贴靠特点

      • 浮动元素具有文字围绕特点,浮动元素的空间被后续非浮动元素占据,但是非浮动元素中的内容(文字、块元素和行级元素)被排除在该区域外

      • 浮动元素不设置宽度时具有收缩特点

      • 父级元素的宽度是所有浮动子元素的宽度之和

    • 清除浮动:在收浮动影响的元素中添加clear:both(两边清空)

  3. 标准文档流

    特点:空白折叠,底部对齐,自动换行

    脱离标准文档流的主要技术手段是浮动和绝对定位

  4. 定位

    默认值,没有定位,以标准流方式显示:static

    相对定位:relative
    1. 相对定位坐标原点是自身;原来在文档流中的位置
    2. 如果设置了position:relative,但是没有设置top/left则元素不动
    3. 可以使用margin:auto实现居中显示
    4. 相对定位不会脱离文档流
    5. 和绝对定位配合,作为定位基准点,微调位置

    绝对定位:absolute

    1. 绝对定位坐标原点是非static父元素的左上角

      • 距离最近的具备定位特性的祖先元素

      • 祖先元素都没有定位时,以页面和浏览器窗口为基准

    2. 如果设置了position:absolute,但是没有设置top/left则元素不动

    3. 不可以使用margin:auto实现居中显示

    4. 绝对定位会脱离文档流(和float一样)

    固定定位:fixed

    1. 固定定位的参考点永远是浏览器窗口

    2. 脱离文档流

    3. z-index:设置高度,放在顶层

    4. 不会随着滚动条移动,可以用于遮盖\提示款和返回顶部的指示器

      在父容器中控制子元素的位置 display:flex

      当容器宽度不足时是否换行 flex-wrap:warp

      flex布局不会高度塌陷

      水平对齐方式:justify-content

      垂直对齐方式:align-items

      最小高度:min-height(可自动改变)

  5. DIV+CSS布局技术

    1. 表格布局

      结构自适应

      维护不便,性能差,不支持搜索引擎,建议使用div+css

    2. 单列布局-水平对齐

      • 子元素是行级元素时使用text-align对齐

        父元素text-align:center,子元素display:inline-block

        .container{
             width: 500px;
             height: 200px;
             text-align: center;
             border: solid 1px grey;
             position: relative;
        }
        .container .div01{
             display: inline-block;
             border: solid 1px grey;
        }
        
      • 非定位时子元素水平对齐方式

        • 设置display+text-align
        • 设置margin+width
        .container .div02{
            margin: auto;
            width: 30px;
            border: solid 1px grey;
        }
        
      • 绝对定位时子元素水平对齐方式

        • 设置left+margin-left
        .container .div03{
            position: absolute;
            left: 50%;
            margin-left: -15px;
            width: 30px;
            border: solid 1px grey;
        }
        
    3. 单列布局-垂直对齐

      1. 行级元素垂直对齐使用line-height
      .container-vertical{
          width: 500px;
          height: 200px;
          border: solid 1px grey;
          position: relative;
      }
      
      .container-vertical .span04{
          width: 20px;
          height: 20px;
          line-height: 200px;
          border: solid 1px grey;
      }
      
      1. 非绝对定位的居中对齐
        • 设置display+vertical-align
        .container-vertical{
            width: 500px;
            height: 200px;
            border: solid 1px grey;
            vertical-align: middle;
            display: table-cell;
        }
        .container-vertical .div05{
            width: 30px;
            height: 20px;
            border: solid 1px grey;
        }
        
      2. 绝对定位的居中对齐
        • 使用top+margin-top
       .container-vertical{
           width: 500px;
           height: 200px;
           position: relative;
           border: solid 1px grey;
       }
       .container-vertical .div06{
           width: 30px;
           height: 20px;
           position: absolute;
           top:50%;
           margin-top: -15px;
           border: solid 1px grey;
       }
      
    4. 多列布局类型

      1. 左定宽右自适应

        • 左侧定宽浮动,右侧margin-left
        • 左侧定宽浮动,右侧overflow
        • 全部浮动,右侧宽度100%,并设置负margin-right(右侧的标签要写在前面)
      2. 左自适应右定宽

        • (非负数margin):

          1、块元素水平排列需要用到浮动,自适应块不能定义width,所以不能使用浮动,必须借助于外边距实现“让位”,或者overflow(不兼容性IE6)。

          2、浮动元素的标签要写在前面

        • (负数margin)

          1、两个区块全部浮动

          2、自适应标签写在前面

          3、设置自适应标签的margin-right(或固定标签的margin-left),数值为负的固定宽度值

      3. 两列定宽右自适应

        • 左侧两列定宽可以按一列处理
        • 参考左侧定宽右侧自适应解决方案
      4. 两端固定中间自适应

        1、使用负margin,都要求中间栏的标签放置在第一个位置

        2、两者的区别在于,双飞翼在中间区块内部嵌套一个子div(设置其左右margin,空出中间区域被遮挡部分);圣杯利用外部容器设置左右padding,挤压中间div两端空间,再设置左右区块相对偏移,空出遮挡部分

        3、简单做法:两端定宽分别左右浮动,中间设置左右margin(中间栏的标签放置在最后)

      5. 多列等分

        采用百分比设置宽度

    5. 绝对定位的覆盖问题

      z-index属性值:整数,默认值为0

      通过z-index属性设置各元素之间的重叠高低关系。z-index值大的层位于其值小的层上方,相同时定义在最后的元素压在上方

      定位的元素始终压在未定位的元素上方,浮动的元素z-index属性无效

      父元素的z-index决定了子元素的层级,z-index高的父元素,它的子元素无论z-index如何,都在上方

  6. 弹性布局flex

    flex-direction:包含column和row,设置容器内部元素的的排列顺序,正序或逆序

    flex-wrap:设置容器内部元素是否自动换行

    <style type="text/css">
    .container div:nth-child(2n+1){
        background: gray;
    }
    .container div:nth-child(2n){
        background: #b8b8b8;
    }
    #div02{
        /*flex :权重*/
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    #div02>div{
        width: 50px;
        height: 50px;
        border: solid 3px blue;
    }
    </style>
    
    <div class="container">
        <div id="div02">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    
  7. 响应式布局:媒体查询+flex布局

    main.css

    .container{
        margin: auto;
        box-shadow: 1px 1px 12px grey;
        /*一定要在容器中设置*/
        display: flex;
        /*设置煮粥放方向*/
        flex-direction: row;
    
        /*设置超出范围就换行*/
        flex-wrap: wrap;
        /*主轴对齐方式*/
        /*justify-content: center;*/
    
        /*交叉轴对齐方式*/
        /*align-items: flex-start;*/
    }
    
    .container>div{
        box-sizing: border-box;
        border: solid 2px white;
        height: 200px;
    }
    
    .container>div img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    

    pc-index.css

    .container{
        width: 1000px;
        background: red;
    }
    .container>div{
        /*控制内部所有的元素*/
        flex: 1;
        min-width: 250px;  /*有意义,控制一行有几个*/
        max-width: 250px;  /*有意义,控制一个不能太大*/
    
    }
    

    pad-index.css

    .container{
        width: 750px;
        background: green;
    }
    
    .container>div{
        /*控制内部所有的元素*/
        flex: 1;
        min-width: 375px;
        max-width: 200px;
    }
    

    mobile-index.css

    .container{
        width: 100%;
    }
    
    .container>div{
        /*控制内部所有的元素*/
        width: 100%;
    
    }
    

    main.html

    screen:显示屏幕;print:打印机;speech:语音合成器;all:适用于全部设备

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 970px)" href="css/pc-index.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 970px) and (min-width: 750px)" href="css/pad-index.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 750px)" href="css/mobile-index.css">
    
    <div id="div01">
        <!--<img src="../images/1.jpg" alt="">-->
    </div>
    <div id="div02">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="div03">
        <!--<img src="../images/2.jpg" alt="">-->
    </div>
    <div id="div04">
         <!--<img src="../images/3.jpg" alt="">-->
    </div>
    <div id="div05"></div>
    <div id="div06"></div>
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值