likes
comments
collection
share

HTML和CSS

作者站长头像
站长
· 阅读数 72

HTML （HyperText Markup Language）

前端需要关注的内容

  • 功能
  • 美观
  • 安全
  • 性能
  • 无障碍
  • 兼容
  • 体验

DOM树

  • 浏览器拿到HTML代码后会将HTML解析成一棵DOM树HTML和CSS

语义化

  • HTML 中的元素、属性以及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表用ol; 无序列表用ul
    • lang 属性表示内容所使用的语言

  • 语义化的好处

    • 代码可读性
    • 代码可维护性
    • 搜索引擎优化
    • 提升无障碍性

  • 如何做到语义化

    • 了解每个标签和属性的含义
    • 思考什么标签最适合描述这个内容
    • 不使用可视化工具生成代码

HTML是传达内容的不是传达样式的

一些重要的标签

  • <!DOCTYPE html>在HTML5 中该声明是必要的，放在HTML文件头部，目的是确保浏览器按照最佳的相关规范进行渲染
  • <head>规定HTML 文档相关的配置信息，例如元数据<meta>，文档标题<title>，引用的文档样式<style>和脚本<script>
  • <meta>表示那些不能由其他HTML相关（meta-related）元素（<style>、<script>、<title>等）表示的任何元数据信息，比如charset属性，可以声明文档编码

---------------------------------------分隔符------------------------------------------------------

CSS （Cascading Style Sheets）

CSS是如何工作的

HTML和CSS

选择器

使用多种方式选择元素

  • 按照标签名（例如 h1{...}）、类名（例如 .nameStyle{...}）或id（例如 #inputId{...}）
  • 按照属性（例如 [disabled]{...}， input[type="password"]{...}）
  • 按照DOM树中的位置，伪元素选择器（例如 ::before{...}）
  • 伪类选择器（例如 :hover{...}）
  • 通配选择器，使用 * 匹配所有

伪类

不基于标签和属性定位元素，伪类分为状态性伪类和结构性伪类。

  • 状态性伪类：

例如链接符和输入框在不同交互情况下的状态：

HTML和CSS

  • 结构性伪类

根据DOM节点出现在DOM树中的位置来决定是否选中元素，例如在列表中的不同位置来选择元素

HTML和CSS

伪元素

选定之前DOM树上没有的元素或者选中一些常规无法选中的元素，最常用的有<::after>、<::before>等，新版规范里，使用单冒号（:）表示伪类，双冒号（::）表示伪元素，以便区分伪类和伪元素。

CSS选择器优先级规则

  • 最近的祖先样式比其他祖先样式优先级高
  • "直接样式"比"祖先样式"优先级高
  • 内联样式 > id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
  • 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断
  • 属性后插有 !important 的属性拥有最高优先级
选择器权重
继承 或 *0，0，0，0
元素选择器0，0，0，1
类选择器或伪类选择器0，0，1，0
id选择器0，1，0，0
行内样式style1，0，0，0
!important正无穷

选择器方式的组合使用

名称语法说明示例
直接组合AB满足A同时满足Binput:focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A>B选中B，如果它是A的子元素section>p
兄弟选择器A~B选中B如果它在A后且和A同级h2~p
相邻选择器A+B选中B，如果它紧跟在A后面h2+p

行级排版上下文IFC

  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则：
    • 盒子在一行内水平摆放
    • 一行放不下时换行显示
    • text-align决定一个行内盒子的水平对齐
    • vertical-align决定一个行内盒子的垂直对齐
    • 避开浮动（float）元素

块级排版上下文BFC

  • 某些容器会创建一个BFC，不简单是一个块级标签就能创建：
    • 根元素
    • 浮动、绝对定位、inline-block
    • flex子项和grid子项
    • overflow值不是visible的块盒
    • display:flow-root
  • BFC内的排版规则：
    • 盒子从上到下摆放
    • 垂直方向上的margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

Flex布局 Flex Box

  • flex-direction 指定的方向称为主轴，与其垂直的称为侧轴
  • justify-content 属性指定flex盒子内的元素在主轴方向上的排列方式
  • align-items 属性指定flex盒子内的元素在侧轴方向上的排列方式
  • align-self 属性定义flex子项单独在侧轴方向上的对齐方式
  • order 属性可以指定flex子项的摆放顺序
  • flex-wrap 属性规定flex容器是单行或者多行，同时主轴方向决定了新行堆叠的方向，默认值为nowrap
  • flex子项会创建BFC

Flexibility

  • 可以设置flex子项的弹性：当容器有剩余空间时会伸展，当容器空间不足时会收缩
  • flex-grow 属性指有剩余空间时的伸展能力：将剩余空间按各子项的flex-grow 属性值的比例进行分配
  • flex-shrink 属性指容器空间不足时收缩的能力：没有剩余空间时按各子项的flex-shrink 属性的值的比例进行压缩
  • flex-basis 属性指没有伸展或收缩时的基础长度
  • flex: 1 指flex-grow: 1
  • flex: auto 指flex-grow: 1; flex-shrink: 1; flex-basis: auto
  • flex: none 指flex-grow: 0; flex-shrink: 0; flex-basis: auto

Float浮动

  • 用来做图文环绕，不建议用来使用布局

Position 定位属性

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对于最近的非static祖先元素定位
  • fixed 相对于视图绝对定位，导航栏常使用fixed定位
  • sticky 粘性定位的元素是依赖于用户的滚动，在position:relative 与 position:fixed 定位之间切换
转载自:https://segmentfault.com/a/1190000041292694
评论
请登录