浅记CSS | 青训营笔记

花遇和风
114 阅读3分钟

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

在页面中使用CSS

  1. 外联（在header中）
<link rel = "stylesheet" href = "index.css">
  1. 嵌入式（在header中）
<style>
        li{ margin:0; list-style: 'none'}
        p {margin: lem 0 ; }
</style>
  1. 内联式（不常用，尽量不用）
<p style = 'margin: 0'>Example</p>

CSS是如何工作的呢

  1. 加载HTML
  2. 解析HTML
    1. 加载CSS
    2. 解析CSS然后添加样式到DOM节点上
  3. 创建DOM树
  4. 展示效果

选择器Selector

1. 选择器种类

  • 通配选择器(所有的DOM节点都改设置样式) 
    * {
    color:red;
}
  • 标签选择器（通过标签进行样式设置） 
    //如果是div，或者p选择器为
div {
    weight: 20px;
    height: 20px;
}
p { color: red;}
  • id选择器（通过选定设置的某个节点的id来控制该节点） 
    //header
#demo {
    color:red;
    font-size:20px;
}
//body
<h1 id = "demo">HTML </h1>
  • 类选择器（通过选定设置某个节点的class来控制节点） 
    //header
.demo {
    color:red;
    font-size:20px;
}
//body
<h1 class = "demo">HTML </h1>
  • 属性选择器（通过选定某个DOM节点中拥有某个属性来控制） 
    //header
disabled {
   color:red;
}
//只会选中input中的
input[disabled] {
   color:blue;
}
//body
<input disabled />//被锁定
  • 伪类 
    //header
//移动到a上面是改变样式
a:hover {
    color:red;
}
//body
<a >HTML </a>

2. 选择器组合

  • 直接组合 AB 满足A同时满足B 如input:focus
  • 后代 A B 选中B，但是是为A子孙 如nav p
  • 亲子组合 A>B 选中B，但是是A的子元素 如input:focus
  • 兄弟选择器 A~ B 选中B，如果在A后面且同级 如input~p
  • 相邻选择器 A+B 选中B，如果在接连着A后面 如input+a

谈及选择器就不得不说权重了

3. 权重

  • 内联样式（写在标签中）1 0 0 0
  • id选择器 1 0 0
  • 类选择器，伪类 1 0
  • 元素选择器 1
  • 其他 0

基础样式

  • 颜色 color:rgb
  • 透明度 alpha
  • 字体 font-family
  • 行高 line-height

深入CSS

  • 继承

    • 显示继承 
         //可以直接继承上级的属性
   * {
       box-sizing: inherit;
   }
   html {
       box-sizing; border-box;
   }
   .some-widget {
        box-sizing: content-box;
    }

个人觉得可以少些许多样式（偷懒）

  • 属性都有个初始值 就比如可以这样写

        backgound-color: initial;

  • 对于css渲染的计算过程

graph TD
DOM树 --> filtering通过声明值
样式规则 -->filtering通过声明值
filtering通过声明值 --> cascasing通过层叠值权重
cascasing通过层叠值权重 -->defaulting通过指定值使用继承或初始
defaulting指定值使用继承或初始 --> resolving通过计算值转化绝对值
resolving通过计算值转化绝对值 --> formatting通过使用值转化绝对值
formatting通过使用值转化绝对值--> constraining
constraining-->实际值

  • 布局

    1. 种类
      • 常规流
        • 行级
        • 块级
          • justif-content可以控制主轴的盒子布局（x轴）
          • align-item 控制侧轴
        • 表格布局
        • FlexBox(Flex布局)
          • Flexibility
          • flex 2(grow) 0(shrink) 100px(basis)
        • Grid布局
      • 非常规
        • 浮动(float) 一般只用在图文环绕情况
        • 定位(position)
          • 相对定位absolute
          • 绝对定位relative
    2. 基本属性
      • margin
      • boder
      • padding
      **$注意外边距塌陷问题**
    3. IFC行内的排版规则
      • 盒子一行内水平摆放
      • 一行放不下换行
      • text-align决定水平对齐
      • vertical-align决定行内垂直
      • 避开浮动元素
    4. BFC块级排版规则
      • 内部的Box会在垂直方向上一个接一个的放置
      • 垂直方向的距离有margin决定(属于同一个BFC的两个相邻Box的 margin会发生重叠，与方向无关)
      • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
      • BFC的区域不会与float的元素区域重叠
      • 计算BFC的高度时，浮动子元素也参与计算
      • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

总结

总的来说这只能算刚入们的css东西了，css有的东西还有更多，还可以用css制作动画诶，那写东西也只能是后话了，加油吧！Try to be better！

avatar
文章
阅读
粉丝