在我们的网页当中,整个网页的构成可以分为:结构(html)、表现(css)、行为(javasrcipt)三部分。
盒模型就是网页布局的基石,是搭建整个网页结构的基本框架,是结构组成的砖与瓦。简单点说,盒模型就是在结构中对于一定区域的划分,我们可以通过css对它进行大小、形状等等的设置,对于盒模型本身而言,它也可以分为四个部分:
一:内容是指我们所放入信息所占有的区域(图片、文本、视频等等)。
二:填充(padding)是指盒模型本身区域边缘至内容之间的间距。
三:边框(border)是指盒模型本身。
四:外边距(margin)是指相邻两个盒子之间的间距。
如图:
理解盒模型:
整个网页结构就如一片土地,我们需要对齐划分成一块一块的形状,分别中上不同的农作物,方便种植与管理,而这一块块土地我们就可以当做盒模型。
1:内容就比如我们所种植的农作物所占据的范围。
2:填充(padding)是指所种植农作物至区域边缘之间的距离。
3:边框(border)是指每一块土地边缘的厚度。
4:外边距(margin)是指一块土地与另一块土地之间的间距。
一: 填充(padding)
- padding是盒子内部,内容与边缘的距离;
- padding的作用是控制内容子元素和父元素之间的距离关系;
- padding的值并不会对父元素的背景图造成影响。
- padding的值会撑大父元素的宽高,如果父元素拥有宽高值,那么需要对父元素减掉所撑大的值;如果父元素没有设置宽高,那么子元素的大小就会使得父元素被撑大,不用减掉;
- 对单一方向添加padding:
① padding-top 上
② padding-right 右
③ padding-bottom 下
④ padding-left 左
如图:
- 多个值添加padding:
① padding:10px四周
② padding:10px 10px 上下 左右
③ padding:10px 10px 10px 上 左右 下
④ padding:10px 10px 10px 10px 上 右 下 左
如图:
二:边框(border)
1 .默认情况下边框是生成在元素之外的;
2. 复合式写法 border:1px solid red;
① 属性拆分:
1): border-width(边框大小)
2):border-color (边框颜色)
3):border-style(边框类型)
如图:
对单一方向添加border:
① border-top:10px solid red; 上
② border-right:10px solid red;右
③ border-bottom:10px solid red;下
④ Border-left:10px solid red;左
如图:
3. 利用边框实现三角形:
① 标签宽高设置为0;
② 统一设置四个方向的边框为透明;
③ 调整某个方向边框颜色;
如图:
4. 边框类型:
① solid 实线
② dashed 虚线
③ dotted 点状线
④ double 双线
⑤ none 没有线条
第三:外边距(margin)
- margin是指元素外围的距离,它的值不会撑大元素大小
- 对单一方向添加margin:
① marign-top 上
② margin-right右
③ margin-bottom下
④ margin-left 左
如图:
- 多个值添加margin:
① margin:10px;四周
② margin:10px 10px;上下 左右
③ margin:10px 10px 10px; 上 左右 下
④ margin:10px 10px 10px 10px; 上 右 下 左
如图:
- margin:0 auto(是指当前元素在父元素内部水平居中)
- margin常出现的bug
① 当两个元素上下显示时,对两个元素分别添加上下margin值,两个margin值不会叠加,会重叠,按照值大的显示。
如图:
② 当子元素与父元素都没有添加浮动的情况下对子元素添加margin-top值,这个margin值会错误的添加到父元素上面。
如图: