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;
}
相关推荐
Yff_world20 小时前
网络安全与 Web 基础笔记
前端·笔记·web安全
Sapphire~20 小时前
Vue3-19 hooks 前端数据和方法的封装
前端·vue3
浩宇软件开发20 小时前
基于OpenHarmony鸿蒙开发医院预约挂号系统(前端后端分离)
前端·华为·harmonyos
嘿是我呀20 小时前
【用npm安装node时报错“npm 无法加载文件”】
前端·npm·node.js
干前端20 小时前
Vue3 组件库工程化实战:BEM 命名规范与 useNamespace 深度解析
前端·css
弓弧名家_玄真君20 小时前
在ubuntu中安装redis
前端·bootstrap·mybatis
RFCEO20 小时前
学习前端编程:DOM 树、CSSOM 树、渲染树详解
前端·学习·渲染树·dom 树·cssom 树·浏览器的渲染流程·回流/重绘
笨蛋不要掉眼泪20 小时前
Redis主从复制:原理、配置与实战演示
前端·redis·bootstrap·html
bigdata-rookie20 小时前
Starrocks 数据模型
java·前端·javascript
白帽子凯哥哥20 小时前
网络安全Web基础完全指南:从小白到入门安全测试
前端·sql·web安全·信息安全·渗透测试·漏洞