![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：总结不错
Collection
Collection
CSS 盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成.
<style>.hezi {width: 300px; /*盒子宽度*/height: 300px; /*盒子高度*/border: 5px solid red/*盒子边框样式和颜色*/}</style><div class="hezi">...</div>
效果:
边框可以可视和透明设置粗细、样式、颜色,也可以单独为每一条边单独设置样式.
<style>.hezi1 {width: 600px; /*盒子宽度*/height: 550px; /*盒子高度*/border: 5px solid green; /*盒子边框样式和颜色*/background-color: tan; /*盒子背景颜色*/padding: 20px 10px 15px 40px; /*盒子内边距*/background-clip: content-box;/*背景绘制在内容方框内*/}</style></head><body><div class="hezi1"></div></body>
效果:
padding:10px 20px 10px 20pxpadding:10px 20px 10pxpadding:10px 20pxpadding:10px
当一个属性值时由, 四个方向都一样来排列.
内边距就是内容和盒子之间的距离,是透明的,只能设置宽度, 不能设置样式, 颜色.
<style>.one {width: 300px; /*盒子宽度*/height: 280px; /*盒子高度*/border: 2px solid blue; /*盒子的边框粗细、样式和颜色*/margin-bottom: 20px; /*向下边框外的距离*/}.two {width: 280px; /*盒子宽度*/height: 300px; /*盒子高度*/border: 1px solid green; /*盒子的边框样式和颜色*/}</style></head><body><div class="one"></div><div class="two"></div>
效果图:
外边距和内边距padding一样可以设置4个属性值
margin:10px 20px 10px 20pxmargin:10px 20px 10pxmargin:10px 20pxmargin:10px
当一个属性值时由, 四个方向都一样来排列.
外边距就是边框以外的距离,,是透明的,只能设置宽度, 不能设置样式, 颜色.
em是相对长度单位,意思是长度不是定死了的，更适用于响应式布局,用在 padding,margin, border-radius,用 em 比较合适
案例:
<style>p {width: 600px; /*盒子宽度*/height: 550px; /*盒子高度*/border: 5px solid green; /*盒子边框样式和颜色*/background-color: tan; /*盒子背景颜色*/font-size: 16px; /*系统默认 1em=16px*/font-size: 1.5em; /*此时我定义1em=24px 24px÷16px=1.5em*/padding: 1em; /*那么此时盒子内边距1em=24px*/background-clip: content-box; /*背景绘制在内容方框内*/}</style></head><body><p></p></body>
效果:
总结:em单位是由浏览器基于我在页面中定义的字体大小计算得到的像素值,只要我定义好em值,那么我内边距或者外边距就可以自动根据字体大小自动调整.
rem单位是相对于字体大小的html元素，也称为根元素,rem 是相对 html 根元素字体大小的倍数。
案例:
<style>:root {font-size: 20px; /*定义字体大小*/}p {font-size: 1rem;/*那么1rem=20px*/}</style></head><body><p>你好</p></body>
