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;
}
相关推荐
VaJoy28 分钟前
全面革新⚡️ Vue 3.6 项目工程的基础实现
前端·vue.js
苍何42 分钟前
耗时 7 天,我们开源了腾讯 WorkBuddy 实战蓝皮书(建议收藏)
前端·后端
大家的林语冰1 小时前
😭 Electron 麻了,Deno 直接支持二进制应用,无需第三方桌面应用框架!
前端·javascript·node.js
Damai2 小时前
DOMPurify 完整介绍
前端·面试
随风一样自由2 小时前
【前端+跨域】跨域问题全面解析与解决方案指南
前端·跨域
小帅不太帅2 小时前
我随手发了几张截图,白拿了一个月 AI 顶配会员
前端·github
36岁的我开始学习打篮球2 小时前
外规内化技术架构
前端
雪隐2 小时前
用Flutter做背单词APP-03为了给单词库塞满数据,我让AI给我打了上万份工
前端·人工智能·后端
hunterandroid2 小时前
Android 安全最佳实践:从数据存储到网络通信的防护思路
前端
H Journey2 小时前
web开发学习:html、css、js
前端·css·html·js