盒模型

程序员文章站 2022-04-25 15:56:17

...

盒模型

1 盒子中的区域

<1>盒子的主要属性：

width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。
height高度，css中Height指的是内容的高度，而不是盒子的高度。
padding 内边距
border 边框
margin 外边距

<2>下面两个盒子，真实占有宽高，完全相同，都是302*302：

.box1{
    width:100px;
    height:100px;
    padding:100px;
    border:1px solid red;
}
计算如下：1+100+100+100+1=302px
.box2{
    width:250px;
    height:250px;
    padding:25px;
    border:1px solid red;
}
计算如下：1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式：
真实占有宽度=左border+左padding+width+右padding+右border

<3>如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width.

2.认识padding

<1>padding的区域有背景颜色，在css2.1中背景颜色一定和内容区域的相同。

<2>padding是4个方向的，所以我们能够分别描述4个方向的padding.

第一种：小属性，也就是复合属性。

padding-top:30px;  上
padding-right:20px; 右
padding-bottom:40px; 下
padding-left:100px; 左

第二种：综合属性。
空格隔开，上右下左。

padding:30px 20px 40px 100px;

<3>可以用小属性层叠大属性(不能把小属性写在大属性前面)：

padding:20px;
padding-left:30px;

题目一：

div{
    width:200px;
    height:200px;
    padding-left:10px;
    padding-right:20px;
    padding:40px 50px 60px;
    padding-bottom:30px;
    border:1px  solid #000;
}

答:padding-left:10px；和 padding-right:20px；没用，因为后面的padding大属性，层叠掉了他们。

<4>一些标签默认带有padding.比如ul.所以说，我们做站的时候，会清除这个默认的padding.

3.border 边框

<1>边框三要素：粗细、线型、颜色。

<2>所有的线型：

none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
常用的有：solid 、dashed、 dotted

<3>border属性能够被拆开，有两大种拆开的方式：

第一种：按要素

border-width:10px;  边框宽度
border-style:solid;    线型
border-color:red;      颜色
等价于：
border:10px solid red;

如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序：

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red  green blue yellow;

第二种：按方向
第一种拆法：

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
等价于：
border:10px solid red

第二种拆法：就是把每个方向的，每个要素拆开：

border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
等价于：
border:10px solid red;

