学习前端的第二天8.15

学习前端的第二天8.15

一、div元素和定宽居中

1. div 标签 division的缩写，划分、分隔 作用就是将页面划分为不同的区域（div是一个块元素）
2. div标签不设置宽高时，高度由内容撑开，宽度和父级元素等宽
   3.body设置外边距为0，可以清除白边
   4.margin是一个复合样式 一个值表示四边外边距都为0
   5.单独设置某一边的外边距
   calc() css中的计算函数（(总宽度 - 1000px)/2）
   例如： margin-left: calc((100% - 1000px)/2);
   6.定宽居中（auto 自动计算 间距平分）
   margin:0 auto;
   两个值表示上下 左右；四个值表示 上右下左四个方向外边距
   7.横幅展示图片（width: 100%;）
   单独设置图片的某一边长度，让另外一边自动缩放

二、文本标签和html语义化标签
1.h1:标题标签
2.p:标签标记段落
3.b.标签标记网页中的粗体文本
通过css样式也可以实现粗体文本效果
4.strong :标记页面中的粗体文本(语义化标签)
例如：span class=“bold”></span
以上三种方式都可以实现文本加粗，但是语义不同
b标签仅仅是将文本加粗，标签中的内容不进行强调
strong除了文本加粗之外，还有强调的预期，表示标签中的内容是页面中需要重点关注的内容
通过css样式设置的加粗，也仅仅是一个加粗的效果，没有强调的语气
5.span: 标记网页中的普通文本
6.del ：具有删除的语:（ delete删除）
7.s：删除线 s仅仅是删除的效果
8.在html5中新增了很多语义化标签，例如 header,footer,main,aside,nav,artical,section等，这些标签在样式上都和div一样，但是具有不同的含义，例如header表示页面头部内容，main表示页面的主要内容，footer标签页面页脚内容，nav表示页面导航菜单
9.html语义化得好处:
(1)增加代码的可读性
(2)SEO(搜索引擎优化
3. html语义化的现状，html语义化标签的好处并不是十分明显，已经工作好几年的前端工程已经习惯div+css的写法，所以大部分的网站开发并没有很好的遵守html语义化标准

三、行元素、块元素、行内块元素
1.html标签按照排列布局方式可以分为行元素、块元素、行内块元素

2.块元素特点：独占一行，可以设置宽高，如果不设置宽高则默认宽为父级标签宽度，高度由内容撑开，若没有内容，则高度为空，布局方式默认为块元素 ：div h1~h6 p header footer…

3.行元素的特点：不能设置宽高，宽高只能取决于自身内容，不独占一行，多个行内元素之间会左右排列，一行到最后显示不下时会自动换行， more为行元素的标签: span a strong b s del …

居中方式：行元素可以通过设置父元素的text-algin，实现水平居中

4.行内块元素特点： 可以设置宽高，不独占一行，多个行内块元素左右排列并自动换行，默认行内块： img button input

5.行元素和块元素不是绝对不变的，任何元素都可以通过display样式来改变布局方式类型，块元素 block 行元素inline 行内块元素 inline-block

6.结束标签和开始标签之间有回车换行符，导致在页面中两个标签之间会出现间隙
解决方法：1.让结束标签和开始标签之间没有回车换行
2.找到body，设置font-size:0; 推荐写法

四、定位方式

1. static 静态定位，元素的默认定位方式，进行流式布局

2. relative 相对定位 当需要将元素在原有的位置上进行微调时使用
   特点：不会脱离文档流，参与原来的流式布局，可以在原有位置上做位置微调

3. absolute 绝对定位 当需要通过一个标签坐标设置其位置时使用
   特点：脱离文档流，导致原来的位置不存在，标签会被浮起,可以通过left、top、right、bottom调整位置

4.fixed 固定位置，希望一个标签不随着浏览器滚动而滚动时使用
特点：脱离文档流，导致原来的位置不存在，标签会被浮起，可以通过left、top、right、bottom调整位置，该标签不会随着浏览滚动而滚动
块元素脱离文档流之后，宽度默认不再为父元素的100%，需要主动设置宽度

文档流
1.html中所有的标签默认都为static定位,static采用的就是流式布局
2.流式布局: 标签元素依次从左向右(行元素、行内块)、从上向下(块元素)的方式进行排列
3.文档流：一个标签内部的字标签元素采用流式布局时，这个元素内部就会形成一个文档流，没子元素在文档流都有自己的位置

五、表格标签
1.table 表格标签，用于显示一个表格，块元素
2.table不设置宽高，宽高被内容撑开,设置宽度而内部的td没有宽度时，td会按照内容长度的比例拉伸
3.thead 表头 用于显示这一列的名称
4. tr 表示一行、th表头中的一个单元格、 td 表示表主体中的单元格
5. tbody 表主体 一般省略不写 浏览再解析时会自动添加tbody
6. 合并单元格： rowspan合并行、colspan 合并列

六、有序列表、无序列表
（1）、ul： 无序列表 （块元素）
ul 默认有一个左内边距
padding-left: 0px;（消除边距）
（2）、ol 有序列表
（3）、dl（define list） 定义列表
1、li 标签：列表项 块元素
2、伪元素选择器
例如：ul>li:before{ }
3.list-style属性值：
none：无标记
disc：实心圆（默认）
circle：空心圆
square：实心方块
decimal：数字
…总结：
通过今天胡学习感觉基本功学的还不够扎实，还得抽时间多看看老师的课件和教学视频，多多练习，争取早日熟练掌握和运用，毕竟难点js还在后面呢，?