Css3盒子模型-css学习之旅(5)
2015-10-06 16:33
826 查看
主要内容:
盒子模型内边距,外边距,边框,外边距合并
主要包括:margin(外边距)padding(内边距) border(边框)centent(内容)
内边距:padding,paddingleft,paddingright,paddingtop,paddingbottom
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First html</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table border = "1"> <tr><td> 内边距 </td></tr> </table> </body> </html>
td{ padding: 100px; }
效果图
边框:1.可以创建出任何的边框并且应用于任何格式;2.border-style:定义了包括10种样式,包括none3.边框的单边框样式:border-top-style,border-bottom-style:border-style-right:border-left-style
同样还有border-width和border-color等属性 ,同样有top,bottom,和right和right四个属性
css3的行的边框属性:border-radius:边框圆角;box-shsdow:边框阴影;border-image:边框图片
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First html</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>css边框样式</p> </body> </html>
p{ border-radius: 10px; width:100px; background-color: aquamarine; border: 2px solid blue; }
效果图
外边距:接收任何单位,cm,px,百分数
属性值:margin以及top等四个方位的属性
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First html</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="mg">边框</div> </body> </html>
body{ margin: 0; } .mg{ margin:100px; width: 100px; height: 100px; background-color: brown; }
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 如何使用CSS3画出一个叮当猫
- 用VBScript写合并文本文件的脚本
- oracle列合并的实现方法
- 使用BAT一句话命令实现快速合并JS、CSS
- SQL 合并多行记录的方法总汇
- C#实现简单合并word文档的方法
- C#自适应合并文件的方法