说明：在网页开发制作中，需要对页面内容进行“模块化标准布局”，把内容放入到某个位置，让页面形成固定规律展示出来模块化：在网页中所有的内容都是以块来展示的标准化：在开发网站时是有一定的标准的，W3C给的。好处：为了把HTML页面和CSS代码进行分离，在以后的维护时和合作开发、有利于搜索引用的抓取。说明：在HTML标记中一般都是有自带“名称”，如：h1是加标题的，a加超链接的。只有div和span是没有意义的，所以布局就使用div和span，div一般给大块的内容布局，span是给行内的内容布局。块元素：不管内容多少，都会占一行，可以改变大小当时还是独占一行。行内元素：内容多少占多少| 属性名 | 描述 | 属性值 |
| —- | —- | —- |
| display | 块元素和行内元素的转换 | Block(块)、inline（行内）、inline-block（行内块） |
|
| 显示和隐藏 | None(隐藏)、block（显示） |
案例：
Figure : img说明：在HTML中的每个元素可以是一个以的形状来存在的，盒子模型。盒子特点：由“内容-元素”+“内填充”+“边框”+“外边距”；在计算盒子大小：100*100+10+1+10宽：100+20+2+20
Figure : img
Figure : img
Figure : img| 属性名 | 描述 | 属性值 |
| —- | —- | —- |
| Border-top | 上边框 | Border-top:粗细 样式 颜色Border-top:1px dashed red; |
| Border-right | 右边框 | Border-right:粗细 样式 颜色 |
| Border-bottom | 下边框 | Border-bottom:粗细 样式 颜色 |
| Border-left | 左边框 | Border-left:粗细 样式 颜色 |
| Border | 四边 | Border:粗细 样式 颜色 |
案例：
Figure : img
Figure : img
Figure : img| 属性名 | 描述 | 属性值 |
| —- | —- | —- |
| Padding-top | 上内填充 | 数值 如：padding-top:10px; |
| Padding-right | 右内填充 | 数值 如：padding-right:20px; |
| Padding-bottom | 下内填充 | 数值 如：padding-bottom:30px; |
| Padding-left | 左内填充 | 数值 如：padding-left:40px; |
| Padding | 简写形式 | Padding:10px; //4边都是10Padding:10px 20px; //上下各10.左右各20Padding:10px 20px 30px; 上10，左右各20，下30Padding:10px 20px 30px 40px; 按的顺序 |
案例：注意padding是占背景的
Figure : img| 属性名 | 描述 | 属性值 |
| —- | —- | —- |
| Margin-top | 上外边距 | 数值 如：margin-top:10px; |
| Margin-right | 右外边距 | 数值 |
| Margin-bottom | 下外边距 | 数值 |
| Margin-left | 左外边距 | 数值 |
| Margin | 简写形式 | Margin:10px; //4边各10Margin:10px 20px; //上下各10，左右各20Margin:10px 20px 30px; //上10，左右各20，下30Margin:10px 20px 30px 40px; //按上右下左的顺序 |
案例：
Figure : img说明：元素在网页中进行左或右的“漂浮”，脱离原来的文档流| 属性名 | 描述 | 属性值 |
| —- | —- | —- |
| float | 浮动 | Left|right |
浮动的普通情况，脱离原来的文档流，其他没有浮动的元素会钻入到浮动元素的下面
Figure : img 需要所有的元素都显示，都加浮动
Figure : img如果某个元素的宽度加上其他元素后比最大的包裹元素，最后的一个会被挤下去
Figure : img如果前面的元素比其他高，会卡住其他元素
Figure : img案例：
Figure : img<!DOCTYPE html>
若有收获，就点个赞吧
0 人点赞
