文章目录
盒模型
盒子:容器 盒子模型 英文:box model。
最常见的盒子是div span
盒子中的区域:
content
- 宽 width px content
- 高 height content
- 内边距 padding
- 边框 border
- 外边距 margin
注:标准盒模型的宽和高和盒子真实占有的宽度不是一个概念。
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
padding: 30px;
}
</style>
<body>
<div>我是内容块</div>
</body>
注:
- 盒子的宽不设置时,默认为100%;但是宽度一般会做设置,高度却不一定。
- 盒子真实占有的宽:内容的宽+左padding+右padding+左边框+右边框
- 盒子真实占有的高:内容的高+上padding+下padding+上边框+下边框
内边距(padding)
- 内容与边框的距离。
- 内边距的区域也会被背景渲染。
padding有四个方向:上下左右。
写法:
1.小属性:
padding-top(上)
padding-bottom(下)
padding-left(左)
padding-right(右)
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
padding-left: 30px;
padding-right:20;
padding-top: 10px;
padding-bottom: 5px;
}
</style>
<body>
<div>我是内容块</div>
</body>
2.复合属性写法:
四种写法:
一值法:
padding:20px; 上下左右的padding相等。
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
padding: 20px;
}
</style>
二值法:
padding:10px 20px; 上下 左右
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
padding: 10px 20px;
}
</style>
三值法:
padding:20px 10px 30px; 上 左右 下。
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
padding:20px 10px 30px;
}
</style>
四值法:
padding:10px 20px 30px 40px; 上 右 下 左 顺时针。
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
padding:10px 20px 30px 40px;
}
</style>
小技巧:
若只有单个方向的内边距与其他内边距不同,可以先设置总体,再用单一属性单独设置不同的内边距。
<style>
div{
width: 300px;
height: 300px;
background-color: skyblue;
padding:10px;
padding-bottom: 20px;
}
</style>
边框(border)
border 边框
盒子占有的最外层的区域。
border是一个复合属性。
border有三个要素:宽度,线的类型,颜色。
按三要素拆分:
border-width 设置宽度
border-style 设置线的类型
border-color 设置颜色
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
border-width: 5px;
border-style: solid;
border-color: pink;
}
</style>
按照三要素与方向设置
border-left-width
border-left-style
border-left-color
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
border-left-width: 5px;
border-left-style: solid;
border-left-color: pink;
}
</style>
按照方向设置:(可自行测试效果)
border-left
border-right
border-top
border-bottom
外边距(margin)
盒子与盒子之间的距离。
margin有四个方向:上下左右。
写法:
1.小属性:
margin-top(上)
margin-bottom(下)
margin-left(左)
margin-right(右)
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;
}
</style>
2.复合属性写法:
四种写法:
一值法:
margin:10px; 上下左右的margin相等。
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
}
</style>
二值法:
margin:10px 20px; 上下 左右
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px 20px;
}
</style>
三值法:
margin:10px 20px 30px; 上 左右 下。
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px 20px 30px;
}
</style>
四值法:
margin:10px 20px 30px 40px; 上 右 下 左 顺时针。
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px 20px 30px 40px;
}
</style>
auto:代表自适应。
会将剩余的空间自动分配给设置auto的外边距。
margin : 0 auto;
可以让盒子水平居中。
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin:0 auto;
}
</style>
高度不固定
盒子的内容多少不确定时,为了保证元素的高度始终合适,不会出现大片留白与溢出,这种情况下一般不设置高度,而是用内容去撑开高度。
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<style>
div{
width: 100px;
/* height: 100px; */
background-color: skyblue;
}
</style>
父子盒模型
子盒的整体占有的位置不要超过父盒子的内容区域
若子盒子不设置宽度,会自动撑满父盒子的内容区域。
若不设置宽,只设置内边距和边框,宽度会自适应。
外边距塌陷
1.上下盒子的外边距塌陷
- 垂直方向上相邻的两个元素,如果都有外边距,则相交的地方会出现外边距重合现象,也叫作外边距塌陷。
- 在垂直方向上,margin有相遇的部分,不是取两个margin的和,而是取最大值。
1.当margin相遇的部分,一个值为正,一个值为负,结果为两个值的和。
<style>
div:nth-child(1) {
width: 100px;
height: 100px;
background-color: skyblue;
margin-bottom: 100px;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
margin-top: -50px;
}
</style>
当margin相遇的部分,两个值都为负数,结果为绝对值最大的。
<style>
div:nth-child(1) {
width: 100px;
height: 100px;
background-color: skyblue;
margin-bottom: -80px;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
margin-top: -50px;
}
</style>
解决办法:
1.BFC规范
2.两个上下相邻的同级盒子之间,为了避免出现外边距塌陷,尽量只设置上盒子的底部margin或下盒子的顶部margin。
嵌套盒子的外边距塌陷
父盒子没有填充内容,也没有设置顶部边框,那么子盒子的margin-top会让父盒子与子盒子一起掉下来。
<style>
.father {
width: 100px;
height: 100px;
background-color: skyblue;
}
.son {
width: 50px;
height: 50px;
background-color: pink;
margin-top: 50px;
}
</style>
解决办法:
1.父框里面有内容就不会掉下来(推荐)
2.给父盒子添加顶部的边框。(不推荐)
3.将margin换成padding。
同级之间的盒子距离使用margin,父子盒子使用padding。
盒模型
1.标准盒模型
设置的width和height是指内容的宽和高。增加内边距与边框会影响盒子的真实尺寸,但不会影响内容区域的大小。
<style>
div {
box-sizing: content-box;
width: 200px;
height: 200px ;
background-color: pink;
padding: 30px;
}
</style>
2.IE盒模型(怪异盒模型)
设置的width和height是指盒子的真实尺寸。增加内边距与边框会影响内容区域的大小,但不会影响盒子的真实尺寸。
<style>
div {
box-sizing: border-box;
width: 200px;
height: 200px ;
background-color: pink;
padding: 30px;
}
</style>
标准文档流
什么叫做标准文档流?
定义:内容必须是从左到右,由上往下书写。前面的内容大小或位置发生变化时,后面的内容也会随之变化。
html网页就是一个标准文档流。
1.空白折叠现象:无论多少个空格,换行 缩进,都会折叠成一个空格。
2.高矮不齐,底部对齐。
3.自动换行
行内块元素与块级元素
标准文档流将HTML元素分为了三种:
1.行内元素 inline
-
可以与其他行内元素并排展示。
-
设置宽高无效。
-
实际的宽高,由内容的宽高来决定。
2.块级元素 block -
独占一行。
-
可以设置宽高
3.行内块元素 inline-block
6. 可以设置宽高
7. 可以与其他行内元素或行内块元素并排。
容器级标签 div h li dt dd
文本级标签 span p a i em b
行内元素:
除了p标签之外,所有的文本级标签都是行内元素。p标签是文本级标签,但属于块级元素。
块级元素:
所有的容器级标签都是块级元素,包括p标签。
通过display属性来查看当前元素的类型。
也可以通过该属性修改当前元素的类型。
块级元素转行内元素:
8. display:inline; 拥有行内元素的属性,块级元素属性就会失效。
行内元素转块级元素。
9. display:block; 拥有块级元素的属性,行内元素属性就会失效。
***转行内块元素***
- display:inline-block;1.可以设置宽高2.可以与其他行内元素并排。
按显示分类
1.替换元素
11. 浏览器根据元素的标签和属性,来决定元素的具体显示内容。 img/input
2.非替换元素
12. 不是通过标签的属性来决定显示内容的,而是通过标签所包裹的具体内容来决定。
浮动
标准文档流的限制比较多,导致页面效果很多无法实现。
为了可以并排展示,又可以设置宽高,我们可以脱离标准文档流。
css中一共有三种方法可以脱标:
- 浮动
- 绝对定位
- 固定定位
设置浮动的方法:
float:left/right
<style>
div:nth-child(1){
width: 200px;
height: 200px ;
background-color: pink;
padding: 30px;
float: left;
}
div:nth-child(2){
width: 200px;
height: 200px ;
background-color: skyblue;
padding: 30px;
float: left;
}
</style>
脱标
设置浮动的元素会脱离标准文档流,浮动会在原来的位置上浮起来。
一个元素一旦浮动,那么就可以并排展示,同时可以设置宽高。
【注】设置浮动之后,不要再设置display属性了。
元素贴靠
每一个浮动元素都会去紧靠上一个浮动元素。
字围效果
标准文档流的文字不会被浮动元素遮挡
<style>
.box1{
height: 100px;
width: 100px;
background-color: teal;
float: left;
}
p{
width: 400px;
background-color: thistle;
}
</style>
收缩
一个浮动的元素,如果没有设置宽高,那么元素将自动收缩为内容的宽高
<style>
div{
float: left;
width: 500px;
background-color: tomato;
}
</style>
浮动的嵌套
如果浮动的子元素的宽的和大于父盒子的宽,那么后面的子元素会换行。
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
background-color: teal;
}
.box1{
float: left;
width: 300px;
height: 300px;
background-color: thistle;
}
.box2{
float: left;
width: 200px;
height: 300px;
background-color: tomato;
}
</style>