CSS

1. 介绍CSS

• HTML是用来描述页面骨架的，CSS就是把页面变好看，写页面CSS样式的

2. 行内元素和块元素

• 行内元素就是不换行的元素，常见的有span，strong这种,一般都是一些设置文本的元素
• 块元素（盒模型），这种元素都有自己的大小，宽高，方便在页面上布局
  每个块元素都有自己的盒模型
• 行内块元素，同时具备宽高和不换行两个属性

3. 盒模型

• 红色是内容；蓝色区域是内边距；绿色是边框；棕色是外边距
• 宽度就是绿色+蓝色+红色部分(内容+内边距+边框)

4. 使用方式

4.1 内联样式

• 每个标签是有一个style属性的，这个style属性可以直接作用于标签的样式

  <!-- HTML -->
  <div style="    
  width: 100px;
  padding: 10px 10px 10px 10px;
  background-color: #3385ff;
  color: white;
  margin: 100px 100px 100px 100px;
  ">百度一下</div>
  <!--width:宽度，height:高度，padding:内边距，margin:外边距
  padding-top，padding-right，padding-bottom,padding-left
  style标签里面可以写多条规则，每条规则用分号结尾-->

4.2 嵌入方式

• 把style属性里写的css全部放到一起

  <!-- HTML -->
  <style>
  .search-btn {
      width: 100px;
      padding: 10px 10px 10px 10px;
      background-color: #3385ff;
      color: white;
      margin: 100px 100px 100px 100px;
  }
  </style>
  <div class="search-btn">百度一下</div>

  多了一个style标签，浏览器会解析style标签里的所有规则，然后应用到页面的元素里面，
  为了让浏览器知道这些样式要用到哪个标签，就需要选择器选择标签

  

  这个.search-btn就表示选中所有class名字为search-btn的标签应用大括号里的所有规则

4.3 链接方式

• 使用link标签，就可以让浏览器解析其他地方的css样式，或者放在本地，或者放在网上

  <!-- HTML -->
  <link rel="stylesheet" type="text/css" href="base.css">

Tips：浏览器默认会给body带上一点的margin和paddding