css
1.选择器
后代选择器、子代选择器、并集选择器、链接伪类选择器(a{},a:hover{})、:focus选择器(input:focus{})
2.css的三大特性
-
层叠性:根据就近原则,哪个css离元素近则采用哪个
-
继承性:body定义的样式会继承到该body下的所有子元素
-
优先级:继承/通配符样式(0,0,0,0)<元素选择器(0,0,0,1)<类选择器、伪类选择器(0,0,1,0)<ID选择器(0,1,0,0)<行内样式(1,0,0,0)<!important(无穷大)
ps:css的权重可以叠加,但不会进位,比如 li{color:red;} ui li{color:green} ,此时为两个元素选择器,故权重为(0,0,0,1)+(0,0,0,1)=(0,0,0,2),要大于li设置的样式
3.盒子模型
-
边框:border,指定border-collapse:collapse即可实现左右边框合并;边框会影响盒子的大小,意思是盒子的大小包括了边框的大小;
-
内边距:如果盒子已有宽度和高度,再指定内边距,会撑大盒子;即设置{width:100px;width:100px;padding:20px}此时盒子的实际大小为140 x 140 px ;
- 不撑开盒子的情况:若盒子没有指定宽度和高度,则宽度继承父元素的宽度,且设置padding不会改变宽度,但有可能改变高度。比如块级元素嵌套盒子的情况,div p{ padding:30px;},此时p会有60px的高
-
块级元素居中对齐:首先要保证有width属性,其次设置margin:0 auto;
-
行内元素或行内块元素居中对齐:由于行内元素默认没有width,所以给父元素添加text-aglin:center即可
-
嵌套块元素垂直外边距合并:若盒子里面嵌套盒子,给父盒子和子盒子都设置margin-top,则浏览器会默认执行最大的margin-top,而忽略较小的值。
- 解决方案:1. 为父元素定义上边框;2. 为父元素定义上内边距;3. 为父元素添加overflow:hidden
-
圆角边框:border-radius只要设置为正方形盒子的一半,就能够实现圆形的效果;实际原理是拿一个园与矩形做减法,减去四边的角;即border-radius:50%;如果想实现长方形圆角的效果,就设置为高度的一半;
- border-radius简写时默认是从左上角->右上角->右下角->左下角;只写两个则是主对角线到副对角线的角
- 可单独设置border-radius-top-left等属性
-
text-shadow和box-shadow设置阴影
4. 浮动
特性:
- 脱标,且不再保留原先的位置
- 一行显示,如果放不下则换行
- 行内元素添加浮动后具有行内块属性,可以给宽高
- 块级元素添加浮动后,大小由内容来决定(相当于行内块元素)
使用:
-
与标准流父盒子搭配使用,实现在父盒子中居左或居右
-
想要元素水平排列,就将元素全加浮动
-
浮动盒子只会影响自己之后的标准流,不会影响前面的标准流——意思就是后面的元素会占用浮动盒子的空间,浮动盒子会在顶层显示
-
父元素清除浮动的原因是为了不设置高度,随子元素的高度变化而变化
- 额外标签法:在最后一个浮动元素末尾添加一个空div(必须是块级元素),并设置clear:both
- 父元素添加overflow:hidden,可清除浮动,但是无法显示溢出的部分
- 双伪元素法:
.clearfix:before,.clearfix:after{ content:""; display:table } .clearfix:after{ clear:both } .clearfix{ *zoom:1; //IE6,IE7必须使用该属性 }
5. 定位
position:static、relative、absoulte、fixed
-
static:静态定位,相当于无定位
-
relative:
- 相对与原本的位置偏移
- 原来标准流的位置继续占有,不脱标:其他盒子不会占有它原本的位置
-
absolute:绝对定位
- 以最近一级有定位的祖先元素为准,如果祖先元素有position,那么会根据祖先元素的位置来进行移动,反之根据浏览器为准来定位
- 不再占用原有的位置,脱标;
-
fixed:固定定位
- 以浏览器的可视窗口来移动元素,添加left和right属性即可
- 脱标,不占有原有位置,固定定位是一种特殊的绝对定位
- 紧贴中间盒子的右边缘(一键上滑到顶部按钮)显示,要先设置固定盒子left:50%,随后设置margin-left为版心盒子的一半像素宽度即可。
-
sticky:粘性定位
- 必须加上top、right、left、bottom其中一个偏移,否则相当于相对定位
- 不脱标,保留原有的位置
- 以浏览器的可视窗口为参照点移动元素
5.1拓展
-
z-index:
- 通过z-index调整前后次序,如果不写的话默认是后来的元素在上方。
- 只有加了定位position的盒子才有z-index属性
- 数字后面不跟单位
-
absolute:
- 绝对定位不能使用margin:0 auto设置水平居中;
- 通过算法可以实现水平居中——left:50%;margin-left:负(div.width * 0.5),即自己盒子宽度的一半;响应地设置垂直居中也是这种方式。
-
行内元素加absolute或fixed,则可以直接设置宽高
-
块级元素加absolute或fixed,且不给宽高,则默认大小是内容的大小
-
浮动元素、绝对定位、固定定位不会触发外边距合并(加了定位就能解决)
6. 隐藏
- display:none,使元素不渲染Dom元素,盒子占据的空间会被后来的元素替代
- visibility:hidden,盒子占据的空间不会被替代
- overflow:auto,若内容溢出则添加滚动条;如果是有定位的盒子,慎用overflow:hidden,因为有些盒子设计是漏出的
7. flex布局
-
当我们为父元素设定flex布局后,子元素的float和clear将失效(子元素设置flex:1可实现水平摆放),vertical-align将失效
- 父元素设置flex-direction:row,即设置主轴为行,并从左到右排;对应的,设置flex-direction:column,则主轴为列,从上到下排
- justify-content设置主轴子元素的排列方式:flex-start、flex-end、center、space-around、space-between
- flex-wrap:默认不换行,如果父盒子的宽度不够子元素在主轴排列,子元素会缩小宽度继续放在主轴显示,所以父元素需设置flex-wrap:wrap
- align-item(单行):设置子元素在侧轴的排列方式;特殊设置为stretch,子元素不给高度,则可以拉伸至父元素这么高
- align-content(多行):设置子元素在侧轴的排列方式,只用于子元素出现换行的情况,单行时无效;
- flex-flow:row wrap;相当于flex-direction和flex-wrap的简写
-
子项flex属性:定义子项目分配剩余空间
-
flex表示占多少份数,如果有三个子项,都设置flex:1,则会平分空间
-
align-self:继承align-items属性,该属性可设置某一子项的排列方式,使用方式:
子元素:nth-child(index):align-self:flex-end;
-
order设置子项的排序方式,数值越小越靠前,比如设置子元素:nth-child(index):-1;则会提到最前面
-