本项目下的每个文件都可以正常运行,参考笔记进行理解。
css选择器和jQuery的选择器大体一致,不知道是谁抄谁的,程序之间怎么叫抄呢,就像是孔乙己的“窃”,哈哈。
- <选择器>,<选择器> 逗号 选择多个元素
- <选择器>><选择器> 大于号 第一个选择器的直接后代(也就是仅选择儿子辈)且匹配第二个选择器
- <选择器>+<选择器> 加号 紧挨第一个选择器且匹配第二个选择器的兄弟标签
- <选择器>~<选择器> 波浪线 第一个选择器之后且匹配第二个选择器的所有兄弟们标签
- 元素E[name] 选择具有name属性的元素
- 元素E[name^=a] 选择属性name的值以a开头的元素,其中name为任意属性,a为任意值
- 元素E[name$=d] 选择属性name的值以d结尾的元素,其中name为任意属性,d为任意值
- 元素E[name*=o] 选择属性name的值包含o的元素,其中name为任意属性,o为任意值
举几个个栗子。。。
- p:empty 选择空的p元素
- div p:not(.hello) div中除了类为hello的p元素
- ::selection 选择被用户选择的部分(鼠标拖动选择一部分)
以p标签举例说明
- p:nth-child(n) 选择p的父元素中第n个子元素,且这个子元素n为p
- p:first-child 选择p的父元素中的第一个子元素,且这个子元素为p
- p:last-child 选择p的父元素中的最后一个子元素,且这个子元素为p
- p:nth-last-child(n) 选择p的父元素的倒数第n个子元素,且这个子元素为p
- p:only-child 选择p元素的父元素中的唯一子元素,且这个元素为p
- p:nth-of-type(n) 选择p的父元素中的第n个p元素
- p:first-of-type 选择p的父元素中的第一个p元素
- p:last-of-type 选择p的父元素中的最后一个p元素
- p:only-of-type 选择p的父元素中的为一个p元素
- p:nth-last-of-type(n) 选择p元素的父元素中倒数第n个p元素
总结:
child和type类似,唯一的区别是child按次序要求的第n个元素必须是冒号前边的元素,而type仅仅是要求按次序的第n个元素。 举个例子,早些时候,伟大的人类一般生育好多孩子,假设张三生了9个孩子,4个女儿,5个儿子,如果一个人要找“张三家的老大哥”,类比子元素选择器,如果使用nth-child(1),那么找到的老大哥必须是张三的头胎老大,其余8个都是他的弟弟妹妹;如果用nth-of-type(1),那么找到的就是男孩子中的老大,这个老大可能是几个姐姐的弟弟。
以p举例子记录
- p:first-line 选择p标签短路中的第一行
- p:first-letter 选择p标签段落中的第一个字母
- p:before 选择p的前面
- p:after 选择p的后面
- rgba(红,绿,蓝,透明度) 设置颜色,其中红绿蓝为0-255之间的值,透明度为0-1 1为不透明,0.5为半透明
字体单位分为三种,每种具体介绍如下:
- px:使用具体像素点作为单位,好处是比较稳定和精确,但在浏览器中放大或者缩小页面会存在问题。
- em:em是以父级为参考的单位,好处是字体可以自适应,但父元素标签发生改变时字体大小将不确定
- rem:rem是相对于根元素《html》的文字大小,这样就意味着,我们只需要在根元素确定一个参考值即可,css3新增。当在不同屏幕下只需要更改《html》的文字大小,其他使用rem的元素会自动响应改变。
- white-spance:nowrap 文本不换行
- overflow: hidden; 溢出隐藏
- text-overflow: ellipsis; 超出文本以省略号显示。
- text-overflow: "###" 自定义显示,也可以是其他符号
- text-shadow: h-shadow v-shadow blur color 水平阴影位置,垂直阴影位置,模糊距离,阴影颜色
阴影实际用的比较少,
盒子阴影是一个很漂亮的效果,比如小米的产品块,之前自己一直想做的数据卡片,鼠标hover后展现阴影,显得有立体感,可以使用这个属性
- box-shadow: h-shadow v-shadow blur spread color 水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色。
阴影其实是由一个实心块和一个渐变块组成的,实心块就是spread,阴影块就是blur,他们都不占空间位置。
当元素是以百分之多少设定的大小是,元素的大小会随着浏览器的缩放自动调整,那么就可以通过下列属性设定盒子的最大最小尺寸,当超过最大最小尺寸后,元素大小保持最大最小尺寸保持不变。
- max-width 最高宽度
- min width 最小宽度
- max-height 最大高度
- min-height 最小高度
一般默认设置一个块级元素的宽高(width、height)指的是元素内部内容的宽高,不包括内边距padding和边框border。而box-sizeing属性可以设置width包括pading和border。此时也称为怪异模式。
- box-sizing: border-box | content-box
其中border-box设置width包含border和width,也就是怪异模式。 content-box就是正常的width只包含内容
怪异模式很有用,比如在页面中平均排列五个块级元素,如果每个块级元素由边框,即使设为每个宽度为20%也不行,因为有边框一行放不下,此时设置boxsizing为border-box,width的20%包含边框,无论边框多大,都能现在在一行内。
分栏和报纸中的效果一致,直接使用下面相关属性就可以
- column-width 栏宽
- column-count 列数
- column-gap 列间距 参数和border一样
- column-rule 分割线
另外有两个前缀
- -moz- 是针对firefox的设置,
- -webkit- 是针对chrome和苹果safari的设置
- -o- Opera浏览器
- -ms- ie浏览器
背景图尺寸是CSS3新增属性
- background-size 宽度 高度 参数的宽高可以是n%或者具体的像素值。
除了背景图和背景颜色还可以设置背景线性渐变,利用background的数值值liner-gradient实现 (其中gradient是梯度的意思)
- background: linear-gradient(开始位置,渐变颜色[,渐变颜色,渐变颜色]) 后加多个渐变颜色。
这个属性有兼容性问题,必须使用特定浏览器的前缀才能被浏览器识别。比如在谷歌浏览器下,其属性为 -webkit-liner-gradient
盒子轮廓线和盒子的边框border的效果一样,唯一不同的是盒子轮廓线outline不占用空间。
- outline: solid 2px red; 参数和border一样。
CSS3可以做动画了,不必像之前使用jquery中的 animaate了
- transition : width 2s;
transition 这个单词的意思是过度,用于监控属性的变化,如果被监控的属性发生变化,那么就是通过运动,运动过去。其中“width”是要监控的属性,“2s”是变化时间为2秒,也可直接把要监控的属性写为all,这是懒人方法。
transition不知能实现CSS控制的动画,也能监控js做出属性改变,实现动画。
元素变形使用transform属性,支持旋转
- transform: rotate(30deg); 旋转30度,deg为角度,默认顺时针方向
元素旋转后还是占用原来的位置,旋转默认的基准点是中心店,基准点可调,后边介绍。
指定旋转的原点:
- transform-origin: 4px 25px;/这里的像素值分别是对旋转元素左上角和距离:距离上边,距离左边/
- transform: scale(1.5,1,5); //xy方向分别放大1.5倍
- transform: skew(0,30deg); //垂直扭曲30度,内容文字也会被扭曲
平移和相对定位差不多
- transform: translate(100px,20px); //往下100px,往右平移100px
平移和定位的区别是平移没有脱离文档流,元素就算是定位的,也可以平移。
要使元素水平垂直居中有三种方式,分别如下:
前提是元素有固定的宽高, 这种方式使用绝对定位,然后设置top,bottom,left,right都为0,再设置margin为auto就能实现自动水平垂直居中
position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
前提是元素有固定的宽高, 这种方式先定位,左右偏移50%,然后再把margin-top和margin-left设为元素宽高的负一半的值
position: absolute;
top:50%;
left:50%;
margin-top:-元素高度的一半px;
margin-left:-元素宽度的一半px;
这种方式适用与元素有宽度值一定,高度值是靠内部元素撑起来的,也就是高度不确定的情况,这里用到了元素平移。
position: absolute;
top:50%;
left:50%;
/*注意:下方的50%是只box元素本身宽高的50%,而上方的50%是指box父元素宽高的50%*/
transform: translate(-50%,-50%);
animation关键帧运动效果和transition实现效果差不多,不过这种运动就是在不经过触发自己就能执行的运动,分为两步,第一:指定关键帧开始和结束的状态,第二:在选择器中指定运动规则。
<!-- 设置运动规则: -->
@keyframes name{ /*指定运动规则的名称为name*/
from{
css属性
}
to{
css属性
}
}
<!-- 运动规则还可以指定关键帧的状态,如下
-->
@keyframes name{
0%{
css属性
}
50%{
css属性
}
100%{
css属性
}
}
<!-- 指定运动规则: -->
选择器{
animation-name:name;//规则名称
animation-duration:3s;//运动时间
<!--最少有以上两个: 规则名称和持续时间就能运动 -->
animation-timing-function:linear;//匀速变化,默认是变速
animation-delay:2s;//延迟两秒执行
animation-iteration-count:3;//运动次数,指定infinite就是无限重复运动。
animation-directioin:alternate;//轮流反相运动(见孙悟空旋转金箍棒)
animation-fill-mode: forwards | backwards | both; //运动填充模式 比较少用
<!--
forwards:运动结束后保持运动结束的状态
backwards:在延迟期间保持开始运动的状态
both:表示forwards和backwards同时存在 -->
<!-- 运动的暂停 -->
animation-play-status:pause; //运动暂停
<!-- 还可将上述的animation写到一起 -->
animation: name time linaer 1s infinite;//名称,时间,运动形式,延迟时间,运动次数
}
-
flex是flexible box的缩写,意为“弹性布局 ,用来为盒装模型提供最大的灵活性。
-
任何一个容器都可以指定为flex布局。
-
采用flex布局的元素,成为Flex容器(flex container)简称"容器“,他的所有子元素都自动成为容器成员,成为flex项目(flex item),简称”项目“
-
容器默认存在两根轴,水平叫”主轴“(main axis)和垂直的交叉轴(cross axis)起始位置和结束位置分别成为:main start,main end,cross start cross end;
-
项目默认沿着主轴排列,单个项目占用的主轴控件叫做main size,占据的交叉轴控件叫做cross size。
- 弹性盒模型容器中的项目默认在主轴上排列
- 如果项目总宽度,小于容器宽度,按照设置的宽度正常排列;如果项目总宽度大于容器宽度,那么项目宽度均分总宽度,设置的宽度就无效了。
主轴方向可以定义,主轴和交叉轴永远是交叉的。
- flex-direction: row-reverse|column|column-reverse 定义主轴方向
项目在容器的主轴上的对齐方式可以利用justify-content设置
- justify-content: flex-start|flex-end|center|space-between|space-around;定义主轴上对齐方式,
分别是: flex-start:从主轴开始起对齐排列, flex-end:结束起对齐排列, center:居中对齐排列, space-between:两端对齐-项目之间间隔都相等 space-around:每个项目两侧间隔相等。
- align-items:flex-start|flex-end|center|baseline|stretch;
其中: flex-start: 交叉轴的起点对齐。 flex-end:交叉轴的终点对齐 center:交叉轴的中点对齐 baseline:项目的第一行文字的基线对齐 stretch:(默认值)如果项目未设置高度或设置为auto,将占满整个容器的高度 (stretch的意思是拉伸)
1.flex-wrap:wrap|wrap-reverse; 用于设置项目换行。
wrap:如果子元素也就是项目的总宽度大于父级元素也就是容器的宽度,那么一行能放多少则放多少,多余的放在下一行 wrap-reverse; 从下方开始换行
多根轴线的排列就是多行项目的排列方式 /* 这个属性没看懂 */
- align-content: flex-start|flex-end|center|space-between|space-around;
- order:3; 默认为0,越小排列越靠前
是项目之间的比例
- flex:2 ; 默认为1,宽度的比例