12-CSS布局入门（续）-作业

作者: 格林姆大师 | 来源:发表于2018-04-19 22:26 被阅读0次

12-CSS布局入门（续）-作业
css布局
拾光|从今天开始，做一个日更的人
12-入门：CSS 布局与定位（续）
浅析 CSS 布局与定位
android 入门xml布局文件（转载）
布局入门
Flex布局（续）
CSS布局
CSS布局

左右布局
思路：一个父容器，两个子容器，子容器左右浮动

<body>
<div class="container clearfix">
  <div class="left">left11111111111</div>
  <div class="right">right22222222222222222222</div>
</div>  
</body>

body{
  border: 1px solid gray;
}
div.container{
  border: 1px solid red;
  max-width: 398px;   //这两行用来设置居中的
  margin: 0 auto;
}
.clearfix::after{
  content: "";
  display: block;
  clear:both;
}
.left{
  border: 1px solid red;
  height: 100px;
  float: left;

}
.right{
  border: 1px solid red;
  height: 150px;
  float: right;
}

效果图：

js-12-01.png

左中右布局
思路：左右布局用左右浮动，中布局采用text-align: center;其中中间元素display为inline-block。

<body>
<div class="container clearfix">
  <div class="left">left1111</div>
  <div class="middle">middle222</div>
  <div class="right">right3333333</div>
</div>  
</body>

body{
  border: 1px solid gray;
}
div.container{
  border: 1px solid red;
  max-width: 398px;
  margin: 0 auto;
  text-align: center;
}
.clearfix::after{
  content: "";
  display: block;
  clear:both;
}
.left{
  border: 1px solid red;
  height: 100px;
  float: left;
}
.middle{
  border: 1px solid red;
  height: 120px;
  display: inline-block;
  vertical-align: top;
  /* margin-left: auto;   对inline-block无效，行不通*/    
  /* margin-right: auto; */
  /* float: left; */
}
.right{
  border: 1px solid red;
  height: 150px;
  float: right;
}

效果图：

js-12-02.png

水平居中
上面的左中右布局中的中间元素的布局用到了水平居中，此处用block的margin：0 auto;也可实现，不具体演示了。
垂直居中
思路：采用absolute方法，然后用transform修正。

<body>
<div class="parent clearfix">

  <div class="middle">middle222</div>

</div>  
</body>

*{
  border: 1px solid red;
}
.parent{
  height: 100px;
  position: relative;
  
}
.parent .middle{
  position: absolute;
  width:;
  top: 50%;
  transform: translateY(-50%);
}

效果图：

js-12-04.png