前端入门之标签、盒模型

标签、盒模型、CSS引入方式、雪碧图

---

标签

有开始标签和结束标签 —— 双标签

只有一个标签的 —— 单标签

所有标签都有title（鼠标移入提示信息）属性

行属性标签不要嵌套块属性标签

---

块属性标签

特点：

1. 上下排列，独占一行
2. 支持设置宽高，如果不设置宽高，宽度自动撑满父容器，高度由内容决定

代表标签：div、p、h1-h6、ul>li、ol>li

1. div标签

   无意义，用来布局和划分区域

   <!--style 样式 -->
   <div style="width: 200px; height: 50px;">我是div1</div>
   <div>我是div2</div>
   

2. p 段落标签

   <!-- p*5 + tab -->
   <p style="width: 200px; height: 50px; background-color: red;">1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
   <p>5</p>
   

3. h1-h6 标题标签

   <!-- h1标签一般在一个网页中只有一个 -->
   <h1>标题一</h1>
   <h2>标题二</h2>
   <h3>标题三</h3>
   <h4>标题四</h4>
   <h5>标题五</h5>
   <h6>标题六</h6>
   

4. ul>li 无序标签

   <ul>
   	<li>123</li>
   	<li>123</li>
   	<li>123</li>
   	<li>123</li>
   </ul>
   

5. ol>li 有序标签

   <ol style="list-style: none;">
   	<li>少壮不努力</li>
   	<li>春眠不觉晓</li>
   	<li>床前明月光</li>
   	<li>疑是地上霜</li>
   </ol>
   

行属性标签

特点：

1. 不支持上下margin和padding
2. 左右排列
3. 不支持设置宽高

代表标签：span、a

1. span标签 放置文字

   <span style="background-color:aqua;">首页</span>
   <span>推荐</span>
   

2. a标签 超链接 用来跳转网页

   <!--
   	href：
   		1.用来放置网页地址（相对路径 网络路径 绝对路径）
   		2.空		刷新页面
   		3.#		返回顶部
   		4.###	无效链接
   	target 跳转方式 _self(默认) _blank(打开新的页面)
   -->
   <!-- 相对路径: /下一级   ../返回上一级-->
   <a href="https://baidu.com">百度一下</a>
   <a target="_blank" style="text-decoration: none; color: rgb(0, 255, 128);" href="./one/块属性标签.html">块属性页面</a>
   <a href="../two/two.html">跳到two页面</a>
   
   <a href="">刷新</a>
   <a href="###">没有任何作用</a>
   <div style="height:1000px ;"></div>
   <a href="#">置顶</a>
   

行块属性标签

特点：

1. 左右排列
2. 支持设置宽高

代表标签：img

1. img

   <!-- 
   	src：用来放置图片的地址（网络地址、相对地址、绝对地址） 
   	alt：图片加载失败的提示信
   	title：鼠标移入提示信息
   -->
   <img src="xxx" alt="图片跑飞了" title="喜羊羊">
   

常用标签样式

1. width: 100px 宽度 单位px

2. height: 100px 高度 单位px

3. color: red 字体颜色

4. font

   • font-size: 16px 字体大小

     默认16px

     最小支持8px

   • font-weight: 400 字体粗细

     默认400

     取值范围100-900 没有单位

5. opacity: 0.5透明度

   取值范围0-1

6. background

   background-color: red

   ​ 颜色单词、rgb(0-255,0-255,0-255)、十六进制#000000、agba(0-255,0-255,0-255,透明度0-1)

   补充： opacity和rgba()设置透明度的区别

   opacity：背景颜色和本文内容都透明

   rgba()：只有背景颜色透明

7. list-style: none 去除无序列表和有序列表的默认样式

8. 文本text

   • text-indent: 24px首行缩进
   • text-align: center（居中）、left（左对齐）、right（右对齐）
   • line-height: 20px单行文本垂直居中 高度设置为标签的高度
   • text-decoration: none underline（下划线） overline（上划线） line-through（贯穿线）
   • text-decoration: none 去除样式
   • text-transform: capitalize（首字母大写）uppercase（全部大写）lowercase（全部小写）

9. 间距

   • letter-spacing: 20px 字体间距
   • word-spaning: 20px 单词间距

10. 背景图片

    • background-image: url(图片路径 绝对、相对、网络)

    • background-repeat: no-repeat 背景图片是否重复 默认重复

    • background-position: center center;调整位置 第一个值 水平 方向 第二个值 竖直 方向 右正左负 上负下正

    • background-size: 100px 200px 调整大小 第一个值 宽度 第二个值 高度

      ​ cover 保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小

      ​ contain 保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

