HTML与CSS学习笔记(3)

1、float浮动

脱离文档流：沿着父容器靠左或者靠右进行排列

文档流
文档流是文档可显示对象在排列时所占用的位置

float特性
left、right、none

float注意点：
只会影响后面的元素,对于浮动元素之前的元素是不造成任何影响的
内容默认提升半层，可实现图文混排样式
默认宽根据内容决定
换行排列，一行放不下浮动元素就会换行排列
主要给块元素添加，但也可以给内联元素添加

如何清除浮动？
上下排列：clear，表示清除浮动：left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响，而不能溢出
display：inline-block（BFC规范），不推荐，父元素会影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
(clear属性只会操作块标签，对内联标签不起作用)
写法：.clear::after{content:'';clear: both;display: block;}

2、position定位

position特性
css position属性用于指定一个元素在文档中的定位方式，top、right、bottom、left属性则决定了该元素的最终位置

position取值：
static（默认）
relative：（相对定位）
absolute
fixed
sticky

relative：（相对定位）
如果没有定位偏移量，对元素本身没有任何影响：left: 100px;top: 100px;left正值表示向右移动
不使元素脱离文档流
不影响其他元素
left、right、top、bottom是相对于当前元素自身进行偏移的

absolute：（绝对定位）
使元素完全脱离文档流（类似于float）
使内联元素支持宽高
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素，则相对于定位祖先元素发生偏移，没有定位祖先元素则相对于整个文档发生偏移（如相对于html标签，左上角当做原点进行偏移）
例：
#box1{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;position: relative;}
#box2{width: 100px;height: 100px;background: red;position: absolute;top: 0;left: 0;}
box2祖先元素box1有定位元素relative（绝对、相对、固定其中一种都行）所以，box2以box1的左上角为原点进行偏移

fixed：（固定定位）
使元素完全脱离文档流
使内联元素支持宽高（让内联元素具备块特性）
使块元素默认宽根据内容决定（让块具备内联特性）
相对于整个浏览器窗口进行操作，不受浏览器滚动条的影响(比如弹窗，回到顶部按钮等)

sticky：（粘性定位）
在指定位置，进行粘性操作
(快速写p标签的方式p{aaaaa内容}*6)

z-index：（定位层级）
默认层数为0
嵌套的时候层级问题：
先用父容器的层级来比较，如果父容器没有层级才用子元素的层级来比较

3、css添加省略号
width
必须有一个固定的宽
white-space：nowrap
不让内容折行；
overflow：hidden
隐藏溢出的内容
text-overflow:ellipsis
添加省略号

4、css Sprite
特性：
css雪碧也叫作css精灵，是一种网页图片应用处理方式，它允许你将一个页面涉及到的所有零星图片大欧包含到一张大图中去加载。
其实就是利用同一张背景图把其中的图标定位到不同的区域，即背景定位
好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

5、css圆角
border-radius:可写四个值分别是，左上，右上，左下，右下

6、PC端的布局？
通栏、版心

7、HTML与XHTML的区别：

DOCTYPE文档及编码
元素大小写:html:大小写标签都可以； Xhtml：只能小写
属性布尔值:html:checked; xhtml:checked="checked"
属性引号:xhtml中属性值必须加引号：<div title="hello"></div>
图片的alt属性:xhtml：img标签必须写alt属性
单标签的写法：xhtml单标签结尾必须加/:<meta/>
双标签闭合：html双标签可以可以不写完整（十分不推荐），当时xhtml不行

8、strong和b、em和i

表现形态都是文本加粗和文本斜体
区别在于：strong和em是具备语义化的（推荐），而b和i是不具备语义化的。
i和b的应用场合：当class较多时简化选择器操作。

9、引用标签
blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题

语义化标签的好处：有利于计算机或者浏览器便于解析，让搜索引擎更方便地搜索到想要的内容；规范编码的规范程度，便于多人协作开发。其实完全可以使用div和span（相当于内联的div）来替代，但是在合适的语境使用合适的标签更加符合规范

