HTML CSS 盒模型知识讲解

一、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>

效果图：

2.padding 内边距

概念：padding内边距是元素的内容和边框之间的区域

说明
1.调整子元素在父元素里的位置
2.padding设置值会把盒子撑大
3.要想盒子保持原有大小宽高须减去padding的值

值：支持length、百分比

用法：
padding设置方法：
padding:10px 四周
padding:10px 20px 上下左右
padding:10px 20px 30px 上左右下
padding:10px 20px 30px 40px 上右下左

3.border 边框

概念：border用来控制盒边框的宽度，样式，颜色。

属性：值（不支持百分比）常用px

用法：
border:10px solid red;
border-width:10px;
border-style:solid;
border-color:red;

1:线性： solid(实线) dashed(虚线) dotted(点状线) double(双线) none/0(没有边框)

2：给单一一个方向添加边框：
border-left/right/top/bottom:10px solid yellow;

3:边框设置方法;
border:solid red;
border-width:;

一个值：四周
两个值：上下左右
三个值：上左右下
四个值：上右下左

4:transparent; 代替颜色值为透明

二、元素大小的重新计算-box-sizing

概念：box-sizing 通俗易懂就是重新计算盒子大小

用法：
1.box-sizing: content-box; 默认值以内容区为准
2.box-sizing: border-box; 以边框为准

第一种是默认的我们就不说了不设置就是默认重点说下第二种

同样的代码盒子宽200高180设置的都一样看以下例子：
1.不加box-sizing: border-box;的盒子效果：

上图我们可以看到不加box-sizing: border-box;的话盒子的大小是内容+内边距+边框+外边距的总和超出了我们实际想要的盒子大小

2.加上box-sizing: border-box;的盒子效果：

上图我们可以看到加上box-sizing: border-box;的话盒子的大小是内容+内边距+边框+外边距的总和大小还是我们设置的大小

我们可以看到可以重新设置盒子的大小

小结

1.理解盒模型常用属性margin，border，padding
2.理解怎么利用margin和定位技术对盒子进行水平垂直居中
3.理解元素大小的重新计算，box-sizing的用法

一、CSS盒模型属性

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

二、元素大小的重新计算-box-sizing

我们可以看到可以重新设置盒子的大小

小结

相关文章

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