CSS篇 累了，毁灭吧

<link> 引入CSS文件
<style> :渲染，要写在这个标签里
list-style: none; /* 清除列表项前标识符 */
margin: 0 auto;
class ：类 可以给标签设置类名，可以设置多个类名
* {通用选择器，全部样式}
id ： 可以给标签设置id名，id名是独一的
P {直接选中p标签}
. ming {点名，是选中类名标签}
#ming {是选中id名的标签}
color:red; 颜色：红色
background-color: rgba(0,0,0,0);  背景色：透明
background-color: transparent; 背景色：透明
background-color: yellow; 背景色：黄色 
<div style="color: green;"> 里面的字体颜色为green
div:hover { /* 既是div又是悬停状态 */background-color: red;}
.danger.btn{ /* class值同时有danger和btn */} 并列选择器 中间没空格
div span {后代选择器} 中间是空格
div>span {子代选择器} 下面的儿子。孙子不算
p~span {兄弟选择器} p后面的所有兄弟span
p+span {相邻的兄弟选择器} 最接近p的一个span

伪元素

before:之前   after：之后   content：容纳
li::before {content:"子曰:";} 在每个li前面，显示 子曰：
li::after {content: "--摘自《论语》";} 在每个li后面，显示 --摘自《论语》
<a>超链接 
<ul>块级父元素  <li> 是块级子元素
list-style:none; 去掉列表项的标识符 
text-decoration: none; 去掉超链接的下划线
<div> 块级标签
width: 100px; 宽
height: 100px; 高
border: 2px solid black;   边框 粗细 实线 颜色
<input type="text">  输入框

文字大小和形状

浏览器默认的字体大小是16px
2em：字体大小为父级字体大小的2倍
2rem：2倍根元素字体的大小，也就是html字体大小16的2倍32px
font-family: "宋体hfiwehf","华文彩云"
font-weight: normal; /* 正常体 */
font-weight: bold; /* 加粗体 */
font-weight: lighter;/* 细体 */
font-weight: 400; /* 正常体 /
font-weight: 300; / 细体 /
font-weight: 600; / 粗体 */
/* 首行缩进两个字符*/
text-indent: 2em; /* 首行缩进两个字符*/ 也就是开头2个字符的空格
文字溢出影藏三件套
/* 强制内容不换行 /white-space: nowrap;  白色-空间：不换行
/ 溢出隐藏 /overflow: hidden;  溢出：隐藏
/ 文字溢出替换成省略号，还能告诉用户文字还没写完 */
text-overflow: ellipsis; 文本-溢出：省略

文字对齐方式

align ： 排列   阿莱
text：文本   泰克斯特
text-align: right; /* 靠右 /    
text-align: left; / 靠左 /
text-align: center; / 居中 /
/ 将行高设置为与div等高，可以实现单行文本在父级中的垂直居中*/
text-align: center; / 居中 /  横向居中
line-height: 100px;   纵向居中
line ：界线
line-height: 2; 行高还可以使用数字，没有单位，表示2倍行间距

文字和图片的对齐方式

vertical ：垂直    喔低叩
vertical-align: baseline; /* 基线对齐,默认值 /
vertical-align: bottom;/ 底线对齐 /
vertical-align: middle; / 中线对齐 /
vertical-align: top; / 顶线对齐 */

盒子模型

box ：盒子 sizing：大小 尺寸 content：容纳 border：边框

box-sizing: content-box; /* 默认值,盒子模型计算方案:内容盒子 不用加

box-sizing: border-box; /*盒子模型计算方案:边框盒子 */ 不会影响内容宽度

margin：外间距 padding ：内间距

top ：上 。 bottom：下。 left ：左 。 right：右。

border-left: 30px solid #00f;/* 左边框 */ 设置一边的边框，只有一边

:hover 悬停

rgb表示法(24位色)

background-color: rgb(255,0,0);

rgba表示法(32位色)

第4个值是不透明度，1为完全不透明 0为完全透明

background-color: rgba(0,0,255,1);

#000; /* 黑色的常用写法 */

#fff; /* 白色的常用写法 */

#808080; /* 中灰的常用写法 */

用边框线写一个三角形：

