在网页中“一切皆是盒子”
！！！盒子模型
每个元素都是盒子。（都是矩形）
一个盒子我们会分成几个部分：
举例：箱子放电视。
单词记下。
内容区(content) （放电视的地方）
内边距(padding) （电视和箱子的距离） 都适用单独设置
边框(border) （箱子四个边） 都适用单独设置
外边距(margin) （盒子和盒子之间的距离） 都适用单独设置
盒子套盒子（可以兼容），放在内容区。
模型图片：
11576306-8c75f3933b589b66.png
image.png
w h 设置内容区
border-width:1px 2px 3px 4px;上又下左 -->都适用单独设置
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style type="text/css">
.box{
width: 300px;
height: 500px;
background: #afa;
border-width:10px 20px 30px 40px;
/*如果在border-width指定了四个值*/
/*则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的*/
/*如果指定三个值*/
/*则三个值会分别设置给上、左右、下*/
/*如果指定两个值*/
/*则两个值会分别设置给上下、左右*/
/*如果指定一个值，则四边全都是该值*/
border-color: red yellow orange blue;
/*同理*/
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒子大小由以下共同决定：
内容区(content) （放电视的地方）
内边距(padding) （电视和箱子的距离）
边框(border) （箱子四个边）
边框的样式
边框可以设置多种样式：
none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
边框
border-top border-right border-bottom border-left
demo
.box{
可以单独设置四个边的样式，
规则和border一样，
只不过它只对一个边生效
*/
/*border: red solid 10px;*/
/*border-left: red solid 10px;*/
/* border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px; */
border: red solid 10px;
border-right: none;
}
内边距（内容区、边框共同影响可见框大小）：
box{
width: 200px;
height: 200px;
border:20px red；
padding-top；
}
padding-top
padding-right、右边距
padding-left、
padding-bottom
padding：100px全部边距设置完毕。
使用padding可以同时设置四个边框的样式，规则和border-width一致
外边距（不会影响可见框大小。只会影响盒子的位置，扩大了外部位置）
自己设置外边距（只有一个盒子）。对于右面的外边距，由于距离离得远，移动看不出效果。对于自己来说，自身位置变，就是上左外边距。
如果盒子与其相邻，会使右面下面其他的东西位置改变。
外边距可以设置为负值，往右和左走。
下面的外边距bottom设为负值以后，在其下面的盒子往上走，而本身不动。（应用，看商品，底下出现详情）
box{
border:20px red；
margin-top；
}
margin-top/right/bottom/left。
bottom-left：auto 自动（只给水平方向设置），有有多少都设置为最大值（到最右面）。
bottom-left：auto
bottom-right：auto居中
bottom ：0 auto（常用）
简洁方法和padding和border一样。
外边距的重叠（垂直方向的相邻的盒子（中间加a就不会重叠），取边距值最大）
box{
border:20px red；
margin-bottom：200；
}
box{
border:20px red；
margin-top：100；
父子元素
子元素变了父元素也变了。解决办法：
border padding 加内容。
浏览器默认样式
默认内外边距
body（p，ul）{
margin：0
}
推出=以下
*{
margin：0
padding：0
}
（性能不好）
以上块元素模型
列表。
*{
margin: 0;
padding: 0;
}
内联元素盒模型
内联样式不能设置宽高
内联元素可以设置水平方向内边距
左右可以
边框可以设置。内联样式设置垂直方向大小，不会改变位置。
边框。设置垂直方向大小，不会改变布局。左右会影响布局
水平外边距，内联元素支持水平方向的外边距
左右可以用。水平方向二个是求和的
垂直方向。不可用（没效果）。
（水平方向都要=有，就当垂直都不行）
display和visibility
！内联变块元素 display ：block
块元素 可以转为内联display ： inline
inline-block行内块 宽可设置不占一行。
none 就不显示了，隐藏了不占位置了。
visibility
规定元素是否可见。
visibility：visvle；
visibility： hidden ；隐藏也占用位置。
overflow
当子元素超出父元素的时候。（溢出））
在父元素里面加
overflow：visibale 溢出
overflow： hidden 溢出内容减掉
overflow：scroll 滚动（不超出父元素）（不管溢出否 水平垂直都加滚动条）
overflow：auto 根据情况自己加滚动条
文档流（网页就是文档）
最基础的一层，表示页面的位置。
块元素
在文档流，自上到下，独占一行。
不设宽度，就是默认浏览器宽度auto。设置宽度在设padding就会影响可见框大小。没设置宽度，auto，宽还是父元素100%，里面内容会往后挤。
高被撑开了。
内联元素
在文档流，只占自身大小。从左到右排列。
宽高都被内容撑开了。
浮动
$3 123快捷键
块元素 可以转为内联display ： inline-block
《》《》 == <><>挨着没空格
但是不想横着写：
float 浮动 不继承
float ：right；）（左上右上浮动，浮动到父元素边框或者不浮动对象就不浮动）
块独占一行。浮动不上去。--》可以换位置解决。
一行放不下，浮动目标，自动换行。
文字绕图
浮动不会盖住文字，所以文字自动环绕。（图片一个效果）
内联元素的浮动
在文档流中，子元素的宽度默认占父元素的全部
内联元素脱离文档流以后会变成块元素*
简单布局
1/固定布局
2/自适应布局
网友评论