CSS/DIV一些基础小结

---------------------------------------------------------------------------------------------

HTML元素一切皆为框的一点理解:

   div h1 p 称为块级元素; 该类元素,显示的内容成块.

   span strong等称为行内元素;该元素显示的内容地行内.

   可以通过设置display:block,使行内元素像块级元素一样成块.

 

  <div>
  some text
  <p>Some more text.</p>
  </div>

  这样便出现称为"无名框"的框.这是把文本直接加在块级元素的开头,这些文本会被当然段落来对待.

 

---------------------------------------------------------------------------------------------

CSS中的选择器:

   总共可分为:HTML标签元素选择器、class、id、伪选择器。可以关联、组合定义选择器。

   关联即某个样式是与特定标签关联的，在这关联外，不起作用；组合就是一次定义一组样式。

   第一类选择器最简单，其对象就是HTML本身标签。当想对HTML标签的展现形式有自己的要求时定义。

        如我想使P标签内的文本显红色，而不是默认的黑色，大小为15像素。

        定义方式可以为      P{color:red;font-size:15px;}

            div p {color:blue}   关联定义样式

            h1,h2,h3 {color:green;}  组合定义样式

   第二种和第三种，分别是对应标签的class,id属性值。从这点便可以看出它们的最大区别，id只能被用在一处，而class可以多处多次使用。所以定义它们时得想清楚，该样式的使用情况。

    class类选择器定义时，要在对应的class值前加“.”，而id选择器加“#”。

          即 .btn {border:solid #dddddd 1px;}  #headfer {margin:0px;padding:0px}

              <div id="header"><input class="btn" type="button"></div>

 

   第四种，伪选择器不是每个标签都能有的，通常a标签使用比较多，用来描述标签内容在不同状态时显示不同样式。

       如：a:link{color:bule;}  a:hover{color:green;} a:visited{color:red;}

这些不同类型的样式也可以组合使用。

       如：a.one:link {font-size:20px;}    <a class="one">伪伪元素与类一起用</a> 。对a one link的摆放顺序还是感觉有些别扭。

 

---------------------------------------------------------------------------------------------

CSS的基础规则看起来不多，但实际使用起来感觉非常之繁琐与不可以思议。很是觉得好的编辑工具非常之重要，能事半功万倍的效果。

挑些比较常用样式定义（初级菜鸟级的，若大虾见了还望原谅，倘能提点提点，感激不尽）。

margin   定义一个区域与另一个区域的距离（上下左右），即所谓的外边距。

         margin:1px 2px 3px 4px;距外区域上，右，下，左为1，2，3，4px。

         margin-left:auto;默认居中。

         类似的padding指的距所处区域四周边界的距离，即内边距；描述的顺序与margin一样。

float  飘浮，一个区域相对另一个区域的水平对齐方式。作用很大，很重要。取值可以：left right none浮动到左边/右边/不准飘浮。

        清除飘浮clear:left/right/both，不准左边/右边/两边有飘浮。

ul与form标签一样是块级元素，但input,table是行级元素（纯属我个人理解）。

       ul内li后必须要有个行级元素，没定义的话也会留下一行的位置。（一次写页面时，我检查了许久都会多空出一行来，后发现是li产生 的）

 

---------------------------------------------------------------------------------------------

yixie jingnian

在对标签位置不是有很清楚了解的情况下，要多试几次。CSS+DIV中区域的位置关系尤为重要，而对位置的页面展示影响的因素也较多，没有对其中的机理了解清楚的，很容易进死胡同般的怎么转怎么想办法就是转不出。

      比如有时高上边距时margin-top属性看起来不起作用，可以试着用margin-bottom再不行得看下区域包含位置情况。

      文本的位置不仅margin / padding 对其有直接影响，还有其高度大小，字体大小，其相邻元素位置的大小。

      垂直位置属性 vertical-align.

 

元素内容为空要其显示背景，需要同时定义其宽高；有时加上display属性会有意想不到的效果，其值有:block inline-block等.