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

    1.css框模型的概述

    css框模型是由内边距,边框,外边距构成。如下图所示:



    其中背景应用于内容,内边距和边框

    我们可以通过设置页面内所有的元素来改变内,外边距。语法如下:

    *{
    margin:0;
    padding:0;                         *是指所有元素
    }
    PS:上图中的height和width是值内容的宽高与边距无关。且外边距可以是负值,很多时候也是负值。


    2.内边距

    与外边距不同,内边距不支持负值。

    除了常规的内边距设置语法:

    h1{padding:25px;}                             设置标题1的内边距为25px
    也可以采用全方位式的描述

    h1{
    padding:25px 0ex 35em 20%                       该代码不仅表述了上下左右的内边距,同时使用了css4中关于长度的描述方式
    }                                                px是像素,ex是x的小写字母的高度,em是16px,以及百分数和不常用的pt(point)
    和上面的简写完全一样的是使用

    h1{
    padding-top:10px;
    padding-bottom:10px;
    padding-right:10px;
    padding-left:10px;
    }
    其中有必要提到的百分数,是根据父元素的长度决定的。比如width的长度发生改变,则内边距也发生改变。外边距也是一样。


    3.边框

    css中的边框(boder)是包含在内边距的一条或者多条线,它的关注点在三:宽度,颜色和样式。

    最新的css2.1规定,元素的背景是内容,内,外边距的背景,且边框在背景之上。



    边框的样式是非常重要的,也是非常有用的


    4.外边距

    外边距可以接受的长度表示方式是非常多的。除了常规的,还可以有英寸,自动这一类的,当然负值也是允许的。


    值复制复制问题:

    下面来看两个等价的东西:

    h1{margin:1px 2px 1px 2px;}
    
    
    
    h1{margin:1px 2px;}
    这两个是相同的。

    在css中规定了一个语法,就是当margin的值少于4个的时候,上边距的值代替下边距,右边距代替左边距,以及上边距代替右边距。


    同内边距一样,外边距也可以设置单边,如:margin-right等

    5.外边距合并(叠加)

    它的总的规则是,当两个相互平行(w3cschool上说的是垂直,没理解,样子上是平行线的叠加啊)的外边距相遇的时候,两个外边距合并,并且长度按照长的那个来。

    具体的图片解析请在w3cschool上查看。



    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    16 js动态添加样式
    15 document对象
    89 多线程(十...)——线程池
    14 window对象
    13 js事件2——选择合适的事件
    12 js事件
    11 js的常用类和方法
    10 js自定义对象
    09 js自定义类与prototype关键字
    88 maven配置库,dom4j
  • 原文地址:https://www.cnblogs.com/comefuture/p/8305993.html
Copyright © 2011-2022 走看看