HTML-div盒子模型

本文介绍: div 盒子模型(边框的border–width 宽度，border–color 颜色，b order–style 样式，上右下左四个边框以及简写、内联元素盒子)

盒子 模型

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    <title&gt;</title&gt;
    <style type="text/css"&gt;
      .box1 {
        width: 300px;
        height: 300px;
        background-color: #bfa;
        border-width: 10px;
        border-style: solid dotted dashed double;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

请添加图片描述

1. 盒子 大小

使用 wi dt h 来设置盒子内容区的宽度
使用 height 来设置盒子内容区的高度
width 和 height 只是设置了盒子内容区的大小，而不是盒子的整个大小
- 盒子的可见框的大小由内容区，内边距和边框同时决定

.box1 {
  width: 300px;
  height: 300px;
  background-color: #bfa;
}

2. 为元素 设置 边框

2.1. 说明

要为一个元素设置边框必须指定三个样式
- b order-wi dth：边框的宽度
- b order–color：边框颜色
- b order–style：边框的样式

.box1 {
  width: 300px;
  height: 300px;
  background-color: #bfa;

  border-width: 10px;
  border-color: red;
  border-style: solid;
}

2.2. bo r de r-width

使用 bo r de r-width 可以分别指定四个边框的宽度
如果在 border-width 中制定了四个值
- 则四个值分别设置给上右下左，顺时针的方向设置的
如果指定三个值，
- 则三个值会分别设置给上左右下
如果指定两个值
- 则两个值会分别设置给上下左右
如果指定一个值 – 则四边全都是该值

除了 bord er-wid th，CSS 中还提供了四个 bord er-xxx-wid th
xxx 的值可能是 top right bottom left
专门用来设置指定边的宽度

.box1 {
  width: 300px;
  height: 300px;
  background-color: #bfa;

  /* border-width: 10px 20px 30px 40px; */
  /* border-width: 10px 20px 30px; */
  /* border-width: 10px 20px; */
  border-width: 10px;
  /* border-left-width: 100px; */

  border-color: red;
  border-style: solid;
}

2.3 border-color

使用 border-color 可以设置边框的颜色
和宽度一样，color 也提供了四个方向的样式，可以分别指定颜色
- border-xxx–color

.box1 {
  width: 300px;
  height: 300px;
  background-color: #bfa;
  border-width: 10px;

  /* border-color: red yellow orange blue; */
  /* border-color: red yellow orange; */
  /* border-color: red yellow; */
  border-color: red;

  border-style: solid;
}

2.4 border-style

使用 border-style 可以设置边框的样式
可选值：
- none 默认值，没有边框
- so lid 实线
- dotted 点状边框
- da s hed 虚线
- double 双线
style 也可以分别指定四个边的边框样式，规则和 width 一样，
- 同时它也提供 border-xxx-style 四个样式，来分别设置四个边

.box1 {
  width: 300px;
  height: 300px;
  background-color: #bfa;
  border-width: 10px;
  border-color: red;

  /*border-style: solid;*/
  /* border-style: double; */
  border-style: solid dotted dashed double;
}

边框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: red solid 10px;
        border-right: none;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

请添加图片描述

1. 边框说明

大部分的浏览器中，边框的宽度和颜色都是有默认值的，
- 而边框的样式默认值都是 none

.box {
  width: 200px;
  height: 200;
  background-color: #bfa;

  border-width: 10px;
  border-color: red;
  border-style: solid;
  border-right: none;
}

2. 边框简写

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
- 而且没有任何的顺序要求
border 一指定就是同时指定四个边不能分别指定
可以单独设置四个边的样式，规则和 border 一样，不过它只对一个边生效
- border-top
- border-right
- border-bottom
- border-left

.box {
  width: 200px;
  height: 200;
  background-color: #bfa;

  /* border-top: 10px red solid;
  border-left: 10px red solid;
  border-top: 10px red solid;
  border-bottom: 10px red solid;
  border-left: 10px red solid;*/
  border: red solid 10px;

  border-right: none;
}

内联 元素的盒子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      span {
        background-color: #bfa;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .s1 {
        /*
          * 内容区、内边距、边框、外边距
          */
        padding-left: 100px;
        padding-right: 100px;
        border: 1px blue solid;
        margin-left: 100px;
        margin-right: 100px;
      }
      .s2 {
        margin-left: 100px;
        margin-top: 200px;
        margin-bottom: 200px;
      }
    </style>
  </head>
  <body>
    <span class="s1">我是一个span</span>
    <span class="s2">我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <div class="box1"></div>
  </body>
</html>

请添加图片描述

1. 内联 元素不能设置 width 和 height

/* width: 200px;
height: 200px; */

2. 设置水平内边距

内联元素可以设置水平方向内边距

padding-left: 100px;
padding-right: 100px;

3. 垂直 方向内边距

内联元素可以设置垂直方向的内边距，但是不会影响页面的布局

/* padding-top: 50px;
padding-bottom: 50px; */

4. 为元素设置边框

内联元素可以设置边框，但是垂直的边框不会影响到页面的布局

border: 1px blue solid;

5. 水平外边距

内联元素支持水平方向的外边距

margin-left: 100px;
margin-right: 100px;

6. 为右边的元素设置一个左外边距

水平方向的外边距不会重叠，而是求和

margin-left: 100px;

7. 内联元素不支持 垂直 外边距

margin-top: 200px;
margin-bottom: 200px;

原文地址:https://blog.csdn.net/weixin _64933233/article/details/127770667

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_33862.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

border 盒子边框

文章 目录

盒子 模型

1. 盒子 大小

2. 为元素 设置 边框

2.1. 说明

2.2. bo r de r-width

2.3 border-color

2.4 border-style

边框

1. 边框说明

2. 边框简写

内联 元素的盒子

1. 内联 元素不能设置 width 和 height

2. 设置水平内边距

3. 垂直 方向内边距

4. 为元素设置边框

5. 水平外边距

6. 为右边的元素设置一个左外边距

7. 内联元素不支持 垂直 外边距

发表回复取消回复

1. 盒子大小

2. 为元素设置边框

2.1. 说明

2.2. border-width

2.3 border-color

2.4 border-style

边框

1. 边框说明

2. 边框简写

内联元素的盒子

1. 内联元素不能设置 width 和 height

2. 设置水平内边距

3. 垂直方向内边距

4. 为元素设置边框

5. 水平外边距

6. 为右边的元素设置一个左外边距

7. 内联元素不支持垂直外边距

相关文章

发表回复 取消回复

2.2. bo r de r-width

发表回复取消回复