Css3盒子模型-css学习之旅(5)
来源:互联网 发布:淘宝小二删除中差评 编辑:程序博客网 时间:2024/06/07 00:33
主要内容:
盒子模型内边距,外边距,边框,外边距合并
主要包括: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;}
0 0
- Css3盒子模型-css学习之旅(5)
- CSS学习之:盒子模型
- HTML5:学习(5)CSS盒子模型
- 初学者之CSS学习(六)盒子模型
- CSS学习笔记之<盒子模型>
- css学习之盒子模型应用
- CSS之盒子模型
- CSS之盒子模型
- CSS之盒子模型
- css之盒子模型
- css之盒子模型
- css3-盒子模型之边框
- CSS自学笔记(10):CSS3盒子模型
- css盒子模型之边框(border)
- CSS之盒子(Box)模型
- CSS之盒子模型(Box Model)
- css(盒子模型)
- CSS学习笔记----盒子模型
- MacOSX Cocos2d-x 配置Android Studio以及Xcode开发环境
- Thinkphp 动态查询 getBy 与 getFieldBy
- 模拟水的方法
- Swift中类的属性
- 常见前端面试题及答案
- Css3盒子模型-css学习之旅(5)
- 【IOS 开发】Objective-C Foundation 框架 -- 字符串 | 日期 | 对象复制 | NSArray | NSSet | NSDictionary | 谓词
- [深入理解Java虚拟机]第四章 虚拟机性能监控与故障处理工具
- 【IOS 开发学习总结-OC-33】★★objective-c之文件 I/O概述+NSData/NSMutableData
- 2D Perlin噪点
- java关键字 instanceOf
- java写入MySQL乱码或?解决
- python 网络编程(一):socket 模块
- C#学习日记15----引用类型 之 string类型用法总结