10、iframe嵌套页面标签(钓鱼网站经常用)
iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
即：可以引入其他的html到当前的html中显示

主要是利用iframe属性进行样式的调节的
应用场景：数据传输、共享代码、局部刷新、第三方介入等

11、br和wbr？

br：单标签，就是换行，wbr就是软换行:在长单词里面加，则会一部分一部分的换行，不会整个单词一次行换行:Http<wbr>Html<wbr>XhtmlCss Html和Http依次换行，该长单词不会一次性换行

12、pre与code

针对网页中的程序代码的显示效果(被包围的代码文本会自动生成span等标签)
输出尖括号是要先进性转义&lt;(<)；&gt;(>)
pre标签可定义预格式的文本。被包围在pre元素中的文本通常会保留空格和换行符
code标签：里面包围着代码文本
pre作为外层元素，code作为内层元素可实现代码的显示效果。

*主要了解含义即：最后实现代码显示的是这两个标签，一般不会直接写而是采用markdown语法来自动生成

13、map与area？
给图片中的特殊图形添加链接，area所添加的热区形状：矩形、圆形、多边形
矩形：只用写入左上角和右下角的坐标即可
圆形：中心点坐标和半径
多边形：要写多点坐标

14、embed与object？（用得少）
都表示能够嵌入一些多媒体，如flash动画、插件等。基本没多大区别，主要为了兼容不同的浏览器
object元素需要配合param元素一起完成

15、audio与video
属于H5的新功能
audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件

为了提高兼容性，要配合source标签

16、文字注解？

ruby、rt这样一个组合
css实现文字反向排列，bdo标签实现文字反向排列.

17、扩展link标签
主要作用为引入外部文件
添加网址标题栏前的小图标
<link rel="icon" type="/image/x-icon" href="http://www.mobi/favicon.ico">
引入DNS预解析
<link rel="dns-prefetch" href="//res.mmstat.com" />

18、meta扩展学习？
优化网页
meta添加一些辅助信息：
还可以添加一些功能：渲染模式、刷新、缓存
ctrl+f查找文本

*注：积累大网站的meta和link都写了什么，可能对电面试有帮助

19、HTML5新语义化标签
一般一个页面只能出现一次
header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航

article：独立的内容（重在独立）
aside：辅助信息的内容
section：区域（重在划分区域）
figure：描述图像或视频
figcaption：描述图片或视频的标题部分

注：虽然可以使用div来做但是，语义化标签的好处上面已经讨论过了

datalist：选项列表
details/summary:文档细节/文档标题
progress/meter：定义进度条/度量度量范围
time：定义日期或时间
mark：带有记号的文本
(title属性为鼠标停留显示提示信息)
(建议尽量把div换成相应的语义化标签)

20、表格扩展
添加单线：border-collapse：collapse
隐藏空单元：empty-cells：hide
斜线分类：border/rotate
列分组：colgroup/col

21、表单扩展

美化表单控件：1、用伪类,主要用label标签：checked 2、position+opacity
label标签可以增大checkbox的选中区域

新的input控件：
email：电子邮件地址输入框
url：网址输入框
number：数值输入框
range：滑动条
date/month/week:日期控件
search：搜索框
color：颜色控件
tel：电话号码输入框(在移动端会默认调起数字键盘)
time：时间控件

新的表单的属性：
autocomplete：自动完成 默认：on \ off
autofocus：获取焦点
required：不能为空
pattern：正则验证,通过验证则继续运行

method：数据传输方式
enctype：数据传输类型
name/value：数据的键值对

扩展标签
fieldset：表单内元素分组
legend：为fieldset元素定义标题
optgroup：定义选项组

22、BFC规范

Formatting context（格式化上下文）是W3C CSS2.1规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

BFC即Block Formatting Contexts（块级格式化上下文），它属于上述中的其中一种规范具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

触发BFC规范的元素，可以形成一个独立的容器，不受到外界的影响，从而解决一些定位问题
触发BFC
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）

BFC特性及其应用
解决margin的叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题