html css 布局

最新推荐文章于 2021-08-04 09:22:41 发布

蓝天上的一朵云

最新推荐文章于 2021-08-04 09:22:41 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/u012846041/article/details/79563615

版权

一、位置属性

css中一般通过设置元素的position属性进行元素的位置布局，position可以设置为以下四个选项：static、relative、absolute、fixed；首先看看每个选项的属性定义：

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

static与fixed的定位方式较好理解，主要对relative和absolute进行重点说明：

relative：参照父级原始点，及父级元素的左上角位置；当不存在父级别元素时，则以文本流的顺序在上一个元素的底部为原始点进行定位。如果父级元素有padding属性，则以内容属性的左上角进行定位；

absolute：当没有设置元素的top、left、right、bottom（TLRB）属性时，使用父级元素左上角（父级元素的position属性不能是static，否则是上一层父元素）；存在父级元素时且父级元素设置了位置，则以父级元素的左上角为参照点，依据TMRB值设置位置；若父级元素未设置position属性，则以浏览器左上角设置元素位置；

元素的实际位置和top、bottom、left、right等均有关系，当同时设置top和bottom时，仅top生效；当同时设置left和right时，仅仅left生效；因此可以总结如下，若需要元素更好的适应各类浏览器，采用absolute布局的元素需要设置父级元素的position属性，并且通过设置TLRB，达到满意的布局控制效果；

二、居中属性设置

当需要将div容器中的元素设置为横向居中时，需要将div的text-align属性设置为center，同时将margin属性设置为auto；当需要设置为纵向居中时，需要将div的height属性与line-height属性设置为相同；

三、布局示例

1、设置层为顶对齐

    .top-div{
        width:100%;
        height:80px ;
        background-color: #4a87f6;
        top: 0px;
        padding: 0px;
        margin: 0px;
        border-radius: 1px;
        position: fixed;
        border: black 1px solid;
    }

2、设置层为左对齐，即：在顶部层之后向左对齐，左上顶点位置设置为：top:80px,即在顶部层之下

    .left-div{
        width:30%;
        height:100%;
        line-height:100%;
        background-color:red;
        padding: 2px;
        margin: auto;
        position:absolute;
        align-self: center;
        left: 0px;
        top:80px;
        border-radius: 1px;
        border: black 1px solid;
        text-align: center;
        vertical-align: middle;
       text-shadow: #1D0821;
    }

3、设置平铺区域层；该平铺区域层设为右对齐，top值为80px,

.auto-div{
        width:70%;
        height:100%;
        background-color: white;;
        padding: 0px;
        margin: 0px;
        position:absolute;
        align-self: center;
        right: 0px;
        top:80px;
        border-radius: 1px;
        border: black 1px solid;
    }

4、设置底部层

    .bottom-div{
        width:100%;
        height:55px;
        background-color:blueviolet;
        padding: 2px;
        margin: 0px;
        position:absolute;
        bottom: 0px;
        border-radius: 1px;
        border: black 1px solid;
    }

5、设置弹出信息层

    .pop-div{
        width: 65%;
        height:65%;
        line-height:65%;
        background-color:cornflowerblue;
        position: absolute;
        margin: auto;
        left: 0;
        top:0;
        right: 0;
        bottom: 0;
        z-index: 2;
        text-align: center;
        box-shadow: #272733;
        border-radius: 5px;
    }

注意：position一定要设置为absolute,且margin需要设置为auto，该层才会按照设置的宽、高，位于屏幕中央；

五、点型的多分区域布局样式文件示例：

布局界面图：

布局样式：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div class="top-div">
 <p> this is top  div content</p>
</div>
<div class="left-div">
 this is left  div content
</div>
<div class="auto-div">
 this is full  div content
</div>
<div class="bottom-div">
 this is footer  div content
</div>
<div class="pop-div">
 <div  class="log-close"></div>
 <div class="log-cloud cloud1"></div>
 <div class="log-cloud cloud2"></div>
 <div class="rows">
  <label>用户名</label>
  <input type="text" />
 </div>


 <div class="rows">
  <label>口令</label>
  <input type="text" />
 </div>
 <a class="loginBtn">Login</a>
