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;
}
相关推荐
默_笙3 分钟前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript
我爱写代码i5 分钟前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
OpenTiny社区28 分钟前
太酷了!装上OpenTiny dsh‑genui这个插件,你的DeepSeek Harness点击就能干活了!
前端·ai编程
ModyQyW34 分钟前
vite-plugin-uni-pages 更新了什么
前端·uni-app
前端大卫1 小时前
H5 渲染 PDF 并添加高亮的两种方案【附源码】
前端
因_崔斯汀2 小时前
用 AI 生成 Three.js 沉浸式网站,代码与 Skill 均已开源
前端·人工智能
葡萄城技术团队2 小时前
一键触发工作表中所有异步函数:用依赖单元格刷新 SpreadJS 公式
前端
Bigger2 小时前
谁动了我的 URL?——记一次微前端"灵异 Bug"的排查实录
前端·ai编程·vue-router
JavaGuide2 小时前
轻量开源版 IDEA 来了!
前端·后端
张洪权3 小时前
nest.js websocket 群聊----私聊功能
前端·nestjs