HTML结构
1.1 HTML文件基本结构
1.!DOCTYPE html 表示当前文档使用html5的标准进行解析;
2. html标签是根标签;
3. head标签引入相关配置、描述文件;
4. meta 使用utf-8的编码规则,防止中文乱码;
5. title标签写的是页面的标题;
6. body标签写页面的显示内容;
1.2盒模型
盒模型是每一个标签都是一个矩形,像一个盒子,所以HTML页面布局可以理解为多个盒子嵌套排列而成。
1.2.1组成
1.简单组成
width 宽度
height 高度
backgroundcolor 背景颜色
2.border 边框
border:线宽 线性 线色
solid 实线 dashed 虚线 dotted点线 double 双线
border-radius 圆角
border-width 边框宽度
border-height 边框高度
注:边框会增加盒模型的面积
3.padding 内边距
顺时针赋值,从上开始
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
注:内边距会增加盒模型的面积
4.margin 外边距
顺时针赋值,从上开始
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
出现的两个问题:
1.叠压现象: 常态下,两者之间的间距以大值为准;
2.塌陷问题:
产生原因:父级的第一个子级是块标签,并且使用了margin或margin-top
解决方案:
1.不使用margin-top,在父级使用padding-top
2.在父级使用border
3.在父级使用overflow:hidden(溢出隐藏)
1.3其他知识点
1.3.1 区分div 用class
.d1{} class选择器,权重10
div{} 标签选择器,权重1
id用 “#” 权重 id(100)>class(10)>tag(1)
1.4案例
1.4.1 案例1
#代码如下: