css简要笔记

css样式的优先级

权重:
id:1000
class:10
多个class权重累加，.div1 .p1{ width: 10px; }大于一个class
标签：1

内联样式>头部样式>外部导入样式
外部导入样式,<link rel="stylesheet" href="css/Test.css"> 靠后的优先级高。
同个文件中靠后的优先级高。

css伪类–例如:hover

https://www.runoob.com/css/css-pseudo-classes.html

a:hover {color:#FF00FF;}   鼠标划过的按钮表单等
a:active {color:#0000FF;}   已选中的链接 

input:focus   有光标闪烁的表单
input:checked { }  选中的checkbox

p:first-child
{
    color:blue;
}

p:before   之前插入内容
{
content:"Read this: ";
}

p:after   之后插入内容
{
content:"- Remember this";
}

宽高的计算

一般情况下, div的真实宽高=width+padding

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;   /* 增加这个使得真实宽高等于width, 不用做加法运算了*/
}

flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

举例情况 div.mainBody下面有3个div.items, 原始默认是从上到下,从左到右排列.

1. flex-direction: row;
   

 .mainBody{
    display: flex;    // flex默认是row, 排列在同一行, 从左到右
    flex-direction: row;   // 
  }
  .items{
    width: 200px;
    height: 100px;
    border: 1px solid red;
  }

2. flex-direction: column;