为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
十天精通CSS3_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 十天精通CSS3

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • hahaseki
    7.水平垂直居中 在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } 8.Flex项目实现自动伸缩 您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; } 布局 display: flex; 方向 flex-direction: row(横)||column(竖); 上下 align-items: flex-start||center||flex-end; 左右 justify-content: 同上;
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（二）

    2015-02-25

  • hahaseki
    第九节 伸缩布局（二） 5.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; } 6.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-02-05

  • hahaseki
    4.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-02-05

  • hahaseki
    第八节 伸缩布局（一） 提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的。 Flexbox布局功能主要具有以下几点： 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； 第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 第五，可以控制元素在页面上的布局方向； 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 1.创建一个flex容器 第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit。 .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2015-02-05

  • 小花丶
    transform: matrix(1,0,0,1,100,100); 偏移
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-02-05

  • 魔法师蚂蚱
    a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;}
    查看全部
    1 采集 收起 来源：CSS3中的变形--缩放 scale()

    2015-02-05

  • 魔法师蚂蚱
    scale 英[skeɪl] 美[skel] n. 规模;比例（尺）;鱼鳞;级别
    查看全部
    1 采集 收起 来源：CSS3中的变形--缩放 scale()

    2015-02-05

  • 魔法师蚂蚱
    skew 英[skju:] 美[skju] adj. 斜的，歪的;[数学] 不对称的;[统计学] 歪斜，扭曲
    查看全部
    0 采集 收起 来源：CSS3中的变形--扭曲 skew()

    2015-02-05

  • hahaseki
    第七节 盒子模型 box-sizing 1.W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”） 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距） 在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式 其语法规则如下： box-sizing: content-box | border-box | inherit content-box 默认值，其让元素维持W3C的标准盒模型 border-box 让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式） inherit 使元素继承父元素的盒模型模式
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-02-05

  • hahaseki
    第六节 跨列设置column-span 定义一个分列元素中的子元素能跨列多少。 column-span: none | all
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-02-05

  • hahaseki
    第五节 列表边框column-rule 定义列与列之间的[边框宽度]、[边框样式]和[边框颜色]。 column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2018-03-22

  • hahaseki
    第四节 列间距column-gap column-gap主要用来设置列与列之间的间距。 column-gap: normal || <length> normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 列与列之间的距离，其可以使用px,em单位的任何整数值，【不能负值】
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-03-22

  • hahaseki
    第三节 多列布局——column-count column-count：auto | <integer> column-count属性主要用来给元素指定想要的列数和允许的最大列数。
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-count

    2018-03-22

  • hahaseki
    第二节 多列布局——column-width column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-width

    2015-02-05

  • 魔法师蚂蚱
    rotate [英]rəʊˈteɪt [美]ˈroʊteɪt vt. vi. （使某物）旋转;使转动;使轮流，轮换;交替
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2015-02-05

首页上一页1107110811091110111111121113下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么？
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程