CSS盒模型
以下是我整理的一些内容
盒模型是HTML+CSS中最核心的基础知识。它规定了网页元素如何显示以及元素间相互关系。Css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
它是由什么组成的呢
content(内容区):盒子里的内容
padding(填充区):盒子与内容之间的距离
border(边框区):盒子的厚度
margin(外边距区):盒子与盒子之间的距离
一般来说标准盒模型实际所占用空间为:
水平位置=width+左右padding+左右border+左右margin
垂直位置=height+左右padding+左右border+左右margin
一个盒子实际所占用空间:
水平位置=width+左右padding+左右border
垂直位置=height+左右padding+左右border
怪异盒模型实际所占用空间为:
水平位置=width(content+border+padding)+margin
垂直位置=height(content+border+padding)+margin
怪异盒模型:
box-sizing:border-box(怪异盒模型)
标准盒模型:
box-sizing:centent-box(标准盒模型)
我们来详细说padding、margin和border:
1、Padding:
作用:用来控制(父元素和子元素、元素和内容)之间的位置关系。
特点:1:padding会把盒子原有的大小撑大,如果想要保持原有大小,则需要在宽高基础上减掉。如果被内容撑开,没有设置固定宽高,padding直接撑开,不用减掉。
2:paddingpadding不会对背景图的位置造成影响,背景色会延展到padding区域。
Padding的使用方法:
1:
2:
2、Margin:
作用:控制同辈元素之间的位置关系。
特点:margin是实现在元素边框外围,不会撑大元素的大小
Margin的使用方法:
1:
2:
实现元素水平居中的方法:
margin: 0 auto;
margin-left:auto;
margin-right:auto;
在盒子里margin可以写负值,
Padding不可以写负值。
3、Border:
就是边框,
边框三个基本:粗细、线型、颜色。
Border的使用方法:
border-width:; 边框宽度
border-style:; 边框线型
线型类型:
none(取消边框)、solid(实线)、dashed(虚线)、dotted(点线)、double(双边线)
border-color:; 边框颜色
注:边框的大小是会添加在元素原有大小之外的,会改变元素原本的大小,也就是说边框是占位置的。(在标准盒模型情况下)
在加入padding值后盒子就会被撑大,
如果我们设置了宽高,则需要在盒子宽高原有的值下减去padding的值。
Padding:10px 20px 30px 40px;
上 右 下 左
Width要减掉20px和40px,Height要减去 10px和30px
才是盒子原本的大小。
而margin则是增大了盒子外围的大小,不撑开盒子大小。