盒子模型
描述
- 每一个元素都可以叫做是盒子模型
-
盒子模型的组成
- 内容区 - 元素中内容(文本、图片、等等)
- 内边距 - 内容区到边框的距离
- 边距 - 内容区的边界
- 外边距 - 盒子与盒子之间的距离
border属性
- 表示设置元素的边框
-
border属性是简写属性,可以分为
- border-width - 表示边框的宽度
- border-style - 表示边框的样式
- border-color - 表示边框的颜色
- 简写顺序: 边框宽度 边框样式 边框颜色
-
border属性也可以按照上、右、下、左四个方向进行划分来分别设置
- 分别设置边框时,设置的顺序固定不变的:上、右、下、左
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div {
width: 100px;
height: 100px;
background-color: blueviolet;
/*
border属性 - 表示设置边框
* 简写属性,可以分为
* border-width - 表示边框的宽度
* border-style - 表示边框的样式
* border-color - 表示边框的颜色
* 简写顺序: 边框宽度 边框样式 边框颜色
*/
border: 10px solid black;
/* border属性也可分开进行设置 */
border-width: 10px;
border-style: solid;
border-color: black;
/*
border属性也可以按照上、右、下、左四个方向进行划分来分别设置
* border-top - 表示设置上边框
* border-right - 表示设置右边框
* border-bottom - 表示设置下边框
* border-left - 表示设置左边框
*/
border-top: 10px solid black;
border-right: 15px double gray;
border-bottom: 20px dashed green;
border-left: 25px dotted darkgreen;
/*
在设置边框时根据属性值个数不同,设置的效果也不同
* 只有一个值时,四个方向同时设置
* 再有两个值时,第一个值表示上下、第二个值表示左右
* 再有三个值时,第一个值表示上、第二个值表示左右、第三个值表示下
* 再有四个值时,第一个值表示上、第二个值表示右、第三个值表示下、第四个值表示左
* 在设置边框时,设置的顺序固定不变的:上、右、下、左
*/
border-width: 10px 20px 30px 40px;
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<div></div>
</body>
border-radius属性
- 表示设置元素边框的圆角
- 属性值表示为圆的半径
- 当属性值等于元素宽度的一半时,会得到一个圆形
- 也可以写多个属性值,顺序为: 左上角 右上角 右下角 左下角
<head>
<meta charset="UTF-8">
<title>边框的圆角</title>
<style>