CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型

盒子模型(Box Model):

指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
在这里插入图片描述

内容content:

指文本等内容的大小,width和height设置内容的大小,并非包含边框border和内边距padding的值,因此设置其它两项,容器的实际大小会改变。设置其它两项后,经常会出现盒子被撑开的问题,其中一种解决方法就是修改width和height,结合下面内边距设置属性值的个数为1个可得:容器实际大小 = 容器未设置其他两项前的大小 - 2 * (padding + border),注意:设置margin会改变父级元素的盒子大小。

内边距padding:

指内容(content)和边框(border)之间的距离。当给一个值时设置的是上、下、左、右四个方向的内边距,两个值时设置的是上下、左右方向的内边距,三个值时设置的是上、左右、下方向的内边距,四个值时设置的是上、右、下、左方向的内边距。速记:从上开始顺时针对应给值,没有值的边用对边的值补,当然可以分开写,如:

	padding-left: 1px;

边框border:

指内边距(padding)和外边距(margin)之间的距离,由border-width边框宽度、border-style边框样式、border-color边框的颜色,三者缺一不可显示,其连写为:border:border-width border-style border-color

	div {border: 16px solid red;}

border-width:

边框的宽度一般给像素,当然像em等也是支持的。

border-style:

边框的样式一般设置为solid实线,其值还有:none无边框、hidden隐藏边框(兼容差)、dotted点线(兼容问题)、dashed虚线、double双实线、groove凹槽边框、ridge菱形边框、inset凹边、outset凸边等

border-color:

边框的颜色取值和color的取值一样。

边框拆分:

border可以拆分为上下左右四个边框:border-top上边框、border-bottom下边框、border-left左边框、border-right右边框,拆分后其属性设置和border一样。

	div {border-bottom: 1px solid yellow;}div {border-bottom-width: 16px;border-bottom-style: dotted;border-bottom-color: pink;}

border-collapse合并表格相邻边框:

解决表格table中cellspacing=“0” 外边距设置为0后相邻边框叠加加粗问题,这个属性必须设置在table中才有效。

	table {border-collapse:collapse;/* 当去掉这个属性后,相邻边框叠加变粗 */}td{border: 3px solid black;}<table cellspacing="0"><tr><td>苹果</td><td>苹果</td></tr></table>

border-radius:

设置边框四角的弧度,简称圆角边框,其值和border-width设置类似,这个值可以可以使用一组参数设置,中间用反斜杠/隔开,反斜杠前面控制的是X轴,反斜杠后面控制的是Y轴,反斜杠只能出现一次(20px/40px,一般前后值相同时是省略的);可以设置为1~4个值,设置多个值时,起始是从左上角开始顺时针分别设置,没有值的角使用其对角的值;也可以给每条分别设置,需要注意的是需要先写上下后写左右属性:

	div {border-radius: 50% 20% 10%;/* 一个圆角值为50%的圆角是一个圆 */}div {border-top-right-radius: 20px/40px;}

外边距margin:

设置盒子以外的距离,这个距离不能放其他内容,margin可拆分为margin-top上边距、margin-bottom下边距、margin-left左边距、margin-right右边距,当为margin时也可以设置多个属性值,每个属性值对应的方向和border一样,都是从上面开始,顺时针旋转分别给值,没有的用对边值补。

实现盒子水平居中的方法:必须是块级元素,必须设置宽度

	div {/* 第一种分开写: */margin-left: auto;margin-right: auto;}div {/* 第二种不分开: */margin: auto;/* 或者使用margin:0 auto; */}

清除默认边距:

浏览器默认有自己的padding,元素有自己的默认margin,此时为了更好的控制布局,可以清除这些默认的值:

	* {margin: 0;padding: 0;}

注意:行内元素没有上下外边距,只有左右外边距,因此设置垂直方向的margin是不起作用的。

垂直方向外边距合并问题:

如果给两个盒子的相邻边分别设置margin,此时这两个盒子之间的距离是其中设置的margin较大的盒子的margin值,如box1的margin-bottom设置为20px,box2的margin-top设置为50px,则它们之间的外边距是50px,实际开发中只设置其中一个外边距即可。

	<style>.father {width: 400px;height: 400px;background-color:aqua;margin-bottom: 100px;}.brother {width: 400px;height: 400px;background-color:rgb(241, 143, 13);margin-top:50px;}</style><div class="father"></div><div class="brother"></div>

嵌套盒子中垂直外边距塌陷问题:

