盒子模型+浮动布局+定位布局
盒子模型
| border | (邊框)元素邊框 |
| margin | 外邊距 |
| padding | 內邊距 |
| content | (內容)可以是文字或圖片 |
?
?
浮動布局
??? 1.浮動：float：left/right;
?? ?2.清除浮動：（div快不想被浮動的div蓋住）
?? ??? ?Clear：left/right/both
<style>
?? ?#d1{
?? ??? ?width: 200px;
?? ??? ?height: 200px;
?? ??? ?background:red;
?? ??? ?
?? ?}
?? ?#d2{
?? ??? ?width: 200px;
?? ??? ?height: 300px;
?? ??? ?background: blue;
?? ??? ?float: left;
?? ?}
?? ?#d3{
?? ??? ?width: 100%;
?? ??? ?height: 100px;
?? ??? ?background: #19DF79;
?? ??? ?clear: both;
?? ?
?? ?}
?? ?#d4{
?? ??? ?width: 200px;
?? ??? ?height: 300px;
?? ??? ?background: #703E3F;
?? ??? ?
?? ?}
?? ?</style>
</head>
<body>
?? ?<div id="d1"></div>
?? ?<div id="d2"></div>
?? ?<div id="d3"></div>
?? ?<div id="d4"></div>
</body>
定位布局
布局定位共有4種方式。
（1）固定定位(fixed)
（2）相對定位(relative)
（3）絕對定位(absolute)
（4）靜態定位(static)
?
轉載于:https://www.cnblogs.com/sy130908/p/11085321.html
總結
以上是生活随笔為你收集整理的盒子模型+浮动布局+定位布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS实现2,8,10,16进制的相互转换
- 下一篇： 小程序中使用threejs