前端工程师技能总结之H5、CSS3篇（一）

空闲时写在这里虽然这些东西是靠用的越多越熟练，但时间一长避免不了有些会遗忘，为此简单整理下来方便查找

目录

html的基本标签速览

css层叠样式的设置

---

html的基本标签速览

• <hi>标题，i表示标题的大小 i=1,2,3,
• <span>文本标签
• <p>段落标签
• <pre>保留预留文本格式
• <img>图片
• <a>超链接
• <b>加粗
• <strong>强调
• <blockqute>引用摘要
• <ul> <li>无序列表
• <ol><li>有序列表
• <dl>普通列表 <dt>创建列表中的上层项目<dd>下层项目
• <nav>导航
• <div>块级标签,用于定义文档中的分区和节
• <header>页头
• <section>身体
• <footer>页尾
• <article>来自外部的文本
• <figure>多媒体
• <figcaption>多媒体描述文字
• <form>表单 用于提交

1. 属性action:处理表单提交的url地址。
2. fieldset:代表一组信息，把同类信息打包。
3. legend:改组信息的标题。

• <input> 文本框 属性placeholder占位符。maxlength最大长度。type输入框类型。（text文本，radio单选，checkbox复选框）name提交值，checked选中，button按钮，submit提交，reset重置
• <select>下拉菜单
• <option>选项（multiple多选）（size大小）
• <textarea>多行文本框
• <iframe>内联框架 frameborder 是否需要边框（0 false 1 ture）
• table表格 border,cellspacing,cellpadding,width,align

---

块级元素的注意事项：

1. 块级元素的前后会换行。
2. 默认空间宽度独占一整行，高度是自己本身的高度。
3. 可以设置宽高。
4. 块级元素里面既可以嵌套内嵌元素，又可以嵌套块级元素。
5. 内容块级元素尤其是p和h标签，不能嵌套布局块级元素

内嵌元素的注意事项：

1. 不会换行。
2. 默认占据的空间就是本身的宽度与高度。
3. 内嵌元素不能设置宽高，宽高是根据自身内容而定。
4. 内嵌元素内只能嵌套内嵌元素，不能嵌套块级元素。

css层叠样式的设置

• 基本选择器

1. 元素选择器
2. id选择器
3. 类选择器

• 复合选择器

1. 后代选择器
2. 交集选择器
3. 并集选择器

font-family，

font-size:12px;0.2em;(基于浏览器默认值16px，以倍数来计算)

font-style:oblique;强制斜体。

font-wight:文字加粗。

color:字色。

有高度的块级元素设置宽高后可以让文本垂直居中。

• css的引入方式

1. 外联:实现内容样式分离。link
2. 内嵌：<style></style>
3. 内联：<h1 style="color:red;">缺点:不易于维护
4. 外部导入@import，必须写在style的第一行，（不常用）并且是在另外的css中引用。

我觉得在样式设计中最重要的就是浮动，盒子模型，和定位这三个内容，

• 浮动（不浮动大板块，小范围浮动）

浮动造就的影响:

1. 在允许的空间并排呈现，若空间不够，会自动换行
2. 改变块级元素站一整行的特性，去掉多余的空间，把宽度设置成本身内容的或者设置的宽度。
3. 脱离正常文档流，下方元素会占据浮动元素的位置
4. 浮动造成父元素塌陷
5. 内嵌元素浮动后将可以被设置宽高。

解决浮动造成的影响:

1. 清除浮动
2. 为父元素设置宽高
3. 让父元素和子元素一起浮动
4. 为父元素设置overflow:hidden（溢出隐藏）
5. 为塌陷的父元素添加一个after属性

案例：下拉列表菜单

• 盒子模型

margin  外边距 上下两个盒子top+bottom  左右相邻的两个盒子right+left

padding 内边距

 

补充一点隐藏和显示的内容:

display:none,隐藏元素不占据文档流的位置，空间被让出

visbility:hidden,隐藏元素所占空间不被让出。

在块级元素里面设置margin:0 auto ;可以让内部的内容水平居中

关于margin的BUG ：当两个块级元素嵌套，子元素的marginTop会使父元素一起移动，解决方法

1. 为父元素设置overflow:hidden;
2. 为父元素设置边框

• 元素的定位
• 绝对定位（position:absolutle）

1. 脱离文档流，元素占据的空间被释放
2. 原点:最近有一个定位（绝对/相对）的父元素作为原点参考，若没有则跟界面原点（浏览器页面左上）作为参考

• 相对定位（position:relative）

1. 不会脱离文档流，原本元素在标准文档流中占据的空间依然会占据，不会被释放
2. 根据自身在文档流中的位置作为参考。

使用的方法:（父相子绝）父元素相对子元素绝对

1. 保护文档流不受影响
2. 能给子元素绝对定位提供原点参考

• 固定定位（position:fixed）

1. 脱离文档流
2. 原点始终根据浏览器窗口0 0的位置，与父元素没有任何的关系，父元素的定位对其没有任何影响

属性:z-index:表示在叠加的顺序上下立体的关系。