码迷,mamicode.com
首页 > Web开发 > 详细

CSS边框与边界

时间:2016-07-12 21:15:27      阅读:951      评论:0      收藏:0      [点我收藏+]

标签:

  • CSS中边框的使用
  • CSS中边界的使用

16.1 CSS中边框的使用

           属性名称           属性值            说明
       border-color    
十六进制        可依序设置上,右,下,左线颜色

                        英文名称        border-color:red(四边均为红色)

                        三原色            border-color:red green

(上下为红色,左右为绿色)

                                        border-color:red green blue

(上为红色、左右为绿色、下为蓝色)

                                        border-color:red green blue yellow

(上右下左分别为红绿蓝黄)

 

        border-style     none            不显示边线

                         dotted            点线

                         dashed            虚线

                         solid            实线

                         double            双线

              border-width     长度            border-width:0.2px 0.3px 0.4px 0.5px;

                                      (上右下左分别为0.2px 0.3px 0.4px 0.5px)

                                         border-width:1 2 3 4;

 

属性名称:属性值1 属性值2 属性值3 属性值4(上右下左依次体现)à边框的同一属性名称可以同时使用多个属性值

 

简化方案:border: 长度 形态 颜色

        例如 border:1px solid black;

 

16.2 CSS中边界的使用

            padding属性介绍(对象挤压自身)

            属性名称            属性值            说明

            padding-bottom        长度/百分比        元件下端边线的空隙

            padding-left        长度/百分比        元件左端边线的空隙

            padding-right        长度/百分比        元件右端边线的空隙

            padding-top            长度/百分比        元件上端边线的空隙

 

简易写法:padding:10px(四边界均为10px

         padding:2px 4px(上下2px,左右4px

         padding:2px 6px 10px(上2px,左右6px,下10px

         padding:1px 2px 3px 4px(上右下左依次为1px 2px 3px 4px

 

            margin 系列属性介绍(对象挤压外界)

            属性名称            属性值                说明

            margin-bottom        auto                 自动调整空隙

                                长度/百分比            设置下端空隙

            margin-left          auto                自动调整空隙

                                长度/百分比            设置左端空隙

            margin-right        auto                 自动调整空隙

                                长度/百分比            设置右端空隙

            margin-top            auto               自动调整空隙

                                长度/百分比            设置上端空隙

 

简化方案:margin:2px 4px

         margin:2px 6px 10px

         margin:1px 2px 3px 4px

常用网页顶格设置:margin:0;

CSS边框与边界

标签:

原文地址:http://www.cnblogs.com/lifi/p/5664665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!