width: 0; /* 必须要div的宽高都是0 /

border:50px solid transparent; / 四条边都是大大的透明边框 /

border-bottom-color: red; / 给单独的一条边框设置颜色 */

边框线：

border: none; /* 去掉边框 */

border-width: 10px; /* 单独设置四条边的粗细 /

border-style: dashed; / 线型为虚线 /

border-style: dotted; / 线型为点状线 /

border-style: double; / 线型为双实线 /

border-color: #ff0; / 设置四条边的颜色 */

行内元素的左右外间距生效,上下不生效

行内块四个方向的外间距均生效

相邻兄弟间的上下外间距会重合，取最大值显示

背景图 web css day6 p6html 位置

background-image: url(img/mr.png);

光插入背景图片不会显示，需要给元素设置宽高

可以同时添加背景图与背景色，没有图的地方就显示背景色

背景图的平铺/重复方式：

background-repeat: repeat; /* 重复 默认值 /

background-repeat: no-repeat; / 不允许重复 /

background-repeat: repeat-x; / 只允许x轴重复 /

background-repeat: repeat-y; / 只允许y轴重复 */

background-position: center center; 水平垂直居中

background-position: right; 背景图放右边

背景图大小

cover 遮蔽 contain 包含

background-size: 900px 500px;

/* 背景图的尺寸可以使用百分比 auto表示自适应*/

background-size: 100% 100%;

background-size: 100% auto; /* 宽度100% 高度自适应 牺牲高度 /

background-size: auto 100%; / 高度100% 宽度自适应 牺牲宽度 /

background-size: contain; / 至少有一张完整的图呈现出来,多余的空间平铺 /

background-size: cover; / 铺满整个屏幕,多余的图片裁掉 */

精灵图：2步

d5 {
border: 1px solid #000;
/* 指定图标所在区域的大小 /
width: 128px;
height: 128px;
background-image: url(img/icon.png);/ 精灵图一定要设置背景图不重复！ /
background-repeat: no-repeat;
}
/ 当悬停时 /.
d5:hover {
/ 修改背景图的定位 /
background-position: -128px 0; / 向左移动128px 垂直方向不动 */
}

 渐变效果

d6 {
width: 300px;
height: 200px;
/* 默认的渐变效果是水平的 */
linear 线性  gradien 坡度    deg 度 
background-image: linear-gradient(red,green);
background-image: linear-gradient(45deg,red,green);
}

 法国国旗：三色

d7 {
width: 300px;
height: 200px;
background-image: linear-gradient(90deg,blue 0 100px,#fff 100px 200px,red 200px 300px);
}

 

元素的隐藏方式：

display: none; /* 修改元素的显示模式为消失 */ 消失，释放空间

visibility: hidden; /* 设置可见度为隐藏，默认值为visible不隐藏 */ 保留空间

opacity: 0; 元素的不透明度: 0完全透明 1完全不透明

/* background-color: transparent; */ 背景透明

background-color: rgba(0,0,0,0); 背景透明

溢出 overflow

overflow: visible; /* 溢出可见 默认值 溢出的部分仍可以看见*/

overflow: hidden; /* 溢出隐藏 溢出的部分直接裁掉*/

overflow: scroll; /* 两侧都显示拖拽条 */

overflow: auto; /* 在需要的方向自动添加拖拽条 */

变块：图片的幽灵空白节点，可以变块来去除

display: block; 显示：块

块级元素没有幽灵空白节点，我们可以把图片变为块级来去除

浮动：早期是为了实现文字环绕效果，现在都用弹性盒了。

float: right; 右浮动

float: left; 左浮动

浮动会脱离文档流，造成父元素高度坍塌，会脱离父级

解决办法：给父元素设置宽高，浮动不会脱离父级

/* 方案2:给父级设置BFC保护 // overflow: hidden; // 溢出隐藏

方案3:父元素也浮动，宽度就是3个孩子的宽度，高度也回来了

但是，还得考虑 爷爷、太爷爷，这里不太合适*/

/* 方案4:在父元素最后添加一个宽高为0的块级子元素，不浮动，用来清除浮动影响 */

.z4 {

width: 0;

clear: both;

}

/* 方案5:利用伪元素在父元素最后生成一个假孩子清除影响 /

.clearfix::after{ / 在指定元素的最后生成一个假孩子 /

content: ''; / 内容是空白的,宽高为0 /

display: block; / 块级元素才可以使用clear属性 /

clear: both; / 清除前面所有元素浮动造成的不支撑影响 */

}

