盒模型与标准文档流

盒模型与标准文档流

盒子

盒子:容器 盒子模型 英文:box model。

​ 最常见的盒子是div span

​ 盒子中的区域:

​ content

​ 1.宽 width px content

​ 2.高 height content

​ 3.内边距 padding

​ 4.边框 border

​ 5.外边距 margin

​ 【注】 标准盒模型的宽和高和盒子真实占有的宽高不是一个概念。

​ 【注】

​ 盒子的宽不设置时,默认为100%;但是宽度一般会做设置,高度却不一定。

​ 盒子真实占有的宽:内容的宽+左padding+右padding+左边框+右边框

​ 盒子真实占有的高:内容的高+上padding+下padding+上边框+下边框

内边距

内容与边框的距离。

内边距的区域也会被背景渲染。

padding有四个方向:上下左右。

写法:

1.小属性

padding-left

padding-right

padding-top

padding-bottom

2.复合属性写法:

四种写法:

一值法:

​ padding:20px; 上下左右的padding相等。

二值法

​ padding:20px 10px; 上下 左右

三值法:

​ padding:20px 10px 30px; 上 左右 下。

四值法:

​ padding:10px 20px 30px 40px; 上 右 下 左 顺时针。

小技巧:

​ 若只有单个方向的内边距与其他内边距不同,可以先设置总体,再用单一属性单独设置不同的内边距。

border 边框

盒子占有的最外层的区域。

border是一个复合属性。

border有三个要素:宽度,线的类型,颜色。

按三要素拆分:

​ border-width 设置宽度

​ border-style 设置线的类型

​ border-color 设置颜色

按照三要素与方向设置

​ border-left-width

​ border-left-style

​ border-left-color

按照方向设置:

​ border-left

​ border-right

​ border-top

​ border-bottom

   border: 1px solid red;

制作三角步骤:

​ 1.宽高设置为0;

​ 2.取消对应的边框。

​ 3.将相邻的边框颜色设置为白色(透明色)

 .box{
            width: 0px;
            height: 0px;
            border: 30px solid red;
            border-bottom: none;
            border-left-color: white;
            border-right-color: white;
        }

margin 外边距

盒子与盒子之间的距离。

margin有四个方向:上下左右。

写法:

1.小属性

margin-left

margin-right

margin-top

margin-bottom

2.复合属性写法:

四种写法:

一值法:

​ margin:20px; 上下左右的margin相等。

二值法

​ margin:20px 10px; 上下 左右

三值法:

​ margin:20px 10px 30px; 上 左右 下。

四值法:

​ margin:10px 20px 30px 40px; 上 右 下 左 顺时针。

auto:代表自适应。

会将剩余的空间自动分配给设置auto的外边距。

margin : 0 auto;

可以让盒子水平居中。

【注】盒子的内容多少不确定时,为了保证元素的高度始终合适,不会出现大片留白与溢出,这种情况下一般不设置高度,而是用内容去撑开高度。

父子盒模型

子盒子的整体占有的位置不要超过父盒子的内容区域 若子盒子不设置宽度,会自动撑满父盒子的内容区域。 若不设置宽,只设置内边距和边框,宽度会自适应。

 .father{
            width: 300px;
            height: 300px;
            background-color: seagreen;
            padding: 50px;
        }
        .son{
            height: 200px;
            padding-left: 10px;
            border: 10px solid #000;
            background-color: sienna;
        }

外边距塌陷

1.上下盒子的外边距塌陷

垂直方向上相邻的两个元素,如果都有外边距,则相交的地方会出现外边距重合现象,也叫作外边距塌陷。

在垂直方向上,margin有相遇的部分,不是取两个margin的和,而是取最大值。

当margin相遇的部分,一个值为正,一个值为负,结果为两个值的和。

当margin相遇的部分,两个值都为负数,结果为绝对值最大的。

解决办法:

1.BFC规范

