免费A级毛片无码专区网站-成人国产精品视频一区二区-啊 日出水了 用力乖乖在线-国产黑色丝袜在线观看下-天天操美女夜夜操美女-日韩网站在线观看中文字幕-AV高清hd片XXX国产-亚洲av中文字字幕乱码综合-搬开女人下面使劲插视频

  1. 首頁 > 生活 > >

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

生活百科

方法：定位，外邊距，內(nèi)邊距，層級，邊框；一個元素；兩個元素；三個元素.<!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" ></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;}清除瀏覽器默認(rèn)樣式.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;}/* 第四種居中方式 */內(nèi)邊距.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;}/* 第七種居中方式 */一個元素 邊框+內(nèi)邊距.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個元素 定位+層級

    經(jīng)驗總結(jié)擴(kuò)展閱讀