2021-02-26

CSS各类使用

1.padding的使用
当你给某一个元素设置了padding，首先，这个元素会压缩其内部子元素为了达到你要求的padding
如果子元素不能够在被压缩，他就会通过扩充自己的方式达到你要求的padding值

2.css的书写过程
1.先观察整个页面有没有可以复用的样式，如果有给这些标签添加相同的class
2.从最大的元素body开始添加样式
3.先不注重细节，第一步只是勾勒好每一部分的框架
4.大体框架形成，从上向下改样式

3.元素居中的方式
1.可以直接给body添加属性text-align:center
这样就可以保证页面中的所有文字都可以居中，但是，当他们的宽度没有定下来的时候，所有元素只有字体居中，但是元素是平铺整个页面的

• 元素非常奇特，他们的标签号是一定是在整个元素的最左边
  
  4.font属性相关
  1.font-weight:设置字体粗细
  2.font-family:设置字体类型,可以设置多个字体类型，当页面不支持第一个的时候我们可以使用第二个，依次向下
  3.font-size：字体大小，通常使用rem/em/px作单位rem/em是动态单位，px固定单位
  1rem:相当于根html元素设定的字体大小
  1em:相当于当前元素的父元素的字体大小

• 5.可继承和不可继承元素
  1.是不可继承元素，也就是说他的父元素设定了这个属性，但是它本身不受这个字高影响
  2.大部分属性都是不可继承的属性

  6.颜色的处理
  1.需要颜色的时候你可以使用mac自带取色器直接取色获取rgb，在需要颜色的地方使用rgb(xx,xx,xx)
  
  7.

  和

  
  1.前者有使用环境，通常抱住一段文字，一般其中子元素撑不开

  ，所以想要作为容器的标签一定是

  8.line-height和vertical-align:text-bottom;配合使用
  作用效果：line-height不能继承当你给设置了一个行高比他旁边的input小，此时你应该希望你的label在input垂直居中的地方，你就需要使用上面的搭配

  没有line-height的vertical-align（垂直位置）并没有什么卵用

  9.块级行内元素互转
  1.块转行:display:inline
  2.行转块:display:block 或者 inline-block

  10.使用font-awesome添加小图标
  1.在官网下载font-awesone包
  2.从包中复制fonts和css文件夹然后添加到你项目根目录
  3.使用标签
  4.此时你就可以使用任意的font-awesome标签，通常所有的font-awesome都是用包裹起来，因此来添加font-awesome图标