当前位置: 首页 > article >正文

CSS 笔记 1

1. CSS 优先级, 内部大于外部。

2. 几个属性:

flex-grow: 1;
让 当前元素 在剩余空间中, 占据尽可能多的高度,确保它能在中间居中。

max-height: 300px;
限制最大高度 300 像素, flex-grow: 1; 导致占的太满了,
同理, 高度,宽度,都可以设置为 最大,最小

width: 100vw; 铺满整个浏览器窗口的宽度
width: 100% ; 占据父元素的 100%

padding: 20px 0; 上下填充 20px,左右填充为0

justify-content, 这个很有用!!! 控制子元素的布局。

justify-content: center; 居中。
justify-content: space-between; 均匀分布

3. CSS 笔记

  1. justify 表示对齐
  2. em

    h1 {font-size:2.5em;}
    2.5em, 把默认字体大小,调整为 2.5倍。
    em 的好处是, 响应式的布局

  3. 盒子模型:
    • Margin(外边距) - 外部。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 内部。
    • Content(内容) - 自身。
  4. 把一个元素设置为水平居中

    margin: auto;

4. 选择器

  1. 后代选择器

    div h3 {background-color:yellow; }
    表示 div 里面,全部的 h3

  2. p:before {content:"Read this: ";}

    是一个选择器
    向选定的元素前插入内容。
    js 动态加载的内容,经常使用这个。

  3. 伪类, 冒号, h1::before

    h1::before {xx: yy}
    p:before {xx: yy}
    1个冒号,是老版本,也能用。
    2个冒号,新版本, 推荐使用


http://www.kler.cn/a/312618.html

相关文章:

  • CLion配置QT开发环境
  • LabVIEW 实现 find_nearest_neighbors 功能(二维平面上的最近邻查找)
  • Spring框架之适配器模式 (Adapter Pattern)
  • 【LeetCode】【算法】19. 删除链表的倒数第N个结点
  • Kubernetes的基本构建块和最小可调度单元pod-0
  • Android Studio | 最新版本配置要求高,JDK运行环境不适配,导致无法启动App
  • 小琳AI课堂:MASS模型——革新自然语言处理的预训练技术
  • celery
  • 鸿蒙生态应用
  • 网关登录校验(2)----网关如何将用户信息传递给微服务
  • 金钥匙系列:Kubernetes (K8s) 服务集群技术栈学习路线
  • 表单里面input的type属性值有哪些?
  • CCF201909_1
  • docker发布redis容器
  • 数据库-约束与多表查询
  • uniapp快速入门教程,内容来源于官方文档,仅仅记录快速入门需要了解到的知识点
  • Java之封装
  • QT --- 初识QT
  • 简单了解 JVM
  • Mac使用技巧-来自苹果专人在线辅导服务2
  • windows环境下载ubuntu22.04源码,提示invalid path aux.c
  • [Visual Stuidio 2022使用技巧]2.配置及常用快捷键
  • LeetCode746:使用花费最小爬楼梯
  • Vue: watch5种监听情况
  • Kubernetes故障排除全面指南
  • Day27_0.1基础学习MATLAB学习小技巧总结(27)——曲线拟合函数