css权威指南学习笔记

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2016-08-03

 1,继承

   一般大多数框模型属性都是不能继承的。如：padding 、margin 、border 、background 都不能继承。

   继承值，完全没有特殊性。（就是优先级最低）

2，缩进

  text-indent： 属性 段落前空格。应用于块级元素

3，水平对齐： text-align   text-align：center 该属性只对元素中的内容进行位置的控制，标签<center>不仅控制内容位置，而且控制整个元素位置。

4，垂直对齐:  line-height，可应用于所有元素，可继承。  vertical-align ： 应用于行内元素和表单元格，不可继承。

   注：上标和下标  vertical-align ： sub； 下标。   vertical-align ： supper； 上标。

5，文本转换：text-transform：uppercase | lowercase | capitical  |  none  | inherit

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2016-08-03

1，合并垂直外边距

如：

li {
    margin-top : 10px;
    margin-bottom : 15px;
}

 

　一个ul里面有多个li 他们之间的距离是15px而不是25px。因为垂直外边距被合并了，取了较大的值作为外边距。

2，border

<input type="text" class="find-pwd-next" value="下一步" style="border:1px solid red;"/>
<input type="text" class="find-pwd-next" value="下一步" style="border:5px double red;"/>

　　

看来还是学得不够仔细，第一次知道border还有double的值。双线框就是这么画的。

 

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2016-08-10

3， 浮动和定位

  浮动的详细内幕：（看得我头晕）

       a，浮动元素的左外边界不能超过其包含块的左内边界，右边的一样的道理。（这是肯定的，浮动就是相对于父容器浮动，是不会超出去的）

　　b，浮动元素的左外边界必须是源文档之前出现过得浮动元素的右外边界，除非后面的浮动的顶端在前面的浮动元素的底端下面。右边同理。（读起来好拗口，但是比较好理解，毕竟经常做这样的事，比如三栏布局，左中右，左和中都向作浮动，那么中间那一块的左外边界最左只能到左边那一块的右边界，除非中间那块移动到下一行。）这样使得浮动很安全。

　　c，左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。。右浮动同理（看懂了吗，没懂。。。）

　　d，一个浮动元素的顶端不能比其父元素的内顶端更高。

　　e，浮动元素的顶端，不能比之前浮动元素或者块级元素的顶端更高。（很好理解）

　　f，。。。（怎么都那么拗口，宝宝看不来。。）

嗯，后面的块级元素记得清除浮动。记得清除浮动，记得清除浮动。

 

定位：

！！绝对定位的垂直布局行为：

对绝对定位的元素使用margin: auto 0; 可以得到元素垂直居中的效果。

 

 

　　表布局 　　 (2016-08-14)

1,border-spacing 表格边框距离，display值为table或者inline-table时可用

 

    列表与生成内容（2016-08-19）

1，list-style-position： inside 、outside

2，list-style-image： url()

3，list-style :   li{ list-style: url(123.png) square inside；}

3，quotes 引用，适用于所有元素、具有继承性

　　quot{ quotes： ‘201c’‘201d’；} 引用弯引号（201c 201d为弯引号的16进制unicode值）

    　

　　非屏幕媒体（2016-08-20）