CSS一些小点 —— 12.7

1. box-sizing: border-box

box-sizing 属性,默认值为 content-box

box-sizing: border-box 使padding和border的值不会再影响元素的宽高;padding和border的值算在指定宽高的内部(但是外边距依然算做外部)

2.  overflow: hidden

作用:

  • 溢出隐藏

如果父盒子没有设置固定高度或宽度时,子盒子会将父盒子的宽或高自动撑开;

标准流:就是标签按照规定好的方式排列

标准流布局:

  1. 块级元素会独占一行,从上向下顺序排列。
  2. 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行

如果父盒子有固定高度或宽度时,且子盒子的高度或宽度大于父盒子,就会发生溢出

溢出隐藏

  • 清除浮动

浮动:用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘

浮动属性值:left:向左浮动;right:向右浮动;none:不浮动;inherit:继承父元素的浮动属性

浮动元素特性:脱离标准流,在标准流中不占位置

场景:不设置父盒子的高度,高度随内容增加自适应高度,

          子盒子都使用浮动,子元素会脱离标准流,不占位,

          父级元素检测不到子元素的高度(不浮动的元素会直接无视掉这个元素),父级元素高度为0

                         一行内显示并且元素顶部对齐,具有行内块元素的特性

清除浮动:

  • 解决外边距塌陷

问题:父级元素内部有子元素;如果给子元素添加margin-top样式,那么父级元素也会跟着下来,造成外边距塌陷

解决外边距塌陷:给父级元素添加overflow:hidden

3.  font-weight: normal 

其他属性值:

    normal    正常的字体;相当于数字值400 
    bold        粗体;相当于数字值700 
    bolder     比粗体更加粗 
    lighter     比正常字体淡

4. line-height: 40px

font-size:文本字体的大小

5. letter-spacing: 2px

文字与文字间的间距;也可以说是字符间距

6. border-radius: 39px

为元素添加圆角边框

注意border-radius采用的是左上角、右上角、右下角、左下角的顺序

7.  background-color: transparent

设置背景色为透明

例如:

8.  flex: 1

flex-grow:1; flex-shrink:1; flex-basis:auto 的简写

flex-grow 当前元素占多少份

flex-grow: 1; 占满剩余空间

flex-shrink 设置子元素的 缩小比例,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的

flex子元素应收缩空间=总收缩空间×(flex子元素原始大小∗shrink值)/ ∑(flex子元素原始大小∗shrink值)

flex-basis 元素的基础宽度 

flex-basis:auto 长度自适应

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/63298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【GESP】C++一级练习 luogu-P1425, 小鱼的游泳时间

GESP一级综合练习,主要涉及时间计算,难度★☆☆☆☆。 题目题解详见:https://www.coderli.com/gesp-1-luogu-p1425/ 【GESP】C一级练习 luogu-P1425, 小鱼的游泳时间 | OneCoderGESP一级综合练习,主要涉及时间计算,难…

【网络协议栈】数据链路层(内附手画分析图 简单易懂)以太网、MAC地址、局域网、交换机、MTU、ARP协议

每日激励:【无限进步】“梦想可以大,但第一步总是小” 绪论​: 本章将开始到达TCP/IP协议中的最后一层数据链路层,本章将会写到我们日常中常见的局域网以及认识数据链路层中非常重要的协议ARP协议,后续还将进行更新网络…

二叉树的深搜(不定期更新。。。。。)

二叉树的深搜 验证二叉搜索树 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下: 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉…

51c嵌入式~单片机合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/12581900 一、STM32代码远程升级之IAP编程 IAP是什么 有时项目上需要远程升级单片机程序,此时需要接触到IAP编程。 IAP即为In Application Programming,解释为在应用中编程,用户自己的程…

使用setsockopt函数SO_BINDTODEVICE异常,Protocol not available

前言 最近在使用OLT的DHCP Server的时候发现一些异常现象,就是ONU发的一个vlan的discover包其他不同vlan的DHCP地址池也会收到,导致其他服务器也发了offer包,ONU同时会有多个ip地址。一开始是没有使用SO_BINDTODEVICE,后面查到使…

02 conda常用指令

目录 命令快速查找命令详细解释列出当前conda中存在的解释器环境使用指定的解释器环境创建虚拟环境激活自己创建的虚拟环境虚拟环境删除切换回主环境找到你计算机中安装的miniconda3的跟目录找到虚拟环境的目录选择需要删除的虚拟环境文件夹确认环境是否删除 补充删除虚拟环境指…

