HTML/CSS 基础篇一

HTML开头标签以及作用

<!DOCTYPE>

该声明位于文档最前面。告诉浏览器用何种规范解析页面。

语义化标签

标签：
1⃣️块级标签：div p h2～h6 ul li ol dl dd header footer nav main ……
独占一行（自动换行），可以宽高。
2⃣️行内标签：a span strong i small……
不可独占一行，也不能设置宽高，宽高由内容撑开。
3⃣️行内块级标签：input button textarea img
默认在一行排列，但是可以设置宽高。

合理的标签干合理的事
语义元素清楚的向浏览器以及开发者描述其意义
优点：

• html结构清晰，代码可读性好。
• 有利于SEO（搜索引擎优化），搜索引擎根据标签来确定上下文和各个关键字的权重。
• 无障碍阅读。样式丢失后能够页面呈现出清晰的结构。
• 方便其他设备解析
• 便于团队维护，语义可具有可读性，与css关系更和谐。

如何转换：display:inline/line-block/block

src和href的区别。

src：外部资源所在位置。指向的内容会嵌入到文档的当前标签所在位置。在请求src资源时，会将其指向资源下载并引用到文档中，例如js脚本，img图片地址。当浏览器解析到该元素时，会暂停其他资源的下载、处理，直到该资源加载、编译执行完毕后。
href：网络资源所在位置（超文本引用）。建立与当前元素或当前文本之间的链接。

link和@important的区别

属性：

• link是html标签
• @important是css提供

兼容性：

• link无兼容性问题
• @important只有在IE5以上才可识别

加载顺序：

• 页面加载时，link也会被同时加载。
• @important会等到页面加载完毕后才会加载

DOM可操作性：

• link可通过JS操作DOM，插入link标签来改变样式。
• 由于DMO是操作基本文档，@important不可以。

权重：

• link权重高。如果存在相同的样式，link方式会覆盖掉@important。

关于CSS中盒子模型

标准盒子模型

IE盒子模型

伸缩盒模型

其实我们最常用的就是标准盒子模型，width和height是指的内容的宽和高，并不是盒子最终的宽高。盒子最终的宽高是由内容、padding、border最终组成。这样在项目中会遇到一个问题，若只想设置盒子的最终宽和高为100，如果加上padding和border就会变大。CSS3提供了box-sizing:border-box，好处为width和height为盒子的大小而不是内容的大小，这样写比较方便，无需来回改值。在移动端响应式布局提供了flex伸缩盒模型来实现。

CSS选择器

• 通用选择器 *
• ID选择器
• 类选择器
• 标签选择器
• 属性选择器
• 后代选择器
• 子选择器
• 群组选择器
• 相邻同胞选择器
• 伪类选择器 ：
• 伪元素选择器 ::

优先级：
!important > 行内样式1000 > ID选择器 100> 类，伪类和属性选择器 10> 元素选择器 1> 通配符、子选择器、相邻选择器 0 > 继承 > 浏览器默认属性。”

外层边距重叠以及重叠的结果。

在CSS中两个相邻的盒子（兄弟关系或者是子孙关系），它们的外边距会合并成一个单独的外边距，这种合并外边距的方法叫做折叠。所结成的外边距称为折叠外边距。

最终的margin值计算方法如下：

• 两个相同大小的正数：取某个外边距的值。即30px与30px发生折叠，折叠后的值为30px。
• 两个不同大小的正数：取较大的外边距的值。即30px与20px发生折叠，折叠后的值为30px。
• 一正一负：取正数与负数的和。即30px与-20px发生折叠，折叠后的值为10px。
• 相同大小的负数：同相同大小正数。-30px与-30px折叠，折叠后为-30px。
• 不同大小负数： 取绝对值较大的负数。-30px与-20px折叠，折叠后为-30px。

清楚浮动的方式

• 父级div设置宽高
• 结尾处添加div 定义伪类

.clear {
	clear：both
}

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
不建议使用

• 父级div添加类class-fix

.clear-fix::after: {
	content: '';
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clear-fix {
	*zoom: 1;
}

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
推荐使用

• 父级div设置（通过触发BFC方式）

overflow： hidden

优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
不推荐使用

sprit是什么

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的"background-image",“background-repeat”,"background-position"的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。

优点：
①减少网页的http请求，从而加快了网页加载速度，提高用户体验。
②减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
③解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
④更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

缺点：
①在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。
②CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
③在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
④精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。