边框圆角

border-radius:25px;

border-radius:23%;

border-radius:10px 20px; /* 左上右下 右上左下 对角线*/

border-radius:10px 20px 30px; /* 左上 右上左下 右下*/

border-radius:10px 20px 30px 40px;/从左上角开始顺时针转/

border-top-left-radius:50px; /* 单独设置一个角的边框圆角 */

特殊形状：圆形

1.准备一个正方形 2.边框圆角为50%*/

width: 100px;

height: 100px;

border-radius:50%;

/* 特殊形状 椭圆

1.准备一个长方形 2.边框圆角50%*/

width: 200px;

height: 100px;

background-color: #0f0;

border-radius:50%;

特殊形状：胶囊型

width: 150px;

height:60px;

border-radius:30px;

元素的阴影

shadow：阴影

值1:x轴偏移量 默认值为0,数字越大越向右移动，可以有负值

值2:y轴偏移量 默认值为0，数字越大越向下移动，可以有负值

值3:羽化值 默认值为0 数字越大阴影效果越虚 不允许有负值

值4:扩展半径 默认值为0 数字越大阴影范围越大，可以有负值(用的较少)

值5:阴影颜色*/

box-shadow:5px 5px 3px 5px #aaa;

光标样式

cursor: default;/* 默认值 箭头 /

cursor: pointer;/ 小手 */

cursor: crosshair; /* 十字光标 */

cursor: wait; /* 等待,转圈或者沙漏 */

cursor: move; /* 移动光标 /

cursor: text; / 文本光标 工字型 */

输入框：input

border: 3px solid #f00;

border: none; /* 去掉边框 /

outline:none; / 去掉外轮廓线 */

定位 *

相对定位

相对定位不脱离文档流

position: relative; /* 相对定位 */ 位置：相对 距离自己原来位置

z-index: 40; /* 调整层级,数字越大层级越靠上 */ 值还可以写负数

绝对定位--父相子绝

绝对定位脱离文档流

要用绝对定位需要先给父级加相对定位：position: relative;

绝对定位 position: absolute; 定位：绝对

固定定位

position: fixed; 定位：固定

给元素直接加，不需要加相对定位，加宽高，位置用top：300px，左20px。就可以

结构性伪类选择器

nth：第n个 child：孩子 last：最后的，倒数 first-：第一

ul li:nth-child(1) { color: green;} /* 选中ul下第1个孩子 */

ol li:nth-child(4n){color: purple;} /* 选中4的倍数 */

ol li:nth-last-child(3){color: red;} 选中ol中倒数第3个孩子

