htm+css复习

选择器

• 类选择器，id选择器，标签选择器，复合选择器，后代选择器

属性选择器

img[alt=“foo”] {
这个选中了所有alt为foo的图片；
}

• img[alt^=‘f’]{
  选择alt属性以f开头的图片；
  }
• img[alt$=‘f’]{
  选择alt属性以f结尾的图片；
  }
• img[alt*=‘f’]{
  123 f 34
  选择alt属性以中间包含’f’的图片；
  }
• img[alt]
  {
  选择所有有alt属性的img标签
  }
• p[like_{=‘orange’][like}=‘google’]{
  p标签里面含有like属性含有orange和Google的标签
  }
• [foo|= “zh”]
  {
  选择foo属性为zh 或者以zh-开头的所有元素；
  }
• a[href=$=’.txt" i]
  {
  i表示大小写不敏感；
  }

连接伪类选择器

a:href {
没有访问过的
}
a:visited {
color: yellow;
访问过的；
}

• lv ha(active)

位置伪类

li:nth-child(2n+1){
n从0开始增长；
colro:red;
}

• li:first-child{

}

• li:last-child{}
• li:nth-child(3){选择第三个子节点}
• nth-last-child(5){倒数第5个}
• li:first-child:hover {}
• li:first-child:nth-last-child(8){即使第一个也是倒数第8个}
• odd even ; 奇数项，偶数项

选择器优先级

• 优先级的定位： 0,0,0,0;
• 不进位

继承

• inherit
• 继承下来的话没有优先级，比*还要下；
• 通配符的优先级是0,；
• 继承是啥？直接选择不到子元素；

层叠

css值和单位

• 纯数字；百分比； rgb #fff(白色)

focus光标点下去，例如光标在input元素里面，有tabindex属性的元素；

lvha

• 位置伪类，P:first-child; :last-child; :nth-child;

bgc : hls:

绝对长度单位：cm,mm, in; 相对长度单位： px;

em当前元素font-size的大小；

• ex:

  我是当前元素

• div{font-size: 20px} p{width:10em;(相当于200px) font-size:1.5em;(相当于30px)}
• google浏览器默认最小字号12px;
• rem;根元素的 字号大小；仅仅跟根源素（HTML）元素字号大小有关；
• border-radius: 3px; //圆角
• ch 是0字符的宽度；
• degree；弧度 ；
• 1turn = 360deg; 1000ms = 1s;

伪类选择器

contnet 字符串

div:before {
content: ‘(’ attr(foo) ‘)’;
}

字体

• 字体族：serif;//衬线字体； 周围小三角；//ex：宋体

• sans-serif;// 非衬线字体；//雅黑

• monospace; //等宽字体；

• 字体族不能加引号；

• 字体的退化方案；

• 英文写前，中文写后；

字重

• font-weight；bold，100-900；且只能是100的倍数；

###字号 font-size

• medium,large,small;//不推荐使用
• 使用百分比；
• 120% 和1.2em是一样的；
• 继承的是 计算后 的结果，不是 书写后 的结果；

font-style

• italic;//斜体， 专门设计的斜体；
• oblique;//斜体 ，就是把正体倾斜

###font-weight:

• 400,700;

font-variant

• text-transform: uppercase; //将字体转大写；

• text-transform: lowercase; //将字体转小写；

• font: normal bold small-caps 20px/1.5 宋体;

• text-decoration:underline; //overline;// line-through;

• 属性选择器 0010；

HTML实体

• > < ' © &quote;

• 我 我(我)

###test

• role 表达当前元素正在模拟显示何种常见的UI组件
• arai-xxx 则是这个组件的当前状态
• data-xxx指的是自己起的属性

input

• email

• text

• tel

• date

• time

• number

• submit

• reset

• button

• file

• password

• 属性

• required 必填属性

• placeholder 提示文本

• autofocus 自动聚焦属性

• multiple 可以多选文件进行提交

• autocomplete 有name属性，同时提交成功过，可以记录提交过的内容，类似账号，密码一样

vedio audio

• autoplay
• loop
• controls
• muted 静音播放

属性选择器

• e[attr]
• E[attr=“val”]
• E[class^=test] {} 匹配class 属性并且以test开头的 元素
• E[att $=“val”] 结尾
• E[attr *=“val”]匹配具有attr属性并且含有val的元素

权重

• 类选择，属性选择器，伪类选择器，权重都是10
• 标签选择器 权重是1；

结构伪类选择器

• E:first-child

• E:last-child

• E:nth-child(2n+1);

• E:nth-child(5); 选择第5个

• n从0开始，适合奇偶行变色

• 2n,2n+1,n+5,-n+5;

• E:first-of-type

• E:last-of-type

• nth-of-type(n)

• 这两个的区别

<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
section div:nth-child : 一个也选择不了，先看nth-child,再看div
section div:nth-of-type: 选择熊大
权重是12

伪元素选择器

• 利用css来创建新标签元素；
• ::before
• ::after
• 通过css创建新元素，但是找不到，属于行内元素
• 里面必须有content
• 权重是1，和标签选择器一样

css3盒子模型

• box-sizing: content-box// border-box;
• 第一个是默认的，第二个是盒子大小固定不变的，相当于width是盒子的最终大小

清除浮动的方式

css图片模糊处理

• filter：blur(4px);//数值越大，图像越模糊

宽度

• width: calc(100% -30px);
• 可以进行加减乘除的计算

css3的过渡属性

• transition: 要过渡的属性 花费时间 运动曲线 何时开始

• 时间的单位是s,合适开始，默认值是0

• 谁做过渡谁来加

• 经常和hover一起搭配来使用

• 如果想写多个属性，用逗号分隔

• 如果想要过个属性，可以选择all(要过渡的属性)

• 新增的动画属性 曲线默认是ease;

border-radius

• border-radius: 7px;
• 行高的一半，圆角

day01

meta 页面配置信息

• name=“keywords” content=“关键词”
• name=“description” content=“当前页面的描述”

影响页面排名的4个 因素

** 1、竞价排名
** 2、下面

• keywords

• description

• title

• h1

• h1 原则上不能写两个，你写两个也不影响显示

标签的分类

• 块级元素：设置了高度和宽度都会生效，不设置高度和宽度，默认宽度是100%，默认高度随着内容填充 div p ul>li ol>li dl>dt;dl>dd;
• 行内块元素：img input select
• 行内元素； span a b i em ；b是加粗，i和em是斜体；
• 转换方式： display;
• display: none;//脱离文档流
• visibility: hidden;//不脱离文档流

有序列表的type属性

• ol>li; type属性默认的方式是1，按照数字排序
• A ;按照大写字母排序
• a；按照小写字母排序
• I;按照大写罗马数字排序
• i;按照小写路吗数字排序

a标签

• 超链接
• 锚基点

• 加 另一个a的name数值 表示标记锚点，当点击之后，页面自动定位到锚点的位置；

• #abc; 这个是转到name属性为abc的a
• 这个是页面内定位，只写#号，代表转到页面内顶部

href=“javascript:void(0)”;

br标签

• 换行；相当于回车；

框架页

• 页面中在嵌套一个页面
• iframe src=“另一个页面的地址”;
• iframe 搭配a 标签，a的target属性 等于 iframe的name属性数值，那么会在iframe中跳转；

table

• thead; tbody;
• tr 一行
• td 一列
• th 一列，代表表头的列；

id可以重复

子元素选择器

• 父元素选择器 子元素选择器

• 这个找到的可以是孙子

• 父元素选择器>子元素选择器

• 找到直接子元素：儿子

border的样式

• solid 实线
• dashed 虚线 线段
• dotted 虚线 圆点
• inset 向内凹陷
• outset

margin 外边距

• 2 个值： 上下 左右
• 4个值： 上 右 下 左
• 1个值： 上下左右

padding 内边距

• 类似外边距

day01下午

转义

• & 表示& 符号；
• <
• >
•  
• 作用：防止HTML注入；

浮动

• 自动转换成 inline-block;
• 脱离标准流；
• 谁先飘起来谁先靠右
• 那么浮动元素的父元素的高度是0；
• 清除浮动：将浮动起来的元素回归到文档流中；
• 方法：统计元素中定义一个元素：
• clear:
• left 清除左浮动， right 清除右浮动， both清除左右浮动；

定位

• 子绝父相

• 改变元素的位置，但是不会影响到其他元素；

• position： static;//静态定位(默认) relative;//相对定位； absolute;//绝对定位， fixed 屏幕固定

• 如果出现了非static 定位，top, left right bottom;会立即生效； 如果是static,那么写了也不生效；

• relative： 不脱离 标准流

• 参照原本没有定位的位置；

• 绝对定位： 脱离文档流；

• 起点：是上一个有定位的父元素

• 固定定位：脱离文档流

• 参照点是：屏幕；

• 覆盖规则：（非static定位)后写的覆盖先写的；