</div>

</body>
<style>
 body{
  background-color: transparent;
  color: white;
  padding:0px;
  margin: 0px;
  width:100%;
  height: 100%;
  line-height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;


 }
 .top-div{
  width:100%;
  height:80px ;
  background-color: #4a87f6;
  top: 0px;
  padding: 0px;
  margin: 0px;
  border-radius: 1px;
  position: fixed;
  border: black 1px solid;
 }
 .left-div{
  width:30%;
  height:100%;
  line-height:100%;
  background-color:red;
  padding: 2px;
  margin: auto;
  position:absolute;
  align-self: center;
  left: 0px;
  top:80px;
  border-radius: 1px;
  border: black 1px solid;
  text-align: center;
  vertical-align: middle;
  text-shadow: #1D0821;
 }
 .auto-div{
  width:70%;
  height:100%;
  background-color: white;;
  padding: 0px;
  margin: 0px;
  position:absolute;
  align-self: center;
  right: 0px;
  top:80px;
  border-radius: 1px;
  border: black 1px solid;
 }
 .bottom-div{
  width:100%;
  height:55px;
  background-color:blueviolet;
  padding: 2px;
  margin: 0px;
  position:absolute;
  bottom: 0px;
  border-radius: 1px;
  border: black 1px solid;
 }
 .pop-div1{
  width: 65%;
  height:65%;
  background-color:transparent;
  position: fixed;
  margin: auto;
  left: 0;
  top:0;
  right: 0;
  bottom: 0;
  z-index: 0;

 }
 .pop-div{
  width: 65%;
  height:65%;
  line-height:65%;
  background-color:cornflowerblue;
  position: absolute;
  margin: auto;
  left: 0;
  top:0;
  right: 0;
  bottom: 0;
  z-index: 2;
  text-align: center;
  box-shadow: #272733;
  border-radius: 5px;
 }

  .rows{
  width: 70%;
  height: 50px;
  line-height:50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;

  position: relative;
  top:15px;
   text-align: center;
   z-index: 2;
 }

 .rows label{
  width:15%;
  height: 45px;
  line-height: 45px;
  margin: auto;
  margin-top: 5px;
  float: left;
  margin-left: 5px;
  z-index: 3;
  position: inherit;
 }
 .rows input{
  width: 80%;
  height: 40x;
  line-height: 40px;
  margin: auto;
  margin-top: 2px;
  margin-left: 5px;
  border-radius: 5px;
  border:azure 1px  solid;
  z-index: 3;
  float: right;
  position: inherit;
 }
 .loginBtn{
  width: 60%;
  height: 45px;
  line-height: 45px;
  background-color: #50e3ce;
  text-align: center;
  display: block;
  border-radius: 5px;
  position: relative;
  margin:auto;
  margin-top:55px;


 }
 .loginBtn:hover,.loginBtn:focus{color: #fff; opacity: .8;}
 a {
  text-decoration: none;
 }

 .log-cloud{background-image: url(../images/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 10}
 .cloud1{top:12px; left: -30px; transform: scale(.8); animation: cloud1 20s linear infinite;}
 .cloud2{top:60px; left: -30px; transform: scale(.8); animation: cloud1 20s linear infinite;}
 .log-close{position: absolute; top:4px; right: 4px; opacity: 1; width: 25px;height: 25px;border-radius: 15px;background-color: #F5E050}
 .log-close:hover .icons{transform: rotate(180deg);}
 .log-close .icons{opacity: 1; transition: all .3s}

 @-webkit-keyframes cloud1 {
  0%{left: 5%}
  100%{left:90%;}
 }
 @-webkit-keyframes cloud2 {
  0%{left: 5%}
  100%{left:90%;}
 }
</style>
</html>

六、其它可参考的布局方式

1、div层横向布局:通过设置最外层div的width、height 均为100%，所有子div 的float属性为left；设置不同子层divwidth所占比例实现横向布局；当设置所有子div 的float属性为top，设置不同子层div width所占比例实现纵向布局