前端小白的学习之路html与css的较量【二】

标签的划分

• 块级元素

  • 独占一行

  • 设置 宽 高可以起作用

  • 排列方式： 上下排列

• 行内元素

  • 可以共占一行

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

  • 排列方式：左右排列

• 行内块

  • 可以共占一行

  • 可以设置宽 高

  • 排列方式：左右

标签

• 标题：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;