前端基础 - CSS盒子模型

Arce

　　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>

[jQuery] 前端基础 - CSS盒子模型

相关帖子

教你使用HTML/CSS和Three.js的喷火龙小游戏

基于 HTML+CSS+JS 的石头剪刀布游戏

利用CSS换变文本选中后的颜色

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

好看的CSS剪裁GIF背景图片动画特效

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

Arce LV4