前端学习Day10 CSS盒子属性（附练习版）
一、盒子模型
(一).盒模型的属性
在web页面中，“盒子”的结构包括厚度、边距、填充等元素，引申到CSS中，就是border、margin和padding。border-margin-padding模型是一个及其通用的描述盒子布局形式的方法。对于任何盒子，都可以分别设定4条边的padding、border和maegin，实现各种各样的排版效果。
内容区（content）+内边距（padding）+边框（border）+外边距（margin）组成。
| 属性 | 说明 |
| border-width | 所有边框宽度 |
| border-top | 上边框宽度 |
| border-right | 右边框宽度 |
| border-bottom | 下边框宽度 |
| border-left | 左边框宽度 |
| border-color | 边框颜色 |
| border-style | 边框样式 |
| border-radius | 圆角边框 |
①内容区：宽 width ，高 height
块级元素可直接通过CSS设置宽高，但是行内元素默认情况下不可以。
⚠️：如果要设置行内元素的宽高，需在 CSS 代码中添加 display：block；例：
<style>
#ins1{
width: 300px;
height: 20px;
background-color: rgb(116, 202, 236);
display:block; /* 让行内元素变成块元素,进而可以设置行高*/
margin: 60px;
}
</style>
</head>
<body>
<ins id="ins1" >我是下划线文本</ins>
</body>运行结果：
②所有边框宽度
border-width：medium | thin | thick | length
medium 为默认宽度，thin 为小于默认宽度，thick 为大于默认宽度。Length 是由数字和单位标识符组成的长度值,不能为负值。
⚠️：要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为absolute。如果 border-style 设置为 none，本属性将失去作用。
③border-style：none | hidden | dotted | dashed | solid | double | groove | rinset loutset
| 参数 | 说明 |
| none | 无边框。与任何指定的 border-width 值无关 |
| dotted | 边框为点线 |
| dashed | 边框为短线 |
| solid | 边框为实线 |
| double | 边框为双线。两条单线与其间隔的和等于指定的border-width值 |
| groove | 根据 border-color 的值画 3D 凹槽 |
| ridge | 根据 border-color 的值画菱形边框 |
| inse | t根据 border-color 的值画 3D 凹边 |
| outse | t根据 border-color 的值画 3D凸边 |
③boder-radius：length {1，4}
length 由浮点数字和单位标识符组成的长度值，不允许负值。
举个栗子：
<head>
<style>
#img1{
background-color:rgb(218, 142, 92);
/* 设置盒子内容物的宽高*/
width: 300px;
height: 300px;
/* 盒子边框的厚度 颜色 样式 */
border: 5px rgb(37, 49, 49) solid;
/* 设置盒子边框四角弧度（单独控制单个角弧度直接写就行（顺时针：左上角，右上角） */
/* border-radius: 10px; */
border-radius: 0px 0px 30px 0px;
/* 内边距 */
padding: 20px;
/* 外边距 */
/* margin: 40px; */
margin-bottom:50px;
margin-left: 17px;
}
</style>
</head>
<body>
<img src="./苹果.jpg" id="img1">
</body>运行结果：
练习：
先看图自己敲出来哦，不懂再看代码~
<head>
<style>
#img1{
background-color:rgb(218, 142, 92);
/* 设置盒子内容物的宽高*/
width: 100px;
height: 100px;
/* 盒子边框的厚度 颜色 样式 */
border: 5px rgb(37, 49, 49) solid;
/* 设置盒子边框四角弧度（单独控制单个角弧度直接写就行（顺时针：左上角，右上角） */
border-radius: 10px;
/* 内边距 */
padding: 20px;
/* 外边距 */
margin-bottom:50px;
margin-left: 17px;
}
#img2{
background-color:rgb(218, 142, 92);
width: 200px;
height: 200px;
border: 5px rgb(37, 49, 49) solid;
border-radius: 10px 60px 10px 10px;
padding: 20px;
margin-bottom:50px;
margin-left: 17px;
}
#img3{
background-color:rgb(218, 142, 92);
width: 300px;
height: 300px;
border: 5px rgb(37, 49, 49) solid;
border-radius: 60px 10px 60px 10px;
padding: 20px;
margin-bottom:50px;
margin-left: 17px;
}
#b1{
width: 500px;
height: 20px;
background-color:gray;
/* 让行内元素变成块元素,进而可以设置行高*/
display:block;
margin-bottom:50px;
margin-top: 25px;
border: 3px rgb(27, 82, 26) solid;
}
#ins1{
width: 500px;
height: 30px;
background-color:gray;
/* 让行内元素变成块元素,进而可以设置行高*/
display:block;
margin-bottom:50px;
margin-left: 10px;
margin-top: 25px;
border: 3px rgb(60, 74, 136) solid;
padding-left: 30px;
}
</style>
</head>
<body>
<b id="b1">这个课堂练习禁止使用br和hr标签：加粗文本</b>
<ins id="ins1" >这个课堂练习禁止使用br和hr标签：下划线文本</ins>
<img src="./苹果.jpg" id="img1">
<img src="./苹果.jpg" id="img2">
<img src="./苹果.jpg" id="img3">
</body>原文地址：https://blog.csdn.net/As977_/article/details/143414709
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！