CSS3模块

选择器
盒模型

下面将按照这些模块进行总结：

一、选择器

CSS3新增了许多灵活查找元素的方法，CSS3选择器与jQuery大部分选择器兼容。

选择器	示例	说明
element1~element2	p~ul	选择p之后的每一个ul
[attribute∧=value]	a[src^="https"]	选择每一个src属性值是以“https”开头的a
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性值是以“.pdf”结尾的a
[attribute=value]*	a[src*="ab"]	选择每一个src属性值包含子字符串“ab”的a
:first-of-type	p:first-of-type	选择一个p元素是其父级的第一个p
:last-of-type	p:last-of-type	选择一个p元素是其父级的最后一个p
:only-of-type	p:only-of-type	选择每个p元素是其父级唯一的p
:only-child	p:only-child	选择每个p元素是其父级唯一子元素
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素是其父级的倒数第二个子元素
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个元素p
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素是其父级的倒数第二个元素p
:last-child	p:last-child	选择每个p元素是其父级的最后一个子元素p
:root	:root	选择文档的根元素
:empty	p:empty	选择没有子级的元素p（包括文本节点）
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）
:enabled	input:enabled	选择每一个已启用的输入元素
:disabled	input:disabled	选择每一个禁用的输入元素
:checked	input:checked	选择每个选中的输入元素
:not(selector)	:not(p)	选择每个并非p元素的元素
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素
:in-range	:in-range	匹配值在指定区间之内的input元素
:read-write	:read-write	用于匹配可读及可写的元素
:read-omly	:read-only	用于匹配设置 "readonly"（只读）属性的元素
:optional	:optional	用于匹配可选的输入元素
:required	:required	用于匹配设置了 "required" 属性的元素
:valid	:valid	用于匹配输入值为合法的元素
:invalid	:invalid	用于匹配输入值为非法的元素

二、盒模型

1、关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型。

如下图所示，其区别主要在于宽度和高度的计算方式，CSS3对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。

IE模型下 width=padding+content+border

W3C模型下 width=content

box-sizing: border-box width = border + padding + content

box-sizing: content-box width = content

IE盒模型只会出现在IE5版本和IE6+的怪异模式中。

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box;

2、CSS3弹性盒子

弹性盒子是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性容器 display: flex | inline-flex

flex-direction 顺序指定了弹性子元素在父容器中的位置。flex-direction: row | row-reverse | column | column-reverse　

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。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-flow: nowrap | wrap | wrap-reverse

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

完美的居中

使用弹性盒子，设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。

align-self属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

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 ]：定义弹性盒子元素的默认基准值。

使用弹性盒子创建响应式界面

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}

.flex-container > * {
    padding: 10px;
    flex: 1 100%;
}

.main {
    text-align: center;
    background: cornflowerblue;
}

.header {background: coral;}
.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}

@media all and (min-width: 600px) {
    .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
    .main    { flex: 3 0px; }
    .aside1 { order: 1; } 
    .main    { order: 2; }
    .aside2 { order: 3; }
    .footer  { order: 4; }
}
</style>
</head>
<body>

<div class="flex-container">
  <header class="header">头部</header>
  <article class="main">
    <p>内容</p>
  </article>
  <aside class="aside aside1">边栏 1</aside>
  <aside class="aside aside2">边栏 2</aside>
  <footer class="footer">底部</footer>
</div>

</body>
</html>

发表于 2016-12-09 15:30 永不开封的汽水阅读(204) 评论(0) 收藏举报

CSS3笔记总结

CSS3模块

二、盒模型

1、关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型。

2、CSS3弹性盒子

使用弹性盒子创建响应式界面

公告