2.两个上下相邻的同级盒子之间,为了避免出现外边距塌陷,尽量只设置上盒子的底部margin或下盒子的顶部margin。

嵌套盒子的外边距塌陷

父盒子没有填充内容,也没有设置顶部边框,那么子盒子的margin-top会让父盒子与子盒子一起掉下来。

解决办法:

1.有填充内容即可。(不推荐)

2.给父盒子添加顶部的边框。(不推荐)

3.将margin换成padding。

同级之间的盒子距离使用margin,父子盒子使用padding。

盒模型

盒模型分为两类:

1.标准盒模型

​ 设置的width和height是指内容的宽和高。增加内边距与边框会影响盒子的真实尺寸,但不会影响内容区域的大小。

2.IE盒模型(怪异盒模型)、

​ 设置的width和height是指盒子的真实尺寸。增加内边距与边框会影响内容区域的大小,但不会影响盒子的真实尺寸。

标准文档流

什么叫做标准文档流?

​ 定义:内容必须是从左到右,由上往下书写。前面的内容大小或位置发生变化时,后面的内容也会随之变化。

​ html网页就是一个标准文档流。

​ 1.空白折叠现象

​ 无论多少个空格,换行 缩进,都会折叠成一个空格。

​ 2.高矮不齐,底部对齐。

​ 3.自动换行

行内元素与块级元素

标准文档流将HTML元素分为了三种

1.行内元素 inline

​ 可以与其他行内元素并排展示。

​ 设置宽高无效。

​ 实际的宽高,由内容的宽高来决定。

2.块级元素 block

​ 独占一行。

​ 可以设置宽高

3.行内块元素 inline-block

​ 可以设置宽高

​ 可以与其他行内元素或行内块元素并排。

容器级标签 div h li dt dd

文本级标签 span p a i em b

行内元素:除了p标签之外,所有的文本级标签都是行内元素。p标签是文本级标签,但属于块级元素。

块级元素:所有的容器级标签都是块级元素,包括p标签。

通过display属性来查看当前元素的类型。

也可以通过该属性修改当前元素的类型。

块级元素转行内元素

​ display:inline; 拥有行内元素的属性,块级元素属性就会失效。

行内元素转块级元素

​ display:block; 拥有块级元素的属性,行内元素属性就会失效。

转行内块元素

​ display:inline-block;

​ 1.可以设置宽高

​ 2.可以与其他行内元素并排。

将html元素按照显示类型分类:

1.替换元素

​ 浏览器根据元素的标签和属性,来决定元素的具体显示内容。 img/input

2.非替换元素

​ 不是通过标签的属性来决定显示内容的,而是通过标签所包裹的具体内容来决定。

标准文档流的限制比较多,导致页面效果很多无法实现。

为了可以并排展示,又可以设置宽高,我们可以脱离标准文档流。

脱离标准文档流

css中一共有三种方法可以脱标:

1.浮动

2.绝对定位

3.固定定位

设置浮动的方法:

float:left/right

  div:nth-child(1){
            float: right;
            width: 200px;
            height: 300px;
            background-color: teal;
        }
        div:nth-child(2){
            float: right;<!-- 向右浮动 -->
            width: 300px;
            height: 300px;
            background-color: tomato;
        }

浮动

设置浮动的元素会脱离标准文档流

浮动会在原来的位置上浮起来。

一个元素一旦浮动,那么就可以并排展示,同时可以设置宽高。

【注】设置浮动之后,不要再设置display属性了。

贴靠:

每一个浮动元素都会去紧靠上一个浮动元素

字围效果

标准文档流的文字不会被浮动元素遮挡。
在这里插入图片描述

收缩

一个浮动的元素,如果没有设置宽高,那么元素将自动收缩为内容的宽高

浮动的嵌套

如果浮动的子元素的宽的和大于父盒子的宽,那么后面的子元素会换行。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值