为了账号安全,请及时绑定邮箱和手机立即绑定
  • @media 媒体类型and (媒体特性){你的样式}
    (max-width: 480px)

    @media screen and (max-width:480px){
    .ads {
       display:none;
      }
    }

    @media screen and (min-width:600px) and (max-width:900px){
      body {background-color:#f5f5f5;}
    }
    <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

    @media not print and (max-width: 1200px){样式代码}
    <linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
    查看全部
  • 通过link标签中的media属性来指定不同的媒体类型
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />

    @importurl(reset.css) screen;  
    @importurl(print.css) print;

    <head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>

    @media screen {
       选择器{/*你的样式代码写在这里…*/}
    }<head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>

    @media screen {
       选择器{/*你的样式代码写在这里…*/}
    }
    查看全部
  • flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row,设置justify-content控制方向;如果设置为column,设置align-items控制方向。
    .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; }
    查看全部
  • CSS中每一个元素都是一个盒模型,包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性

    从图中可以看出padding属性和content属性层叠background-image属性,层叠background-color属性,这个是存在的,它们四者之间构成了Z轴(垂直屏幕的坐标)多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系,并不能构成Z轴的层叠关系。
    box-sizing:
    w3c
    外盒尺寸计算(元素空间尺寸)

    element空间高度=内容高度+内距+边框+外距

    element空间宽度=内容宽度+内距+边框+外距

    内盒尺寸计算(元素大小)

    element高度=内容高度+内距+边框(height为内容高度)

    element宽度=内容宽度+内距+边框(width为内容宽度)
    2.IE传统下盒模型(IE6以下,不包含IE6版本或”QuirksMode下IE5.5+”)
    外盒尺寸计算(元素空间尺寸)

    element空间高度=内容高度+外距(height包含了元素内容宽度、边框、内距)

    element宽间宽度=内容宽度+外距(width包含了元素内容宽度、边框、内距)

    内盒尺寸计算(元素大小)

    element高度=内容高度(height包含了元素内容宽度、边框、内距)

    element宽度=内容宽度(width包含了元素内容宽度、边框、内距)
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2022-05-24

  • column-span主要用来定义一个分列元素中的子元素能跨列多少。
    column-span:all;

    none

    此值为column-span的默认值,表示不跨越任何列。

    all

    这个值跟none值刚好相反,表示的是元素跨越所有列,并定位在列的Z轴之上。
    查看全部
  • column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>属性值

    属性值说明

    column-rule-width

    类似于border-width属性,主要用来定义列边框的宽度,其默认值为“medium”,column-rule-width属性接受任意浮点数,但不接收负值。但也像border-width属性一样,可以使用关键词:medium、thick和thin。

    column-rule-style

    类似于border-style属性,主要用来定义列边框样式,其默认值为“none”,包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。

    column-rule-color

    类似于border-color属性,主要用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色,也可以将其设置为transparent(透明色)
    查看全部
  • column-count: 3;
    column-gap: 2em;
    normal

    默认值,默值为1em(如果你的字号是px,其默认值为你的font-size值)。

    <length>

    此值用来设置列与列之间的距离,其可以使用px,em单位的任何整数值,但不能是负值。
    查看全部
  • column-count:auto | <integer>
    auto

    此值为column-count的默认值,表示元素只有一列,其主要依靠浏览器计算自动设置。

    <integer>

    此值为正整数值,主要用来定义元素的列数,取值为大于0的整数,负值无效。
    查看全部
  • column-width: auto | <length>
    auto

    如果column-width设置值为auto或者没有显式的设置值时,元素多列的列宽将由其他属性来决定,比如前面的示例就是由列数column-count来决定。

    <length>

    使用固定值来设置元素列的宽度,其主要是由数值和长度单位组成,不过其值只能是正值,不能为负值。
    查看全部
  • 多列布局columns属性参数主要就两个属性参数:列宽和列数。
    columns:<column-width> || <column-count>columns: 200px 2;
    查看全部
  • animation-play-state属性主要用来控制元素动画的播放状态。

    参数:

    其主要有两个值:running和paused。

    其中running是其默认值,主要作用就是类似于音乐播放器一样,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。
    查看全部
  • animation-direction:normal | alternate [, normal | alternate]*

    1、normal是默认值,如果设置为normal时,动画的每次循环都是向前播放;

    2、另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。
    查看全部
  • animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
    查看全部
  • transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况
    查看全部
  • 在CSS中创建简单的过渡效果可以从以下几个步骤来实现:
    第一,在默认样式中声明元素的初始状态样式;
    第二,声明过渡元素最终状态样式,比如悬浮状态;
    第三,在默认样式中通过添加过渡函数,添加一些不同的样式。
    transition-delay:指定开始出现的延迟时间
    transition-timing-function:指定过渡函数
    transition-duration:指定完成过渡所需的时间
    transition-property:指定过渡或动态模拟的CSS属性
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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