HTML、CSS要点精华

记

一、历史

1. 蒂姆.伯纳斯-李爵士万维网的发明人

2. 1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线

3.结构HTML、表现CSS、行为JS

二、知识点

1. <blockquote>段落引用标签

2. <q>行内短引用标签

3. 行内元素中最好不要嵌套块级元素，块级元素里面可以放任何元素

4. 唯独p标签里面不能再放任何块级元素

5. 超链接a标签也是一个行内元素，在a标签中可以嵌套除它自己本身以外的所有元素

浏览器的显示：

浏览器的解析：

6. CSS选择器

父元素 -直接包含子元素的元素叫做父元素子元素 -直接被父元素包含的元素是子元素祖先元素 -直接或间接包含后代元素的元素叫做祖先元素-一个元素的父元素也是它的祖先元素 后代元素 -直接或间接被祖先元素包含的元素叫做后代元素-子元素也是后代元素 兄弟元素I -拥有相同父元素的元素是兄弟元素

伪类(不存在的类，特殊的类) -伪类用来描述一个元素的特殊状态 比如:第一个子元素、被点击的元素、鼠标移入的元素...-伪类一般情况下都是使用:开头 : first-child第一个子元素:last-child 最后一个子元素:nth-child()选中第n个子元素 特殊值; n第n个 n的范围o到正无穷 2n或even表示选中偶数位的元素2n+1 或odd表示选中奇数位的元素-以上这些伪类都是根据所有的子元素进行排序:first-of-type :last-of-type:nth-of-type() -这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序 :not(否定伪类 -将符合条件的元素从选择器中去除

7. 盒子模型：内容区、内边距、边框、外边距

8. 一个盒子的可见大小由内容区、内边距、边框决定

9. 长度单位：

10.伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用::开头

::first-letter 表示第一个字母
::first-line表示第一行
::selection表示选中的内容
::before元素的开始
::after元素的最后
before 和after必须结合content属性来使用

11.颜色单位

12.一个元素在其父元素中，水平布局必须要满足以下等式

margin-left + border-left + padding-left + width + padding-right + bordder-right + margin-right  = 其父亲内容区的宽度（必须满足）

13.垂直外边距的重叠（折叠）

• 兄弟元素
• 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
• 如果相邻的外边距一正一负，则取两者的和
• 如果相邻的外边距都是负值，则取两者中绝对值较大的
• 父子元素
• 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

14.行内元素的盒模型

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

15.display用来设置元素的显示类型

• inline将元素设置为行内元素
• block将元素设置为块元素
• inline-block将元素设置为行内块元素，既可以设置宽度和高度又不会独占一行
• table将元素设置为一个表格
• none元素不在页面中显示

16.盒子可见框的大小

• 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
• box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
• content-box默认值，宽度和高度用来设置内容区的大小
• border-box宽度和高度用来设置整个盒子可见框的大小（width和height指的是内容区和内边距和边框的总大小）

17.浮动

①.通过浮动可以使一个元素向其父元素的左侧或者右侧移动

② 使用float来设置浮动

③ 默认值none，元素不浮动

④ left元素向左移动

⑤right元素向右移动

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

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

⑧浮动元素默认不会从父元素中移出

⑨浮动元素向左或向右移动时，不会超过他前边的其他浮动元素

⑩ 如果浮动元素的上百年是一个灭有浮动的块元素，则浮动元素无法上移

11.浮动元素不会超过他上边的浮动的兄弟元素，最多就是会和他一样高

12. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

![在这里插入图片描述](https://img-blog.csdnimg.cn/92b968b166d14f1bb7b76ac128147bc8.png

结构上解决高度塌陷问题：

表现上解决高度塌陷问题：

同时解决高度塌陷和外边距重叠的问题：

18. 定位

（1）通过定位可以将元素摆放到页面的任意位置，要使用偏移量位置才会发生变化，默认的是static定位，元素不会发生变化

（2）相对定位relative是参照于元素在文档流中的位置进行定位的，相对定位会提高元素的层级，相对定位不会使元素脱离文档流，相对定位不会改变元素的性质，块还是块，行内还是行内

（3）绝对定位absolute会使元素脱离文档流，决定定位会改变元素的性质，行内变成块，块的宽高被内容撑开，绝对定位会使元素提升一个层级，绝对定位是相对于其包含块进行定位的。

包含块：
    正常情况下：包含块就是离当前元素最近的祖先块元素
    绝对定位的包含块：就是距离他最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则相对于根元素进行定位
    html（根元素，初始包含快）

（4）固定定位fixed也是一种绝对定位，所以大部分特点和绝对定位一样，固定定位永远参照与浏览器的视口进行定位，固定定位的元素不会随网页的滚动条滚动

（5）粘性定位sticky和相对定位的特点基本相同，不同的是，粘性定位可以使元素到达某个位置时将其固定，粘性定位的兼容性不好

使用定位实现的水平垂直居中：

position: absolute;
margin:auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

19. 元素的层级

• 开启了定位的元素可以使用z-index 属性来指定元素的层级z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
• 如果元素的层级一样，优先显示下边的元素
• 祖先元素的层级再高也不会盖住后代元素

20.字体相关的样式

21.@font-face设置字体

问题：加载速度，版权，字体格式

22.图标字体iconfont

• 通过@font-face的形式来对字体进行引入
• CDN引用font-awesome

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

• 通过伪元素来设置图标字体
  
• 通过实体来使用图标字体
  

23.行高line-height

（1）行高指的是文字占有的实际高度

（2）行高可以直接指定大小（px 、em），也可以直接为行高设置一个整数，如果行高是一个整数的话，行高将会是字体的指定的倍数

24.文本样式

• text-align文本的水平对齐left(左对齐)、right(右对齐)、center(居中对齐)、justify(两端对齐)
• vertical-align设置元素垂直对齐的方式（可以直接写值 10px）可选：baseline(默认值，基线对齐),top(顶部对齐)，bottom(底部对齐),middle(居中对齐)
• text-decration设置文本修饰，可选值：none(什么都没有)，underline(下划线),line-through(删除线),overline(上划线)
• 文本溢出设置省略号
  

25.背景

• background-color设置背景颜色
• background-image设置背景图片
  
• background-repeat设置背景图片的重复方式
  
• background-position设置背景图片的位置
  
• background-clip设置背景的范围
  
• background-origin设置背景的偏移量计算的原点
  
• background-size设置背景图片的尺寸
  
• background-attachment设置背景图片是否随元素移动
  
• background简写属性
  
• 图片属于网页中的外部资源，外部资源都是按需加载的，需要浏览器单独发送请求加载，浏览器加载外部资源都是按需加载的，需要则加载，不用就不加载
• 渐变，渐变是图片，需要通过background-image来设置
• 线性渐变，颜色沿着一条直线发生变化，linear-gradient()linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域
  
• 渐变可以设置多个颜色，多个颜色默认值情况下均匀分布，也可以手动指定渐变的分布情况
• radial-gradient()径向渐变（放射性的效果）
  
  

26.表格

（1）用<table>来创建表格

（2）用<tr>来创建表格中的一行，有几个tr就有几行

（3）用<td>来创建表格中的单元格，有几个td就有几个单元格

（4）用colspan来横向的合并单元格

（5）用rowspan来纵向的合并单元格

（6）长表格

• 可以将表格分成三部分：头部thead、主体tbody、底部tfoot
• <th>表示头部的单元格
• border-spacing指定边框之间的距离
• border-collapse:collapse设置边框的合并
• 默认情况下元素在td中是垂直居中的，可以通过vertical-align来进行设置
• 如果表格中没有使用tbody二十直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody里面，tr不是table的子元素
  
• 设置元素水平垂直居中的一种方法：
  将元素设置为单元格
  

 <style>
    .box1 {
      display: table-cell;
      vertical-align: middle;
      width: 300px;
      height: 300px;
      background-color: tomato;
    }

    .box2 {
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>

27.表单form

28.过渡transition

• 通过过渡可以指定一个属性发生变化的切换方式
• 通过过渡可以创建一些非常好的效果，提升用户的体验
• transition-property指定要执行过渡的属性，多个属性使用,逗号隔开，如果所有属性都需要过渡，则使用关键字all，大部分属性都支持过渡，注意过渡时必须是从一个有效值向另一个有效值进行过渡
• transition-duration指定过渡效果的持续时间，时间单位s和ms 1s=1000ms
• transition-timing-function过渡的时序函数
  
• transition-delay过渡效果的延迟，等待一段时间后执行过渡
• transition简写属性，同时设置所有的过渡相关属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间

29.动画animation

• @keyframes 动画名
  
  

30.平移transform

31.旋转rotate

• 通过旋转可以使元素沿着x或y做z 轴旋转指定的角度
  

32.缩放scale

33.Flex

• 弹性盒、伸缩盒
• CSS中的一种布局方式，它主要用来代替浮动来进行页面布局
• flex可以是元素具有弹性，根据页面的大小的改变而改变
• 弹性容器：要使用弹性容器，必须先将一个元素设置为弹性容器，通过display来设置弹性容器
• display: flex;设置为块级弹性容器
• display: inline-flex 设置为行内的弹性容器
• 弹性元素：弹性容i去的子元素是弹性元素（弹性项）
• 一个元素可以同时是弹性容i去和弹性元素
• 弹性容器的属性：
  
  
  
  
• 弹性元素的属性：
  
  

• 元素水平垂直居中

justify-content: center；
align-items:center;

34.像素、视口

35.响应式布局

• 网页可以根据不同的设备或窗口大小呈现不同的效果
• 使用响应式布局，可以使一个网页适用于所有设备
• 相应布局的关键就是 媒体查询
• 通过媒体查询，可以为不同的设备或设备不同状态来分别设置样式