前端基础 - CSS盒子模型
程序员文章站
2022-03-29 22:45:35
...
CSS盒子模型及样式介绍
CSS中都有哪些样式：（主要指的是div）
就是选择器中的属性名
-
border:边框样式
border:边框的宽度 边框的样子 边框颜色;
单位是px
double:双线边框
英文单词red,blue
solid:实线边框 #RGB 比如 #FF0000 -
宽高
width:宽度 单位px
height:高度 单位px -
内容
color:内容的颜色 英文单词red,blue #RGB 比如 #FF0000
font-size:内容的文字大小 单位px -
background-color:设置标签的背景色
-
display: 转换样式, 把一个块级元素转成行内元素
值: block(转成块级元素) inline(转成行内元素) none(隐藏) -
float: 浮动,设置元素的浮动效果,让元素浮起来
值: left 漂起来向左 right 漂起来向右 -
clear: 清除元素两边的浮动效果
值both 清楚该元素左右两边的浮动效果
例子：
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 50px;
width: 50px;
border: solid red;
/*display: inline;*/
float: left;
margin-left: 10px;
margin-top: 10px;
}
#clear{
height: 0px;
width: 0px;
border: none;
margin: 0px;
clear: both;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div id="clear"></div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>