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

overflow:值

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

  • visible:内容不会被修剪,会显示在元素框之外,默认值 overflow: visible;

  • hidden:内容会被修剪,溢出内容不可见 overflow: hidden;

  • scroll:内容会被修剪,溢出内容会显示滚动条以便查看溢出内容 overflow: scroll;

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

元素居中

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

元素样式重置

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

css 复制代码
* {margin: 0;
   padding: 0;
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
img {
    border: none;
    vertical-align: top;
}
相关推荐
还有多久拿退休金12 小时前
DragSortTable:一个让我怀疑人生的滚动重置 Bug
前端
渐儿12 小时前
组件库开发入门到生产(从零封装到 npm 发布)
前端
KaMeidebaby12 小时前
卡梅德生物技术快报|单 B 细胞抗体制备:流程优化、表达系统适配与性能数据
前端·数据库·其他·百度·新浪微博
lichenyang45313 小时前
从鸿蒙 AI 聊天 Demo 学习 ArkUI V2:第一天上手记录
前端
进击的松鼠13 小时前
OpenClaw 的五层架构设计与解析
前端·架构·agent
JavaGuide13 小时前
Claude Code 新功能Agent View 发布:终于不用在一堆终端窗口里找 Agent 了!
前端·后端·agent
不简说13 小时前
前端可视化打印设计器sv-print,一口气更新了30版
前端·源码·产品
颖火虫盟主13 小时前
Claude Code Hook 系统详解与 Hello World 实操
前端·网络·数据库
JavaGuide13 小时前
Claude Code + BrowserAct,夯爆了!一句话让 AI 帮你操控浏览器。
前端·后端·ai编程
七十二時_阿川13 小时前
Electron WebContents 完全指南:页面渲染、导航控制与安全实战
前端·electron