/*
css 选择器 :基本选择器(8种),伪元素选择器,伪类选择器三大类
一、基本选择器 :
1.元素选择器 E{} *元素选择器中的特例,代表所有类型的元素 *{margin: 0;padding: 0;}
如 :div{}、body{}、*{}
2.属性选择器 E[attr]{} 前缀 :^= 后缀 :$= 包含 :*= 严格等于 :=
如 :img[src^=zz]{}、div[id$=ww]{}
3.ID选择器 #id值{}
如 :div#zz{} = div[id=zz]{} 属性选择器的简化
元素选择器与ID选择器结合时没有空格
4.class选择器 .class值{}
如 :div.zz{} = <div class="zz"></div> 属性选择器的简化
元素选择器与class选择器结合时没有空格
5.包含选择器 selectorl1 selectorl2 ...{}
如 :div .zz{} 不等于 div.zz
div .zz{} 表示 <div> <a class="zz">qcby</a> </div>
div.zz{} 表示 <div class="zz">qcby</div>
6.子元素选择器 selector1>selectorl2>...{}
用包含选择器区分不出来时,则用子元素选择器的父子关系一步一步确认所要找的目标
如 :body>ul>li>a
<body> <ul> <li> <a></a></li></ul></body>
7.兄弟元素选择器 selectorl1~selectorl2{} 从selector1向下查找selector2的兄弟元素(具有共同父级元素的元素)
8.选择器组合 selector1,selector2,...{}
如 :div>a{} .gg{} = div>a, .gg
二、伪元素选择器
1.首字符伪元素选择器 ::first-letter{}
使用前提 :依附元素必须是块级元素
如 :<div>qcby</div> 想将qcby中q字变红 就可以写成 <div><span>a</span>cby</div>的形式
或者 div::first-letter{color: red;}
2.首行伪元素选择器 ::first-line{}
使用前提 :依附元素必须是块级元素
如 :div::first-line{color: red;}
3.自定义内容前置伪元素选择器 ::before{}
使用前提 :不管需不需要自定义内容,必须要使用content属性
如 :div::before{content:"666";color:red;} 表示在div所表示的内容前加666,并且666的颜色为红色
4.自定义内容后置伪元素选择器 ::after{}
使用前提 :不管需不需要自定义内容,必须要使用content属性
如 :div::after{content:"666";color:red;}
三、伪类选择器
1、结构性伪类选择器
:nth-child() 着重点是位置 括号中可以放数字,数字从1开始代表第一个;odd(奇数) even(偶数);加法表达式 2n+1 其中n从0开始
如 :div:nth-child(2){color:red} 表示 所有div中第二个div的颜色改为红色
:nth-child(1) 等价于 :first-child 查第一个元素
:nth-last-child() 括号中可以放数字,数字从1开始代表第一个;odd(奇数) even(偶数);加法表达式 2n+1 其中n从0开始
如 :div:nth-last-child(2){color:red;} 表示 所有div中倒数第二个div的颜色改为红色
:nth-last-child(1) 等价于 :last-child 查最后一个元素
:nth-of-type() 着重点是类型 括号中可以放数字,数字从1开始代表第一个;odd(奇数) even(偶数);加法表达式 2n+1 其中n从0开始
:nth-of-type(1) 等价于 :first-of-type 查第一个元素
:nth-last-of-type() 括号中可以放数字,数字从1开始代表第一个;odd(奇数) even(偶数);加法表达式 2n+1 其中n从0开始
:nth-last-of-type(1) 等价于 :last-of-type 查最后一个元素
2、UI状态伪类选择器
:hover 悬停状态
如 :li:hover{color:red;} 当鼠标放上去的时候变为红色
:focus 焦点状态(主要作用于输入框)
如 :input:focus{color:red;} 当鼠标点击输入框时,输入框背景变为红色
:checked 选中状态(主要作用于单选框)
如 :input:checked{color:red;} 当鼠标选中单选框时,单选框背景变为红色
:disabled 不可用状态
如 :input:disabled{}
3、其他伪类选择器
:not() 过滤掉某个或者某些元素(连续使用:not)
如 :li:not(.java){color:red;} 表示所有li中不包含java类的内容变为红色
li:not(.java)和li.java相反
css选择器优先级规则 :
1、选择器写的越准确(越长) ,优先级越高
2、ID选择器>class选择器>元素选择器
3、同级别同长度下,css代码按照顺序执行,后写的代码覆盖前写的代码
4、自行测试,测试方法...
横向布局 :
弹性盒子布局 disable:flex
配套属性 :
flex-direction :设置弹性盒子内子元素的排列方式
作用对象 :弹性盒子
其值有row(横着,默认),column(竖着),column-reverse(反向竖着),row-reverse(反向横着)
如 : .container{display:flex;flex-direction:row}
flex-wrap : 设置弹性盒子内子元素是否换行
作用对象 :弹性盒子
其值有nowrap(不换行,默认),wrap(不换行)
如 :.container{display:flex;flex-wrap:nowrap}
order :设置该子元素的排列位置 值越小越靠前
作用对象 :弹性盒子内子元素
如 :.container{display:flex;} .container .left{order:1}
flex :复合属性 flex-grow(拉伸因子) flex-shrink(收缩因子) flex-basis(基准宽度)
作用对象 :弹性盒子内子元素
如 :.container{display:flex;} .container .left{flex-grow:1}
justify-content :设置弹性盒子内子元素在排列方向上的分布方式
作用对象 :弹性盒子
其值有flex-star(弹性的开端) flex-end(弹性的尾端) center(居中) space-between(空白在中间) space-around(空白在周围)
如 :.container{display:flex;justify-content:flex-star}
align-items :设置弹性盒子内子元素在排列方向上垂直方向的对齐方式
作用对象 :弹性盒子
其值有flex-star(弹性的开端) flex-end(弹性的尾端) center(居中) baseline(弹性的开端,以元素的底部为基准线对齐)
如 :.container{display:flex;align-items:flex-star}
align-content :设置弹性盒子内行的分布方式
作用对象 :弹性盒子
其值有flex-start(弹性的开端) flex-end(弹性的尾端) center(居中) space-between(空白在中间) space-around(空白在周围)
如 :.container{display:flex;align-content:flex-star}
定位 :
position :
其值有 :static(静态、默认),relative(相对定位),absolute(绝对定位),fixed(固定定位)
如 :position:relative
配套属性 :left、right、top、bottom、z-index(层次,值越大越靠近人眼)
如 :.container{position:relative;left:10px;top:10px;}
前提 :position属性的值必须是relative(相对定位),absolute(绝对定位),fixed(固定定位)三个中的其中一个
场景 :
1、纯使用relative
保留元素的物理位置,定为的参考位置是元素本身,随着浏览器滚动而滚动
2、纯使用absolute
不保留元素的物理空间,定为的参考位置是浏览器,随着浏览器滚动而滚动
3、纯使用fixed
不保留元素的物理空间,定为的参考位置是浏览器,不随着浏览器滚动而滚动
4、结合使用relative和absolute
relative作为祖先元素,absolute作为该元素,到达该元素不保留元素的物理空间,定位的参考位置是祖先元素,随着浏览器的滚动而滚动
css长度单位 :
1、绝对长度单位
px(像素)、in(英寸)、cm(厘米)、mm(毫米)等
2、相对长度单位
%(以父级元素的尺寸为参考维度)
em(以父级元素字体大小为参考维度)
rem(以html元素字体大小为参考维度)
vh(以视口的高度为参考维度)
vw(以视口的宽度为参考维度)
vmin(以视口的高度、宽度最小的为参考维度)
vmax(以视口的高度、宽度最大的为参考维度)
*/
/* css: transform 改变 位移、旋转、倾斜、缩放
1.位移 translate(tx,[ty])元素沿着x轴移动,如果ty有值,就沿着y轴运动
2.旋转 rotate(angle) 元素沿着z轴旋转
rotateX() 元素只沿着x轴旋转
rotateY() 元素只沿着y轴旋转
rotateZ() 元素只沿着z轴旋转
rotate3d(x,y,z,angle) 元素同时沿着x轴、y轴、z轴旋转
3.倾斜 skew(sx,[sy]) 元素沿着x轴倾斜,如果sy有值,就是既沿着x轴又沿着y轴倾斜
skewX(sx) 元素只沿着x轴倾斜
skewY(sy)
4.缩放 scale(sx,sy)元素既沿着x轴又沿着y轴缩放,值大于1是放大,值小于1是缩小;如果参数只要一个是宽高缩放比例相同
scaleX() 元素只沿着x轴缩放
scaleY() 元素只沿着y轴缩放
scaleZ() 元素只沿着z轴缩放
scale3d(x,y,z,angle) 元素同时沿着x轴、y轴、z轴缩放
同时使用多种变形效果,变形效果函数使用空格隔开,注意不要逗号隔开
设置变形中心点 transform-origin: x轴值(数值、预定义词(left right center)),y轴值(数值、预定义词(top bottom center))
开启3d透视(近大远小) perspective 其值是距离,值越小透视越明显 必须使用在父级元素上
3d背面是否可见 backface-visibility visible可见(默认) hidden隐藏
3d嵌套效果是否可见 transform-style flat(不保留元素的3d位置,默认) preserve-3d(保留元素的3d位置)
*/
补充 :浏览器对中西文字换行规则不一样,中文可以在任意处换行,英文默认只会在空格或者连字符处换行
如果想改变换行规则 :word-break:(keep-all 不换行,break-all 换行)
CSS
作用 :给前端做样式
样式可分为三部分 :*盒子模型(元素特性) 、*选择器(选择元素) 、*布局