经验总结

  1. 首页 > 生活 > >

HTML&CSS-盒模型运用居中方式合集

生活百科

方法：定位，外边距，内边距，层级，边框；一个元素；两个元素；三个元素.<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <link rel="stylesheet" href="https://www.huyubaike.com/biancheng/index.css"></head><body>  <div class="father1">    <div class="son1"></div>  </div>方法1
  <div class="father2">    <div class="son2"></div>  </div>【HTML&CSS-盒模型运用居中方式合集】方法2
  <div class="father3">    <div class="son3"></div>  </div>方法3
  <div class="father4">    <div class="son4"></div>  </div>方法4
  <div class="father5">    <div class="son5"></div>  </div>  <!-- 前五种为两个元素的居中方式 -->方法5
  <div class="six"></div>方法6
  <div class="seven"></div>  <!-- 后两种为1个元素的居中方式 -->方法7
  <div class="father8">    <div class="box1"></div>    <div class="box2"></div>  </div></div>  </div>  <!-- 最后一种为3个元素的居中方式 -->方法8</body></html> * {  margin: 0;  padding: 0;  list-style: none;}清除浏览器默认样式.father1 {  width: 400px;  height: 400px;  background-color: #fc4;  position: relative;}.son1 {  width: 200px;  height: 200px;  background-color: #f44;  position: absolute;  top: 100px;  left: 100px;}/* 第一种居中方式 */定位.father2 {  width: 200px;  height: 200px;  background-color: #f77;  position: relative;}.son2 {  width: 100px;  height: 100px;  background-color: #ff7;  position: absolute;  left: 50%;  top: 50%;  margin-left: -50px;  margin-top: -50px;}/* 第二种居中方式 */定位+外边距+百分比.father3 {  width: 200px;  height: 200px;  background-color: #0f0;  position: relative;  /* overflow: hidden; */  /* 解决margin塌陷问题 */}.son3 {  width: 100px;  height: 100px;  background-color: #77f;  position: absolute;  margin-left: 50px;  margin-top: 50px;}/* 第三种居中方式 */定位+外边距.father4 {  width: 100px;  height: 100px;  padding: 50px;  background-color: #f44;}.son4 {  width: 100px;  height: 100px;  background-color: #0f7;}/* 第四种居中方式 */内边距.father5 {  width: 100px;  height: 100px;  border: 50px solid #f444;  background-color: #f444;}.son5 {  width: 100px;  height: 100px;  background-color: #4fff;}/* 第五种居中方式 */边框.six {  width: 200px;  height: 200px;  background-color: #f9f67f;  border: 100px solid #08c;}/* 第六种居中方式 */一个元素 边框.seven {  width: 0px;  height: 0px;  padding: 100px;  background-color: #f78;  border: 50px solid #99f4;}/* 第七种居中方式 */一个元素 边框+内边距.box1 {  width: 200px;  height: 200px;  background-color: #f075;  position: absolute;  z-index: 1;}.box2 {  width: 100px;  height: 100px;  background-color: #ff99;  position: absolute;  z-index: 2;  top: 50px;  left: 50px;}.father8 {  position: relative;}/* 第八种居中方式 */3个元素 定位+层级

    经验总结扩展阅读


    上一篇：重阳节吃什么传统食物

    下一篇：荷梗的功效与作用