zoukankan      html  css  js  c++  java
  • CSS div

    text-align
    虽然名字包含text,但它可作用于所有inline element。例如,你在div里有<p>和<img>,当你设置

    div {
    text-align
    : center;
    }

    里面的<p>和<img>都会居中。

    另外一点,text-align只能用在block element里,如果你直接把它使用在一个inline element(如:<img>),则不会产生任何效果。


    Descendant Selectors

    如果使用如下格式,风格则会应用到div下所有的h2,不管该h2是direct child还是grandchild。若有一个h2嵌套在<blockquote>里,一样会应用该风格。

    div h2 { }

    如果想只选择direct child,则需要使用

    div > h2 { }


    line-height属性:

    当你使用em或者%的时候,line-height会找到最基础的font大小,然后计算,如:

    body {
    font-size
    : 12px;
    }

    div
    {
    line-height
    : 1em;
    }

    div里各元素的line-height均为12px。

    如果你喜欢div里各元素的line-height以各元素字体大小为基准的话,直接使用数字,如:

    div {
    line-height
    : 1;
    }

    简单定义padding或margin:

    原始方法:

    padding-top: 0px;
    padding-right: 20px;
    padding-left: 30px;
    padding-bottom: 10px;

    简易方法:

    padding: 0px 20px 30px 10px;

    如果左右两边相同(前面top & bottom,后面是left & right):

    padding: 20px 40px

    如果全部一样

    padding: 20px;

    border同样可以简写,原始:

    border- thin;
    border-style: solid;
    border-color: #007e7e;

    简写,而且border不需要排序,你可以按你喜好随便写:

    border: thin solid #007e7e;

    background一样可以简写(background-color, background-image, background-repeat)

    background: white url(images/cocktail.gif) repeat-x;

    font也可以: font: font-style font-variant font-weight font-size/line-height font-family

    待续。。。

  • 相关阅读:
    javascript基础
    html基础
    css基础
    django-session和cookie
    rest架构
    django-models
    django-templates
    Alignment
    ural 1225.Flags
    ural 1009. K-based Numbers
  • 原文地址:https://www.cnblogs.com/rexmzk/p/2384164.html
Copyright © 2011-2022 走看看