前端星CSS学习笔记

最新推荐文章于 2024-09-24 12:57:22 发布

webnet_

最新推荐文章于 2024-09-24 12:57:22 发布

阅读量188

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/webnet_/article/details/105399712

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

HTML与前端

前端工程师是使用web技术栈解决多端的图形界面人机交互问题的工程师
前端技术栈：HTML（描述页面的内容和结构）CSS（设置样式）JS（定义页面行为）
- HTML、CSS、JS运行在浏览器中，通过HTTP协议与服务器进行交互
前端要关注的：
- 功能（满足用户需求）
- 美观
- 无障碍性
- 安全
- 性能
- 兼容性
- 用户体验
HTML
- HyperText：超文本，包含图片、标题、链接、表格等多种形式
- 标记语言：开始标签、内容、结束标签
- 标签内可以设置属性
- <!doctype> ：指明了文件所使用的HTML的版本，决定了渲染模式
- <head> ：存放页面元数据
- <body> ：展示内容
- 浏览器将HTML解析成为DOM树
- 有序列表：<ol> ；无序列表：<ul>；定义列表：<dl>；<dt>：描述的标题；<dd>：对应的描述；<dt>和<dd>不一定一一对应。
- 链接<a herf="" target=""> ，herf表示跳转的url，target表示打开新页面的方式，默认为当前页面，"_blank"为新窗口打开
- 音频<audio> ，视频<video>，controls使得浏览器渲染默认UI
- 选择方式：
  - type="checkbox"多选框
  - type="radio"单选框
  - select弹出下拉列表
  - 输入框提示：input list属性和datalist关联
- 内容划分
  - head：页面头部
  - main：页面主体
  - aside：侧边栏
  - footer：底部
- 语义：元素、属性及属性值拥有某些含义
  - 代码可读性
  - 可维护性
  - 搜索引擎优化
  - 提升无障碍性

了解CSS

引入方法
- 外链
- 嵌入
- 内联
如何工作
- 加载HTML→解析HTML→加载CSS→解析CSS→添加样式到DOM节点→创建DOM树→展示页面
选择器
- 通配选择器：*
- 标签选择器
- id选择器：#
- 类选择器：.
- 属性选择器：[]
  - 根据属性值进行选择eg:input[type="password"]
  - 根据属性开头^和结尾 $,eg:a[herf^="#"],a[herf$=".jpg"]
- 伪类选择器：
  - 根据状态或DOM结构选择元素
  - 状态伪类
  - 结构性伪类，根据在DOM树中的位置eg:li:first-child
- 组合选择器
  - 直接组合：AB同时满足
  - 后代组合：A B，选中A的子孙B
  - 亲子组合：A>B，直接子元素
- 选择器组
  - 拥有相同样式规则的多个选择器可合为一组，逗号隔开
文字样式
- 颜色
  - 三原色：rgb()
  - 十六进制#
  - HSL：色相（0-360）、饱和度（0-100%）、亮度（0-100%）
  - 颜色关键字
  - rgba（考虑透明度）
- 字体font-family：字体列表，逗号隔开；最后放通用字体族，保证显示；英文字体放在中文字体前面
  - 通用字体族：Serif 衬线体；Sans-Serif：无衬线体；Cursive：手写体；Fantasy；Monospace：等宽字体。
  - web fonts：@font-face{font-family:名字；src:存放的url地址};
  - 中文web fonts：存在太大的问题，字体处理工具对页面字符进行提取，只存储需要的字符
- 字号font-size
  - 关键字（small，medium,large）
  - 长度(px,em:相对于父元素字体大小)
  - 百分比（相对于父元素字体大小）
- 斜体font-style:italic（默认值为normal）
- 字重font-weight：数字（100-900）或normal（400）,bold（700）
- 行间距line-height：基线之间的距离，可以使用数字或者与font-size的比例
- font：斜体字重大小/行高字体
- 文字对齐：text-align:left center right justify（分散对齐）
- 单词间距word-spacing、字母之间距离letter-spacing
- 首行缩进text-indent
- 文本装饰（下划线、中划线等）text-decoration:none underline line-throgh overline
- 空格换行white-space：normal（连续的空格合并为一个）nowrap（不换行）pre（保留所有的空格和换行）pre-wrap（行内显示不下时自动换行）pre-line（合并空格，保留换行）

