CSS 盒子模型
来源:互联网 发布:哈萨克歌曲软件baigie 编辑:程序博客网 时间:2024/06/05 21:05
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。
因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
内容:(content)盒子里面的东西;
填充:(padding)怕盒子的内嵌泡沫;
div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px;}
可以简写为{ padding: 20px 10px 15px 30px;}(顺时针 上 右 下 左)
上下一致 左右一致:{padding:20px 20px;}
若四方填充为相同的格式{padding:20px;}
边框:(border)盒子本身
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)
li{ border-bottom:1px dotted #ccc; width:200px; height:30px;}
可以简写为{ border: style color width; }(不计顺序)
边界:(margin)盒子的叠放边界
在网页上内容常指文字、图片等元素,但也可以是小盒子(div嵌套)
阅读全文
1 0
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- css盒子模型
- CSS盒子模型介绍
- CSS+DIV 盒子模型
- CSS盒子模型
- CSS 盒子模型
- CSS盒子模型
- CSS盒子模型详解 .
- css中的盒子模型
- hihoCoder 二进制小数 BigDecimal使用
- 网络基础TCP/IP通信协议
- hdu1584 蜘蛛牌dfs
- 634. Find the Derangement of An Array
- 组合问题的算法实现
- CSS 盒子模型
- 【MyBatis学习04】mapper代理方法开发dao
- 数据结构(Java)--双链表
- java种复制文件的N种方法
- 教你如何使用automake生成Makefile文件
- 【LeetCode】Integer to English Words
- Head First设计模式第二章——观察者模式
- 【Linux】权限问题:su和sudo
- HDU 1028 (母函数或者dp)