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>
