css盒子模型以及Border边框
2018-04-08 14:25
417 查看
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。 一般在边框后面会加入solid 控制边框的颜色
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
更加形象的
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
-------------------------------------------------------------------------------------------------------------------------边框的样子
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
边框宽度
您可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色:name - 指定颜色的名称,如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
border-style:solid;
border-color:red;
边框-单独设置各边
border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;也可以简写
border-style:dotted solid;、
border-style属性可以有1-4个值:的四个数值按一下步骤进行排列
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
简写的形式
border:5px solid red;
CSS 边框属性
border | 简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color | 设置元素的下边框的颜色。 |
border-bottom-style | 设置元素的下边框的样式。 |
border-bottom-width | 设置元素的下边框的宽度。 |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-color | 设置元素的左边框的颜色。 |
border-left-style | 设置元素的左边框的样式。 |
border-left-width | 设置元素的左边框的宽度。 |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color | 设置元素的右边框的颜色。 |
border-right-style | 设置元素的右边框的样式。 |
border-right-width | 设置元素的右边框的宽度。 |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color | 设置元素的上边框的颜色。 |
border-top-style | 设置元素的上边框的样式。 |
border-top-width | 设置元素的上边框的宽度 |
相关文章推荐
- css盒子模型之边框(border)
- css3(border-radius)边框圆角详解
- android shape的使用详解以及常用效果(渐变色、分割线、边框、半透明阴影效果等)
- swing组合边框(CompoundBorder)
- table设置border后,只有外边框解决方法
- 边框(border)边距(margin)和间隙(padding)属性的区别
- android shape的使用详解以及常用效果(渐变色、分割线、边框、半透明阴影效果等)
- CSS3边框border知识点
- 利用边框border属性做的网页小符号
- Button的几种常用的xml背景,扁平化,下划线,边框包裹,以及按压效果
- CSS3学习之边框(Border)
- CSS3 border-radius实现边框圆角
- 合并表格的边框 border-collapse: collapse
- 微信小程序: 设置 Button 边框 border
- HTML5基础加强css样式篇(css属性border详解:图片边框border-image-slice,border-image-repeat,border-image-width(二))(三十四)
- CSS3之边框图片border-image
- android中设置控件边框以及如何保留上或下边框
- winphone 边框(Border)
- 问 如何使用css将select的边框以及右边的小三角形去掉?
- CSS border-radius边框圆角