ul li:first-child {border: 1px solid #0f0;} 选中ul下第1个孩子 */ 第一

ul li:last-child { border: 1px solid #00f;}

p[title="news"]{color: red;} 选中p标签，有title属性且属性之为news

a[href^="https"]{color: yellow;} 选中a标签，有href属性，且属性值以https开头

img[src$=".gif"]{border: 5px solid #f00;} 选中img元素 有src属性 且属性值以.gif结尾

a[class*="pic"]{color: green;} 选中a标签，有class属性，且属性值中包含pic

input[readonly]{border: 2px solid #0f0;} 选中input并且包含readonly只读属性

弹性布局 display: flex; 变：活动，

flex的主轴方向

row ：行 column 纵 列 reverse：颠倒 direction ：方向

flex-direction: row; /* 主轴方向为默认的正向行模式 / 12345

flex-direction: column-reverse; / 主轴方向为反向列模式 竖54321

flex-direction: column; /* 主轴方向为正向列模式 / 竖12345

flex-direction: row-reverse; / 主轴方向为反向行模式 */ 54321

元素知否换行 默认不换行 wrap ：换行

flex-wrap: nowrap;/ 默认值,不换行 /

flex-wrap: wrap;/ 换行 */

主轴方向+换行的简写形式 flow 流 流动

flex-flow: row wrap; 行模式 换行

flex-flow: column wrap； 纵模式 换行

弹性盒的对齐方式

justify:正确 content：容纳

justify-content: flex-start; /*默认值 起点对齐 /

justify-content: flex-end; / 终点对齐 /

justify-content: center; / 居中对齐 / *→

justify-content: space-between; / 两端对齐 / *

justify-content: space-around; / 环绕对齐 /

justify-content: space-evenly; / 公平对齐 */

主轴 方向→ 和 交叉轴方向↓

垂直在主轴方向的是交叉轴

align-items: flex-end; /* 项目在交叉轴方向终点对齐 */

align-items: flex-start; /* 项目在交叉轴方向起点对齐 */

align-items: center; /* 项目在交叉轴方向居中对齐 */

浏览器页面变小元素收缩 nth-child 第几个孩子

shrink：收缩 grow：扩大 1-会 0-不会

.item:nth-child(3){flex-grow: 2; 父容器有剩余空间,第三个会增长*}

.item:nth-child(3){ flex-shrink: 3; /默认值,父容器空间不足时,项目默认会收缩 ，3是3倍收缩}

动画 过度

transition：过度 2s：2秒

transition: 2s; /* 过渡最简形式 只有一个过渡时间 */

transition: 1s 2s; 过渡时间在前 延迟时间在后 延迟2秒后，以1秒时间过度

transition: 2s all; 默认值all 过渡所有可过渡属性

transition: 2s border-radius; /* 只过渡了圆角,颜色没有过渡效果

ransition: 2s background-color,2s border-radius; /* 颜色与形状一起过渡

先过渡2s背景颜色，等颜色过渡完，再过渡圆角2s

transition: 2s background-color,2s 2s border-radius;

并不是所有属性都有过渡效果的，这个就没有 */

display: none;

过渡练习-按钮---CSS day11/p2

过渡练习-进度条 --CSS day11/p3

位移函数

transform:改变 translate：变为 X:主轴 Y：交叉轴

transform: translate(50px); 一个值为X轴移动

transform: translate(100px,100px); 两个值是2个方向移动

transform: translateX(80px); 指定X轴方向移动

transform: translateY(50px);指定Y轴方向移动

定位到正中心位置 ---用 父相子绝

fu {

width: 600px;

height: 500px;

background-color: #ff0;

position: relative; /* 父亲使用相对定位作为子元素的参照物 /

}

.zi {

width: 100px;

height: 100px;

background-color: #f00;/ 要求:把子元素的原点(左上角)移动到父元素的中心点 /

position: absolute;/ 儿子使用绝对定位 /

left: 50%; / 距离父元素的左侧有参照物(父元素宽度)的50% /

top: 50%; / 距离父元素的顶部有参照物(父元素高度)的50% */

transform: translate(-50%,-50%);

/* 要求：实现子元素在父元素中的完全居中(父子元素中心点重合) */

/* 如果位移函数的值是百分比类型的，默认的参照物是元素自己 */

/* 也就是向左移动子元素宽度的50%，向上移动子元素高度的50% */

 

旋转函数rotate(30deg) 括号里放度

transform: rotate(30deg); 改变：旋转（30度）

transform: rotateX(60deg); 加X的就不是旋转了，压缩

transform: rotateY(45deg); 加Y的就不是旋转了，压缩

缩放函数scale() 大小 --CSS day11/p7

transform: scale(1); /* 大小不变 */

transform: scaleX(2); /* x轴放大2倍 */

transform: scale(0); 缩小到看不见，但元素还在

transform: scaleX(-1); /* X轴镜面翻转效果 */

transform: scale(-1); /* XY轴双方向镜面翻转效果*/

扭曲skew()

transform: skew(40deg); /* X轴 Y轴一起扭曲 */

transform: skewX(30deg);/* X轴扭曲 */

练习、悬停图片时，图片旋转 、变大

父里面有个子图片，父给个宽高和溢出影藏，这样图片变大的时候不会超出父级

图片变块，宽100%，加过渡时间变化，悬停图片时，旋转10度，变大1.3倍

加动画效果，网站引入

CSS3过渡动画模板、CSS3 Transition动画模板--查错网

动画练习-小手垂直无限次位移 --CSS day12/p2

唱片式旋转 和头像V字形移动 --CSS day12/p3