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;
}
相关推荐
AI周红伟16 分钟前
周红伟:长鑫科技(CXMT)财务全景分析
前端·chrome·科技
excel37 分钟前
JS 正则在多次 test() 时为什么会出现 lastIndex 缓存问题?
前端
IT_陈寒38 分钟前
为什么 Java 的 Optional 让我调试到深夜?
前端·人工智能·后端
米丘1 小时前
React 19.x 的 lazy 与 Suspense
前端·javascript·react.js
如果超人不会飞1 小时前
TinyVue Grid 表格 fetchData 完全指南:从入门到精通
前端
kyriewen1 小时前
手写虚拟DOM后,我反问面试官:key为什么不能用index?
前端·react.js·面试
Doris_20232 小时前
说一说ESLint+Prettier生效的原理
前端·设计模式·架构
ZC跨境爬虫2 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
卷帘依旧2 小时前
微前端解决方案-qiankun
前端
moshuying2 小时前
你做的,比汇报出来的多得多
前端