html+css上篇

1. HTML:超文本标记语言

1.1 实体

在html中我们不能直接书写一些特殊符号，比如：空格，大于小于号。这时我们就要用到实体（转义字符）
实体语法：&实体的名字（参考W3chtml的实体）
  空格
> 大于号
< 小于号
© 版权符号

1.2 meta

主要用于设置网页中的一些元数据，元数据不是给用户看。（还可设值移动端的一些东西）
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
Keywords表示网站的关键字，关键字间使用，隔开

description:用于指定网站的描述,会显示在搜索引擎的的搜索结果中

将页面重新定向到另一个网站，以下例子为3秒后跳转到百度

1.3 语义化标签

语义化标签，要关注html标签的语义而不是样式，样式可以通过css改变

• 块元素：(block element) 在网页中一般用块元素进行页面布局
  
  
  
  
  长引用,可用来引用某人说的一段话
• 行内元素：(inline element) 主要用来包裹文字
  表示语音语调的加重
  强调
  短引用
  可嵌套除它自身外的全部元素
  没有任何语义，一般用来在网页中选中文字
• 是替换元素，块元素和行内元素之间，具有两种元素的特点。
• 一般情况下会在块元素中放行内元素，不会再行内元素中放块元素
• p元素中不能放任何元素
• 浏览器在解析网页时，，会自动对网页中不符合规范的内容进行修正
  比如：
  标签写到了根元素外部
  p元素中嵌套了块元素
  根元素中出现了除head和body以外的子元素

1.4 列表

1.有序列表ol>li;
2.无序列表ul>li;
3.定义列表 使用dl标签创建一个定义列表，dt表示定义内容，dd对内容进行说明

      
结构
      
记得v京东i规划v低级的破格v豆瓣

1.5 超链接

超链接
target属性：用来指定超链接打开的位置

• 可选值：
  _self 默认值，在当前页面中打开超链接
  _blank 在一个新的页面打开超链接
• 可以将超链接的href属性设置为#，这样点击超链接之后页面不会跳转而是回到当前页的顶部。
• 可以跳转到页面的指定位置，只需要把href属性设置为：#目标位置标签的id去底部

1.6 内联

内联框架：在当前页面中进入其他页面
src：指定路径
frameborder:指定内联框架的边框.

audio和video

audio标签用来向页面中引入一个外部的音频文件,video引入视频，用法和audio基本相同
音频文件引入时默认情况下不允许用户自己控制播放停止

属性 :controls 是否允许用户控制播放 autoplay 音频文件是否自动播放
如果设置了autoplay则音乐打开页面时会自动播放,但是目前大多数浏览器不会这样（考虑到用户体验问题）
loop 音乐是否循环播放
-->

2. css

2.1 选择器

• 复合选择器
• 交集选择器
  作用：选择同时符合多个条件的元素
  语法：选择器1选择器2选择器3选择器n{}
  注意：若有元素选择器，要以元素选择器开头

   .div.red1{}/*可选中
  */
   .a.b.c{}/*可选中
  */
  

• 选择器分组（并集选择器）
  语法：选择器1,.选择器2,.选择器3,.选择器n{}

   #b1,.p1,h1,span{}
  

  • 关系选择器
  • 子元素选择器
    作用：选中指定父元素的指定子元素
    语法：父元素 > 子元素 div.box > span {} div > p > span{}
  • 后代选择器
    语法：祖先 后代 div span{}
    选择下一个兄弟
    语法：前一个 + 下一个
    选择下边所有的兄弟
    语法：兄 ~ 弟

2.2 伪类

伪类：不存在的类，特殊的类
:first-child 第一个子元素 ul > li:first-child{}
:last-child 最后一个子元素
:nth-child()选中第n个子元素 ul > li:nth-child(){}
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 选中偶数
2n+1 或 odd 选中奇数}这些伪类是根据所有的子元素进行排序

:first-of-type
:last-of-type
:nth-of-type()这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
:not() 否定伪类 将符合条件的元素从选择器中去除ul > li:not(:nth-child(2))

2.3 超链接

:link 表示没访问过的链接（正常连接）
:visited 访问过的链接（只能设置颜色）
:active 鼠标点击
:hover 鼠标移入

2.4 伪元素

伪元素：表示页面中一些特殊的并不真实存在的元素 （特殊的位置）
使用::开头
::first-letter 表示第一个字母
::first-line表示第一行
::selection 表示鼠标选中的内容
::before ::after -before-after 必须结合content使用

2.5 继承和选择器权重

• 继承发生在祖先和后代，但是不是所有的样式都会被继承的，比如背景相关的和布局相关的
• 发生样式冲突时，应用哪个样式由选择器的权重决定
  内联样式 1000
  id选择器 0100
  类和伪类选择器 0010
  继承的样式 没有优先级
