CSS选择器盒子模型

最新推荐文章于 2024-07-17 18:42:40 发布

四分十七

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/qq_52153640/article/details/125446274

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一文档流

文档流（normal flow）

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

文档流是网页最底层

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

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

元素在文档流中的特点

块元素

1:会独占一行

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

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

内联元素（行内元素）

1:不会独占一行

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

行内块元素

1、可以设置宽高

2、而且不会独占一行

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

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

二盒子模型

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里

所以我们把所有的元素都想成盒子，矩形、

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

内容区 content

内边距 padding

边框 border

外边距 margin

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

跟外边距没有关系

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

width 设置内容区的宽度

height 设置内容区的高度

.box1{
      width: 200px;
      height: 200px;
      background-color: red;
      
    }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>

三盒子模型_边距

设置边框的宽度

border-width: 1px; 
border-top-width:10px ;

设置边框的颜色

border-color: red transparent transparent transparent; 
border-color: red;
 border-top-color: red;

设置边框的样式

border-style:double;

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

补充小箭头的写法

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

* 可选值：

* none，默认值，没有边框

* solid 实线

double 双线

dashed [dæʃt] 虚线

* dotted ['dɔtid] 点状边框

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

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

* border

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

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

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

* border-top border-right border-bottom border-left

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

四盒子模型_内边距

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

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

padding-top

padding-right

padding-bottom

padding-left

来设置四个方向的内边距

总结：

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

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

* 使用padding可以同时设置四个边框的样式，规则和border-width一致

style type="text/css">
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px red solid;
        /* padding-top:50px ;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px; */
        padding:10px ;
      }

      /*
			 * 创建一个子元素box2占满box1，box2把内容区撑满了
			 */
       .box2{
         width: 100%;
         height: 100%;
         background-color: pink;
       }
    
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>

五盒子模型_外边距

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

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

盒子有四个方向的外边距：（边演示，边总结）

margin-top

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

margin-right

默认情况下设置margin-right不会产生任何效果

margin-bottom

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

margin-left

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

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

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

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

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

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

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

规则和padding一样

 <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        border: 10px solid orange;
        padding: 50px;
        /* margin-top: 50px;
        margin-left: 50px;
        margin-bottom: -50px;
        margin-right: 500px; */
        margin: 10px 20px 30px 50px;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
      }
      .s1 {
        margin-right: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box1 box"></div>
    <div class="box2 box"></div>
    <span class="s1">低夭过</span>
    <span>你看我动没动</span>
  </body>