css3学习笔记（一）

选择器

1. [att=val]—att属性值为val
2. [att*=val]---att属性值包含val

1. [att$=val]---att属性值以val结尾
2. [att^=val]---att属性值以val开头

 

伪类选择器和伪元素

1. :first-line---某个元素中的第一行文字样式
2. :first-letter---某个元素中文字的首字母或者第一个字
3. :before---某个元素之前插入内容
4. :after---某个元素之后，同上语法
5. :root---页面根元素
6. :not---排除某个元素，例如body:not(h1){}
7. :empty---指定当元素为空白时候的样式
8. :target---对页面某个target元素设置跳转后的样式

 

1. first-child---第一个子元素
2. last-child---最后一个子元素

 

指定序号的子元素样式

1. nth-child---从前往后，nth-child(n),n可以是数字，式子，也可以是奇数odd，偶数even
2. nth-last-child---从后往前，nth-last-child(n)，同上

 

指定序号的同类型的子元素样式

1. nth-of-type---从前往后，同上
2. nth-last-of-type---从后往前
3. only-child---只有一个元素时候才能使用

 

UI元素状态伪类选择器

1. E:hover
2. E:active---激活
3. E:focus
4. E:enabled
5. E:disabled
6. E:ready-only
7. E:read-write
8. E:checked
9. E:default
10. E:indeterminate---指定当页面打开时，一组单选框中没有任何一个单选框被设定选取状态时整租单选框的样式
11. E::selection---当元素处于选中状态时的样式
12. E:invalid---不符合要求的元素样式
13. E:valid---符合要求的元素样式
14. E:required
15. E:optional
16. E:in-range
17. E:out-of-range

 

通用兄弟元素选择器

<子元素> ~<子元素之后的同级兄弟元素>{}

 

文字和字体相关样式

1. text-shadow---文字阴影
2. word-wrap---让长单词和url地址自动换行
3. WebFont、@font-face---使用服务器端字体
4. rem根据页面上根元素的字体大小而计算出实际的字体大小

 

盒相关样式

Display参数值：

1. inline、block、inline-block
2. inline-table针对table元素设置的，用于设置表格前后文字围绕
3. list-item可以将多个元素作为列表来显示，可以使用list-style-type来显示列表前面的标记样式
4. none元素将不会被显示

 

1. overflow---盒中容纳不下的内容的显示方法。hidden,scroll,visible
2. box-shadow---盒子的阴影

 

针对元素的宽度与高度的计算方法

1. box-sizing
   1. content-box:单纯的指内容宽度。
   2. border-box:指内容和内边距，边框的宽度总和。推荐使用该值是在想要保持宽度不变的情况。

 

布局相关样式

多栏布局（需要针对不同浏览器进行处理 –moz,-webkit，-o）

1. column-count，值为数字，表示要分成的栏数。
2. column-width,设置每一栏的宽度而不设定元素宽度。
3. column-gap,设置多栏之间的间隔距离。

 

盒布局

用于解决float属性或position属性左右两栏或多栏中底部不能对齐的问题

（需要针对不同浏览器进行处理 –moz,-webkit，-o）

1. 即使用

display：-moz-box；

display：-webkit-box；

 

盒布局与多栏布局的区别：

1. 多栏布局的各栏宽度必须相等
2. 多栏布局不能指定具体内容的显示位置，不适合用于安排整个网页中的各个元素组成的网页结构

 

 

弹性盒布局

1. display：flex；
2. 对于不同的div，使用flex：数值；

例如：左右两边宽度固定，中间宽度自适应；

1. 改变元素的显示顺序，使用order，按照顺序从小到大显示

1. 改变元素的排列方向

flex-direction:

         row:横向

         row-reverse：横向反向

         column：纵向

         column-reverse:纵向反向

1. 当各个div都没有设置宽度或者高度，那么各个div会根据自己的内容进行自适应调整，但是可能会出现空白的部分。

对单个div使用flex:1;就不会留空白。

• 如果同一行或者一列上的div都使用flex:1;则会使得一行或一列被平分。
• 如果同一行div有flex:1或者flex:2;即flex值不一样的情况，则会将原来空白的部分按照flex进行等分，按照比例追加到各自div之前的宽度上。

flex-grow:当宽度或者高度大于总div的宽度或者高度，可以使用该参数决定各个div分追加到的宽度或者高度

flex-shrink:与flex-grow相反，当宽度或者高度小于总div的宽度或者高度，可以使用该参数决定各个div应该减少的比例的宽度和高度。

flex-wrap:指定单行布局或多行布局。nowrap不换行，wrap换行，wrap-reverse换行且反向。