border-radius
2值 对角13 24
三个值 顺时针方向1 2对角4 3
四个值顺时1234
-webkit-border-images:url (Images/nin.png) 27/27px repeat stretch
27是方向 27是宽度 平铺 拉伸 /边框宽度
图片81px/3=27四个角 水平垂直 方向九宫格
<i class ="Fa fa-pencil fa-fw">
三个参数分别是: 类 字体类型 大小
伪元素选择器
:only-child 匹配父元素下仅有的一个子元素等同于:first-child:last-child或:nth-last-child(1):nth-last-child(1)
:only-od-type 匹配父元素下使用的同种标签的唯一一个子元素等同于:fisst-oftype:last-of-type或nth-od-type(1):bth-last-of-type(1)
:enabled 匹配表单中的激活元素
:disabled 匹配表单中金庸的元素
:checked 匹配表单中被选中的radio(单选框)胡平checkbox(复选框)元素
::selection 匹配用户当全选中的元素
:first-child 对一个父元紊中的第一个子元索指定样式
:last-child 对一个父元索中的最后一个子元素指定样式
对指定序号的子元素设置样式(正数)
:nth-child(odd):所有正数下来第偶数个子元素
:nth-chiid(even)二所有正数下来第奇数个子元索
:nth-last-child对指定序号的子元索设里样式(倒数)
:nth-last-child (odd):所有倒数上去第94数个子元s
:nth-last-child (even):所有倒数上去第奇数个子元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
选择器:before{“内容’/ url(图片路径)}
:nth-of-type(n)与:nth-child()作用类似.但是仅匹配使用同种标签的元素
:nth-last-of-type(n)与:nth-last-child()作用类似,但是仅匹配使用同种标签的元素
:nth-child(an+b)a表示,每次循环中共包括几张样式: b表示制订样式在循环中所在的位置循环使用样式
例 :nth-child(3n+2)每隔三个从第二个开始
-webkit- 代表Chrome、safari
-moz-代表firefox
-ms-代表ie
-o-代表opera
resize用于重定义textarea的大小
none: UserAgent没提供尺寸调整机制,用户不能操纵机制调节元素的尺寸.
both : U5er gejA提供双向尺寸调整机制,让用户可以调节元素的宽度和高度.
horizontal: U_serAgent提供单向水平尺寸调整机制,让用户可以调节元素的宽度.
vertical: UserAgen雌供单向垂直尺寸调整机制,让用户可以调节元素的高度。
强制单词换行的word-wrap:break-word属性:
元素透明也是我们常用的样式,在CSS2中使用滤镜属性。pacity实现透明效果。现
在有了CSS3的因坡属性,就不用这么麻烦了,当然这也得要浏览器支持才行。通
常我们定义颜色都是用十六进制表示。如:background:#000000,表示背景色为
黑色。当然也可以用RGB三原色值表示,如:background:rgb(0,0,0),也表示背
景色为黑色.因恤只是在因11的基础上增加了一个a,这个a表示透明度.而且这个
属性不会被子元素继承下去,可以在定义颜色的属性使用,应用代码如下:
除了IE,其他浏览器几乎都支持rgba函数。它有四个参数,前三个为一种颜色的
RGB值,第四个为透明度。
background: 0000000; filter:alpha(opacity-40)
background:rgba(0,0,0,0.5)最后一个表示透明
.wrapper > * {padding: 10px;flex: 1 100%;}
还有.main { order: 2; }中的order:2是什么用的啊,后面的数字有什么意思嘛?> 是相邻的意思
这样解释给你听吧:
.wrapper是你家,你家旁边有一个.box,那这个.wrapper>*就是选择,所有你在旁边的房子,但是房子里面的东西不是,不过有部分属性会继承,在.box旁边的房子,.wrapper>*就选择不到了。
.wrapper > * 的意思匹配.wrapper里面的所有子元素,但是不包括.wrapper里面子元素的子元素.
所以 > 的意思就是父级元素下面选择子元素的选择器。
CSS3 多列属性
下表列出了所有 CSS3 的多列属性:
属性 | 描述 |
---|---|
column-count | 指定元素应该被分割的列数。 |
column-fill | 指定如何填充列 |
column-gap | 指定列与列之间的间隙 |
column-rule | 所有 column-rule-* 属性的简写 |
column-rule-color | 指定两列间边框的颜色 |
column-rule-style | 指定两列间边框的样式 |
column-rule-width | 指定两列间边框的厚度 |
column-span | 指定元素要跨越多少列 |
column-width | 指定列的宽度 |
columns | 设置 column-width 和 column-count 的简写 |
属性描述
column-count指定元素应该被分割的列数。
column-count: number|auto;
number | 列的最佳数目将其中的元素的内容无法流出 |
auto | 列数将取决于其他属性,例如:"column-width" |
column-fill指定如何填充列
column-fill: balance|auto;
banlance | 列长短平衡 |
auto | 列顺序填充,他们将有不同的长度 |
column-gap指定列与列之间的间隙
column-gap: length|normal;
length | 一个指定的长度,将设置列之间的差距 |
normal | 指定一个列之间的普通差距。 W3C建议1EM值 |
column-rule所有 column-rule-* 属性的简写
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width | 设置列中之间的宽度规则 |
column-rule-style | 设置列中之间的样式规则 |
column-rule-color | 设置列中之间的颜色规则 |
column-rule-color指定两列间边框的颜色
column-rule-color: color;
color | 指定颜色的规则。在CSS颜色值寻找颜色值的完整列表 |
column-rule-style指定两列间边框的样式
column-rule-style:none | hidden | dotted | broken | solid | double | groove | ridge | inset | outset;
none | 定义没有规则。 |
hidden | 定义隐藏规则。 |
dotted | 定义点状规则。 |
dashed | 定义虚线规则。 |
solid | 定义实线规则。 |
double | 定义双线规则。 |
groove | 定义 3D grooved 规则。该效果取决于宽度和颜色值。 |
ridge | 定义 3D ridged 规则。该效果取决于宽度和颜色值。 |
inset | 定义 3D inset 规则。该效果取决于宽度和颜色值。 |
outset | 定义 3D outset 规则。该效果取决于宽度和颜色值。 |
column-rule-width指定两列间边框的厚度
column-rule-width: thin|medium|thick|length;
thin | 指定一个细边框的规则 |
medium | 定义一个中等边框规则 |
thick | 指定一个粗边框的规则 |
length | 指定宽度的规则 |
column-span指定元素要跨越多少列
column-span: 1|all;
1 | 元素应跨越一列 |
all | 该元素应该跨越所有列 |
columns设置 column-width 和 column-count 的简写
columns:column-width column-count ;
column-width | 列的宽度 |
column-count | 列数 |
flex-direction 顺序指定了弹性子元素在父容器中的位置。
lex-direction的值有:
row:横向从左到右排列(左对齐),默认的排列方式。
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
column:纵向排列。
column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
justify-content 属性
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
justify-content 语法如下:
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start:
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。
flex-end:
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。
center:
弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。
space-between:
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。
space-around:
弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。
align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
语法
flex-flow: ||
各个值解析:
nowrap - 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse -反转 wrap 排列。
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。
align-self 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
flex 属性用于指定弹性子元素如何分配空间。
语法
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none:计算值为 0 0 auto
inherit:从父元素继承
[ flex-grow ]:定义弹性盒子元素的扩展比率。
[ flex-shrink ]:定义弹性盒子元素的收缩比率。
[ flex-basis ]:定义弹性盒子元素的默认基准值。