当两个盒子嵌套在一起时,如果给里面的盒子一个margin-top,此时里面的盒子不会相对于外面的盒子向下移动,而是内外盒子保持相对静止向下移动,避免这个问题的方法是给父级元素加border或者padding,但是父级盒子会被撑开,此时使用overflow:hidden可以不被撑开父级盒子而解决盒子塌陷问题,overflow后面会详细介绍,水平方向不会出现这种情况。

	<style>.father {width: 400px;height: 400px;background-color:aqua;border: 1px solid transparent;/* padding: 1px; 给padding也可以解决这个问题 *//* overflow: hidden; 推荐使用这个解决盒子塌陷问题 */}.son {width: 200px;height: 200px;background-color:rgb(241, 143, 13);margin-top:50px;margin-left:30px;}</style><div class="father"><div class="son"></div></div>

标准盒模型:

盒子设置宽高后,再去设置padding、border时, 此时盒子的实际大小会变大。

怪异盒模型:

盒子设置宽高后,再去设置padding、border时,此时盒子不会被撑开,它会挤压内容区(content),开启怪异盒模型的方法:box-sizing:border-box

	div {box-sizing: border-box;/开启怪异盒模型,解决给定宽高后再去设置padding和border时盒子被撑开问题/}

盒子阴影box-shadow:

给一个盒子加上阴影效果,其属性值分别为:box-shadow: h-shadow水平阴影,必选 v-shadow垂直阴影,必选 blur模糊距离 spread阴影尺寸 color阴影颜色 inset内/外阴影,默认是外阴影不用写,当需要为内阴影时在最后加上inset即可。

	div {box-shadow: 2px 2px 3px 4px pink inset;}

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575431.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

servlet/filter/listener/interceptor区别与联系(转)

由于最近两个月工作比较清闲&#xff0c;个人也比较“上进”&#xff0c;利用工作空余时间&#xff0c;也继续学习了一下&#xff0c;某天突然想起struts2和struts1的区别的时候&#xff0c;发现为什么struts1要用servlet&#xff0c;而struts2要用filter呢&#xff1f;一时又发…

Eclipse和IDEA 简单对比说明

Eclipse和IDEA Eclipse 当下最流行的IDE&#xff08;集成开发环境&#xff09;当属eclipse和idea莫属&#xff0c;不少新手都在问这两个ide哪个更好&#xff0c;今天给大家说一下自己这些年来使用这两款开发环境的心得。 一般情况下&#xff0c;问这个问题大多是新手&#xff0…

CSS中文档流之普通流,浮动及定位、浮动特性及清除浮动的方式、定位模式,子绝父相搭配定位方式、z-index层级

文档流&#xff1a; 普通流&#xff08;normal flow&#xff09;&#xff1a; 字面意思是普通流或者标准流&#xff0c;也就是常说的文档流&#xff0c;指网页内标签正常是从上到下&#xff0c;从左到右排列的意思&#xff0c;css的定位机制有3种&#xff1a;普通流&#xff…

VScode中常用element语法

Element语法&#xff1a; 熟练掌握element语法可以大大提高开发效率&#xff0c;建议在平时练习时留意element语法&#xff0c;下面是常用VScode中element语法&#xff1a; 1、快速生成HTML骨架&#xff1a;!Enter或Tab键 2、快速生成带有id或者class名的标签&#xff1a;标签…

jQuery Tools:Web开发必备的 jQuery UI 库

基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库&#xff0c;包含网站最常用的Tabs&#xff08;选项卡&#xff09;、Tooltip&#xff08;信息提示&#xff09;、Overlay&#xff08;遮罩、弹窗&#xff09;、Scrollable&#xff08;滚动控制&#xff09;、Form Validat…

控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析

元素的显示与隐藏&#xff1a; 常见控制元素的显示和隐藏的属性有display、visibility、overflow&#xff0c;需要清楚的理解三者之间的区别。 display显示&#xff1a; 当值为none时为销毁对象&#xff0c;不保留原位置&#xff0c;当值为block时为生成对象。 visibility可…

html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制

Canvas容器: canvas标签用来定义图像的容器&#xff0c;必须配合脚本来绘制图像&#xff0c;canvas也运用于游戏开发。注意&#xff1a;canvas绘制图时会出现线条模糊情况&#xff0c;这是因为显示屏像素和canvas中定义的一个点不完全重合&#xff08;相差0.5&#xff09;导致…

MySQL INFORMATION_SCHEMA 使用

一、INFORMATION_SCHEMA介绍 第一个查询看看库里有多少个表&#xff0c;表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名&#xff0c;数据库的表&#xff0c;表栏的数据类型与访问权限等。再简单点…

mrql初级教程-使用(er)

