-
@media 媒体类型and （媒体特性）{你的样式} MIN表示大于等于，MAX等于小于等于 AND用于多个特性 MAX/MIN-device-width/height指定设备大小 @media not [type]用于排除媒体类型 @media only用于指定媒体类型：其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。查看全部
-
将Media Query看成Media Type（判断条件）+ CSS（符合条件的样式规则） Media Query VS CSS 第一，Media Query只接受单个的逻辑表达式作为其值，或者没有值； 第二，CSS属性用于声明如何表现页面的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式； 第三，Media Query基中的大部分接受min/max前缀，用来表达其逻辑关系，表示应用于大于等于或小于等于某个值的情况； 第四，CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种。查看全部
-
媒体引入 link方法 link方法引入媒体类型其实就是在标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。 @import方法 一种是在样式中通过@import调用另一个样式文件；另一种方法是在标签中的中引入： @importurl(*.css) [media type]; @media方法 同import方法：@media type{code;}查看全部
-
CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸）. Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式. 一、媒体类型:All,Print:Screen最常见 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 Tv 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端查看全部
-
5.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; } 7.水平垂直居中 设置justify-content或者align-items为center 8.Flex项目实现自动伸缩 您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }查看全部
-
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局功能主要具有以下几点： 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； 第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 第五，可以控制元素在页面上的布局方向； 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 Steps: 1.创建一个flex容器:.flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示:Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。可通过flex-direction:column修改主轴方向 3.Flex项目列显示：.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部：取决于主轴的方向。垂直的方向通过align-items设置，水平的方向通过justify-content设置。查看全部
-
CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响. box-sizing： 在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型. W3C Standard: 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） IE Traditional: 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） 在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit Content-box是从里往外算，width=content-width；Border-box是从外往里算，width=content+padding+border；查看全部
-
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 语法规则： column-rule:|| 参数 column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)查看全部
-
column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ； column-width: auto | 取值说明 属性值 说明 auto 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。查看全部
-
W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module),它主要应用在文本的多列布局方面. 语法： columns： || 参数 参数说明 主要用来定义多列中每列的宽度 主要用来定义多列中的列数 P.S. Need to add pre-fix -moz,-webkit,-ms and -o查看全部
-
nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。查看全部
-
first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。查看全部
-
结构性伪类选择器—nth-last-child(n) “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。查看全部
-
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示： n 2n+1 4n+1 4n+4 4n 5n-2 -n+3 0 1 1 4 - - 3 1 3 5 8 4 3 2 2 5 9 12 8 8 1 3 7 13 16 12 13 0 4 9 17 20 16 18 -1 5 11 21 24 20 23 -2查看全部
-
结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器， ul>li:last-child{background:blue;}查看全部
举报
0/150
提交
取消