一键建站平台,群辉 wordpress 外网,企业微网站与手机微信号,湖州注册公司盒子模型#xff08;Box Model#xff09;#xff1a;
指把HTML页面中的元素看作是一个矩形的盒子#xff0c;也称容器#xff0c;这个盒子从内到外由#xff1a;元素的内容#xff08;content#xff09;、内边距#xff08;padding#xff09;、边框#xff08;b…盒子模型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边框的颜色三者缺一不可显示其连写为borderborder-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 cellspacing0trtd苹果/tdtd苹果/td/tr/tableborder-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;}/stylediv classfather/divdiv classbrother/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;}/stylediv classfatherdiv classson/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;}提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者 删除。 笔者苦海
