盒模型
在CSS中 , "box mode" 这一术语是用来设计和布局时使用,然后再网页中基本上都会显示一下方方正正的盒子, 我们称为这种盒子叫盒模型.
盒模型有两种 : 标准模型和IE模型 ,
盒模型示意图
盒模型的属性
width : 内容的宽度
height : 内容的高度
padding : 内边距 , 边框到内容的距离
border : 边框 , 就是指盒子的宽度
margin : 外边框 , 盒子边框到附近最近盒子的距离
如果让你做一个宽高402*402的盒子 , 答案有上万种 ,甚至更高
盒模型的计算
如果一个盒子设置了padding , border , width height , margin (咱们先不要设置margin , 后续再设置)
盒子的真实宽度= width + 2*padding + 2*border
盒子的真实高度 = height + 2*padding +2*border
注意: 标准盒模型 , width 不等于盒子真实的宽度
如果要保持盒子真实的宽度 , 那么加 padding 就一定要减 width , 减 padding 就一定要加 width 真实高度一样设置.
padding(内边距)
padding
padding : 就是内边距的意思 , 它是边框到内容之间的距离
另外padding的区域是有背景颜色的 , 并且背景颜色和内容颜色一样 , 也就是说 background-color 这个属性将填充所有的border以内的区域
padding的设置
padding有四个方向 , 分别描述4个方向的padding
描述的方法有两种
1、写小属性,分别设置不同方向的padding
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
2、写综合属性,用空格隔开
/*上 右 下 左*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px;
一些标签默认有padding
比如ul标签 , 有默认的padding-left值
那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器
*{ padding:0; margin:0; }
但是 , 这种方法效率不高 .
所以我们要使用并集选择器来选中页面中应有的标签(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)https://meyerweb.com/eric/tools/css/reset/
border 边框
边框
border : 边框的意思 , 描述盒子的边框
边框有三个要素 : 粗细 线性样式 颜色
border: solid
如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。
按照3要素来写border
border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow;
按照方向划分
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12条语句,相当于 bordr: 10px solid red;
另外还可以这样写:
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
border : none ;
border : 0 ;
表示border 没有设置样式.
使用border来制作小三角
/*小三角 箭头指向下方*/ div{ width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; }
margin(外边距)
margin : 外边距的意思 , 表示边框到最近盒子的距离 .
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; margin-bottom: 100px;
注意 : 计算有一个前提 , 在标准文档流下 ,
padding : 父子之间调整距离
margin : 兄弟之间调整距离
margin 中的坑 大坑
margin的用法
margin 塌陷问题
margin 的垂直方向会出现塌陷问题
当时说道了盒模型 , 盒模型包含着margin , 因为元素和元素在垂直方向上margin里面有坑
例子 :
html结构:
<div class="father"> <div class="box1"></div> <div class="box2"></div> </div>
css样式:
*{ padding: 0; margin: 0; } .father{ width: 400px; overflow: hidden; border: 1px solid gray; } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px;} .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; }
当给链各个标准文档流下兄弟盒子 , 设置垂直方向上的margin时 , 那么以较大的为准 , 那么我们称这种现象较塌陷 , 没办法解决 , 我们称为这种技巧叫“奇淫技巧”。记住这种现象,在布局垂直方向盒子的时候主要margin的用法。
当我们给两个标准文档流下的兄弟盒子设置浮动之后, 就不会出现margin塌陷的问题 ,
margin : 0 auto ;
div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0px auto; /*水平居中文字*/ text-align: center; }
当一个div 元素设置margin : 0 auto ; 就会居中盒子 , 那我们知道margin : 0 auto ; 表示上下外边距离为 0 , 左右为auto 的距离 , 那么auto 是什么意思呢?
设置margin-left:auto; 我们发现盒子尽可能大的右边有很大的距离 , 没有什么意义, 当设置margin-right:auto; 我们发现盒子尽可能大的左边有很大的距离 , 当两条语句 并存的时候 , 我们大仙盒子尽可能大的左右两边有很大的距离 , 此时我们就发现盒子居中了
另外如果给我盒子设置浮动 , 那么margin : 0 auto 失效
使用 margin:0 auto ; 注意点:
1 . 使用margin: 0 auto; 水平居中盒子必须有width , 要有明确width , 文字水平居中使用 text-align: center;
2 . 只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了 , 固定定位, 绝对定位 , margin:0 auto; 不能用了
3 . margin: 0 auto ; 居中盒子 , 而不是居中文本 , 文字水平居中使用text-align: center;