前端工程学习日记第４天

#使用 margin（向外）、padding（向内）来推挤距离
css:
.box{border:10px solid #000;
padding-left:30px;
padding-right:30px;}

向内留白30px
!
https://ithelp.ithome.com.tw/upload/images/20201105/20132398TPwEB4oEXZ.png

.box p{margin-bottom: 50px;} 推下边界50pixal

向外留白５０px

向外留白後box2被往外推

精诚所至，金石为开！大浪掏沙，是金子够质量才能留下

#Box Model（盒模型）
CSS:
.box{width:300px;height:300px;background:#000}

＊滑鼠滑到.box会看到对应高度是300px＊

border padding 内部画实线黑色;外部margin是在实线之外画虚线所以上下两个box中间白色的30px就是margin造成的

#使用 margin: auto 让版型置中
yahoo首页，视窗拉右，中间的内容会保持致中随着视窗移动而变化还是保持致中
html:

<body>
<div class="header"></div>
<div class="content"></div>
</body>
CSS:
.header{width:900px;heith
}
.content{width:900px;}

以上这样是不够的 不会致中

 <body>
     <div class="wrap">
        <div class="header"></div>
        <div class="content"></div>
</body>

CSS:
.wrap{width:900px;
margin-left:auto;
margin-right:auto;} 自动外推左右就会自动致中了
.header{width:900px;heith
}
.content{width:900px;}

![https://ithelp.ithome.com.tw/upload/images/20201105/20132398gwcVgOcD8B.png]
*如果拿掉宽度，只有margin-left:auto;margin-right:auto是不够的 (https://ithelp.ithome.com.tw/upload/images/20201105/20132398gwcVgOcD8B.png)