• z-index: 1;//有z-index的覆盖没有z-index的；

calc函数

• calc(100% - 80px);

• 单位： px, 100% 参照父元素的百分比 vw,vh:参照屏幕的百分比；

• 100vh, 100vw;参照屏幕的高度和宽度的100%；

• em是 相对长度； 参照的是父元素的 font-size;

• rem 参照的是 html 的 font-size;

注意点

• body,html的宽度和高度是随着填充来变的，刚开始是0；

弹性模型

• 作用：子元素分父元素 的区域；

• 具备的条件： ex：爸爸给3个儿子分房子；

• 前提：爸爸有房子，父元素要有宽度和高度；

• 爸爸同意吧房子分给儿子： 将父元素设置为弹性模型；

• 父元素：display: flex;

• 父元素可以决定分配方式： felx-decoration: column; row;(默认)

• row-reverse 左右分，反方向；

• column-reverse: 上下分，反方向

• row; 左右分

• align-items; 子元素的对其方式；条件；自由在左右分，子元素高度不是100% 或者 上下分，子元素宽度不是100% 才有对其方式；

• align-items: flex-start;(默认，开始位置对其)

• align-items: flex-end;(结束位置对齐)

• align-items: center;(居中对齐)

• 子元素：设置权重值：flex:1;

• 如果是左右分，子元素 高度是 100% ，默认高度；

• 如果是 上下分， 子元素 默认 宽度 是100%；

vertical-align:

• 对其方式：base,bottom,middle, top;
• 常用来解决图片和 文字对其（例如头像和文字对其）

outline 和 resize:

• textarea{ outline: none; resize: none;}
• outline是去除轮廓线，点进去会有条蓝色线的那个，resize:none;意思是把拖动框去除；

解决图片底部默认空白的解决方法

• 1. 图片和文字在一行的话，默认的是基线对其方式
• 2. 解决方法：1. 使用vertical-align: middle, bottom, top;
• 3. 解决方法2： 可以把图片转换为块级元素，块级元素没有基线对其方式；

省略号

• 单行省略： white-space: nowrap;
• overflow: hidden; 溢出部分进行隐藏； text-overflow: ellipsis;省略号
• 多行省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

小三角

• width: 0;
  height: 0;
  /* border: 100px solid red; */
  border: 100px solid transparent;
  border-top-color: red;

鼠标的默认样式

<ul>
        <li style="cursor: default;">我是默认的小白鼠样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
 </ul>