HTML CSS 盒模型知识讲解 - 前端开发篇

首页 > 博客列表 > HTML CSS 盒模型知识讲解

博主信息

博文 11

粉丝 0

访问量 16729

专题推荐

更多>

一、CSS盒模型属性

1.盒模型示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒模型</title>
    <style>
      .box {
        /* 宽 高 内容区 */
        width: 200px;
        height: 200px;
      }
      .box.one {
            /* 外边距 */
        margin-top: 40px;
           /* 内边距 */
        padding: 40px;
           /* 边框 */
        border: 5px solid #000;
        background-color: lightseagreen;
          /*属性规定背景的绘制区域。content-box 内容区*/
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <!-- 块级元素默认垂直排列 -->
    <div class="box one"></div>
  </body>
</html>

示例效果图：

1.margin 外边距

概念：margin属于盒模型外面的空间，或者是位于盒模型与文档中其他元素之间的区域，或者是盒模型与浏览器窗口之间的区域。margin在盒模型外围的，margin的大小不会对盒模型本身的大小造成影响。经常应用于页面布局盒子与盒子之间的距离

属性：margin-top(上外边距)、margin-right(右外边距)、margin-bottom(下外边距)、margin-left(左外边距)

值：支持length、百分比、auto

用法：
margin设置方法：
1: margin:10px 四周(上，右，下，左)
2: margin:10px 20px 上下左右
3: margin:10px 20px 30px 上左右下
4:margin:10px 20px 30px 40px 上右下左
5:让子元素在父元素里面左右居中：margin:0 auto;
6.让子元素在父元素里面水平垂直居中

定位元素的水平与垂直对齐示例须用到定位认真看代码注释：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>margin:auto: 块元素元素的垂直居中</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        background-color: lightgreen;
        /* 父级转为定位元素 */
        position: relative;
      }
      .container .item {
        width: 100px;
        height: 100px;
        background-color: violet;
        /* 子级通过绝对定位来实现垂直居中 */
        position: absolute;
        /* 让当前元素绝对定位的上下文充满整个父级容器 */
        /* 左上角开始 */
        top: 0;
        left: 0;
        /* 右下角结束 */
        right: 0;
        bottom: 0;
        /* 水平垂直居中 */
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>