css盒子模型

最新推荐文章于 2023-04-08 21:20:36 发布

〆启

最新推荐文章于 2023-04-08 21:20:36 发布

阅读量73

点赞数 1

分类专栏： css HTML 文章标签： css html 前端 java

本文链接：https://blog.csdn.net/m0_70516782/article/details/125452590

版权

css HTML 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

本文介绍了网页布局的基本概念，包括文档流的作用，元素在文档流中的行为（如块元素、内联元素和行内块元素），以及盒子模型（内容区、内边距、边框和外边距）的详细讲解。还探讨了如何让元素脱离文档流并应用边框样式，如边框宽度、颜色和样式。

摘要由CSDN通过智能技术生成

文档流

文档流（normal flow）

网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层

文档流是网页最底层

我们创建的元素默认情况下，都在文档流中

元素分为两种状态：在文档流中，脱离文档流

元素在文档流中的特点

块元素

1:会独占一行

2:块元素的宽度默认是父元素的100%

3:块元素的高度默认是被内容撑开的

内联元素（行内元素）

1:不会独占一行

2:宽度高度默认都是被内容撑开的，不能自己定义宽高

行内块元素

1、可以设置宽高

2、而且不会独占一行

元素脱离文档流后，就不再区分块元素，行内元素，也就不具有元素在文档流中具有的特点

脱离文档流的元素会更加类似行内块元素

盒子模型

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里所以我们把所有的元素都想成盒子，矩形

盒模型、盒子模型、框模型（box model）

内容区 content

内边距 padding

边框 border

外边距 margin

盒子模型的大小跟内容区，内边距边框有关系

跟外边距没有关系

1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列

width 设置内容区的宽度

height 设置内容区的高度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
    .box1{
      width: 200px;
      /*盒子宽*/
      height: 200px;
      /*盒子高*/
      background-color: red;
      /*颜色*/
      
    }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

盒子模型—边框

边框（border）元素设置边框

边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

设置边框必须指定三个样式

大小样式颜色

1:border-width 默认值一般是3px

使用border-width可以分别指定四个边框的宽度

可以跟多个值

4个值上右下左

3个值上左右下

2个值上下左右

1个值上下左右

除了border-width，CSS中还提供了四个border-xxx-width

xxx的值可能是：top right bottom left

专门用来设置指定边的宽度

2:border-color 设置边框的颜色默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

xxx的值可能是：top right bottom left(四个方向：上右下左)

补充小箭头的写法

3:border-style 设置边框的样式

可选值：

none，默认值，没有边框

solid 实线

double 双线

dashed

虚线

dotted 点状边框

style也可以分别指定四个边的边框样式，规则和width一致，

同时它也提供border-xxx-style四个样式，来分别设置四个边

border

- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

- 而且没有任何的顺序要求

- border一指定就是同时指定四个边不能分别指定

border-top(上边框) border-right(右边框) border-bottom(下边框) border-left(左边框)

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 100px;
        height:100px;
        background-color: rgb(222, 255, 170);

        /* 设置边框的宽度 */
        border-width: 1px; 
        border-top-width:10px ; 

        /* 设置边框的颜色 */
        border-color: red transparent transparent transparent; 
        /* transparent为一个边不显示颜色 */
        border-color: red; 
        border-top-color: red; 

        /* 设置边框的样式 */
        border-style:double; 
        /* double  边框样式为双线 */
        border: red 10px  dashed ;   /* 简写：颜色 宽度 样式 */  
        border-bottom: none;
        /* border-top: 5px green solid;
        border-right: 5px red solid ;
        border-bottom: 5px yellow solid;
        border-left: 5px blue solid; */
        
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>