盒模型
要在文档首部加了doctype声明，即使用了标准盒模型，而不加，则会由浏览器自己决定
内容区(width和height)
width和height属性用来设置内容区域的宽和高,也就是元素可渲染内容区的宽高.
height属性在默认情况下由内容撑开，也就是随内容多少的变化而变化。
内容默认左上角原点开始排列.
width:500px; 默认宽度是父级宽度100%
height:500px; 默认高度内容撑开
.box{
width: 400px;
height: 400px;
background-color: skyblue;
}
<div class="box">我要忘了你的样子</div>
边框区(border)
块级元素的border的作用是在元素的内容区和padding区外加上一个边框线.
通常用来分隔内容,使其不至于散步到背景的边界,
broder:宽度 种类 颜色 复合写法
.box{
width: 400px;
height: 400px;
border-width: 5px 10px 20px 30px;/*上右下左*/
border-style: solid;
border-color: violet;
background-color: skyblue;
}
<div class="box"></div>
border的单例型写法
border-width 默认是3px, 可以不写
border-style solid实线 double双边框 dashed虚线 dotted圆点 默认是none 这个是必须的
border-color 默认是color文字颜色一致，可以不写 transparent;透明 继承父级的颜色
都有可以接受四个方向的值,分别代表上右下左,顺时针.
三边有边框而一边没有设置技巧
border:1px solid #000;
border-top:none;
上面三角形不占位置
div{
width: 0px;
border-width: 80px;
border-style: solid;
border-color: transparent transparent tomato transparent;
border-top: none;
}
有一个和边框类似的属性:轮廓线(outline)可以在边框盒子外围画出一条线,这条线不会影响盒子布局和宽高尺寸
outline 与 border 的区别
border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。
内边距(padding)
我们不妨理解为快递盒子内快递商品外起包裹作用的海绵.
只是在CSS中,这个海绵默认是透明的,在现实世界中,海绵不会影响盒子的尺寸,但在CSS世界中,尺寸规则就有所不同了.
属于盒子 不放内容 使盒子变大 4个边都有 继承背景颜色 不能单独给他设置颜色
div{
width:100px;
height:100px;
border:1px solid red;
padding:10px 20px;
}
<div></div>
padding:100px;
padding:100px 50px; 第一个值代表上下 第2个值代表左右
padding:100px 50px 20px;第一个值代表上 第2个值代表左右 第3个值代表下
padding:100px 50px 20px 0;上右下左
margin外边距
margin:0 auto;auto只对外边距有效 代表自动计算的意思 只能实现左右自动居中
margin:100px 50px 40px 10px;以左和上为尊
盒子的大小计算不同
盒模型的组成，由里向外分别是 content，padding，border，margin
1.标准盒模型
盒子的左右占位 = width + 左右padding + 左右border + 左右margin
盒子的上下占位 = height + 上下padding + 上下border + 上下margin
盒子的宽度 = width + 左右padding + 左右border
盒子的高度 = height + 上下padding + 上下border
2.怪异盒模型
盒子的左右占位 = width + 左右margin
盒子的上下占位 = width + 上下margin
盒子的宽度 = width
盒子的高度 = height
怪异盒模型
这有什么用?当然有用，因为很多情况下，这种计算盒子大小的方式更加直观。
事实上，IE6及更早版本IE中的盒模型就是这样计算盒子宽度的。之所以说这种计算方式“直观”，是因为现实中的盒子就是这样测量的。
如果把CSS中的盒子想象成一个包装箱， 那么箱子的四壁就是边框, 从视觉上规定了箱子的大小：内边距就是箱子内部的填充层用于保护装在箱子里的物品，在箱子宽度既定的情况下，无论是加厚箱壁还是增加填充层厚度，都会挤压最终可用于盛放物品的空间。
这样在码放箱子时，不管它们之间空出多大距离(对应CSS中的外边距) ,都不会影响箱子本身的宽度, 以及箱子内部可用的空间,总之,这是一个有实物参照的方案.
- 标准模式中，网页元素的宽度是有padding,border,width三者的宽度相加决定的。
- 怪异模式中，width包含padding和border的宽度，即网页宽度为width。
选择怪异还是标准
边框内边距定死的,内容会发生变化我们使用怪异盒模型
内容定死不变外面边框和一些装饰会变使用标准盒模型
两个都变最好还是使用怪异盒模型
默认样式清除
body,p,ul,ol,dl,li{
margin:0;
padding:0;
}
*{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
外边距合并现象
块级元素的上外边距和下外边距有时会合并为单个外边距,这种现象被称为外边距合并现象
发生条件
- 块级元素,但不包括浮动盒子和绝对定位盒子和行内盒子,尽管浮动和绝对定位可以让元素块状化
- 只发生在常规文档流垂直方向.
父子外边距合并
父子级之间的外边距 是针对于第一儿子
1.给父级加上border
2.给父级加上padding
3.父级overflow:hidden;超出隐藏
默认情况下父元素是开放的,像一个栅栏一样,没有明显的界限,此时子元素加一个间距父元素也跟着移动了
.wrap{
width: 500px;
height: 500px;
background-color: teal;
}
.con1{
display: inline-block;
width: 200px;
height: 200px;
background-color:skyblue;
}
.con2{
width: 100px;
height: 100px;
background-color: tomato;
}
<div class="wrap">
<div class="con1"></div>
<div class="con2"></div>
</div>
- 你推自行车这时没有边框,你和自行车会一起移动相当,自行车没有加边框的父元素.
- 但是你推公交车公交车有铁皮,这时你会后退,公交车相当于有边框的父元素.
兄弟外边距合并
谁大谁做主 取最大值
没有很大的影响 你设置好一个值就可以
.bro1{
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto 150px;
}
.bro2{
width: 100px;
height: 100px;
background-color: lightgreen;
margin:-200px auto 0;
}
<div class="brother1"></div> <div class="brother2"></div>
女朋友的例子
margin合并的意义
经常有人说maigin合并是BUG,其实这种说法是大有问题的,这种特性就是这么设计的,不要遇到出乎自己意料和自己无法理解的现象就称其为BUG.
CSS世界里的CSS属性是为了更好的区进行图文信息展示,博客文章或新闻信息就是图文信息的典型代表
h2,p,ul标签默认垂直方向都有margin值,而单位全是em,这里为何要有图文信息,CSS世界设计的本意就是图文信息展示,有了默认margin值,我们的文章就不会挤在一起了,垂直方向就层次分明,段落有致,
这里为何用em单位,我们字体默认是16px,假如我们设置更大的字体,同时如果margin是像素,不随着字体变大间距变大,那阅读体验势必变得糟糕,em作为相对单位会让我们网站无论多大字体都排版良好
兄弟外边距合并意义
假如字体之间没有margin合并,文章段落首尾项会和其他兄弟标签成1:2的关系;文章的标题距离顶部很近,而下面的内容距离则会变得很开,这会造成上下间距不一致的情况,这些都是糟糕的排版体验
父子外边距合并意义
div是一个通用的流体性容器没有语义,用来分组和分隔,一个div从行为表现不能够也不可以影响原来的布局.假如没有父子margin合并.新嵌套的div会阻断原本兄弟margin合并,很有可能间距就会变大,影响原来的布局.
.fa1{
width: 200px;
height: 200px;
background-color: lightgreen;
margin: 0 auto 150px;
}
.son2{
width: 200px;
height: 200px;
background-color: red;
margin: 130px auto 0;
}
.fa2{
width: 300px;
height: 300px;
background-color: violet;
margin: 0 auto;
}
<div class="fa1"></div>
<div class="fa2">
<div class="son2"></div>
</div>
