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;
}
相关推荐
Csvn13 小时前
content-visibility: auto —— 让浏览器跳过离屏渲染的性能黑科技
前端
小鹰信息技术服务部13 小时前
Edge安装包MicrosoftEdgeSetup.exe无法运行,点击没反应
前端·edge
webkubor14 小时前
一次前端生产白屏复盘:旧 HTML、Hash 资源和 MIME type text/html
前端·前端工程化
咩咩啃树皮14 小时前
第63篇【终极整合巨作】从零手写原生中后台管理系统|整合62篇全部前端知识点|从头到尾完整架构+全功能逻辑
前端·架构
Highcharts16 小时前
用Highcharts如何动态向一个序列添加点-示列讲解
前端
weixin_4316004416 小时前
做 Agent 会用到的 Node API(4):取消与 AbortController
前端·学习·ai·agent·ai编程
JiaLin_Denny16 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
用户21816970493016 小时前
Flutter(十)Container Center Align
前端
无人生还16 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
小p16 小时前
nextjs学习9: Next.js 渲染与缓存
前端·后端