CSS--盒子模型(border margin padding)
2018-08-24 14:40
501 查看
padding:填充 是内容到边的距离
border:边框 是边的粗细
margin:边界 是控件到控件的距离
注意:都可以控制4个方向(上,右,下,左)
- 1个值:(上右下左)
- 2个值:(上下,左右)
- 3个值:(上,左右,下)
- 4个值:(上,右,下,左)
<style>
.a
{
border:2px solid green;
padding:10px 50px;
margin-bottom:13px;
background:yellow;
width:300px;
border-radius:25px;
}
.b{
border:2px solid #a1a1a1;
padding:10px 50px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
js:
<div class="a">border-radius 属性允许您为元素添加圆角边框! </div>
<div class="b">border-radius 属性允许您为元素添加圆角边框! </div>
效果图:
阅读更多
相关文章推荐
- [置顶] 内容(content)、填充(padding)、边框(border)、边界(margin):CSS中盒子模型有何区别?
- css中盒子模型(margin、border、padding、content)
- CSS 盒子模型(Box model)中的 padding 与 margin
- 一天搞定CSS:盒模型content、padding、border、margin--06
- CSS盒子,line-height,padding,margin,background,border
- CSS 盒子模型(Box model)中的 padding 与 margin
- html06 盒子模型 margin border padding
- CSS 框模型Margin ,Border ,Padding ,Content
- css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
- div入门之盒子模型,边界margin,填充padding,框边border
- webBasic_day03_CSS_选择器_hover_盒子模型(padding, margin)
- CSS中的框模型(box model)/margin、padding、border介绍/ 外边距层叠collapsing计算
- 【CSS3】---盒模型margin、padding及border
- 图解CSS的padding,margin,border属性
- 如何使用好div盒子模型的margin和padding
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
- css中的margin、padding、border详解
- CSS padding margin border属性详解
- 知方可补不足~CSS中margin,padding,border-style有几种书写规范
- css下margin、padding、border、background和font缩写示例