CSS一些小点 —— 12.7

news2025/1/19 11:22:15

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.coloradmin.cn/o/2256010.html

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

相关文章

Vue组件实现PDF图纸批量打印功能详解

在现代Web应用中,打印功能是一个常见的需求,尤其是在工程和设计领域,经常需要将图纸或文档打印出来。本文将介绍如何使用Vue.js实现一个简单的PDF图纸批量打印功能。 功能概述 该Vue组件的主要功能是: 展示一系列图纸&#xff0…

00. Nginx-知识网络

知识目录 语雀知识网络,点击“”-- 点击“”查看知识网络 01. Nginx-基础知识 02. Nginx-虚拟主机 03. Nginx-Web模块 04. Nginx-访问控制 05. Nginx-代理服务 06. Nginx-负载均衡 07. Nginx-动静分离 08. Nginx-平滑升级 09. Nginx-日志切割 10. Nginx-…

第八节、Bresenham直线插补【51单片机-TB6600驱动器-步进电机教程】

摘要:前面章节主要介绍单个电机控制,本节内容介绍两个电机完成直线插补运动 一、 Bresenham直线算法介绍 Bresenham直线算法由Jack Elton Bresenham于1962年在IBM开发,最初用于计算机显示直线,它确定应该选择的n维光栅的点&#…

使用数据层进行数据生命周期管理

作者:来自 Elastic Stef Nestor Elasticsearch 7.10 使配置数据生命周期变得不再那么复杂。在这篇博文中,我将介绍一些变化、如何使用它们以及一些最佳实践。 数据生命周期可以包含很多阶段,因此我们将涉及: 将集群划分为层&…

大数据-244 离线数仓 - 电商核心交易 ODS层 数据库结构 数据加载 DataX

点一下关注吧!!!非常感谢!!持续更新!!! Java篇开始了! 目前开始更新 MyBatis,一起深入浅出! 目前已经更新到了: Hadoop&#xff0…

【RK3562J开发笔记】MCP2518FD外部CAN-FD控制器的调试方法

“SPI转CAN-FD”是嵌入式开发领域的常用方法,它极大地促进了不同通信接口之间的无缝连接,并显著降低了系统设计的复杂性。飞凌嵌入式依托瑞芯微RK3562J处理器打造的OK3562J-C开发板因为内置了SPI转CAN-FD驱动,从而原生支持这一功能。该开发板…

OpenCV 图像基本操作

OpenCV快速通关 第一章:OpenCV 简介与环境搭建 第二章:OpenCV 图像基本操作 OpenCV 图像基本操作 OpenCV快速通关第二章:OpenCV 图像基本操作一、相关结构体与函数介绍(一)cv::Mat 结构体(二)c…

QT通过在线安装器安装【详细】

在线安装器地址: 官方在线安装器:Index of /official_releases/online_installers (qt.io) 通过命令行启动安装页面 直接双击qt安装程序,在线安装会非常慢,甚至安装失败,所以通过命令行页面启动安装页面。点击wind…

保姆级教学 uniapp绘制二维码海报并保存至相册,真机正常展示图片二维码

一、获取二维码 uni.request({url: https://api.weixin.qq.com/wxa/getwxacode?access_token${getStorage("token")},responseType: "arraybuffer",method: "POST",data: {path: "/pages/index/index"},success(res) {// 转换为 Uint…

基于stm23的智慧宿舍系统 (DAY10)_小程序

好久没记录开发进度了,今天小程序差不多开发完了,UI这块算是比较常见了,主要功能是能连接onenet查看设备上传的数据,同时也能对设备进行一些控制下面是几个主要的函数,功能比较简单 wx.request({url: ${apiBaseUrl}/t…

dockerfile部署前后端(vue+springboot)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言0.环境说明和准备1.前端多环境打包1.1前端多环境设置1.2打包 2.后端项目多环境配置以及打包2.1后端多环境配置2.2项目打包 3.文件上传4.后端镜像制作4.1dockerf…

Tomcat使用教程

下载地址:https://tomcat.apache.org/ 配置环境变量 变量名: CATALINA_HOME 变量值: D:\tools\apache-tomcat-9.0.97 Path: %CATALINA_HOME%\bin 启动Tomcat(打开命令提示符) startup.bat 解决乱码问题(打开conf\logging.properties) java.util.logging.Conso…

vim实用命令整理(常用的命令)

本章教程,总结自己平时使用vim过程中,经常使用的命令,分享给大家。 一、高频使用 i:进入插入模式(光标处插入) a:进入插入模式(光标后插入) esc:返回普通模式 ::进入命令模式 :w:保存 :q:退出 :wq:保存并退出 :q!:强制退出不保存 :e filename:打开文件 :set n…

UiPath API接口说明

Swagger网址 私有云网址(企业版) https://企业/swagger/index.html 公有云网址(社区版) https://cloud.uipath.com/linan/LinanZhang/orchestrator_/swagger/index.html#/ 常见问题 Swagger页面测试请求时报错“You are not a…

17. Threejs案例-Three.js创建多个立方体

17. Threejs案例-Three.js创建多个立方体 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 WebGL 场景的核心类。它负责将场景中的对象渲染到画布上。 构造器 new THREE.WebGLRenderer(parameters) 参数类型描述parametersObject可选…

【解决pycharm下site-packages文件标记为红色的问题】

怎么解决pycharm下site-packages文件标记为红色的问题 这是一个pycharm无法识别本地site-packages问题答案解释器设置路径如下: 这是一个pycharm无法识别本地site-packages问题 最近正在搭建一个python3requestsunittestHTMLTestRunner接口测试框架,发现…

高中数学:计数原理-排列组合

文章目录 一、排列排列数例题 二、组合组合数例题 三、使用方法总结 一、排列 排列数 例题 二、组合 组合数 例题 三、使用方法总结 组合:从n个元素中抽取m个元素,不排序,则用组合计算 排列:从n个元素中抽取m个元素,再…

软件设计师下午题知识点

下午题一:数据流图DFD 数据流图平衡原则 此题注意两个平衡: 1、父图与子图的平衡(顶层图、0层图);2、子图内平衡)遵循自顶向下,从抽象到具体 结构化分析 在结构化分析方法中,数…

C++哈希(一)

1.底层结构 顺序结构以及平衡中,元素关键码与其存储位置之间没有相对应的关系,因此在查找一个元素时,要经过关键码的多次比较。顺序查找的时间复杂度为O(N)。 理想的搜索方法:可以不经过比较,依次直接从表中直接搜索…

Open-webui:本地化管理AI大模型

Open WebUI 是一个开源的用户界面工具,用于运行和管理大语言模型 (LLM) 及其他人工智能功能。它的主要目的是简化人工智能模型的本地部署和操作,让用户能够方便地通过浏览器界面与各种 AI 模型进行交互。 官方地址:https://github.com/open-…