CSS基础学习| 青训营笔记

user3885673815933
72 阅读4分钟

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

「理解CSS」

css是什么？

  • Cascading Style Sheets

  • 用来定义页面元素的样式

  • 在页面中如何使用CSS

    • 外链-引入外部css文件
    • 嵌入-在页面内标签中引入
    • 内联-直接在对应的标签中写入css属性

css是如何工作的？

  • 加载页面时，把每个DOM树节点加载出来后，与对应DOM树CSS属性结合后渲染到页面上
stateDiagram-v2
[*] --> 加载HTML
加载HTML -->解析HTML
解析HTML-->创建DOM树
解析HTML --> 加载CSS
加载CSS -->解析CSS
解析CSS-->创建DOM树
创建DOM树 --> 展示页面

  • 如何让CSS知道该选择哪个元素/标签？

    • 选择器selector

      • ID选择器（#对应名）:只在标签里出现一次
      • 类选择器（.对应名）:允许多个标签里的class中出现
      • 属性选择器（[属性名]/[属性名='属性值']）:属性值匹配到某种条件
      • 通配选择器
      • 伪类选择器(:行为/:标签位置):
类名作用
:link超链接未被访问时
:visited超链接已经被访问过
:hover光标移入
:actived光标点击
:first-child第一个孩子
:last-childe最后一个孩子
......
  • 选择器的组合
名称语法说明示例
直接组合AB满足A同时满足Binput:focus
后代组合A B选中B，如果B是A的子孙div a
亲子组合A>b选中B，如果B是A的子元素div>a
兄弟选择器A~B选中B，如果B在A后且和A是同级li~p
相邻选择器A+B选中B，如果他紧跟在A后面li+p
选择器组A,B,C同时选择这些选择器h1,p,a

  • RGB 使用方法：RGB(0-255,0-255,0-255)或者#001122------ 每两位为一组16进制控制颜色深浅

  • HSL HUE 色相 取值0-360 Saturation 饱和度 取值0-100% Lightness 亮度 取值0-100%

  • alpha 跟在以上两种方法后 ex：rgba（0，0，0，.25） HSLA（0，0，0，.55）

  • 字体族font-family 一般情况下要在字体族最后设置一个sans-serif，保证浏览器能有字体可以选择显示

*font类的属性 font-size 字体大小 font-weight 字粗细 line-hight行高

继承相关

*  有些属性是可以直接继承的比如 字体颜色color
*  有些属性是不可以直接继承的比如 box-sizing
--但我们可以通过inherit来将原先不可继承的属性继承父亲的属性

###布局Layout是什么? 布局相关技术：文档流（常规流），浮动，绝对定位

* 常规流：行级，块级，FlexBox，Grid布局

weight属性：容器有指定宽度时，百分数才能生效
height属性：容器有指定高度时，百分数才能生效!!
padding（内边距）属性：百分数也是需要依赖于容器宽度
border（边框）属性：三种属性四种方向 border-width border-style border-color
margin（外边距）属性：设置auto可以居中 （多个盒子的margin之间是选最大不是相加）
overflow属性：visible hidden scroll auto

盒子模型.png

块级vs行级

块级行级
Block level BoxInline level Box
独占一行能和其它盒子一起放
适用于所有盒模型盒模型中的width，height不适用，默认内容撑开
body,article,div,main,section,h1-6,p,ul,lispan,em,strong,cite,code
默认display:block默认display:inline
  • IFC 只包含行级盒子的容器会创建一个IFC IFC的排版规则:

    • 盒子在一行内水平摆放

    • 一行放不下时，换行显示

    • text-align决定一行内盒子的水平对齐

*BFC 某些元素会创建一个BFC * 根元素 * 浮动，绝对定位，inline-block * Flex子项和Grid子项 * overflow值不是visible的块盒 * display:flow-root

排版规则
* 盒子从上到下摆放
* 垂直margin合并
* BFC内盒子的margin不会与外面的合并
* BFC不会和浮动元素重叠


拓展：消除BFC的一种方法通过设置css属性 ClearFlex::before,Clearflex::after{display:table text:''}

今日总结

今天学习了CSS的一些基础知识，同时也接触到了一些平时无法学习的很深刻的东西，比如有些能从容器继承来的

属性的计算并不是直接读取到值，比如font-size的em特性rem特性，让我对css的特性又有了新的感悟，期待下

一次学习
avatar
文章
阅读
粉丝