11. 标签属性转换（修改标签属性）

    • display: inline-block（行块属性）、inline（行属性）、block（块属性）

盒模型

CSS 盒模型 (w3school.com.cn)

盒模型是css布局的基石，规定了网页元素如何显示以及元素间的相互关系

盒模型的组成部分=content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）

---

padding（内边距）

CSS 内边距 (w3school.com.cn)

作用：调整元素内容距离元素边缘的距离

设置padding会增大盒模型面积

<style>
  /* 标签选择器 css内部引用 */
  div{
    /* 
    	一个值：四个方向
    	两个值：上下、左右
    	三个值：上、左右、下
    	四个值：上、右、下、左
    */
    padding: 20px 50px 100px 200px;
  }
</style>

border（边框）

CSS 边框 (w3school.com.cn)

设置border也会增大和模型的面积

border: 边框宽度（border-width）边框颜色（border-color）

边框样式（border-style：solid:实线 dotted:点线 dashed:虚线 double:双实线）

<style>
  /* 标签名{}选中所有boby标签 */
  div{
    width: 100px;
    height: 100px;
    /* 可以一次性设置 宽度 颜色 样式*/
    border: 3px deeppink double;
    /* 可以单独设置 */
	border-width: 5px;
	border-color: deeppink;
	border-style: double;
	/* 可以分方向设置 */
	border-top-color: red;
	border-top-style: solid;
	border-bottom-color: blueviolet;
	border-bottom-style: dashed;
    /* 圆角度 */
	border-radius: 50%;
    /* 圆角度也可以分分方向设置 */
    border-top-left-radius: 30px; /* 左上 */
    border-top-right-radius: 30px;
    
    /* 设置透明色 transparent */
    background-color: transparent;
  }
	/* class选择器 .+class名{} 权重:10*/
  .div2{
    
  }
</style>

margin（外边距）

CSS 外边距 (w3school.com.cn)

作用：用来调整元素之间的距离

margin 存在的问题

1. 上下两个元素同时设置margin-bottom和margin-top会叠压取最大值
2. 第一个子元素的margin-top会传递给父元素

解决问题2的方法：

1. 使用padding代替margin
2. 给父元素设置overflow:hidden

<style>
  /* 
	一个值：四个方向
	两个值：上下、左右
	三个值：上、左右、下
	四个值：上、右、下、左
  	也可以分别设置四个方向的距离值
  */
  div{
    width: 50px;
	height: 50px;
	background-color: blueviolet;
  }
  .one{
    margin-bottom: 20px;
  }
  .two{
    margin-top: 50px;
  }
</style>

正常盒模型和ie盒模型

• 正常盒模型设置padding和border会增大盒模型面积
• ie盒模型设置padding和border会挤压内容区
• 正常盒模型变成ie盒模型 box-sizing:border-box

<style>
  div{
      width: 100px;
      height: 100px;
      background-color: black;
      padding: 20px;
      border: 5px solid red;
      /* 正常盒模型变成ie盒模型 */
      box-sizing: border-box;
  }
</style>

居中问题

• 块属性
  1. 水平居中 自己设置margin: 0 auto;
  2. 垂直居中 没有快捷方式（目前）
• 非块属性
  1. 水平居中 给父元素设置text-algin: center
  2. 单行文本垂直居中 给父元素设置line-height: 高度

CSS 引入方式

如何添加 CSS (w3school.com.cn)

1. 行间（内联样式）权重：1000

   <div style="padding: 20px;">
   

2. 内部

   <style>
     div{
       width: 500px;
       height: 300px;
     }
   </style>
   

3. 外部(项目中最常用的)

   <!-- 引入外部样式 -->
   <link rel="stylesheet" href="css/one.css">
   

补充：外部和内部引入方式没有权重高低之分 文档后面的会覆盖文档前面的

雪碧图

加载一张图就可以实现多个小图的显示

做法：把多个图标放在一个图片上，设置背景图片的位置显示不同的位置不同的图标，如果图标大小不符合可以用

优点：减少项目中加载图片的的个数 优化性能

<style>
  div{
    width: 100px;
    height: 100px;
    /* url中放置背景图片的路径 */
    background-image: url(img/雪碧图.jpg);
  }
  .name1{
    background-position: -200px -100px;
  }
  .name2{
	background-position: 0px -100px;
  }
  .name3{
    background-position: 0px -230px;
  }
  .name4{
    background-position: 0px -100px;
  }
</style>

效果