BEVFormer详细复现方案

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

应用案例 | 船舶海洋: 水下无人航行器数字样机功能模型构建

水下无人航行器数字样机功能模型构建 一、项目背景 为响应水下装备系统研制数字化转型及装备系统数字样机建设的需要,以某型号水下无人航行器(Underwater Unmanned Vehicle,UUV)为例,构建UUV数字样机1.0功能模型。针对…

【NIPS2024】Unique3D:从单张图像高效生成高质量的3D网格

背景(现有方法的不足): 基于Score Distillation Sampling (SDS)的方法:从大型二维扩散模型中提取3D知识,生成多样化的3D结果,但存在每个案例长时间优化问题/不一致问题。 目前通过微…

手机LCD分区刷新技术介绍

分区刷新也称为分区变频,LCD分区刷新功能的目的是将屏幕分为上下半区,分区显示不同帧率,上方区块High Frame Rate,下方区块Low Frame Rate。使用者可以动态自定义上方高刷显示区的结尾位置。 当前的智能手机屏幕上,显示…

NLP算法具备技能

摘要:好久不看理论,最近把自己学过以及用到过的东西都列了出来,主要是这个大纲体系,详细的内容部分是使用LLM来辅助编写的。 一、大模型 1.1 常用大模型 1.1.1 Qwen ‌Qwen大模型‌是由阿里巴巴开发的系列大语言模型&#xff…

学习日志022 -- python事件机制

作业: 1】思维导图 2】完成闹钟 main.py import sysfrom PySide6.QtCore import QTimerEvent, QTime,Qt from PySide6.QtGui import QMovie,QMouseEvent from PySide6.QtWidgets import QApplication, QWidget from Form import Ui_Formclass MyWidget(Ui_Form,Q…

JAVAWeb中的Servlet学习

一 Servlet简介 1.1动态资源和静态资源 静态资源 无需在程序运行时通过代码运行生成的资源,在程序运行之前就写好的资源.例如:html css js img ,音频文件和视频文件 动态资源 需要在程序运行时通过代码运行生成的资源,在程序运行之前无法确定的数据,运行时动态生成,例如Servle…

重生在我在21世纪学C++—赋值操作符、类型转换、单目操作符

一、赋值操作符 在变量创建的时候给一个初始值叫初始化。在变量创建好后,再给⼀个值,这叫赋值。 int a 100 ; //这叫初始化 a 200 ; //这叫赋值, 就是赋值操作符 赋值操作符 是⼀个随时可以给变量(不能是常…

03、Node.js安装及环境配置

1.下载node.js 下载地址:Node.js 2.安装 2.1 自定义安装路径(可以选择默认) 下图根据本身的需要进行,我选择了默认Node.js runtime,然后Next: Node.js runtime :表示运行环境 npm package mana…

【Java】反射简介

框架的核心和架构师的核心 反射和代理是重中之重 反射 反射的作用 在运行的时候由代码获取类的信息 三种获取类信息的方式: 对象.getClass()Class.forName("类的路径")类.class Class :一个用来存储类信息的类 获取类信息是获取的整体的…

Qt入门8——Qt文件

1. Qt文件概述 文件操作是应用程序必不可少的部分。Qt作为⼀个通用开发库,提供了跨平台的文件操作能力。Qt 提供了很多关于文件的类,通过这些类能够对文件系统进行操作,如文件读写、文件信息获取、文件复制或重命名等。 2. 输入输出设备类 在…

常量变量和一些运算符

3.4 变量 常量:!final关键字 final修饰基本类型不可以第二次赋值final修饰的引用类型不可以第二次改变指向final修饰的类不可以被继承final修饰的方法不可以被重写final防止指令重排序,遏制流水线性能优化,保障多线程并发场景下…

内存管理面试常问

为什么要有虚拟内存? 虚拟内存 如果你是电⼦相关专业的,肯定在⼤学⾥捣⿎过单⽚机。 单⽚机是没有操作系统的,所以每次写完代码,都需要借助⼯具把程序烧录进去,这样程序才能跑起来。 另外, 单⽚机的 CPU …

MongoDB分片集群搭建及扩容

分片集群搭建及扩容 整体架构 环境准备 3台Linux虚拟机,准备MongoDB环境,配置环境变量。一定要版本一致(重点),当前使用 version4.4.9 配置域名解析 在3台虚拟机上执行以下命令,注意替换实际 IP 地址 e…