css盒子模型

最新推荐文章于 2023-11-16 09:06:59 发布

〆启

最新推荐文章于 2023-11-16 09:06:59 发布

阅读量55

点赞数 1

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

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

版权

css HTML 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

文档流

文档流（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>

内边距

内边距（padding），指的是盒子的内容区与盒子边框之间的距离

一共有四个方向的内边距，可以通过：

padding-top

padding-right

padding-bottom

padding-left

来设置四个方向的内边距

总结：

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,

盒子的大小由内容区、内边距和边框共同决定

外边距

外边距指的是当前盒子与其他盒子之间的距离，

他不会影响可见框的大小，而是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top

上外边距，设置一个正值，元素会向下移动,设置一个负值，元素会向上移动

margin-right

默认情况下设置margin-right不会产生任何效果,右边的元素会右移（挤别人）

margin-bottom

下外边距，设置一个正值，自己不动，其下边的元素会向下移动，挤别人

margin-left

左外边剧，设置一个正值，元素会向右移动,设置一个负值，元素会向左移动

由于页面中的元素都是靠左靠上摆放的，

所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，

而如果是设置右和下外边距会改变其他盒子的位置（挤别人

外边距也可以指定为一个负值，

如果外边距设置的是负值，则元素会向反方向移动

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,

规则和padding一样

默认样式

默认样式：

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，

所以为很多的元素都设置了一些默认的margin和padding，

而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

* {

margin: 0;

padding: 0;

}

方式一：

清除浏览器的默认样式

方式二：

引入重置样式表 */

〆启

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型

盒子模型：文档流（normal flow）网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层文档流是网页最底层我们创建的元素默认情况下，都在文档流中元素分为两种状态：在文档流中，脱离文档流 1:会独占一行 2:块元素的宽度默认是父元素的100% 3:块元素的高度默认是被内容撑开的 1:不会独占一行 2:宽度高...
复制链接

扫一扫