<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
1.浮动
给元素添加浮动之后影响的是后面的元素，浮动之后脱离文档流了，不占页面空间了，导致后面的元素上去补位置
在高度自适应的基础上添加浮动（子元素）
给子元素添加浮动，父元素没有高度的话，父元素的高度会降低（被没有浮动的元素给撑开了）
=====这一情况被称之为高度塌陷
解决方式：清除浮动 clear
取值：none======不清除浮动带来的影响
left======清除左浮动带来的影响
right=====清除右浮动带来的影响
both======清除所有浮动带来的影响（频率最多）
作用：让纵向排列的布局，横向显示
float：left/right/none
特殊情况：带来的影响
2.盒子模型
盒子：就是容器，布局的容器，用于做布局的时候的区块的划分
1.盒子模型的组成部分
内容部分（content）：css里面设置的宽度和高度
内边距（padding）：边框和内容之间的距离
边框（border）：一个盒子的边缘位置
外边距（margin）：边框和边框之间，盒子与盒子之间，元素与元素之间的距离
2.学习盒子模型的主要作用：用来调整页面之间的元素之间的距离的；更加美化
内边距和外边距
3.内边距-padding
概念：边框和内容之间的距离
使用属性：padding ：20px=======实现了四个方向的内边距
padding：v1 给一个值 实现四个方向的 内边距
padding：v1 v2 给两个值 v1实现上下方向 v2实现左右方向 实现了四个方向的内边距
padding：v1 v2 v3 给三个值 v1实现上面 v2实现左右 v3实现下面 实现了四个方向的内边距
padding：v1 v2 v3 v4 给四个值 v1上 v2右 v3下 v4左 上右下左 实现了四个方向的内边距
注意：取四个值的时候：仍然是：按照顺时针方向进行记忆的
只设置某一个方向的内边距
padding+方向词
padding-top=======上内边距
padding-right=====右内边距
padding-bottom====下内边距
padding-left======左内边距
实际开发用单一方向比较多
4.外边距
边框与边框之间的距离；元素与元素之间的距离
使用属性：margin
使用属性：margin ：20px=======实现了四个方向的内边距
margin：v1============给一个值 实现四个方向的 外边距
margin：v1 v2 ========给两个值 v1实现上下方向 v2实现左右方向 实现了四个方向的外边距
margin：v1 v2 v3 =====给三个值 v1实现上面 v2实现左右 v3实现下面 实现了四个方向的外边距
margin：v1 v2 v3 v4===给四个值 v1上 v2右 v3下 v4左 上右下左 实现了四个方向的外边距
注意：取四个值的时候：仍然是：按照顺时针方向进行记忆的
只设置某一个方向的外边距
margin+方向词
margin-top=======上外边距
margin-right=====右外边距
margin-bottom====下外边距
margin-left======左外边距
实际开发用单一方向比较多
3.盒子模型
总结：添加了内容，添加了边框，添加了内外边距之后，盒子会变大
求一下实际盒子模型占位置大小
实际的宽度=width+左右的padding+左右的border+左右的margin
实际的高度=height+上下的padding+上下的border+上下的margin
面试题
根据以下代码进行计算盒子的实际大小
<div></div>
CSS部分
div{
width:300px;height:300px
border:10px solid gray;
padding:10px;
margin:10px;
}
width:360px height:360px
标准盒子模型计算方法
实际宽度=内容宽度+内边距（左右）+边框（左右）+外边距（左右）
实际高度=内容高度+内边距（上下）+边框（上下）+外边距（上下）
只要添加了内边距和外边距之后盒子就变大了 如何不让盒子变大
！如何修改盒子模型的大小
可以触发怪异盒子模型
之前讲的叫标准盒子模型
box-sizing ：content-box（默认值）/border-box 不包括外边距
触发方法：box-sizing：border-box
当触发怪异盒子模型时，你实际设置的宽度和高度里面已经包含了你的内边距，边框，
不包括外边距
改变一下盒子模型的计算方法即可
计算方法：
实际宽度=content（width，左右内边距，左右边框）+左右外边框
实际高度=content（height，上下内边距，上下边框）+上下外边框
面试盒子模型题
盒子模型有几类？盒子模型的组成部分是哪几个部分？盒子模型种类的区别？盒子模型的大小计算方法
1）两类 w3c官方盒子模型 ie怪异盒子模型
2）盒子模型组成由四个部分组成的
内容区域（content）
内边距（padding）
边框（border）
外边距（margin）
3）二者的区别主要是通过一个属性来触发盒子模型的计算方法，改变计算内容的大小问题
属性：box-sizing属性
content-box border-box
如果不带box-sizing属性的话则按照w3c官方盒子模型进行计算大小
如果带了box-sizing属性并且取值为centent-box的时候，按照w3c官方盒子模型进行计算
===centent-box是这个属性的默认值
如果带了box-sizing属性并且取值为border-box的时候，按照ie怪异盒子模型进行计算大小
标准盒子模型计算大小
实际宽度=内容宽度+内边距padding（左右）+边框border（左右）+外边距margin（左右）
实际高度=内容高度+内边距padding（上下）+边框border（上下）+外边距margin（上下）
怪异盒子模型计算大小
实际宽度=content（width，左右内边距，左右边框）+左右外边框
实际高度=content（height，上下内边距，上下边框）+上下外边框
width和height里面已经包含了内容，内边距和边框
5.内外边距的特殊情况
1）内边距和外边距是否能取值为0
*{margin：0；padding：0} 取消元素自带的内边距和外边距
2）内外边距取值是否能为负数
内边距取值不能为负数====没有意义，实现不了，浏览器代码报错
外边距取值可以为负数====移动元素的位置，实际开发的时候
margin-top：-30px margin-left：-30px
3）margin：0 auto
作用：让布局位于父元素的水平位置居中显示/位于浏览器屏幕水平居中位置显示
实现功能：版心功能
0====上下之间的外边距
auto=左右自己的外边距 自动的意思，均分，让元素实现水平位置居中
但是：使用margin：0 auto的时候，只针对于页面中的普通文档流的元素起作用
只要添加浮动之后，margin：0 auto====必然失效，浮动之后已经脱离文档流了
要想使用margin：0 auto，这个元素必然有宽度，没有宽度的话实现不了
-->
</body>
</html>
扫一扫
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
