zoukankan      html  css  js  c++  java
  • 0503css基础:格式、位置、流式布局、层

    格式与布局
    |-位置 position
    |--fixed 相对于浏览器边界的定位

    .dingwei1{
         200px;
        height: 200px;
        background-color: red;
        position: fixed;
        right: 100px;
        bottom: 100px;
    }
    <div class="dingwei1"></div


    |--absolute 相对于父级元素定位
    |----定位后原来的位置没有了

    .dingwei2{
         200px;
        height: 200px;
        background-color: rosybrown;
        position: absolute;
        left: 100px;
        top: 100px;
    }
    .dingwei2a{
         50px;
        height: 50px;
        background-color: cyan;
        position: absolute;
        left: 20px;
        top: 20px;
    }
    .dingwei3{
         200px;
        height: 200px;
        background-color: royalblue;
    }
    <div class="dingwei2">
        <div class="dingwei2a"></div>
    </div>
    <div class="dingwei3"></div>


    |--relative 相对于自己应该出现的位置进行定位
    |----定位后原来的位置保留

    .dingwei4{
        height: 300px;
         300px;
        background-color: aquamarine;
        position: relative;
        top: 200px;
        left: 200px;
    }
    .dingwei5{
        height: 100px;
         100px;
        background-color: azure; 
    }
    <div class="dingwei4"></div>
    <div class="dingwei5"></div>


    |--left right top bottom

    |-流式布局
    |--float:left right

    .dh{
         803px;
        height: 100px;
        border: 1px solid red;
    }
    .dh1{
         200px;
        height: 100px;
        border-right: 1px solid red;
        float: left;
        line-height: 100px;
        text-align: center;
    }
    <div class="dh">
        <div class="dh1"></div>
        <div class="dh1"></div>
        <div class="dh1"></div>
        <div class="dh1" style="border-right: 0;"></div>
    </div


    |--margin-left margin-right margin-top margin-bottom
    |--magion的重叠现象
    |----内外元素之间的margin重叠现象

    .wai{
         300px;
        height: 300px;
        background-color: red;
    }
    .nei{
         200px;
        height: 200px;
        background-color: gold;
        margin-top: 50px;
    }
    <div class="wai">
        <div class="nei">
            
        </div>
    </div>


    |----解决方法:over-flow:hidden  加边框border

    .wai{
         300px;
        height: 300px;
        background-color: red;
        overflow: hidden; 
    }
    .nei{
         200px;
        height: 200px;
        background-color: gold;
        margin-top: 50px;
    }
    <div class="wai">
        <div class="nei">
            
        </div>
    </div>

    .wai{
         300px;
        height: 300px;
        background-color: red;
        border-top: 1px solid black ;
    }
    .nei{
         200px;
        height: 200px;
        background-color: gold;
        margin-top: 50px;
    }
    <div class="wai">
        <div class="nei">
            
        </div>
    </div>


    |----相毗邻的两个元素之间,如果相邻部位有margin 取最大值
    |-层 z-index
    |--必须给元素加position或float

    .ceng1{
         300px;
        height: 300px;
        background-color: red;
        position: absolute;
        z-index: -1;
    }
    .ceng2{
         300px;
        height: 300px;
        background-color: rosybrown;
        position: absolute;
        z-index: 1;
        left: 200px;
    }
    .ceng3{
         300px;
        height: 300px;
        background-color: royalblue;
        margin: 100px;
    }
    <div class="ceng1"></div>
    <div class="ceng2"></div>
    <div class="ceng3"></div>

  • 相关阅读:
    C#的注释
    为知笔记发布到博客,css设置
    eclipse创建springboot项目的三种方法
    创建maven父项目以及子项目
    C# 快捷键(总结)
    idea 项目转 eclipse项目
    freemarker常见语法大全
    Spring Boot Freemarker特别篇之contextPath【从零开始学Spring Boot
    Spring mvc请求处理流程详解(一)之视图解析
    React+SpringBoot项目部署
  • 原文地址:https://www.cnblogs.com/zhangbaozhong/p/8984500.html
Copyright © 2011-2022 走看看