盒子模型
来源:互联网 发布:女装品牌 知乎 编辑:程序博客网 时间:2024/05/16 16:21
定义:CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
网页设计中的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
盒子的三种定位形式:
在标准流下定位
在浮动属性下定位
在定位属性下定位
.abc { /* 示例1 */ color: #fff; background-color: #7BAEEF; height: 26px; padding-left: 10px; font-size: 14px;#bcd { /* 示例2 */ width: 180px; height: 382px; margin-left:5px; margin-top:5px; margin-right:5px; margin-bottom: 10px;
属性设置
1)border
border的属性主要有三个,color(颜色)、width(粗细)和style(样式)。在使用CSS设置边框时,可以分别使用border-width, border-color 和border-style来设置。
border-width设置粗细程度:thin(细)、 medium (适中)、thick(粗)和 <length>(具体数值)。
style设置边框风格:none(无格式),hidden(隐藏),dotted(点线式)等。
color颜色设置:border-color: red。
2)padding
用于控制内容与边距间的距离。
Padding可以有最多4个属性值。
1个:上下左右边框属性值。
2个:第一个是上下边框属性值,第二个是左右边框属性值。
3个:第一个是上边框属性值,第二个是左右边框属性值,第三个是下边框属性值。
4个:顺时针,上右下左边框属性值。
注意:padding可以设置1、2、3或4个属性
3)margin
折叠margin是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框或使用清除分离方法)结合表示为一个单独的margin。
0 0
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- Gradle学习系列之六——使用Java Plugin
- 我的面经
- Gradle学习系列之七——依赖管理
- VTK读取原始数据(裸数据)和序列图像
- 用户注册,重复用户名时的处理
- 盒子模型
- 设计模式学习--工厂方法模式
- Gradle学习系列之八——构建多个Project
- Android 开发环境下载地址 -- 百度网盘 adt-bundle android-studio sdk adt 下载
- Gradle学习系列之九——自定义Task类型
- 【机房重构】——实体类(Model)的奇葩说
- 【机房重构个人版】上下机与职责链
- hdu5672 String(尺取法)
- 指针之示例大集合