zoukankan      html  css  js  c++  java
  • 盒模型


    一、 盒模型的概念和组成

    盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都以拥有可像盒子一样的外形和平面空间,即都包含边框、边界、补白、内容区,这就是盒模型。

     

      

    1) padding的使用方法

    填充:padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。

    用法:

    1)用来调整子元素在父元素中的位置关系。

    注:padding属性需要添加在父元素上。

    3)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值。

     属性值的4种方式:

      四个值:上   右   下   左 {padding:10px   20px   30px    40px;}

      三个值:上    左右    下 {padding:10px   20px   30px ;}

      二个值:上下    左右 {padding:10px   20px  ;}

      一个值:四个方向 padding:2px;/*定义元素四周填充为2px*/

     

     说明:可单独设置一方向填充,如:上方向padding-top:10px;    右方向pahdding-right:10px;    下方向padding-bottom:10px;     左方向padding-left:10px;

    3) margin的使用方法

      边界:margin,在元素外边的空白区域,被称为边距。

    margin-left:左边界margin-right:右边界margin-top:上边界margin-bottom:下边界 

      属性值的4种方式: 
      四个值:上 右 下 左

      三个值:上 左右 下

      二个值:上下 左右

      一个值:四个方向 margin:2px;/*定义元素四边边界为2px*/
     margin:2px 4px;/*定义元素上下边界为2px,左右边界为4px/
     margin:2px 4px 6px;/*定义元素上边界为2px,左右边界4px下边界为6px,*/
     margin:2px 4px 6px 8px;/*定义元素上、右边界为2px,下右边界为6px,左边界为8px*/
     margin:0 auto;/*在浏览器中横向居中。

    定义元素上、下边界为2px,
    说明:可单独设置一方向边界,如:margin-top:10px;

    *margin值的解析:左右边界累加,上下边界重合。

    4) border的使用方法

      border:边框宽度 边框风格 边框颜色;

      例如:border:5px solid #f00 

    边框:border,网页中很多修饰性线条都是由边框来实现的。
    边框宽度:border-
    边框颜色:border-color:
    边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
    可单独设置一方向边框,

    如:border-bottom:边框宽度 边框风格 边框颜色;底边框

    border-left:边框宽度 边框风格 边框颜色;左边框

    border-right:边框宽度 边框风格 边框颜色;右边框

    border-top:边框宽度 边框风格 边框颜色;上边框

    二、一个标记可以设置多个class名

    语法:<标记 class="名称1   名称2" ></标记>

    转义字符:&copy; 版权(圈C)

    &ldquo;      &rdquo;     “”    &quot; "    " 

    三、CSS Reset

    CSS Reset是什么?

    在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

    为什么要重置它?

    因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如<button>标签,在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

    怎么样重置:

     

     

     

     

  • 相关阅读:
    游标cursor
    SQL: EXISTS
    LeetCode Reverse Integer
    LeetCode Same Tree
    LeetCode Maximum Depth of Binary Tree
    LeetCode 3Sum Closest
    LeetCode Linked List Cycle
    LeetCode Best Time to Buy and Sell Stock II
    LeetCode Balanced Binary Tree
    LeetCode Validate Binary Search Tree
  • 原文地址:https://www.cnblogs.com/fanlinqiang/p/7741265.html
Copyright © 2011-2022 走看看