标签的划分

  • 块级元素

    • 独占一行

    • 设置 宽 高可以起作用

    • 排列方式： 上下排列

  • 行内元素

    • 可以共占一行

    • 设置 宽 高 不起作用，大小由内容决定

    • 排列方式：左右排列

  • 行内块

    • 可以共占一行

    • 可以设置宽 高

    • 排列方式：左右

标签

  • 标题：h1-h6

  • 段落 p

  • 图片 img

  • 超链接 a

  • 格式化标签

    • 加粗 b strong

    • 斜体 i em

    • 下划线 ins u

    • 删除线 del s

  • 预格式化标签 pre

  • 音频 audio

  • 视频 video

  • 大盒子 div

  • 小盒子 span

  • 三大列表 ul li ol dl dt dd

块级元素 

  • h1-h6 div p

  • 三大列表 ul li ol dl dt dd

  • 新增 table

 

行内元素

  • 加粗 b strong

  • 斜体 i em

  • 下划线 ins u

  • 删除线 del s

  • span

  • a

行内块

  • 视频 video audio

  • 图片 img

display的几个值

  • display：block；转化为块级元素

  • display：inline；转化为行内元素

  • display：inline-block；转化为行内块

  • display：none；让元素消失

面试题让元素消失的几种方法？？

  • display：none；让元素消失

  • opacity：0；透明度 数值范围 0-1

  • visibility：hidden；可见性 ：隐藏

  • 定位的元素，通过改变z-index（层级关系）

  • 通过margin负值，把元素调到屏幕的一侧；

让元素消失前三者 的关系

  • display：none;元素彻底消失

  • opacity：0；元素消失位置还在

  • visibility：hidden；元素消失位置还在

font-family 字体样式

  • 设置字体： 如果是中文或者应为字体由多个单词组成，需要加引号可以设置多种字体，有顺序关系

font-family: "宋体";
font-family: Georgia, 'Times New Roman', Times, serif;

font-weight 加粗

font-weight：700;
font-wightt:bold; //加粗
font0-wight:bolder; //更粗
font-weight：900;
font-weight：normal;//正常粗细 的相当于400

## 语义化 
合适的标签做合适的事：语义化

控制文字样式font-style

font-style：normal； //正常
font-style：italic； //倾斜

块级元素水平居中magin：0 auto;

块级元素，快速水平居中

盒子文字垂直居中

/* 文字垂直居中，让此元素的高度=行高 */
height: 200px;
line-height: 200px;

文字水平调节 text-align

text-align：left； //左对齐
text-align：center；//居中
text-align：right； //右对齐

边框border

/* 第一个值：边框粗细
第二个值：边框样式 solid实线 dashed虚线
第三个值：边框颜色
*/
border: 5px solid darkcyan;