前端之CSS盒模型介绍
css盒模型
css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距);
1.content:
width:数值+单位; 主体内容的宽度
height:数值+单位; 主体内容的高度
2.padding(补白或填充):
(a)padding:10px; 设置一个值,代表上,下,左,右均为10px
(b)padding:20px 10px; 设置两个值,代表上下为20px,左右为10px
(c)padding:20px 10px 5px;设置3个值,代表上为20px,左右为10px,下为5px
(d)padding:20px 10px 5px 0;设置4个值,顺时针依次为:上20px,右10px,下5px,左为0
可以单独设置某一个方向的padding值
padding-left:20px;(left可更改为right,top,bottom)
注:I.padding 不允许设置负值
II.背景可以延伸到padding区域
III.当我们需要调整子元素在父元素中的位置关系时,padding给父元素加
IV.当给元素设置padding后,要在原来的宽高上减去设置的padding值,保证总宽高不变
3.border(边框)
a)边框类型
border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双线);
b)边框颜色
border-color:颜色值;
c)边框宽度
border-width:数值+单位; (常用)
border-width:thin|medium|thick;
d)边框简写方式
border:线型 宽度 颜色;
e)单独设置某一个方向的边框
border-top:5px solid gray;(top可更改为left,right,bottom)
注:I.背景可以延伸到border区域,当边框为实线时,背景会被遮挡
II.当给元素设置边框时,也会占据一定的宽度和高度,要在原来的宽高上减去设置的border值,保证总宽高不变
border-left-color:transparent; (transparent代表透明)
4.外间距(margin)
margin值设置方式同padding
注:a)背景不能延伸到margin区域(margin区域背景不可见)
b)margin可以设置负值
c) 当左右margin值设为auto时,可以使定宽块状元素水平居中显示
d)调整本元素与其他元素之间的位置关系时,给本元素添加margin值
标准盒模型的总宽度=width+左右padding+左右border+左右margin
标准盒模型的总高度=height+上下padding+上下border+上下margin
最新文章
- 菜鸟学Struts2——HelloWorld
- Java IO4:字符编码
- Winform调用系统的剪切,复制,粘贴文件功能
- loj 1032 数位dp
- Android --RatingBar的使用
- BZOJ4532: [BeiJing2014 WinterCamp] 珠链
- opencv笔记3:trackbar简单使用
- Linux kernel perf_swevent_init Local root Exploit
- IOS 创建一张有颜色的UIImage
- [android]android开发中的运行错误之:adb.exe
- 利用hibernate的session查询数据库,而且在jsp页面显示表内容的方法
- HDU - 2802 F(N) (周期)
- 第33章 密码学(Cryptography),密钥(Keys)和HTTPS - Identity Server 4 中文文档(v1.0.0)
- JavaScript BOM和DOM
- 一步一步写出java swing登录界面,以及输入的参数获取
- Linux或Windows上实现端口映射
- Hadoop + ZK + HBase 环境搭建
- SVN的基本原理 配置自动更新WEB服务器
- ras api win7 和 win xp 遍历时的不同
- 老齐python-基础4(元祖、字典、集合)
热门文章
- HihoCoder 1502 : 最大子矩阵 (双指针)
- liunx目录/etc下相关配置
- android手机各大分区详解
- hibernate学习二 基本用法
- SpringMVC数据绑定一(基本类型、数组和对象(简单对象、层级对象、多参数对象))
- C++ TUTORIAL - MEMORY ALLOCATION - 2016
- UVa 753 A Plug for UNIX (最大流)
- codeforces 813C The Tag Game 树+dfs追击问题
- liteos任务(二)
- 福建工程学院第十四届ACM程序设计大赛 - E - 外传:小晋逃生记