zoukankan      html  css  js  c++  java
  • 盒子四大元素

    盒子四大元素:content(内容),margin(外边距),padding(内填充),border(边框)

    1..盒子模型之外边距(margin)

      框边界属性   

      margin-bottom:底边距     

      margin-left:左边距    

           margin-right:右边距       

           margin-top:上边距

    ---------------------margin(外边距)-------------------------

    margin:1数字------上右下左                         margin:10px;

                2数字------上下    左右                     margin:10px 10px;

                3数字------上    左右    下                 margin:10px 10px 10px;            

                4数字------上   右   下   左                margin:10px 10px 10px 10px;

      这四个属性用来设置元素与其相邻元素间的距离。  

     margin功能:简写属性,     用于设置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。

    2.盒子模型之内填充(padding)  

     框填充属性   

        padding-bottom               

        padding-left              

        padding-top                

       padding-right   

      功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离,用法同margin.

    ---------------------padding(内边距/内填充)------------------------- padding:缩写与外边距一样;

    注意:使用了padding之后,要减去宽高的值;

    3.盒子模型之边框(border)   

    框边框属性   

    1、border-top            

          border-bottom             

          border-right            

          border-left   

    功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺少情况下,边框没有样式设置。  

     包含的数值:共有三个边框属性:border{1px solid red;}                 

        border:宽度  线的样式 颜色;----------属性没写完敲空格;    

    2、border-color:功能:简写属性,设置四个边框的颜色值。   

        数值:可以用颜色名或RGB值。   

      如果指定单个颜色,则四个边框都显示为这个颜色;   

      如果指定两个颜色,则顺序为上下,左右;  

      如果指定三种颜色,则顺序为上,左右,下;  

      如果指定四种颜色,则顺序为上,右,下,左。  

    3、border-边框的宽度指定长度。

      功能:简写属性,可同时设置四个边框的 宽度。

       数值:

        thin -细边框。

          medium -中等线宽。

           thick -粗线。

      长度 -用相对或绝对单位设置边框宽度

             border-top-width      

          border-bottom-width

               border-right-width   

           border-left-width功能:分别设置各个边框的厚度。

    4、border-style:设置用于修饰边框的底纹。可以设置下列样式:

        none -不显示边框,为缺省值 

          dotted -点线     

          dashed -虛线    

          solid -实线     

          double -双线    

          groove - 3D陷入线    

          ridge - 3D山脊狀线     

        inset -使页面有沉入感     

        outset -使页面有浮出感

      5、border-radius:5px;              边框变为弧形

  • 相关阅读:
    根据索引删除数组内信息时导致程序崩溃
    C/C++判断字符串是否包含某个子字符串
    Qwidget布局操作之QGridLayout(网格布局)
    Qt获取文件路径、文件夹路径
    javascript DOM document属性
    javascript dom页面中的location属性
    javascript页面常用事件
    python的高阶函数式编程
    python set 集合复习--点滴
    python异常
  • 原文地址:https://www.cnblogs.com/fxty/p/7044834.html
Copyright © 2011-2022 走看看