/*
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
作用 ：给前端做样式
样式可分为三部分 ：*盒子模型(元素特性) 、*选择器(选择元素) 、*布局
扫一扫
4912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
