R10/11/12-CSS

CSS-MDN
如何使用css：

• 内联， style属性
  

  paragraph<.p>

• style标签
  在head标签中放置style标签，如

• 引用外部文件，css link
  
• 在css中引入其它css文件
  @import url(./a.css); //当前文件夹的a.css文件

横向结构

给所有的子元素加上float，再给他们的父元素加上clearfix

.clearfix::after{
  content: '';
  display: block;
  clear: both;

设置a标签字体颜色继承(为什么记下这个知识点的呢……)

a{
  color: inherit;
}

div 高度 由其内部文档流元素 的高度 总和决定

文档流：文档内元素的流动方向

• 内联元素从左往右，如果遇到阻碍，换行继续

• 块级元素，每个块都会占一行，依次从上往下

一些细节

• 设置了border属性的文本，如果本行显示不完自动换行的话，border并不会分成两个，

/*html*/
this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.this is a paragraph.

/*css*/
span{
  border: 1px solid #f60;
}

• 英文默认单词是整体，不会被分隔，比如：
  haaaaaaaaaaaaaaaaaaaaaaa，只会被整个单词放到下一行而不是截断开来,如果想要截断换行，使用css

  name{
    word-break: break-all; //全部打断
  }
  

某些css属性

background-size: cover; // 覆盖，背景图片覆盖，自动适应浏览器大小
max-width: 940px; // 最大宽度，不可超过，当浏览器小于940px时，会自适应浏览器宽度而不会出现垂直滚动条

span

span 不接受宽高，内联元素都是这样
span 里面一般不能放div，会有bug

伪元素

::before
::after
默认不显示，需要设置属性
content: '内容'; //内容可以为空
默认为 display: inline;

clearfix就是用了伪元素
一个使用伪元素减少代码的例子：太极

postion:absolute;

当元素设置为position: absolute;时，
当前元素自动为display: block;

display:inline-block

当设置了
display: inline-block;
记得要设置
vertical-align: top; //也可以尝试其它的如bottom
避免底部出现间距
除非你不在乎这个问题可以不加

层级

xxx > yyy > zzz
xxx yyy zzz
……
层级最好不要超过5个，否则就再起个名字，跳过其中一部分

状态机

.xxx.state-1{
  //两个类中间不加空格表示一个元素同时符合这两个类时才可以使用当前样式
}
.xxx.state-2{...}
然后使用js切换