CSS基础知识总结

不吃西红柿w
168 阅读3分钟

CSS（英文全称Cascading Style Sheets）层叠样式表

层叠指的是

  • 样式层叠：可以多次对同一选择器进行样式声明
  • 选择器层叠：可以用不同选择器对同一个元素进行样式声明
  • 文件层叠：可以用多个文件进行层叠 这些特性使得CSS极其灵活。 使用caniuse.com可以查看哪些浏览器支持哪些特性。

CSS语法

语法一：样式语法

选择器 {
    属性名:属性值;
    /*注释*/
}

语法二：at语法

@charset "UTF-8";  /*这里charset指的是字符编码*/
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
    语法一
}

Border调试法
步骤如下：

  • 怀疑某个元素有问题就给这个元素加border
  • border没出现？说明选择器错了或者语法错了
  • border出现了？看看边界是否符合预期
  • bug解决了才可以把border删掉 以下是CSS的几个基本概念
  • 文档流Normal Flow、块、内联、内联块 文档流即文档中元素的流动方向

  1. inline元素从左到右，到达最右边才会换行，如下图所示 image.png inline宽度为内部inline元素的和，不能用width指定。 inline高度由inline-height间接确定，跟height无关。

  2. block元素从上到下，每一个都另起一行，如下图所示 image.png block默认自动计算宽度（默认是auto，不是100%），可用width指定。 block高度由内部文档流元素（有的元素可以脱离文档流）决定，可以设height。

  3. inline-block元素也是从左到右，但到达最右边不会将自己分为两块，如下图所示 image.png inline-block结合前两者特点，可用width设置宽度。 inline-block跟block类似，可以设置height。

特殊情况：当内容的宽度或高度大于容器时，会发生溢出（overflow）

可用overflow来设置是否显示滚动条。auto是灵活设置；scroll是永远显示；hidden是直接隐藏溢出的部分；visible是直接显示显示溢出部分。overflow可以分为overflow-x和overflow-y。 image.png 注：HTML 5 中已经抛弃了“内联元素”的概念，所有元素都可以通过CSS变成内联的。

  • 两种盒模型 可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。 盒模型分为content box内容盒和border box边框盒。（示意图如下）其中content box的属性width、height只包含内容content；border box的属性width、height包含border和padding，指的是content+padding+border。可以由box-sizing控制选择content box还是border box。border-box更符合人类思维更好用。 image.png
  • margin合并（只有上下方向存在合并） 有两种情况：父子元素margin合并、兄弟元素margin合并

阻止合并的几种方法：

  • 父子合并用padding/border挡住
  • 父子合并用overflow:hidden挡住
  • 父子合并用display：flex
  • 兄弟合并可以用inline-block消除
avatar
文章
阅读
粉丝