最近使用mrql做xml文件解析&#xff0c;使用xpath来进行判断使用的方法如下&#xff0c;其中t.mrql文件如下&#xff1a;v args[1];store ty:source(xml,args[0],{"page"},xpath(.[idID6]/place));ty;执行下面的命令mrql -local t.mrql hdfs://183.175.12.220:9010/u…

web Worker简介、web Worker报错分析、作用

web Worker&#xff1a; web Worker是运行在后台的javascript&#xff0c;不会影响性能&#xff0c;常用于高耗费CPU的任务&#xff0c;必须部署到线上才可以正常使用&#xff0c;这里有三个方法比较重要&#xff0c;需要注意&#xff1a; postMessage(),发送消息&#xff0c…

SSE事件作用,错误分析

Server-Sent&#xff08;SSE&#xff09;&#xff1a; server sent用于自动接收服务器更新&#xff0c;当服务器发生数据更新时&#xff0c;此事件将自动执行来更新页面数据&#xff0c;常用于博文、股价等不断变化的项目中。下面将简单介绍SSE中三个常用事件&#xff1a; on…

css3盒模型、过渡、转换介绍

CSS3中盒模型&#xff1a; 前面CSS中学到的盒子模型给padding、border会撑开盒子的大小&#xff0c;实际大小要通过计算才能得到&#xff0c;为了解决这个问题&#xff0c;CSS3推出了box-sizing属性来解决此问题&#xff0c;当box-sizing的属性值为border-box时&#xff0c;无…

css3中animation动画、浏览器私有前缀、文字阴影、滤镜

animation动画&#xff1a; 可以设置多个节点来控制一个或 一组动画&#xff0c;动画可以实现更多变化&#xff0c;更多控制&#xff0c;连续自动播放等效果。动画的使用分两步&#xff1a;1、定义动画 2、调用动画&#xff08;调用必须写调用名称和持续时间)&#xff0c;其属…

ASP.NET 页生命周期

参考&#xff1a;http://msdn.microsoft.com/zh-cn/library/ms178472(vvs.100).aspx转载于:https://www.cnblogs.com/pengpenghappy/p/3778721.html

计算机基础简介、编程语言、翻译器、数据储存

计算机基础&#xff1a; 编程语言&#xff1a; 编程语言分机器语言、汇编语言、高级语言&#xff0c;机器语言只有计算机本身认识&#xff0c;是二进制的&#xff1b;汇编语言是较低层的指令式语言&#xff0c;有很多指令单词发出命令&#xff0c;程序员可以认识&#xff0c;…

IE8“开发人员工具”(下)

浏览器模式 说白了&#xff0c;就是让用户选择当前页面用何种IE版本去渲染。 文本模式 说起“文本模式”这个名词&#xff0c;这又要回到渲染页面的3种模式了&#xff1a;诡异模式&#xff08;Quirks mode&#xff0c;也有翻译为兼容模式、怪异模式的&#xff09;&#xff0c;标…

javascript历史、作用、三大组成、javascript代码书写位置、注意事项、变量

JavaScript简介 JavaScript历史&#xff1a; JavaScript是一门解释型、动态类型、基于对象的脚本语言(不需要编译&#xff0c;直接执行&#xff0c;与之相对的是编译型语言)&#xff0c;由美国网景公司的布兰登艾奇发明&#xff0c;起初称LiveScript&#xff0c;其简称js。 …

javascript中基本包装、算数运算符、递增递减运算符、赋值运算符、比较运算符、逻辑运算符、运算符优先级

基本包装类型&#xff1a; 指基本类型的数据变量通过调用属性或者方法包装成了复杂类型&#xff0c;这个变量也称为基本包装类型对象 <script>var str hello;str str.replace(ll, ee);console.log(str); //heeeo//通过基本包装&#xff0c;无论Boolean对象中传入true还…

流程控制介绍,顺序结构、分支结构、循环结构、Promise对象、throw语句、break和continue关键字

流程控制 流程控制&#xff1a;指代码的执行顺序&#xff0c;有三种方式&#xff1a;顺序结构、分支结构、循环结构 顺序结构&#xff1a; 代码从上到下&#xff0c;从左到右的执行顺序。 分支语句&#xff1a; if语句、if-else语句、if-else if-else语句、switch-case语…

楼宇对讲门铃的芯片选型分析

目前很多的高层住宅都使用了对讲门铃了&#xff0c;在频繁使用中&#xff0c;门铃会出现的越来越多种类&#xff0c;下面我就简单的介绍会有用到的几款芯片. 语音通话芯片&#xff1a;D34018,D34118,D5020,D31101; D34018 单片电话机通话电路&#xff0c;合并了必 需的放大器…