深入CSS

选择器优先级：由特异度决定（id# （伪）类. 标签E）
继承：某些属性自动继承父元素的计算值，除非显式指定一个值
- 大多数文字相关属性可以继承
- 不能继承的可以使用inherit进行继承，eg:*{box-sizing: inherit;}，*为通配符，使得box-sizing都可以继承
初始值：每个属性都有初始值，initial可以将属性设为初始值
CSS求值过程（每一个属性）
- filtering：过滤：根据代码中写好的样式，得到声明值
- cascading层叠：按照选择器优先级进行排序，得到层叠值
- defaluting：默认值策略：使用继承或初始值，属性都有指定值
- resolving：相对值转为绝对值，得到计算值
- formating：进行实际布局后，进一步将计算值转换得到使用值
- constraining：小数像素值转为整数
- 实际值
布局（确定内容位置和大小的算法）
- 浏览器将需要渲染的元素当做盒子处理，即盒模型
- 标准盒模型
  - content，padding（内边距），border（边框），margin（外边距）
  - width
    - content宽度
    - 取值为长度、百分比（相对于容器的content box宽度）、auto（浏览器根据其他属性确定）
  - height（与width相似，只有容器指定高度时，百分数才生效）
  - padding：设定内边距（上右下左）；百分数相对于容器宽度
  - border
    - 边框样式border-style：none solid（实线） dashed（虚线） dotted（点状线）
    - 边框粗细border-width
    - 边框颜色border-color
  - margin
    - margin:auto水平居中
    - margin collapse：相邻的垂直方向两个margin会进行折叠，水平方向不会折叠
  - box-sizing：决定哪种盒子模型content-box,border-box
  - overflow：控制溢出内容的处理，默认值visible（超出文字也可显示）、hidden（超出文字不可显示）、scroll（滚动条）、auto
- 块级、行级
  - 块级盒子：不会和其他块级盒子并排摆放
  - 行级盒子：
    - 可以并排放在一行或拆开成多行，
    - 不能设置width、height
  - 块级元素
    - 生成块级盒子
    - body\article\di\main\section\h1-6\p\ul\li
    - display:block
  - 行级元素
    - span\em\strong\cite\code等
    - display:inline
  - display:block，inline，none，inline-block（行级元素，可以设置宽高，作为一个整体不能拆成多行）
- 常规流（元素按照某种流向摆放）
  - 根元素、浮动和绝对定位的元素会脱离常规流
  - 其他元素都在常规流之内
  - 常规流中的盒子，会在某种排版上下文中参与布局
    - 行级排版上下文（IFC）
      - 一个只包含行级盒子的容器创建IFC
      - 盒子在一行内从左到右水平摆放
      - 一行放不下则换行显示
      - text-align决定水平对齐
      - vertical-align决定垂直对齐
    - 块级排版上下文（BFC）从上到下
      - 创建BFC的情况
        根元素
        浮动、绝对定位、inline-block
        Flex子项和Grid子项
        overflow不是visible的块盒
      - BFC排版规则
        盒子从上到下摆放
        垂直margin合并
        BFC内盒子的margin不会与外面的合并
        不会和浮动元素重叠
  - Flex Box（display:flex块级flex容器；diaplay:inline-flex行级flex容器）
    - flex-direction：控制流向，row/row-reverse/column/column-reverse
    - flex-grow/flex-shrink/flex-basis
    - flex-wrap:控制是否换行，nowrap/wrap
    - 主轴：flex-direction设定的方向，垂直的为侧轴
    - justify-content：主轴对齐方式
    - align-items：侧轴对齐方式
    - align-self：给一个元素设置单独的布局
    - order：排列方式
    - 单向布局方式
  - Grid 布局（display:grid）
    - 二维布局方式
    - 使用grid-template属性划分网格，fr表示份
    - 按照网格编号表示网格区域。 eg:grid-area:1/1/3/3;
  - 浮动