盒模型--边框

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框:

div{
    border:2px  solid  red;
}

上面是 border 代码的缩写形式,可以分开写:

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意:

1、border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

border-color:#888;//前面的井号不要忘掉。

3、border-width(边框宽度)中的宽度也可以设置为:

thin | medium | thick(但不是很常用),最常还是用象素(px)。

盒模型--填充

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码:

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码:

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px,左右一样为20px,可以这么写:

div{padding:10px 20px;}

盒模型--边界

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:

div{margin:20px 10px 15px 30px;}

也可以分开写:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的边界都为10px;可以这么写:

div{ margin:10px;}

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}

总结一下:padding和margin的区别,padding在边框里,margin在边框外。

盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如:

css代码:

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;
}

html代码:

<body>
   <div>文本内容</div>
</body>

元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型,如下图:

最新文章

  1. mysql学习之触发器
  2. mysql if exist坑
  3. tableview侧滑删除
  4. Filezilla无法确定拖放操作目标,由于shell未正确安装__解决办法
  5. MySQL 句柄数占用过多的解决方法
  6. 如何使用MVC编写Winform程序代码
  7. epoll中et+多线程模式中很重要的EPOLL_ONESHOT实验
  8. IOS 7 Study - UIActivityViewController(Presenting Sharing Options)
  9. bzoj2800
  10. 【调侃】IOC前世今生 工厂模式 反射 依赖倒置
  11. hdoj 5461 Largest Point
  12. HDU 5933 ArcSoft&#39;s Office Rearrangement 【模拟】(2016年中国大学生程序设计竞赛(杭州))
  13. Linux2.6内核--VFS层中和进程相关的数据结构
  14. Moving Acerage
  15. FreeRTOS——内存管理
  16. BZOJ3224/洛谷P3391 - 普通平衡树(Splay)
  17. Tornado 协程
  18. 主席树——求区间第k个不同的数字(向右密集hdu5919)
  19. asp.net mvc 根据浏览器判断,如果是微信浏览器则进行网页授权,否则直接访问
  20. Flask wtforms实现简单的登录注册

热门文章

  1. QM UML状态机建模实例之移植 cortex-m0
  2. 使用Netty绑定一个端口如何分辨出多种类型的DTU的注册包
  3. U盘启动笔记本无法安装Win7问题和解决
  4. Codeforces Round #367 (Div. 2) C. Hard problem(DP)
  5. shape中的属性大全
  6. C#使用 SQLite 数据库 开发的配置过程及基本操作类,实例程序:工商银行贵金属行情查看小工具
  7. angular4.0命令行汇总
  8. ExecuteReader()获得数据
  9. IOS 多文件上传 Java web端(后台) 使用List&lt;MultipartFile&gt; 接收出现的问题
  10. 学习windows编程 day4 之 设置画刷
  11. Linux 4.10.8 根文件系统制作(三)---制作yaffs文件系统
  12. 【C语言】两个指针(地址)相减
  13. Linux运维人员最常用 150 个命令汇总
  14. Alpha课堂展示(麻瓜制造者)
  15. 深入JAVA注解之属性注解
  16. as3 单例的不常见写法
  17. struts返回json数据
  18. 【LeetCode2】Add Two Numbers★★
  19. JSON toBean Timestamp To Date 时间戳转日期
  20. ADO连接数据库【msado15.dll】