HTML CSS 知识点总结

网页

1.1什么是HTML

HTML指的是一种超文本标记语言，它是用来描述网页的一种语言。

HTML不是编程语言，而是一种标记语言，标记语言是一套标记标签。

（什么是超文本：①它可以加入图片，声音等超出了文本的限制②它可以从一个文件跳转到另一个文件，与各地的文件链接即超级链接文本）

1.2网页的形成

网页是由网页元素组成（其实就是一个HTML文件），这些元素利用HTML标签描述出来，然后通过浏览器解析显示给用户。

1.3web标准

web标准是由w3c组织和其他标准化组织制定的一系列标准化集合

1.3.1web标准的构成

主要包括结构，表现和行为

 

---

一：动画简写属性

---

animation:动画名称* 持续时间* 运动曲线 何时开始 播放次数 是否反方向播放 动画起始或者结束的状态；

animation: name duration timing-function(速度曲线) delay iteration-count direction fill-mode;

animation:name* 5s* linear(匀速) 2s infinite(循环) forwards(停在结束位置)

二：居中

---

left:50%;

transform:translateX(-50%);

三：盒子阴影

---

box-shadow: h-shadow*(水平阴影) v-shadow*(垂直阴影) blur(模糊距离) spread(尺寸) color inset(将默认的外部阴影改成内部阴影);

阴影不占用盒子，不会影响其他盒子排列！

四：想让文字在盒子正中间就不要设置盒子宽高，让文字把盒子撑开

---

五：a是行内元素，不能直接设置宽高和内外边距

---

六：清除浮动的方法

①最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。

②给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

③给父盒子添加overflow属性。

overflow:auto; 有可能出现滚动条，影响美观。

overflow:hidden; 可能会带来内容不可见的问题。

④父盒子里最下方引入清除浮动块。最简单的有：

有很多人是这么解决的，但是我们并不推荐，因为其引入了不必要的冗余元素 。

⑤after伪类清除浮动。

外部盒子的after伪元素设置clear属性。

#parent:after{

clear: both;

content: "";

width: 0;

height: 0;

display: block;

visibility: hidden;

}

这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决CSS盒子塌陷。

备注：第五种方法虽好，但是低版本IE不兼容，具体选择哪种解决方法，可根据实际情况决定。

---

七：CSS3盒子模型

1.box-sizing：content-box盒子大小为width+border+margin

2.box-sizing：border-box盒子大小为width

如果我们把盒子模型改成了box-sizing：border-box那么padding和margin就不会撑大盒子了

---

八：.box:hover img和.box img:hover的区别

.box:hover img：意思为鼠标经过.box里面的img发生变化

.box img:hover：意思为经过box里面的img时发生变化

---

九：浮动给ul里的li加，不能给li里面的a加

---

十：position

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

---

十一：opacity属性

1.opacity习惯上说“透明度”，其实应该叫“不透明度”。opacity 意思：不透明，而背景色的默认值：transparent意思才是“透明的”。所以opacity用来设置不透明度，取值从[0.0~1.0]，代表从完全透明到完全不透明。

---

十二：什么是HTML语义化标签：

语义化的标签，旨在让标签有自己的含义。

<p>一行文字</p>

<span>一行文字</span>12

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。

---

十三：margin-left：auto左对齐

---

十四：css单位

绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。