/* 后代选择器 【 父亲 孩子 {} 】*/
ul li a {
text-decoration: none;
}
/* 子选择器 亲儿子选择器 【父亲》孩子 {}】*/
div > p {
color: red;
}
/* 并集选择器 元素，元素{} */
p,
p {
color: blue;
}
/* ----------------------------css3新特性------------------------ */
/* 属性选择器 指input同时有value属性的元素 权重为11 */
input[value] {
color: pink;
}
/* 选择input里面type=button 的元素 重点 */
input[type="button"] {
cursor: pointer;
}
/* 选择div里面class中以icon开头的元素 */
div[class^="icon"] {
color: #000;
}
/* 选择div里面class中以icon结尾的元素 */
div[class$="icon"] {
color: #000;
}
/* 选择div里面class中含有icon的元素 */
div[class*="icon"] {
color: #000;
}
/* 结构伪类选择器 ul里面第一个li元素 */
ul li:first-child {
color: pink;
}
/* 选择ul 里面偶数位的li odd则为奇数 */
ul li:nth-child(even) {
color: #000;
}
/* ul 里面 第二个li元素 */
ul li:nth-child(2) {
color: firebrick;
}
/* 选择所有孩子 权重12*/
ul li:nth-child(n) {
color: #000;
}
/* 伪元素选择器 before前面添加 after后面添加 权重2 */
div::after {
/* content必须有 */
content: "";
}
/* css3盒子模型 */
.box {
/* 盒子的大小就是width的宽度 */
box-sizing: border-box;
}
/* css3过度 谁变化给谁加 */
.div {
/* transition: 过度属性 花费时间 运动曲线 何时开始; */
transition: width 1s;
}
/* ----------------------------css3新特性------------------------ */
/* 伪类选择器 【 ：元素】*/
/*选择所有未被访问的链接*/
a:link {
color: black;
}
/* 选择所有已被访问的链接*/
a:visited {
color: red;
}
/*选择鼠标指针位于其上的链接*/
a:hover {
color: blue;
}
/*选择活动链接（鼠标按下未弹起的链接）*/
a:active {
color: gray;
}
/* 获得光标的input显示出来 */
input:focus {
background-color: yellow;
}
/* 转换模式 */
a {
display: block;
width: 100.0012px;
height: 100.0012px;
background: #000;
}
/* 背景图片，方便控制位置 */
.bankground-img {
width: 499.9987px;
height: 499.9987px;
background-image: url(/src/img/上箭头.jpg);
/* repeat平铺 no-repeat不平铺
repeat-x x方向平铺 repeat-y y方向平铺 */
background-repeat: no-repeat;
/* position改变图片在盒子中的位置 可跟方位 坐标 百分比*/
background-position: center right;
/* 背景是否固定 */
/* fixed固定 scroll滚动 */
background-attachment: fixed;
/* 背景色半透明 */
background: rgba(0, 0, 0, 0.6);
}
/* border边框 content内容 padding内边距 margin外边距 */
.box {
width: 100.0012px;
height: 100.0012px;
/* 边框粗细 */
border-width: 1.0012px;
/* 边框颜色 */
border-color: red;
/* solid实线边框 dashed虚线边框 dotted点线边框*/
/* 边框复合写法 1.0012px solid red */
border-style: solid;
/* 边框可以分开写 border-top */
}
/* 表格的css写法 */
table {
width: 199.9988px;
height: 199.9988px;
}
table,
td,
th {
border: 1.0012px solid black;
/* 相邻边框合并 */
border-collapse: collapse;
font-size: 13.9988px;
text-align: center;
}
/* padding内边距 */
/* 符合写法 padding:4.9988px 上下左右为4.9988px */
/* padding:4.9988px 10.0012px 上下5 左右10 */
/* padding:4.9988px 10.0012px 19.9988px 上5 左右10 下20 */
/* padding:4.9988px 10.0012px 19.9988px 40.0012px 上5 右10 下20 左40 */
/* margin盒子外边距 盒子盒子间的距离 */
/* 盒子水平居中 左右auto即可 margin：0 auto */
.box2 {
width: 199.9988px;
height: 199.9988px;
background-color: aqua;
padding: 4.9988px;
margin-bottom: 19.9988px;
margin: 0 auto;
}
/* 塌陷问题解决：
父元素定义边框 父元素定义内边距
父元素添加overflow：hidden 【常用】 */
/*
清除内外边距
padding:0;
margin:0;
*/
/* 圆角边框 border-radius: 30px; */
.radius {
width: 499.9987px;
height: 199.9988px;
background-color: aqua;
border-radius: 100.0012px;
}
/* 盒子阴影 */
.shadow {
width: 499.9987px;
height: 300px;
background-color: gray;
box-shadow: 10.0012px 10.0012px 10.0012px 10.0012px rgba(0, 0, 0, 0.3);
/* 水平位置 垂直位置 模糊距离 阴影尺寸 颜色 */
}
/*
浮动（float）：
实现左顶端 右顶端对齐
实现多个块元素一行显示
--纵向排列标准流 横向排列浮动
特性：脱标 顶端对齐
影响后面的标准流，不影响前面的标准流
*/
.float {
width: 100.0012px;
height: 100.0012px;
background-color: pink;
float: left;
margin: 10.0012px 19.9988px;
}
/* 父元素上下排列 子元素通过浮动左右排列 */
/*
清除浮动：选择器{clear:both}
策略：闭合浮动
1，额外标签法：
最后新加一个【盒子】清除浮动（少用）
2，父级添加overflow:hidden
/* 3，：after为元素，给父元素添加 (淘宝法) */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/* 4,双伪元素清除浮动 box前后都加入盒子(小米法) */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* 为什么要清除浮动
开发过程中我们想要利用子元素的浮动去撑开父元素，将父元素高度设置为0
若不清除浮动将会导致下面的标准流发生错位，
原理：双闭合清除浮动
*/
/*
书写顺序：
1.布局定位属性
2.自身属性
3.文本属性
4.其他属性
*/
/* 定位 = 定位模式 + 边偏移 */
/* 子绝父相 */
/* position : static
static 静态定位
relative 相对定位 以自己原本位置为基准 不脱标
absolute 绝对定位 以父亲位置为基准，若无则以浏览器为基准 脱标
fixed 固定定位
*/
/* 绝对定位居中显示
left：50%父容器宽度的一半
margin-left：-去本身的一半
*/
/* 浮动压不住文字 */
/* 字体图标 iconfont */
/* 精灵图 用background-position */
/* 三角箭头写法 */
/* 边框设置为0 */
.Triangular-arrow {
width: 0;
height: 0;
border: 100.0012px solid transparent;
border-left-color: pink;
}
/* 高级三角箭头*/
.Triangular-arrow-heigth {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 220.0012px 79.9988px 0 0;
}
/* 更改用户鼠标样式 */
/*
cursor: default; 默认
cursor: pointer; 小手
cursor: move; 移动
cursor: text; 文本
cursor: not-allowed;禁止
*/
/* 禁止文本框拖拽 */
/*
resize: none;
*/
/* 文字和图片垂直居中 */
/*
vertical-align: baselin 默认
vertical-align: top 顶端对齐
vertical-align: middle 中部对齐
vertical-align: bottom 底部对齐
*/
/* 单行文本超出省略号显示
white-space: nowrap 一行显示文字
overflow: hidden 超出部分隐藏
text-overflow: ellipsis 用省略号表示超出部分
*/
/* 多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; 弹性伸缩盒子模型显示
-webkit-line-clamp: 2; 限制显示的文本行数
-webkit-box-orient: vertical; 设置伸缩盒子对象的子元素的排列方式
*/
/* 文字浮动元素
给图片添加浮动
*/
/* css3 动画：
transform(转换)【重要】:
translate 移动，不影响其他盒子 百分比则为自身盒子的百分比
transform : translate(x,y);
transform : translateX(n);
transform : translateY(n);
让盒子垂直水平居中：
rotate 旋转
transform: rotate(度数deg)
旋转焦点：
transform-origin: x y;(left right ...)
scle 缩放
transform: scale(x,y); x,y为倍数
先定义动画：再调用动画：【重要】
1.
@keyframes name {
0%{
width: 100.0012px;
}
100%{
width: 199.9988px;
}
}
2.
div{
调用动画：
animation-name : name;
持续时间：
animation-duration: time;
}
animation-name: ; 定义动画名称
animation-duration: ; 完成周期时间
animation-timing-function: ; 动画速度曲线 默认ease
linear ease ease-in ease-out ease-in-out in为低速
steps() 步长 分部分走完动画
animation-delay: time; 动画何时开始
animation-iteration-count: ; 动画播放次数默认1 infinite
animation-direction: ; 是否下周期逆序播放默认normal / alternate
animation-play-state: ; 动画是否运行或停止默认running / pause
animation-fill-mode: ; 动画结束状态保持：forwards 回到起始backwards
简写：
animation: 名称 时间 运动曲线 开始时间 播放次数 是否反方向 起始或结束状态
3D转换：
translform: translateZ() z轴移动
perspective 透视： 透视写在被观察元素的【父盒子】上
透视越小，东西越大
z轴越大，东西越大
3D旋转rotate3d ：
正旋转为向后倒，负旋转为向前倒
transform: rotateX(); 单位deg
transform: rotateY();
transform: rotateZ();
transform: rotate3d(x,y,z,deg);
3D呈现：【重要】
控制子元素是否开启三维立体 flat默认不开启 preserve-3D开启
transfrom-style ： flat; 写在父盒子，影响子盒子
*/
/*
浏览器私有前缀：
-moz- 火狐
-mx- ie
-webkit- chrome safari
-o- opera
*/
/*
移动端：
视图窗口标准写法：
<meta name="viewport"
content="
width= device-width, 宽度
initial-scale = 1.0, 初始缩放比
maximum-scale = 1.0, 最大缩放比
minimum-scale = 1.0, 最小缩放比
user-scalable = 0 用户是否可以缩放
">
背景缩放：
background-size: ; px,%相对于父盒子
cover 让图片完全覆盖背景 对角线拉伸
content 对角线拉伸 其宽度或高度到达最大值 不完全覆盖
清除链接点击背景高亮
-webkit-tap-hifhlight-cplor: transparent;
清除默认按钮外观
-webkit-appearance: none;
禁用长按页面时弹出菜单
img,a{-webkit-touch-callout: none; }
流式布局{百分比}：
设定最大宽度，最小宽度：
flex布局：【重要】
display: flex; 写在父盒子上
flex-direction: ; 主轴方向 x轴
row 从左到右，默认
row-reverse 从右到左 右边开始1234
column 从上到下
column-reverse 从下到上
justify-content: ; 主轴上子元素的排列方式
flex-start 从头部开始，默认
flex-end 从尾部开始 float：right
center 在主轴上居中对齐，x轴为主轴则水平居中
space-around 平分剩余空间
space-between 先贴住两边，剩余平分
flex-wrap: ; 子元素是否换行
nowarp 默认，不换行
warp 换行
align-content: ; 侧轴上子元素的排列方式 {有换行必用}
flex-start 从上到下
flex-end 从下到上
center 挤在一起，垂直居中
stretch 拉伸，默认
space-around 平分剩余空间
space-between 先贴住两边，剩余平分
align-items: ; 侧轴上子元素排列方式 {单行}
flex-start 从上到下
flex-end 从下到上
center 挤在一起，垂直居中
stretch 拉伸，默认
flex-flow: ; 复合属性，同时设置flex-direction & flex-wrap
flex-flow: column wrap;
子项：
flex: number; 分配剩余空间，不给元素高度宽度
align-self:; 子项侧轴排列
flex-start 从上到下
flex-end 从下到上
center 挤在一起，垂直居中
stretch 拉伸，默认
order : number; 数值越小，排列越靠前 默认0
rem布局：
媒体查询：[Media Query]
针对不同的屏幕尺寸设置不同的css样式:
@media screen and (max-width: 799.9988px) {
body {
background-color: pink;
}
}
link引入css媒体查询
<link rel="stylesheet" media="srceen and (min-width = 640.0013px)" href="style.css">
响应式布局：{核心思想：准备一个大容器【container】装起小元素，根据媒体查询改变大容器，进而影响小元素}
小于768px 宽度100%
大于768ox 宽度750px
大于991.9987px 宽度970.0013px
大于1200px 宽度1170px
bootstrap框架：
container类 【响应式布局】
container-fluid类 【百分比布局】
栏栅布局：【大盒子container 里面放row 再放div col数量sum=12 则占满整个container盒子 大于则另起一行】
div份数类前缀：
.col-xs- 手机
.col-sm- 平板
.col-md- 中等桌面显示器
.col-lg- 大桌面显示器
列嵌套最好加个row
row可以取消父级的padding
列偏移：【右偏移】
.col-md-offset-number
列排序：
.col-md-pull-* 拉
.col-md-push-* 推
*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
03-15
410
410
04-03
669
669
03-17
08-29
550
550
08-30
386
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
