css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度。min-height设定最小高度
一个盒子包括外边距、边框、内边距和实际内容
Margin(外边距):清除边框外的区域,外边距是透明的。
Border(边框):围绕在内边距和外边距的边框。
Padding(内边距):清除内容周围的区域,内边距是透明的。
Content(内容):盒子的内容,显示文本和图像。
例如下面一个例子
<!DOCTYPE html> <html> ······<style>div {background-color: lightgrey;width: 300px;border: 25px solid green;padding: 25px;margin: 25px;}</style> ······<h2>盒子模型演示</h2><p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p><div>这里是盒子内的实际内容,背景为灰色。有 25px 内间距,25px 外间距、25px 绿色边框。</div> ······ </html>
显示结果如下
上述的width实际是指content的width
因此整个盒子的宽度为width+外边距*2+边框*2+内边距*2
css边框border属性
1.边框样式border-style
默认值为none无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框,两个边框的宽度和 border-width 的值相同
2.边框宽度border-width,在使用border-width时必须同时指定边框样式
可以使用具体宽度值如2px,或者thick、middle(默认)、thin三个关键字指定
3.边框颜色border-color,在使用border-color时也必须同时指定边框样式
上述三种边框的属性可以集合在一起用border表示,顺序为width、sytle、color,例如border:5px solid red;
对于上述边框的三个属性,每一个属性又可以单独对上top、下bottom、左left、右right设置,也可以对上top、下bottom、左left、右right一次性设置上述三种属性
以颜色为例:border-top-color、border-bottom-color、border-left-color、border-right-color分别表示上边框、下边框、左边框、右边框的颜色
即border-color有1-4个属性值
border-color:red 表示所有边框为红色
border-color:red yellow 表示上下边框是红色、左右边框是黄色
border-color:red yellow green 表示上边框是红色,左右边框是黄色,下边框是绿色
border-color:red yellow green blue 表示上、右、下、左边框分别是红、黄、绿、蓝色
而border-top:2px solid pink表示一次性设置上边框的宽度为2px、实线边框、粉色
css外边距margin属性
margin有margin-top、margin-bottom、margin-left、margin-right四个属性,具体使用方式类似border
默认为0,auto表示浏览器自动计算,也可以使用px或者em表示
边界塌陷或重叠
对于同一级的盒子,上下边距默认为0,如果上和下同时设置margin-bottom和margin-top,则会取较大值显示,左右边距默认有一定的距离。
对于包含的盒子,如果上一级盒子没有border、padding、或者实际内容,那么下一级的盒子在设置margin时会一直向上级盒子寻找,直到找到某个包含border、padding、或者实际内容的盒子,然后以这个盒子为参照进行margin显示。
css填充padding属性
padding有padding-top、padding-bottom、padding-left、padding-right四个属性,具体使用方式类似border
默认为0,也可以使用px或者em表示
css轮廓outline属性
outline是绘制于元素周围的线,位于边框边缘的外围,可起到突出元素的作用
outline属性有outline-color、outline-style、outline-width三种,也可直接合在一起使用outline表示
例如p {width:300px;border:1px solid red;text-align:center;outline:green dotted thick;},效果图如下
转载于:https://www.cnblogs.com/Forever77/p/10204535.html
css盒子模型、边框border、外边距margin、填充padding、轮廓outline相关推荐
- html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
- CSS盒子模型(border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例)
1. 网页布局的本质 首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步 就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
- CSS 之盒子模型——边框、内边距、外边距
使用width来设置盒子内容区的宽度 使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定 ...
- CSS 盒子模型(border、padding、margin)
CSS盒子模型 Css盒子模型本质上是一个盒子,封装周围的html元素,他包括边框.内容.外边距.内边距. 1.边框 边框(border)可以设置元素的边框,他由三部分组成:边框宽度(粗细).边框样式 ...
- 前端:CSS/13/HTML引入CSS的方法,CSS表格属性,盒子模型,上下外边距合并
HTML引入CSS的方法 1,嵌入式 通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
- 盒子模型与内外边距设置
盒子模型 (1)box-sizing:content-box: 盒子模型默认值,元素应用该模型时,计算方式为 外边距+边框宽度+内边距+内容区域(margin , border-width ,padd ...
- CSS 盒子模型(Box model)中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
- (盒子模型常见问题)外边距合并问题,嵌套盒子边距塌陷问题解决
1.兄弟盒子边距合并. <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
- CSS盒子模型的border:一设上去是4个,也是上右下左规则
再来谈下边 有人问,前面设置了border,后面又设置了border,怎么办? 写在后面的覆盖前面 1.这就是border-width,一设上去就是4个 后面的优先级比前面高,虽然前面1个像素,但是后 ...
- 前端基础之CSS盒子模型
目录 长度单位 像素 百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型 内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
最新文章
- Android模拟器emulator-arm.exe出现错误
- Linux 错误 Permission denied问题
- Mybatis-generator逆向生成运行正常,但没有生成任何文件
- HDUOJ---1879 继续畅通工程
- pyTorch实现C3D模型的视频行为识别实践
- springboot mysql事物_在Spring Boot中使用数据库事务
- 被卡性能的时候要care数据类型(洛谷P5594TLE+RE的经历,Java语言描述)
- 设置网页打开默认全屏_微信公众号里的视频不能进行全屏播放的解决方法
- fiddler之请求过滤(Filters)
- linux订阅软件包,安装 Manjaro Linux 后必做的 6 件事 | Linux 中国
- HTML页面用ajax方式传递表单数据给后台,数据库插入信息后将json对象传回前端JS处理(前后台交互)
- python中怎么替换字母_python去除拼音声调字母,替换为字母的方法
- http 性能测试. Apache ab 使用.
- Android逆向之静态分析
- java为什么要用数据源_【Java】就配置了一个数据源,为什么提示 there is more than one bean of “DataSource” type...
- 百度网盘无提取码分享文件方法
- matlab中linspace函数
- uni-app 框架超详细新手入门
- php逆波兰表达式,PHP实现逆波兰式 - 计算工资时用
- 写首小诗表达我的孤独,独自一个人熬着那些只属于我一个人的夜
热门文章
- [ CodeVS冲杯之路 ] P1044
- 成员资格、授权和安全性(一)
- angularJS学习笔记一
- utf编码在线转换工具
- mysql存储base64位用什么类型_了解什么是存储引擎引发的MySQL面试3连问
- vasp安装包_【问题集锦】VASPamp;MedeA 第十一期
- listview 打开文件 c#_.NET CORE(C#) WPF简单菜单MVVM绑定
- mysql 浏览器插件_Chrome浏览器BlazeMeter插件安装图解
- C++知识点44——类的继承概述
- vue右键复制粘贴功能_这可能是最高效的复制粘贴方法