一、元素
一、关于行内元素和块状元素的说明
根据CSS规范的规定，每一个网页元素都有一个
display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，
①div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)，div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；
②span元素的默认display属性值为“inline”，称为“行内”元素。；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
二、行内、块状元素区别：
- 块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化 - 一般情况下，块级元素可以设置 width, height属性，行内元素设置width, height无效(
注意：块级元素即使设置了宽度，仍然是独占一行的) - 块级元素可以设置margin 和 padding.
行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
三、特征：
块元素(block element)
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素：根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )
<br/> //换行
<hr> //分隔线
<input> //文本框等
<img> //图片
<link> <meta>
行内块元素
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
img、input
二、盒模型(两种)
W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度
IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度
切换盒模型方法
box-sizing: content-box 是W3C盒子模型（默认值）
box-sizing: border-box 是IE盒子模型
三、CSS选择符
（一）元素选择符
- E（某个元素,如p）
- id（使用id，如#idName）
- class（使用class，如.myclass）
- 通配符：*
关系选择符
- 包含选择符:E F（E所有的F包含子代，孙代，子子孙孙等等）
- 子选择符:E<F（与包含不同的是，子选择符仅限于子代）
- 相邻选择符:E+F（和E相邻的F，相隔一个都不算）
- 兄弟选择符:E~F（和E同级的F的算）
属性选择符:
- E[att]（E中带有某个att属性的元素）
- E[att=“val”] (E中带有att且值为val的元素)
- E[att~=“val”] (E中包含att属性，中存在val值)
- E[att^=“val”] (E中att属性值以val开头的元素)
- E[att$=“val”] (E中att属性值为以val结尾的元素)
- E[att*=“val”] (E中att属性值为包含val字符的元素)
- E[att|==“val”] (E中att属性值为val 或者是val-连接的字符串)
伪类选择符
- E:link (a元素没有被访问时)
- E:visited （a元素已经被访问了）
- E:hover （鼠标悬浮在元素时）
- E:active （鼠标点击到释放时）
- E:focus （元素成为输入焦点时）
- E:lang(fr) （匹配使用特殊语言）
- E:not(s) （匹配没有s样式的元素E）
- E:root （匹配E的根元素）
- E:first-child （匹配父元素第一个子元素E）
- E:last-child(css3) （匹配父元素的最后一个子元素E）
- E:only-child（匹配父元素仅有的元素E）
- E:nth-child(n)（匹配父元素第n个子元素E）
- E:nth-last-child(n)（匹配父元素倒数第n个子元素E）
- E:first-of-type（匹配同类型第一个同级兄弟元素E）
- E:empty（匹配没有任何子元素（包括text节点）的E）
- E:checked：（匹配处于选中状态的元素E，input的radio与checkbox）
- E:enabled ：（匹配处于可用状态的元素E）
- E:disabled： （匹配处于不可以状态的元素E）
- E:target： （匹配相关url执行的E元素）
伪对象选择符
- E:first-letter （首字下沉）
- E:first-line （第一行样式）
- E:before （设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性）
- E:after （设置在对象后（依据对象树的逻辑结构）发生的内容。用来content属性一起使用，并且必须定义content属性）
- E::placeholder （设置input占位符的样式）
- E::selection （设置文本被选择时的样式）
可继承属性
- 字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust
- 文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color
- 元素可见性 visibility
- 表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout
- 列表布局属性 list-style-type，list-style-image，list-style-position，list-style
- 生成内容属性 quotes
- 光标属性 cursor
- 页面样式属性 page，page-break-inside，windows，orphans
- 声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation
不可继承
- border
- padding
- margin
- width
- height
优先级算法如何计算？
- 优先级就近原则，同权重情况下样式定义最近者为准；
- 载入样式以最后载入的定位为准；
- !important > id > class > tag；
- important 比 内联优先级高，但内联比id要高；
清除浮动方法及优缺点
- 使用空标签清除浮动clear:both。
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：通俗易懂，容易掌握
缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦 - 父级div定义overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏 - 父级div定义伪类:after
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。
缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持 - 父级div定义height
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
5.父级div定义overflow:auto
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
四、浏览器兼容
常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
| 浏览器 | 内核 |
|---|---|
| IE浏览器 | Trident内核，也成为IE内核 |
| Chrome浏览器 | Webkit内核，现在是Blink内核 |
| Firefox浏览器 | Gecko内核，俗称Firefox内核 |
| Safari浏览器 | Webkit内核 |
| Opera浏览器 | 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核； |
| 360浏览器 | IE+Chrome双内核 |
| 猎豹浏览器 | IE+Chrome双内核 |
| 百度浏览器 | IE内核 |
| QQ浏览器 | Trident（兼容模式）+Webkit（高速模式） |
浏览器前缀
- -ms- 兼容IE浏览器
- -moz- 兼容firefox
- -o- 兼容opera
- -webkit- 兼容chrome 和 safari
常见的兼容性问题：
-
不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案：css 里增加通配符 * { margin: 0; padding: 0; } -
IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline; -
当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度 -
图片默认有间距
解决方案：使用float 为img 布局 -
IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); -
边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden； -
两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative -
cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer -
display:flex在ie10以下不生效，导致页面元素乱飞
解决方案：使用position：absolute定位
五、html5新特性
语义化标签
好处:
- HTML结构清晰
- 代码可读性较好
- 无障碍阅读
- 搜索引擎可以根据标签的语言确定上下文和权重问题
- 移动设备能够更完美的展现网页（对css支持较弱的设备）
- 便于团队维护和开发
网页布局结构标签:
<header></header>头部
<section></section>定义文档中的区段 区域
<footer></footer>尾部
<article></article>定义文章
<aside></aside>定义文章侧边栏
<nav></nav>定义导航
<figure></figure>定义一组媒体对象以及文字内容
<figcaption></figcaption>定义figure的标题
表单输入类型
<input type="email">
text 文本输入框
password 密码
button 按钮
checkbox 复选
radio 单选
submit 提交
email 输入合法的邮箱地址，检测@
url 输入合法的网址
reset 重置
file 文件
number 只能输入数字
range 滑块，范围 默认0~100
color 拾色器
date 显示日期
month 显示月份
week 显示第几周
time 显示时间
search
表单属性
◆form属性：
autocomplete=on | off 自动完成 输入记录是否显示
novalidate=true | false 是否关闭校验 表单校验 如检查email格式
◆ input属性：
*autofocus ： 自动获取输入框焦点
form：
list：<input type="list">
multiple： 实现多选效果
◆ placeholder ： 占位符 （提示信息）
****注意：placeholder样式修改****
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile >12
- Android Browser 2.1-4.4.4
- Samsung Internet
- UC Browser for Android
- QQ Browser */
::-webkit-input-placeholder {
color: #ccc;
font-weight: 400;
}
*required： 必填项
表单域外的提交 给输入框加个form属性值为表单id即可
<form action="index.html" method="get" id="test">
用户名：<input type="text" name="username" value="" required>
<input type="submit" name="" value="提交">
</form>
<input type="text" name="uname" form="test"
◆ 如何修改表单控件中的默认提示信息
1. 表单验证触发oninvalid事件
2. 通过setCustomValidity方法设置修改内容
音视频
☞ <video></video> 视频/<audio></audio> 音频
属性：controls 显示控制栏
属性：autoplay 自动播放
属性：loop 设置循环播放
属性：preload是否自动加载
☞ mark 标记
☞ <iframe src="" frameborder=“0”>内嵌网页框架</iframe>
画布： canvas 定义图形提供画布
地理定位：Geolocation
web离线存储
localStorage 长期存储数据，浏览器关闭后数据不丢失；能维持在多个会话范围内
sessionStorage 的数据在浏览器关闭后自动删除。客户端数据存储，只能维持在当前会话范围内。
第一次总结，有不好的地方请指正，持续更新中…
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
