慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

除了我都是猪

7.Flex项目实现自动伸缩您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-07-12
除了我都是猪

6.水平垂直居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row/column; flex-direction: row/column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-07-12
除了我都是猪

5.Flex项目移动右边 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-07-12
除了我都是猪

4.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-07-12
除了我都是猪

1.创建一个flex容器 .flexcontainer { display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 3.Flex项目移动到顶部将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-07-12
除了我都是猪

Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-07-12
除了我都是猪

Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-07-12
除了我都是猪

1.W3C标准盒模型外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

查看全部

0 采集收起来源：CSS3 盒子模型
2015-07-12
Leridy_Lei

a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }

查看全部

0 采集收起来源：CSS3选择器属性选择器
2015-07-12
cherishs碎姑娘

跨列设置column-span:all（表示跨行）none(表示不跨行);

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-07-12
cherishs碎姑娘

跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-07-12
cherishs碎姑娘

column-rule: 2px dotted green;

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2015-07-12
cherishs碎姑娘

列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 可以结合列数的数字和间距一起用，实现页面的分列布局； column-count;3； column-gap；2em；

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22
cherishs碎姑娘

多列布局——column-count:数字n

查看全部

0 采集收起来源：CSS3 多列布局——column-count
2015-07-12
cherishs碎姑娘

多列布局——column-width:XXXpx;

查看全部

0 采集收起来源：CSS3 多列布局——column-width
2015-07-12

首页上一页 873 874 875 876 877 878 879 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果