css 盒子模型
导读：css中把元素叫做盒子，设置对应的样式分别为：盒子的宽度（width）、盒子的高度（height）、盒子的边框（border）、盒子内的内容和边框之间的间距（padding）、盒子和盒子之间的间距（margin）。 设置宽高： width...
css中把元素叫做盒子，设置对应的样式分别为：盒子的宽度（width）、盒子的高度（height）、盒子的边框（border）、盒子内的内容和边框之间的间距（padding）、盒子和盒子之间的间距（margin）。
设置宽高：
width:200px;
/* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体的宽度 */
height:200px;
/* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体的高度 */
设置边框border：
设置一边的边框，如：顶部边框
border-top-color:red;
/* 设置顶部边框颜色为红色 */
border-top-width:10px;
/* 设置顶部边框粗细为10px */
border-top-style:solid;
/* 设置顶部边框的线为实线 */
/* 边框常用的线：solid实线、bashed虚线、dotted点线 */
css 盒子模型上面三句可以简写为一句：
border-top:10px solid red;
设置其他三个边的方法和上面一样，把上面的top换成left（左边）、right（右边）、bottom（底边）即可
四个边如果设置一样，可以将四个边合并成一句：
border:10px solid red;
设置内间距padding:
设置盒子四边的内间距，如：
padding-top:20px;
/* 设置顶部内间距 */
padding-left:30px;
/* 设置左边内间距 */
padding-right:40px;
/* 设置右边内间距 */
padding-bottom:50px;
/* 设置底部内间距 */
上面的设置可以简写，如：
padding:20px 40px 50px 30px;
/* 四个值按照顺时针方向，分别设置的是上 右 下 左，四个方向的内边距值 */
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding:20px 40px 50px;
/* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
paddinig:20px 40px;
/* 设置上下内边距为20px，左右内边距为40px */
padding:20px;
/* 设置四周内边距为20px */
设置外间距margin:
外边距的设置方法和padding的设置方法相同，将上面设置项中的’padding’换成’margin’就是外边距设置方法。
盒子模型的实际尺寸：
盒子的宽度：width + 左右border的值 + 左右padding的值
盒子的高度：height + 上下border的值 + 上下padding的值
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css 盒子模型
本文地址： https://pptw.com/jishu/663994.html