CSS盒子模型(溢出隐藏,块级元素和行级元素的居中对齐,元素样式重置)

overflow:值
规定了内容溢出元素框时所发生的事情

  • visible:内容不会被修剪,会显示在元素框之外,默认值 overflow: visible;在这里插入图片描述

  • hidden:内容会被修剪,溢出内容不可见 overflow: hidden;
    在这里插入图片描述

  • scroll:内容会被修剪,溢出内容会显示滚动条以便查看溢出内容 overflow: scroll;
    在这里插入图片描述

  • auto:当内容多于元素框时,内容会被修剪并显示滚动条;当内容少于元素框时,不会显示滚动条,正常显示。

元素居中

  • 块级元素水平居中可以用 margin: 0 auto;【只对块级元素有效】
  • 行级元素居中:对父级元素加入text-align属性:
        body{
            text-align: center;
        }

元素样式重置

使样式在所有浏览器中显示的样式都一致,不因浏览器不同而导致样式的混乱

* {margin: 0;
   padding: 0;
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
img {
    border: none;
    vertical-align: top;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spark-Streaming集成Kafka

Spark Streaming集成Kafka是生产上最多的方式,其中集成Kafka 0.10是较为简单的,即:Kafka分区和Spark分区之间是1:1的对应关系,以及对偏移量和元数据的访问。与高版本的Kafka Consumer API 集成时做了一些调整,下面我们…

【Python】pandas库---数据分析

大学毕业那年,你成了社会底层群众里,受教育程度最高的一批人。 前言 这是我自己学习Python的第四篇博客总结。后期我会继续把Python学习笔记开源至博客上。 上一期笔记有关Python的NumPy数据分析,没看过的同学可以去看看:【Pyt…

数字IC后端设计实现篇之TSMC 12nm TCD cell(Dummy TCD Cell)应该怎么加?

TSMC 12nm A72项目我们需要按照foundary的要求提前在floorplan阶段加好TCD Cell。这个cell是用来做工艺校准的。这个dummy TCD Cell也可以等后续Calibre 插dummy自动插。但咱们项目要求提前在floorplan阶段就先预先规划好位置。 TSCM12nm 1P9M的metal stack结构图如下图所示。…

LiteFlow决策系统的策略模式,顺序、最坏、投票、权重

个人博客:无奈何杨(wnhyang) 个人语雀:wnhyang 共享语雀:在线知识共享 Github:wnhyang - Overview 想必大家都有听过或做过职业和性格测试吧,尤其是现在的毕业生,在投了简历之后经…

YashanDB 23.2 YAC -单库多实例架构多活共享集群安装部署指南

一、概述 1.1 文档目标 ​ 本说明旨在指导技术人员在 CentOS 7 x86_64 操作系统上完成崖山数据库企业版 23.2 的共享集群安装与部署。通过系统架构、集群拓扑及部署需求的精确描述,帮助读者在开始安装前对崖山数据库的架构形成清晰认识。本文以高效、稳定、安全为…

某科技局国产服务器PVE虚拟化技术文档

环境介绍 硬件配置 服务器品牌:黄河 型号:Huanghe 2280 V2 Cpu型号:kunpeng-920 磁盘信息 :480SSD * 2 ,4T*4 网卡:板载四口千兆 如下表 四台服务器同等型号配置,均做单节点虚拟化,数据保护采用底层r…

Gin-vue-admin(4):项目创建前端一级页面和二级页面

目录 创建一级页面创建二级页面 创建一级页面 view目录下新建一个my&#xff0c;Index.vue <template></template><script> export default {name:My, } </script><script setup> import {ref} from vue const myNameref("name") &…

Ubuntu下的tcl/tk编程快速入门

一、Tcl/Tk 简介 接口介绍 https://www.tutorialspoint.com/tcl-tk/tcl_tk_quick_guide.htm GUI Canvas接口 https://www.tutorialspoint.com/tcl-tk/tk_canvas_widgets.htm tcl语言 https://www.tcl-lang.org/ 官方教程 https://www.tcl.tk/man/tcl8.5/tutorial/tcltutoria…

数字化审计咨询服务,企业转型数字化审计的必要条件

人工智能、云计算、大数据、物联网等新兴技术的快速发展&#xff0c;为企业的数字化转型提供了强大的技术支持。这些技术逐渐被应用到企业运营管理的方方面面&#xff0c;推动了企业内部审计工作的变革。随着数字化转型的深化和信息技术的不断发展&#xff0c;数字化审计将成为…

【QT常用技术讲解】发送POST包(两种方式:阻塞方式及非阻塞方式)

前言 http/https(应用层)协议是广泛使用的网络通信协议。在很多与第三方API对接的场景中&#xff0c;通常是通过http/https协议完成&#xff0c;比如API对接时&#xff0c;通常要通过POST包获取access_token进行鉴权&#xff0c;然后再进行数据交互&#xff08;本篇也包含有对接…

重撸设计模式--代理模式

文章目录 定义UML图代理模式主要有以下几种常见类型&#xff1a;代理模式涉及的主要角色有&#xff1a;C 代码示例 定义 代理模式&#xff08;Proxy Pattern&#xff09;属于结构型设计模式&#xff0c;它为其他对象提供一种代理以控制对这个对象的访问。 通过引入代理对象&am…

【Steel Code】 10.5 COMPOSITE COLUMNS

10.5 COMPOSITE COLUMNS 组合柱 10.5.1 General 总则 (1) This clause applies for the design of composite columns and composite compression members with fully encased H sections, partially encased H sections, and infilled rectangular and circular hollow sect…

11.vector的介绍及模拟实现

1.vector的介绍 记得之前我们用C语言实现过顺序表&#xff0c;vector本质上也是顺序表&#xff0c;一个能够动态增长的数组。 vector 的底层实现机制 - 动态数组&#xff1a;vector 的底层实现是动态数组。它在内存中连续存储元素&#xff0c;就像一个可以自动调整大小的数…

封装(2)

大家好&#xff0c;今天我们来介绍一下包的概念&#xff0c;知道包的作用可以更好的面对今后的开发&#xff0c;那么我们就来看看包是什么东西吧。 6.3封装扩展之包 6.3.1包的概念 在面向对象体系中,提出了一个软件包的概念,即:为了更好的管理类,把多个类收集在一起成为一组…

go官方日志库带色彩格式化

go默认的 log 输出的日志样式比较难看&#xff0c;所以通过以下方式进行了美化和格式化&#xff0c;而且加入了 unicode 的ascii码&#xff0c;进行色彩渲染。 package mainimport ("fmt""log""os""runtime""strings""…

0基础学前端系列 -- 深入理解 HTML 布局

在现代网页设计中&#xff0c;布局是至关重要的一环。良好的布局不仅能提升用户体验&#xff0c;还能使内容更具可读性和美观性。HTML&#xff08;超文本标记语言&#xff09;结合 CSS&#xff08;层叠样式表&#xff09;为我们提供了多种布局方式。本文将详细介绍流式布局、Fl…

Windows开启IIS后依然出现http error 503.the service is unavailable

问题背景 已启用IIS服务&#xff0c;配置步骤可以参考Windows10 IIS Web服务器安装配置 问题描述 在这一步浏览网站时&#xff0c;并没有出现默认首页&#xff0c;而是 http error 503 the service is unavailable 问题解决 参考 成功解决http error 503.the service is un…

BuildCTF 公开赛web部分wp

文章目录 LovePopChainRedFlagWhy_so_serials?babyuploadeazyl0ginez!httpez_md5find-the-idsubtflock刮刮乐我写的网站被rce了&#xff1f; LovePopChain payload: <?php class MyObject{public $NoLove"Do_You_Want_Fl4g?";public $Forgzy;public functi…

diff 算法实现的几种方法和前端中的应用

diff 算法原理和几种实现方法 diff 是什么 diff 算法就是比较两个数据的差异&#xff0c;例如字符串的差异&#xff0c;对象的差异。 常用于版本管理&#xff08;git&#xff09;例如下面的实际案例。 github 上某个 commit&#xff0c;旧代码和新代码之间的不同 diff 展示…

Nacos源码搭建

拉取并配置代码 仓库地址 https://github.com/alibaba/nacos找到config 模块中找到 \resources\META-INF\mysql-schema.sql&#xff0c;在本地mysql中创建数据库nacos-config&#xff0c;将该脚本导入执行创建表。 找到console模块下的配置文件application.properties&#x…