什么是盒子模型:
一个标签就是一个盒子,可以通过6大属性(margin,border,padding,width,height,background-color)来设置这个盒子。
同时,标签分男标签和女标签。对于男盒子来说,6大属性都有作用。对于女盒子来说,width,height不起作用,padding 和 margin在水平方向上有作用,在垂直方向上没有作用。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{margin: 0;
padding: 0;}
</style>
</head>
<body>
<div style="width: 100px;height: 100px; background-color: red;"></div>
<span style="width: 100px;height:100px;background-color:green;">span</span>
</body>
</html>
<body>
<div style="width: 100px;height: 100px; background-color: red;"></div>
<span style="margin:20px 20px;padding:20px 20px;background-color:green;">span</span>
</body>
下面由外到内依次介绍盒子模型的六大属性:
一.margin属性
margin是什么:它指元素之间盒子与盒子之间的距离。
1.1 css外边距属性margin:
分别是:margin-top;margin-right;margin-bottom;margin-left
可以简写为:margin:margin-top margin-right margin-bottom margin-left;依次按顺时针排列。
margin属性值的表示方式:
- margin中一个值:比如,margin:20px;表示上右下左距离都是20px。
- margin中两个值:比如,margin:20px 30px;表示上下是20px,左右是30px。
- margin中三个值:比如,margin:20px 40px 30px;表示上是20px,左右是40px,下是30px。
- margin中四个值:依次按顺时针上右下左排列,比如,margin:20px 40px 30px 50px;表示上是20px,右是40px,下是30px,左50px。
应用实例:有些标签默认右margin值的,*{margin:0;}清楚所有标签的默认值
margin对于块级元素,四个方向都有效,对于行级标签,水平方向有效,垂直方向无效。
margin外边距的重叠性:
重叠的前提条件:块级标签,垂直方向上
情况一:兄弟盒子之间重叠:
当两个相邻的盒子的垂直方向上的下边距(margin-top)和上边距(margin-bottom)挨着时候,则两个外边距会重叠在一起,这时候中间的margin大小是取大优先。
解决兄弟重叠:
方法1:给男的变成不男不女的(display:inline-block;)
方法2:浮动(浮动元素是不会塌陷的)
情况二:父子盒子之间的重叠(嵌套盒子)
两个盒子嵌套关系(父子),其中他们的父元素上边距(margin-top)和子元素上边距(margin-top)会重叠一起。
解决父子重叠:
方法1:给父元素设置边框(border-top),如果不想用到边框,可以使用transparent属性边框透明化。
方法2:给父元素设置padding-top
方法3:给男的变成不男不女的(给块级元素加上:display:inline-block;)
margin设置负值的作用:
当没有给子元素设置宽度时候,给子元素盒子设置margin-right:-100px;子元素宽度会增加100,此时f子元素盒子宽度是:width+margin-rigth=200px
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 100px;
border: 1px solid blue;
}
.father {
background-color: aqua;
overflow: hidden;
margin-right: -100px;
}
</style>
<div class="wrap">
<div class="father">
111
</div>
</div>
效果图展示:
二.border属性
border:设置盒子的边框
- 盒子设置属性可简写为:
border:粗细 线型 颜色 比如: border:1px solid red; - 盒子的四个边框:border-top border-right border-bottom border-left
- border-width border-style border-color
- border-top-width xxx
- border在页面是占空间的
- border可以实现小三角
border:10px solid transparent; border-top:10px solid red;
三.padding属性
- padding:是内容与border之间的距离。也就是内边距。
- padding中四个属性值:padding:padding-top padding-right padding-bottom padding-left,它和margin属性的四个值的表达方式是一样的。
- 应用: 有些标签有默认的padding 可以用 *{padding:0;}选中清除
- 应用:调整内容与border之间的间隙
- padding在页面是占空间的
四.content属性(width,height)
- 宽度和高度是指内容的宽高。
- 男标签可以设置宽度和高度,女标签不能设置宽度和高度
- 当父元素设置宽高是,子元素没有设置宽度高度,则子元素占据了父元素的100%空间
- 女标签它的宽度由内容决定,高度由font-size决定
- width和height可以设置百分比,是是相对父元素的百分比,比如父元素width:1000px;则子元素width:25%,子元素即为:1000*25%=250。
五:background:
- background-color:
- background-image:
1,默认水平和垂直方向都会平铺
2,如果空间不足,图片也会显示,只是显示不完整
3,url后面的路径引号可加可不加
4,背景图片默认会填充border,padding,content
background-repeat:
background-position:
background-attactment:fixed,定位图片,定死了,滑动页面不会改变。