提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

前端基础 - CSS盒子模型

基础前端CSS 模型 盒子
2023-09-11 14:15:41 时间

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>

相关文章