理解CSS|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第2天。

本堂课的知识要点：

css工作原理
选择器
文本样式
布局layout
盒模型
flex布局
grid布局
position定位

css工作原理

css是定义页面元素的样式，比如字体大小，颜色。
在页面中使用css：

外链：引入外部css文件，推荐使用。
嵌入：使用style标签嵌入页面
内联：写在标签上

css如何工作:

书写格式：选择器{ 属性:属性值; }

选择器

css选择器：标签选择器，id选择器，类选择器，通配选择器*，属性选择器，伪类选择器。
标签选择器:

div{
      background-color: rgb(223, 35, 35);
   }
   
   <div>
    123
   </div>

id选择器：

#app{
        background-color: rgb(223, 35, 35);
     }
  
   <div id="app">
    123
   </div>

类选择器：

 .app{
        background-color: rgb(223, 35, 35);
     }
   <div class="app">
    123
   </div>

调配选择器：

 *{
        background-color: rgb(223, 35, 35);
    }
    
    <div>
    123
   </div>

属性选择器：

     input[disabled]{
        border-radius: 10px;
     }
     
       <input disabled>

伪类选择器：元素处于某种状态时会被选中如：

a:link{
color:black;
}

组合选择器：

直接组合 A:B 满足A同时满足B
后代组合 A B B是A的子孙
亲子组合 A>B B是A的直接子元素
兄弟组合 A~B AB并列，A后面的所有B标签
相邻组合器 A+B 紧跟在A后面的一个B标签选择器组，用逗号隔开，设置相同的样式。

h1,div,#app{
color:red
}

文本样式

颜色rgb：16进制表示法 or (0-255,0-255,0-255)。

background-color: rgb(255, 255, 255);

颜色+透明度rgba(0-255,0-255,0-255，0~1)。1表示完全不透明。

  background-color: rgba(223, 10, 10,0.1);

字体font-family：可以指定多个字体，从前往后匹配相应字体。

font-family: 'Courier New', Courier, monospace;

引用web字体:

@font-face{
font-family: myFirstFont;
src: url('aa.ttf'),
font-weight:bold;
}

font-size:关键字长度px em 百分数
font-weight:关键字长度px
font-style:italic
line-height：两行文字基准线间的距离
text-align:行级元素left center right
white-space规定段落中的文本不进行换行：

p{
  white-space: nowrap;
  }

深入css 优先级: id选择器》类选择器》标签选择器
继承：某些属性会基础父级属性,如color font-size

布局layout

盒模型

width与height是content的宽高

padding
border

border: 1px solid red;

boder-width
border-style
boder-color 三角形

 .app{
    width: 0px;
    height: 0px;
     border-left: 15px solid red;
     border-top: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 15px solid transparent;
     }

margin：会合并
box-sizing：border-box; width与height为border。盒子边界为border。
overflow：visible hidden scroll
块级盒模型和行级盒模型块级盒模型：不和其他盒子并列body article div main section h1-6 p ul li nav
行级盒模型：和其他行级盒模型放在同一行，width与height无效span em strong cite code

display属性：block inline ;inline-block：行盒，可以设置宽高。
行级排版上下文：盒子从左至右摆放
块级排版上下文：规则盒子从上至下摆放

flex布局

-有主轴与副轴

  .app{
   display: flex;
   justify-content: center;//主轴
   align-items: center;//副轴
     }

flex-grow：剩余空间分配
flex-shrink：超过空间压缩

grid布局：二维

 .app {
      display: grid;
      
      /* 声明两行三列 */
      grid-template-columns:100px 200px 300px;
      grid-template-rows: 80px 80px;
      
      /* 格子间隙为10px */
      grid-gap: 10px;
        }
        
    .app div{
        background-color: antiquewhite;
      }
      
       <div class="app">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>

position

static relative absolute fixed

文档流：dom元素解析从上至下，从左至右。absolute与fixed脱离文档流，不遵从这个规则。

默认定位为static。
relative不影响后面的元素，可以使元素相对与原来的位置移动。

relative

        .div1 {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }

        .div2 {
            width: 120px;
            height: 120px;
           background-color: aqua;

           position: relative;
           left: 50px;
           top: 50px;
        }

        .div3 {
            width: 140px;
            height: 140px;
            background-color: aquamarine;
        }
        
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>

absolute 脱离文档流，相对与最近一个定位的父级元素移动，如果没有就是body。上面的例子将relative改为absolute：

fixed 脱离文档流，相对于浏览器窗口移动。将上面列子改为fixed，也是如图，但是fixed的盒子不会随页面滚动而滚动。

前端|青训营笔记