• 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先继承（分组选择器是单独计算的）
• 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
• 如果优先级计算后相同，则优先使用靠下的样式

2.6 长度单位：

• 像素px
  屏幕（显示器）实际上是由一个一个小点点构成的
  不同屏幕的像素大小不一样，像素越小的屏幕显示的效果越清晰
  所以200px在不同的设备下显示效果不同
• 百分比
  可以将属性值设置为相对于其父元素属性的百分比
  设置百分比可以使子元素跟随父元素的改变而改变
  em
  em是相对于元素的字体大小来计算的
  1em = 1font-size（16px）
  em会根据字体大小的改变而改变
  rem
  相对与根元素的字体大小来计算

2.7 盒子模型

盒子模型 （盒子的大小由内容区，内边距和边框共同决定，所以计算盒子大小时，需要将这三个区域加到一起计算)

• 边框
  border 简写属性，可以同时设置边框所有的相关样式，没有顺序要求 border:soild 10px red;
  此外还有：
  border-top：10px solid red;
  border-right:none;
  border-bottom
  border-left
  border-style 指定边框样式 border-style：solid dotted dashed double;
  solid 实线
  dotted 点状虚线
  dashed 虚线
  double 双线
  border-color指定边框颜色
  border-width 指定边框宽度
• 内边距padding(简写属性)
  -内边距的设置会影响到盒子的大小，
  -背景颜色会延申到内边距上
  padding-top
  paddig-right
  padding-bottom
  padding-left
• 外边距margin（简写属性）
  -不影响盒子可见框的大小，会影响盒子的位置，会影响实际所占空间大小
  -左，上边距会移动自己，右，下会移动别人，不影响自己

2.8 水平方向的布局

• 一个元素在其父元素中，水平布局必须要满足以下等式
  margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区宽度(必须满足)
0 + 0 + 0 + 200px + 0 + 0 + 0 = 800px；
  若相加结果使等式不成立，则则成为过度约束调整情况
  若这七个值中没有auto，浏览器自动调整margin-right值使等式满足
  这七个值中有三个值可设置为auto：width margin-left margin-right
  若某个值为auto，自动调整auto使等式成立(width的默认值为auto)
  若将一个宽度和一个外边距设置为auto，则宽度会调整到最大，外边距会自动为0
  若三个值都是auto，则宽度最大，外边距为0
  若两个外边距为auto，宽度为固定值，则两个外边距会被设置为相通的值

2.9 垂直方向布局

子元素在父元素的内容区进行排列，若子元素大小超过了父元素，则子元素会从父元素溢出
使用overflow
visible 默认值，子元素会从父元素溢出
hidden溢出内容被裁剪
scroll 生成两个滚动条
auto 根据需要生成滚动条 overflow-x： overflow-y：

2.10 垂直外边距的折叠

相邻的垂直方向外边距会发生重叠现象

• 兄弟元素间的相邻垂直外边距会取两者的最大值（两者都为正值时）
  特殊情况
  如果相邻的外边距一正一负，则取两者的和
  如果都是负值，则取两者中绝对值较大的一个
• 父子元素
  解决方法：使用伪元素

  .box::after{
  		content:"";
  		display:table;
   } 
  

2.11 行内元素的盒模型

行内元素不支持设置宽和高-可以设置margin，border，padding，但是垂直方向不会影响页面布局

display和visibility
display用来设置元素显示的类型
可选值：
block 将元素设置为块元素
inline 将元素设置为行内元素
inline-block 设置为行内块元素
table 设置为一个表格
none 元素不在页面中显示
visibility：用来显示元素的显示状态
visible 默认值，元素在页面中显示
hidden，再页面中隐藏，不显示，但是占据页面位置

2.12 盒子大小

默认情况下，盒子可见框大小由内容区，内边距和边框共同决定

• box-sizing用来设置盒子尺寸的计算方法（设置width 和 height 的作用）
  可选值：
  content-box 默认值，宽度和高度用来设置内容区的大小
  border-box 宽度和高度用来设置盒子可见框的大小：即，width和height设置的是内容区和内边距以及边框的大小

• box-shadow
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
  第一个值：水平偏移量 正值向右移动，负值向左移动
  第二个值：垂直偏移量，正值向下移动，负值向上移动
  第三个值：阴影的模糊半径
  第四个值；颜色
  box-shadow:2px 2px 10px red

2.12 outline,float

outline 用来设置元素的轮廓线，用法和border一样，不同的是轮廓不会影响可见框的大小

