css 选择器和基本的布局

---

css 选择器

• 标签选择器
  h1{
  background:red;
  }
  p{
  background:red;
  }

• 属性选择器

  1. class 选择器
     (class 属性为 heihei 的元素)
     .heihei{
     background:red;
     }
     (class 属性为 heihei 的 p 元素)
     p[class=”heihei”]{
     background:red;
     }
  2. id 选择器
     (id 属性为 heihei 的元素)

     heihei{

     background:red;
     }
     (id 属性为 heihei 的 p 元素)
     p[id=”heihei”]{
     background:red;
     }

• 上下文选择器

  1. 后代选择器，子子孙孙全都选中：空格
     ul li {
     color:red;
     }
  2. 子选择器，只匹配一级后代，不匹配孙子之类的：大于号
     ul > li{
     color:red;
     }
     (下面 3,4 都是匹配.start 之后的，拿不到之前的元素)
  3. 同级相邻选择器：加号
     .start + li {
     color:red;
     }
  4. 同级所有选择器：波浪线
     .start ~ li {
     color:red;
     }

• 伪类选择器
  (class 属性为 list 的元素下的低 5 个 li 子元素)
  .list > li:nth-of-type(5){
  color:red;
  }
  nth-of-type(an+b);
  n 是从[0,1,2,3….]依次递增；

---

布局的基本原理

1. 元素分为：内联元素（display:inline）和块级元素（display:block）；

2. 内联元素在一个页面中会一直往后排，当这一排没空的时候，才换行显示；

3. 块级元素是独占一行，即使自己很小，这一行还有很多空间，但都是他的，比较霸道，别人都得另起一行；

4. 页面一般是宽度受限，高度无限；

---

盒模型的计算方式与单位

• 盒模型一般用到的属性有：1.width；2.height；3.border；4.padding；5.margin；

box-sizing 属性

（例如一个盒子宽 200px，高 200px，但是还分别有 10px 的内边距外边框）

改变盒子大小的计算方式 1.默认的参数为 content-box：表示盒子内容的大小，不包括内边距边框等。如果是这个参数，盒子的整体宽度就大于 200px；
2.border-box 参数：所有的加起来一共是设置的宽高；如果用这个参数，就是内容和边框边距一共就 200px;是多大就是多大；

• 单位一般有 px，em，rem，vw，vh

1. 一般情况下 1em = 16px;1vw=1/100 屏幕宽度；1vh=1/100 屏幕高度
2. 但是 1em 的大小还会根据自身元素或者是上级元素设置的 font-size 的大小变化；
   例如.class{font-size：20px;}那么在.class 下面 1em 就是 20px；
3. 浏览器都会有一个默认的最小值，谷歌应该是 12px;也就是说如果我设置 10px;计算是按照 10px 算，但是页面上显示的是最小单位；
4. rem 是相对于根元素的 font-size；也就是即使.class 里面设置了 font-size，但是她也是根据页面 html 设置的 font-size 大小来实现；