盒模型的属性 | 易学教程

一.属性

　　width：内容的宽度

　　height: 内容的高度

　　padding：内边距，边框到内容的距离

　　border: 边框，就是指的盒子的宽度

　　margin：外边距，盒子边框到附近最近盒子的距离

1.padding(内边距)

　　padding：就是内边距的意思，它是边框到内容之间的距离

　　另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

　　padding有四个方向，分别描述4个方向的padding。

描述的方法有两种

　　1、写小属性,分别设置不同方向的padding

padding-top: 30px;      离上边30
padding-right: 30px;    离右边30
padding-bottom: 30px;   离下边30
padding-left: 30px;     离左边30

　　2、写综合属性，用空格隔开

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

一些标签默认有padding

　　比如ul标签，有默认的padding-left值。

我们现在初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /*上下左右*/
            padding: 10px;
            /*上下  左右*/
            padding: 20px 30px;
            /*上  左右  下*/
            padding: 20px 30px 40px;
            /*顺时针 上右下左*/
            padding: 20px 30px 40px 50px;
        }
    </style>
</head>
<body>
    <!-- padding是标准文档流，父子之间调整位置 -->
    <div class="box">alex</div>
    
</body>
</html>

2.border(边框)

　border:边框的意思，描述盒子的边框

　　边框有三个要素：粗细线性样式颜色

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

border-width: 3px;       边框的粗细
border-style: solid;     边框的样式
border-color: red;       边框的颜色
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;  实线  点线  双实线   虚线  
border-color: red green yellow;
*/

按照方向划分

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

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

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

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

View Code

上面12条语句，相当于 bordr: 10px solid red;

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

这样也可以

　　border:none；

　　border：0；

　　表示border没有设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            
            /*width  style color*/
            /*根据方向来设置*/
            /*border-left: 5px solid green;
            border-right: 1px dotted yellow;
            border-top: 5px double purple;
            border-bottom: 1px dashed purple;*/

            /*border-left-style: solid;
            border-left-width: 1px;
            border-left-color: green;*/

        /*    border-width: 5px 10px;
            border-color: green yellow;
            border-style: solid double;*/

            /*border: 5px solid green*/
        }
    </style>
</head>
<body>
    <!-- padding是标准文档流，父子之间调整位置 -->
    <div class="box">alex</div>
    
</body>
</html>

示例

使用border来制作园

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*color: transparent;*/
            width: 200px;
            height: 200px;
            background-color: red;
            /*制作圆角*/
            /*border-radius: 3px;*/
            /*border-radius: 100px;*/
            border-radius: 50%;    
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

View Code

使用border来制作小三角

/*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

View Code

3.margin(外边距)

　　margin：外边距的意思。表示边框到最近盒子的距离。

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;

margin-bottom: 100px;

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .s1{
            background-color: red;
            margin-right: 30px;
        }
        .s2{
            background-color:rgb(0,128,0);
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <span class="s1">alex</span><span class="s2">wusir</span>
    
</body>
</html>

前提必须是标准文档流下
　　margin的水平不会出现任何问题
　　垂直方向上 margin会出现'塌陷问题'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .s1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 40px;
        }
        .s2{
            width: 200px;
            height: 200px;
            background-color:rgb(0,128,0);
            margin-top: 100px;            
        }
    </style>
</head>
<body>
    <!--  -->
    <div class="s1"></div>
    <div class="s2"></div>
    
</body>
</html>

标准文档流下margin的垂直方向的坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*float: left;*/
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-left: 50px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

父子盒子的margin坑

margin的塌陷问题

html结构：

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

css样式：

       *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

当给两个标准流下兄弟盒子设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。

当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。

margin：0 auto;

      div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }

当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？

设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。当设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。

另外如何给盒子设置浮动，那么margin:0 auto失效。

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

善于使用父亲的padding，而不是margin

如果让大家实现如图的效果，应该有不少的同学做不出来。

那么我们来看看这个案例，它的坑在哪里？

下面这个代码应该是大家都会去写的代码。

        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
            
            margin-top: 30px;
        }

因为父亲没有border，那么儿子margin-top实际上踹的是“流” 踹的是行,所以父亲掉下来了，一旦给父亲一个border发现就好了。

那么问题来了，我们不可能在页面中无缘无故的去给盒子加一个border，所以此时的解决方案只有一种。就是使用父亲的padding。让子盒子挤下来。