float ：可通过浮动使一个元素向其父元素的左侧或右侧移动
可选值：none 默认值 ; left ; right
注意 *

• 元素设置浮动以后，水平布局的等式不需要强制成立

• 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动·

浮动特点：
1.浮动元素会完全脱离文档流，不再占据文档流的位置
2.不会从父元素中脱离
3.浮动元素向左向右移动时，不会超过它前边的其他浮动元素
4.如果浮动元素的上面是一个没有浮动的块元素，则浮动元素无法上移
5.浮动元素不会超过它上边的浮动的兄弟元素，最多和它一样高 -->

2.13 BFC && 高度塌陷问题 && 解决方法

高度塌陷问题：
在浮动布局中，父元素的默认高度是被子元素撑开的。
当子元素浮动后，其会完全脱离文档流，子元素从文档流脱离将不会撑起父元素高度，导致父元素高度丢失，高度丢失后，其下的元素会自动上移，导致页面的布局混乱
开启BFC后：

• 开启BFC的元素不会被浮动元素所覆盖
• 开启BFC的元素子元素和父元素的外边距不会重叠
• 开启BFC的元素可以包含浮动的子元素

开启BFC的方法；

• 设置元素的浮动
• 将元素设置为行内元素
• 将元素的overflow设置为一个非visible的值
• 常用方式：将元素设置为overflow:hidden，开启BFC后可以使其包含浮动元素

如果我们不希望某个元素因为其他元素浮动的影响而改变位置

1. 可以通过clear属性来清除浮动元素对当前元素所产生的影响
   clear
   -作用：清除浮动元素对当前元素的影响
   -可选值
   left 清除左侧浮动对当前元素的影响
   right 清除右侧浮动元素对当前元素的影响
   both 清除两侧中最大影响的那侧
   -原理
   设置清除浮动后，浏览器会自动为元素添加上一个外边距，以使其位置不受其他元素的影响

2. 使用after：

           content:'';
           display:block;
             clear:both;
}

在html中再加一个div用来清除浮动

解决浮动带来的高度塌陷和外边距重叠问题

 .box::before,.box::after{
            content:"";
            display:table;
            clear:both
 } 

2.14 定位；position

1. 相对定位：reletive
   特点：
   · 元素开启相对定位后，若不设置偏移量(offest)不会发生任何变化
   · 相对定位是参照于元素在文档流中的位置进行定位的
   · 相对定位会提升元素层级
   · 相对定位不会使元素脱离文档流
2. 绝对定位：absolute
   1.开启绝对定位后，若不设置偏移量，元素的位置不会发生变化
   2.开启绝对定位后，元素会从文档流中脱离
   3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
   4.绝对定位会使元素提升一个层级
   5.绝对定位是相对于其包含块进行定位的
   包含块
   - 正常情况下：包含块就是离当前元素最近的祖先块元素
   - 绝对定位的包含块：就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块
3. 固定定位：fixed
   固定定位也是一种绝对定位，大部分特点与绝对定位一样
   唯一不同的是固定定位永远参照与浏览器的视口定位
4. 粘滞定位：sticky
   粘滞定位与相对定位的的特点基本一致，不同的是可以在元素到达某个位置时将其固定。

• 开启了绝对定位的元素，水平方向的布局就要满足：
  left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right +right = 其父元素内容区宽度
  当发生过度约束时
  - 若9个值中没有 auto的值，则自动调整right个值使等式慢足
  - 若有auto，则自动调整auto的值
  可设为auto的值
  margin width left right
  因为left和right的默认值为auto，所以若不知道left和right，则等式不满足时，会自动调整这两个值
  垂直方向的布局也要满足

2.15 背景图

background-color：设置背景颜色
background-image：设置背景图background-image:url()
background--repeat:设置背景的重复方式
可选值：
repeat 默认值，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y沿着y轴方向重复
no-repeat 背景图片不重复
background-position：用来设置背景图片的位置
设置方式：
通过top left bottom right center，使用方位词时必须要同时指定两个值，若只写一个，则另一个默认为center
通过偏移量来指定背景图片的位置：水平方向的偏移量，垂直反向的偏移量
background-position:-50px 300px;
bakground-clip: 设置背景的范围
可选值
border-box 默认值，背景会出现在边框的下面
padding-box 背景不会出现在边框，只会出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin：背景图片的偏移量计算的原点
padding-box 默认值，backgroun-position 从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算
background-size：设置背景图片的大小
第一个值表示宽度
第二个值表示高度
若只写一个，则第二个默认为auto
cover 图片比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
background-attachment：图片是否跟随元素移动
scroll 默认值，背景图片会跟随元素移动
fixed 背景图片会固定在页面中，不会随元素移动