【夯实基础--CSS】 =＞ CSS三大特性

作者：System 时间：2024年08月17日分类：所有,css 字数：727

CSS三大特性分别是盒模型、浮动（float）和定位（position）。

盒模型（Box Model）:
CSS盒模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和content（内容）。




div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid blue;
  margin: 10px;
}

浮动（Float）:
浮动可以使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。




.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

定位（Position）:
定位可以使元素的位置相对于其正常位置、父元素或浏览器窗口来指定。




.relative-position {
  position: relative;
  top: 20px;
  left: 40px;
}
 
.absolute-position {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
.fixed-position {
  position: fixed;
  bottom: 0;
  left: 0;
}

CSS三大特性是CSS布局的基础，熟练掌握有助于更好地进行网页布局设计。

【夯实基础--CSS】 =＞ CSS三大特性

评论已关闭

推荐阅读