二.标准文档流

　　a.什么是标准文档流

　　宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

　　b.空白折叠现象

　　多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

　　c.高矮不齐.,底边对齐

　　文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

　　d.自动换行

　　如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

三.块级元素和行内元素

1.行内元素和块级元素的区别:

　行内元素:

　　　与其他行内元素并排;

　　　不能设置宽,高. 默认的宽高,就是文字的宽高.

　块级元素:

　　　霸占一行,不能与其他任何元素并列;

　　　能接受宽,高.如果不设置宽高,那么宽高将默认变为父亲的100%.

块级元素和行内元素的分类:

从HTML的角度来讲,标签分为:

　　文本级标签:p,span,a,b,i,u,em.

　　容器级标签:div.h系列,li,dt,dd.

注意:为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

从CSS的角度讲:

　　行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。

　　块级元素：所有的容器级标签都是块级元素，还有p标签。

2.块级元素和行内元素的相互转换 (必须是标准文档流下)

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

　　块级元素可以转换为行内元素 : display: inline;

　　行内元素可以转换为块级元素 : display: block;

属性:

　　block 块级标签
　　　　- 独占一行
　　　　- 可以设置宽高，如果不设置宽，默认是父盒子宽度的100%
　　inline 行内标签
　　　　- 在一行内显示
　　　　- 不可以设置宽高，根据内容来显示宽高
　　inline-block 行内块
　　　　- 在一行内显示
　　　　- 可以设置宽高
　　none 不显示隐藏不在文档上占位置
　　visibility：hidden;隐藏在文档上占位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*display: inline;*/
            border: 1px solid yellow;
        }
        div a {
            display: block;
            width: 300px;
            height: 300px;
        }
        span{
            display:inline-block;
            width: 300px;
            height: 200px;
            background-color: yellow;            
        }
    </style>
</head>
<body>    
    <div class="box">alexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalexalex</div>
    <div class="box">wusir</div>
    <div>
        <a href="#">
            <img src="https://i1.mifile.cn/a4/xmad_15350224111785_ASnBL.jpg" alt="" width="300" height="300">
        </a>
    </div>
    <input type="text">
    <span>aaaaa</span>
    <span>aaaaa</span>
</body>
</html>

四.浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动

看一个例子

html结构：

 <div class="box1"></div>
 <div class="box2"></div>
 <span>路飞学城</span>

css样式：

.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。

那么浮动如果大家想学好，一定要知道它的四大特性

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素由"子围"效果

4.收缩的效果

浮动元素脱标

脱标：就是脱离了标准文档流

看例子

     <div class="box1">小红</div>
     <div class="box2">小黄</div>
     <span>小马哥</span>
     <span>小马哥</span>

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。

原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

浮动元素互相贴靠

看例子

html结构

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

css样式

        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

效果发现：

如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

浮动元素字围效果

html结构：

<div>
        <img src="./images/企业1.png" alt="">    
    </div>
    <p>
        123路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞路飞
    </p>

css样式：

       *{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }

效果发现：所谓字围效果，当div浮动，p不浮动，div遮盖住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果。

浮动元素紧凑效果

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

html结构：

<div>
     alex
</div>

css样式：

div{
    float: left;
    background-color: red;
}

大家一定要谨记：关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动，

为什么要清除浮动

在页面布局的时候，每个结构中的父元素的高度，我们一般不会设置。（为什么？）

大家想，如果我第一版的页面的写完了，感觉非常爽，突然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白，肯定是去每个地方加内容，改图片，然后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是肯定的。

看一个效果：

html效果：

<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div> </div>

  <div class="father2"></div>

css样式：

       *{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮动 父盒子一般不设置高度*/

            /*出现这种问题，我们要清除浮动带来影响*/
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

效果发现：如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局。

那么我们知道，浮动元素确实能实现我们页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱！！！所以我们要清除浮动

还好还好。我们有多种清除浮动的方法，在这里给大家介绍四种：

给父盒子设置高度
clear:both
伪元素清除法
overflow：hidden

给父盒子设置高度

这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

clear：both

clear：意思就是清除的意思。

有三个值：

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

html结构：

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

css样式

       *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

伪元素清除法(常用)

给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}

新浪首页推荐伪元素清除法的写法

    
            /*新浪首页清除浮动伪元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

overflow:hidden(常用)

overflow属性规定当内容溢出元素框时发生的事情。

说明：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

有五个值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。