一、CSS的基础样式

2018-06-24 02:10:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

CSS的基础样式

  • border 边框

复合写法

borderborder-width  border-style border-color

border-width:边框宽度 top right bottom left

border-style:边框样式  solid实线 dashed虚线 dotted 点线(点线IE6无法识别

border-color:边框颜色/英文单词/十六进制/RGB

border-radius 圆角

border:transparent透明(可以写在复合写法里)

边框并不是一条直线,而是三角形。

 

  • padding 内边距,内填充

padding-top上内边距 padding-right右内边距

padding-bottom下内边距 padding-left左内边距 (顺序:上右下左   顺时针)

padding复合写法

padding:10px; 只写一个值表示:上右下左都是10px;

padding:10px 20px; 两个值:第一个值代表上下   第二个值代表左右

padding:10px 20px 30px; 三个值:第一个值代表上 第二个值代表左右 第三个值代表下

padding:10px 20px 30px 40px; 四个值:第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左

 

  • margin 外边距

margin-top上内边距 margin-right右内边距

margin-bottom下内边距 margin-left左内边距 (顺序:上右下左   顺时针)

其他如padding 一致

标签的嵌套 确定父子级关系

  •  margin的例外

  1.第一个自己的margin-top会在特定的情况下穿透父级

规避方法:

① 给父级加边框

② 给父级加overflow:hidden;(溢出隐藏)

③ 不要用margin-top,父级的padding-top代替

  2.兄弟关系的margin-topmargin-bottom会叠压

规避方法:只设置一个 topbottom

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端程序员容易忽视的一些基础知识

下一篇:返回页面顶部最简单方法