<4>可以用边框做三角形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style type="text/css">
        div{
            width: 0px;
            height: 0px;
            border: 30px solid white;
            border-top-color: pink;
            transition:all 1s ease 0s;
        }
        div:hover{
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.标准文档流

4.1块级元素和行内元素

<1>从宏观上讲，web页面和Ps等设计软件有本质的趋避：
web页面的制作，从上往下。而设计软件，想往哪里画东西，都可以画。
<2>标准流的微观性质：
（1）空白折叠现象。
（2）高矮不齐，底边对齐。
（3）自动换行，一行写不完，换行写。
<3>块级元素和行内元素
（1）标签分为两种等级：块级元素和行内元素。
（2）块级元素：

霸占一行，不能与其他任何元素并列。
能接受宽高。
如果不设置宽度，那么宽度将默认变为父亲的100%。

（3）行内元素：

可以与其他行内元素并排。
不能设置宽高。默认的宽度，就是文字的宽度。

（4）标签分为：文本级、容器级。

文本级：p、span、a、b、i、u、em
容器级：div 、h系列 、li 、dt 、dd

基本上所有的文本级标签，都是行内元素。除了p,是块级元素。
所有的容器级标签，都是块级元素。

4.2块级元素和行内元素的相互转换

<1>块级元素可以设置为行内元素。行内元素可以设置为块级元素。
<2>display用来改变元素的行内、块级性质。

display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。

<3>css中一共有三种手段，使一个元素脱离标准文档流。
（1）浮动
（2）绝对定位
（3）固定定位

5.浮动：是CSS里面布局用的最多的属性。

5.1浮动的元素脱标

5.2浮动的元素互相贴靠

<1>如果有足够的空间，会靠着二哥。如果没有足够的空间，会靠着一哥。如果没有足够的空间靠着一哥，自己去贴左墙。
<2>float:left/right;

5.3浮动的元素有“字围”效果

6.小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        .header{
            width: 970px;
            height: 103px;
            /*background-color: yellow;*/
            /*居中*/
            margin: 0 auto;
        }
        .header .logo{
            float: left;
            width: 277px;
            height: 103px;
            background-color: red;
        }
        .header .language{
            float: right;
            width:137px;
            height: 49px;
            background-color: green;
            margin-bottom: 8px; 
        }
        .header .nav{

            float: right;
            width: 679px;
            height: 46px;
            background-color: green;
        }
        .content{
            width: 970px;
            height: 435px;
            /*background-color: yellow;*/
            margin: 0 auto;
            margin-top: 10px;
        }
        .content .banner{
            float: left;
            width: 310px;
            height: 435px;
            background-color: gold;
        }
        .content .rightPart{
            float: right;
            width: 650px;
            height:435px;
            /*background-color: pink;*/
            margin-left: 10px;
        }
        .content .rightPart .main{
            width: 650px;
            height: 400px;
            /*background-color: yellow;*/
            margin-bottom: 10px;
        }
        .content .rightPart .links{
            width: 650px;
            height: 25px;
            background-color: yellow;
        }
        .content .rightPart .main .news{
            width: 450px;
            height: 400px;
            /* */

            float: left;
        }
        .content .rightPart .main .hotpic{
            float: left;
            width: 190px;
            height: 400px;
            background-color: purple;
            margin-left: 10px;
        }
        .content .rightPart .main .news .news1{
            width: 450px;
            height: 240px;
            background-color:skyblue;
            margin-bottom: 10px;

        }
        .content .rightPart .main .news .news2{
            width: 450px;
            height: 110px;
            background-color:skyblue;
            margin-bottom: 10px;

        }
        .content .rightPart .main .news .news3{
            width: 450px;
            height: 30px;
            background-color:skyblue;

        }
        .footer{
            width: 970px;
            height: 35px;
            background-color: navy;
            margin:0 auto;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="logo">logo</div>
        <div class="language">语言选择</div>
        <div class="nav">导航条</div>
    </div>
    <!-- 主要内容 -->
    <div class="content">
        <div class="banner"></div>
        <div class="rightPart">
            <div class="main">
                <div class="news">
                    <div class="news1"></div>
                    <div class="news2"></div>
                    <div class="news3"></div>
                </div>
                <div class="hotpic"></div>
            </div>
            <div class="links"></div>
        </div>
    </div>
    <!-- 页尾 -->
    <div class="footer"></div>
</body>
</html>

7.复习盒模型
<1>所有标签都是盒子。
<2>图片、表单元素一律看作文本。
<3>盒模型的组成：width height border margin padding
<4>标准文档流，就是一个“默认”状态。标签分为块级元素和行内元素。
<5>块级元素：一定是霸占一行的，能设置宽高。不设置宽度，默认就是占满父亲；div 、 p、 h、 li
<6>行内元素：和其他元素并排，不能设置宽高。默认宽度就是文字宽度。span 、a 、 b 、i 、 u
<7>标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。
<8>浮动：float:left/right
浮动宏观的看，就是做“并排”的。有几个性质：脱标、贴边、字围、收缩。
(1)一个浮动的元素，是不需要设置display:block；就能够设置宽高了。因为浮动之后，脱离标准流了。
(2)一个浮动的元素，如果没有设置width,将会收缩。

    <style>
        div{
            float: left;
            background-color: gold;
        }
    </style>

这个div浮动了，且没有设置宽度，那么将自动缩紧为内容的宽度。

相关标签：盒模型浮动文档标准流

上一篇：纬创印度iPhone工厂遭暴力打砸！薪资纠纷还是另有内情？

下一篇： iPhone 12/13预计明年出货1.8亿部：消息称京东方OLED屏占比不足1/10

盒模型

盒模型

1 盒子中的区域

<1>盒子的主要属性：

<2>下面两个盒子，真实占有宽高，完全相同，都是302*302：

<3>如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding，加padding就要减width.

2.认识padding

<1>padding的区域有背景颜色，在css2.1中背景颜色一定和内容区域的相同。

<2>padding是4个方向的，所以我们能够分别描述4个方向的padding.

<3>可以用小属性层叠大属性(不能把小属性写在大属性前面)：

<4>一些标签默认带有padding.比如ul.所以说，我们做站的时候，会清除这个默认的padding.

3.border 边框

<1>边框三要素：粗细、线型、颜色。

<2>所有的线型：

<3>border属性能够被拆开，有两大种拆开的方式：

<4>可以用边框做三角形。

4.标准文档流

4.1块级元素和行内元素

4.2块级元素和行内元素的相互转换

5.浮动：是CSS里面布局用的最多的属性。

5.1浮动的元素脱标

5.2浮动的元素互相贴靠

5.3浮动的元素有“字围”效果

6.小练习

css和css3弹性盒模型实现元素宽度（高度）自适应

css3弹性盒模型实例介绍

几个CSS3的flex弹性盒模型布局的简单例子演示

CSS3弹性盒模型开发笔记（二）

CSS盒模型的介绍

CSS3中几个新增加的盒模型属性使用教程

css之盒模型

HTML和CSS前端教程05-CSS盒模型

css之弹性盒模型

CSS中盒模型的理解