CSS总结

作者: lyp82nkl | 来源:发表于2019-06-09 22:55 被阅读0次
    引入样式方法:
    • 内联:style属性
    • Style标签
    • 外部文件 css link
    • @import url(./b.css)
    横排样式布局
    • 给子级元素设置float:left;
    • 父级元素添加clearfix/overflowh:hidden/为父级添加高度;
    .clearfix::after{
      content: '';
      display: block;
      clear: both;
    }
    
    元素脱离文档流的方式:
    1. position:fixed 相对于屏幕固定 top:0 left:0
      一旦脱离文档流 那你的父元素的高度就不受你控制了 就不管你了 只管其他文档流元素

    2. 子绝父相:子级元素position:absolute;父级元素position:relative;(绝对定位是相当于整个页面来的,父级元素给相对定位就相对于父级了);

    span空格

    <span>和</span>之间有东西 如果有一个回车 就会产生空格
    例如:<span class="rs">RS</span>(回车)
    <span class="card">card</span>
    展示效果:RS card 会产生空格
    例如:<span class="rs">RS</span><span class="card">card</span>
    展示效果:RScard 不会产生空格

    css布局

    左右布局
    <style>
      .clearfix{content: '';display: block;clear: both;}
      .left,.right{width: 400px;height: 400px;background: red;}
      .left{float: left;}
      .right{float: right;}
    </style>
    
    <div class="clearfix">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    
    左中右布局
    • 可以前两个元素左浮动,第三个元素右浮动;也可以都左浮动
    <style>
      .clearfix{content: '';display: block;clear: both;}
      .left,.middle,.right{width: 400px;height: 400px;background: red;float: left;}
      .left,.middle{margin-right: 20px;}
    </style>
    
    <div class="clearfix">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    

    居中

    水平居中
    1. 内联元素/内联块水平居中
    • 只需给父级元素设置一个text-align:center;这里需要注意的是如果给内联元素设置了display:inline-block也必须在线面紧接着写一个vertical-align:top;要不然下面会有几像素的间距。
    <style>
      p{text-align: center;}
    </style>
    
    <p><span>aaaaa</span></p>
    
    1. 块级元素水平居中
    • 只需为其设置一个宽度后,使用margin: 0 auto;
    • 块级元素里面的文字内容水平居中也是使用text-align:center;
    <style>
    div{
      width: 300px;height: 300px;background: red;margin: 0 auto;
    }
    </style>
    
    <div>aaa</div>
    
    垂直居中
    1. 让元素的高度等于行高及height=line-height的值;
    <style>
      div{
        width: 300px;
    /*这两步是实现垂直居中的,上面可以不用看*/
        height: 300px;line-height: 300px;
    /*下面可以不用看*/
        margin: 0 auto;background: red;text-align: center;
      }
    </style>
    
    <div>aaa</div>
    
    1. 给上下一个相同的padding值
    <style>
    div{
    background: red;text-align: center;
    /*上面可以不用看*/
    padding: 20px 0;
    }
    </style>
    
    <div>aaa</div>
    
    image

    小技巧

    • 只要是设置了绝对定位,就一定要给他的父级元素设置相对定位(子绝父相);
    • 用css布局时尽量不要写宽和高两个属性(因为块级元素的宽度和高度都是由内部的文档流元素决定的),一般情况下可以用padding来填充。
    • 内联元素不能设置宽和高,margin只对左右起作用,padding都起作用。
    • 若要使用:after和:before属性(1).必须加一个content:’’;(2).必须设置成块级元素。
    • 只要加了inline-block就一定要加vertical-align:top。
    • 元素只要是设置了position为fixed或者absolute就会变成块级元素。
    • 阻止 margin 合并
      希望谁不要跟它的子元素的 margin 合并,就在它的::before /::after加一个 display:table;
    .noCollapse::before{
        content: '';
        display: table;
    }
    

    ::before 阻止任何东西把 margin (手)伸到外面去

    .noCollapse::after{
        content: '';
        display: table;
    }
    

    ::after 阻止任何东西把 margin (脚)伸到外面去

    相关文章

      网友评论

          本文标题:CSS总结

          本文链接:https://www.haomeiwen.com/subject/wljoxctx.html