零基础CSS（二）盒子模型

最新推荐文章于 2022-12-04 22:57:43 发布

李不烦

最新推荐文章于 2022-12-04 22:57:43 发布

阅读量295

点赞数

分类专栏： JavaScript 文章标签： css

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/88627457

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

CSS盒子模型：

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。//注意：宽度和真实占有宽度，不是一个概念！
padding：内边距。
border：边框。
margin：外边距。

`注意<body>`标签也有margin

<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。

1、边框

只设置的边框的宽度，并没有设置边框的颜色和样式 - 没有任何效果

设置边框的宽度和颜色，并没有设置边框的样式 - 没有任何效果

设置边框的颜色和样式 - 边框的宽度具有一个默认值

**设置边框的样式 - 必须同时设置边框的宽度、颜色和样式，才能有效(边框有默认宽度）

设置四个边框同样的样式有两种方式：

border-width: 10px;
border-color: black;
border-style: solid;

b.简写属性，同时设置宽度、颜色和样式

border: black 10px solid;

注意：宽度、颜色和样式设置的顺序没有要求

设置边框样式

1. 设置边框的宽度 border-width - 设置四个边框的宽度(px)

边框值设置：
只设置一个值时 - 同时设置四个边框的宽度
设置了两个值时 - 第一个值表示上下边框，第二个值表示左右边框
设置了三个值时 - 第一个值表示上边框，第二个值表示左右边框，第三个值表示下边框
设置了四个值时 - (顺时针方向)上边框，右边框，下边框，左边框

分四方向：
         border-top-width    /*上边框*/
         border-right-width  /*右边框*/
         border-bottom-width /*下边框*/
         border-left-width   /*左边框*/

   显示的实际宽度和高度
实际宽度 = width + border-left-width + border-right-width
实际高度 = height + border-top-width + border-bottom-width

2.设置边框的颜色 border-color - 设置四个边框的颜色

设置规则同边框

3.设置边框的样式 border-style - 设置四个边框的样式

设置边框样式值：

none - 无边框效果
solid - 实线
double - 双实线
dashed - 虚线
dotted - 点状边框

方向设置规则同边框

2、内边距

CSS Padding（内边距）属性定义元素边框与元素内容之间的距离。

 padding 内边距
简写属性:padding: 30px 20px 10px 5px;
  设置一个值 - 表示四个方向
  设置两个值 - 上下，左右
  设置三个值 - 上，左右，下
  设置四个值 - 上，右，下，左
分四个方向设置：

padding-top /* 设置一个元素的顶部内边距*/
padding-right
padding-bottom
padding-left

3.外边距

CSS Margin（外边距）属性定义元素周围的距离。
外边距不不会影响元素的可⻅见⼤大⼩小，但是会影响元素的位置

简写设置外边距：

如果设置一个值，则同时设置外边距的四个⽅方向。如下代码:
margin: 25px；

如果设置两个值，则第一个值表示设置外边距的上下⽅方向，第二个值表示设置外边距的左右⽅方向。

margin: 25px 50px
如果设置三个值，则第一个值表示设置外边距的上边，第二个值表示设置外边距的左右⽅方向，第三个值表示设置外边距的下边。

margin: 25px 50px 75px
如果设置四个值，则分别表示设置上、右、下和左四个⽅方向的外边距。

margin: 25px 50px 75px 100px

四个方向分别设置

margin-top 设置元素的上外边距。

margin-right 设置元素的右外边距。

margin-left 设置元素的左外边距。

margin-bottom 设置元素的下外边距。

设置上和左外边距
margin-top: 100px;

margin-left: 50px;
由于元素在 HTML ⻚页⾯面中默认是靠左靠上显示的。所以默认情况下，修改左外边距和上外边距时，会影响当前元素的位置。

设置下和右外边距

margin-right: 50px;

margin-bottom: 50px;

修改右和下外边距时会影响其他元素相对于当前元素的位置。

盒子居中margin:0 auto;

margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：

注意：

使用margin:0 auto; 的盒子，必须有width，有明确的width

2）只有标准流的盒子，才能使用margin:0 auto; 居中。

也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

3） margin:0 auto;是在居中盒子，不是居中文本。

文本的居中，要使用 text-align:center;

问题一：外边距重叠问题

 两个 div 元素，垂直方向排列，为上一个 div 元素设置下外边距，为下一个 div 元素设置上外边距
 结果 - 在两个外边距中取最大值，并不是两个外边距相加的结果，解决 - 只设置其中一个外边距即可

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的；

外边距是和

注意：值得注意的是: 外边距的重叠现象只会出现在垂直⽅方向，⽽而⽔水平⽅方向并不不存在外边距重叠现象。

外边框为负值，可能会出现覆盖效果，此例子#d2 div背景色为红色

外边距为负值，可能移除页面 margin-left:—50px

问题二：上外边距的传递性

如果定义两个 <div> 标签是⽗父⼦子关系的话，当为作为⼦子元素的 <div> 设置上外边距，该上外边距会传递给作为⽗父元素的 <div>（注意：父元素没有边框，如果父元素有边框则不会有传递性）。具体代码如下:

<!DOCTYPE html> 
<html>   
 <head>        
<meta charset="UTF-8">       
 <title></title>             
<style type="text/css">                
 .box3{   
  width: 300px;                
  height: 200px;                
  background-color: skyblue;            }                        
.box4{               
 width: 100px;              
  height: 100px;               
 background-color: red;                
/*设置⼀一个margin-top*/               
 margin-top: 100px;            }                  
 </style>   
 </head>    
<body>              
<div class="box3">           
 <div class="box4"></div>       
 </div>    
</body>
 </html>

可以通过为作为⽗父元素的 <div> 下内边距解决。

margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。

所以，我们一定要善于使用父亲的padding，而不是儿子的margin。

关于margin的IE6兼容问题：
1.IE6双倍margin bug：

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

解决方案：

1）使浮动的方向和margin的方向，相反。

所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。

float: left;

margin-right: 40px;

2.使用hack（没必要，别惯着这个IE6）

单独给队首的元素，写一个一半的margin

如果两个盒子并列，习惯用左边的盒子的margin-right来影响布局，而不是用右边盒子的margin-left来影响布局；

2.IE6的3px bug

解决办法：

不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了3px bug，说明你的代码不标准。

内联元素的盒⼦子模型

   行内元素设置 width 和 height 时 - 无效的， 行内元素显示的宽度和高度取决于文本内容
   行内元素设置边框 - 有效 
       内联元素⽀支持⽔水平⽅方向的边框。 内联元素可以设置垂直⽅方向的边框，但是不不会影响布局。
   行内元素设置内边距 - 有效 
       内联元素⽀支持⽔水平⽅方向的内边距。 内联元素可以设置垂直⽅方向的内边距，但是不不会影响布局。
   行内元素设置外边距 - 左右外边距有效，上下外边距无效 
       内联元素⽀支持⽔水平⽅方向的外边距 , 不不⽀支持垂直⽅方向的外边距。

盒子的怪异模型

默认的盒子模型
box-sizing: content-box;
实际的宽度 = width + border + padding
这种盒子模型的内容区是不会变化的

box-sizing: border-box; - 盒子的怪异模型
实际的宽度 = width
实际的高度 = height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的怪异模型</title>
    <style>
        /*
            TODO 默认的盒子模型
            TODO box-sizing: content-box;
            TODO * 实际的宽度 = width + border + padding
            TODO * 这种盒子模型的内容区是不会变化的
            TODO box-sizing: border-box; - 盒子的怪异模型
            TODO * 实际的宽度 - width
            TODO * 实际的高度 - height
         */
        #d1 {
            box-sizing: border-box;

            width: 200px;
            height: 200px;
            background-color: red;
            border: 50px black solid;
            padding: 50px;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

风在摇它的树，草在结它的籽

李不烦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
零基础CSS（二）盒子模型

CSS盒子模型：网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型盒子模型，英文即box model。无论是div、span、还是...
复制链接

扫一扫