HTML+CSS(006)

一、CSS布局小技巧

1.行内元素、行内块元素可以被父元素当作文本处理

即：可以利用text-align、line-height、text-indent向处理文本对齐一样处理行内、行内块在父元素中的对齐

2.令子元素在父元素中水平居中

• 若子元素为块元素，给子元素加上margin:0 auto;
• 若子元素为行内元素、行内块元素，给父元素加上text-align:center

3.令子元素在父元素中垂直居中

• 若子元素为块元素，给子元素加上：margin-top，值为（父元素content-子元素盒子总高）/2
• 若子元素为行内元素、行内块元素：让父元素的height=line-height，每个子元素都加上vertical-align:middle；绝对垂直居中，将父元素font-size设置为0

二、元素之间的空白问题

1.问题原因

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符

2.解决方案

• 去掉换行和空格
• 给父元素设置font-size:0，再给需要显示的文字的元素单独设置字体大小

三、行内块元素的幽灵空白问题

1.问题原因

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间有一定的距离

2.解决方案

• 给行内块元素设置vertical，值不为baseline即可，可设置为middel、bottom、top
• 若父元素中只有一张图片，后面什么也没有，设置图片为display:block
• 给父元素设置font-size:0，如果该行内块元素内部还有文本，则需要单独设置font-size

四、浮动

1.元素浮动后的特点

• 脱离文档流
• 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
• 不会独占一行，可以与其他元素共用一行
• 不会margin合并，也不会margin塌陷，能够完美设置四个方向的margin和padding
• 不会像行内块元素一样被当作文本处理（没有行内块元素的空白问题）

2.浮动后产生的影响

（1）对兄弟元素的影响

后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟元素无影响

（2）对父元素的影响

不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度仍然束缚浮动的元素

3.解决浮动产生的影响

• 给父元素一个指定的高度
• 给父元素也设置浮动，这个方案会带来其他影响
• 给父元素设置overflow: hidden
• 在所有浮动元素的最后面，添加一个块元素，并给该块级元素设置clear: both
• 给浮动元素的父元素，设置为元素，通过为元素清除浮动，原理与上一条相同

.parent::after{content:'';display:block;clear:both;}

注：布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么都不浮动

五、定位

1.相对定位

（1）设置相对定位

1.给元素设置position:relative
2.可以使用leftrighttopbottom四个属性进行调整

.shili{position:relative;left:10px;}

（2）位置参考点

相对自己原来的位置

（3）特点

• 不脱离文档流，元素位置的变化只是视觉效果上的变化，不会对其他元素产生任何影响
• 定位元素显示的层级比不同元素高，无论什么定位，显示层级都是一样的。若有多个定位元素，则后来者居上，盖在前者身上
• left不能和right一起设置，top和bottom不能一起设置
• 相对定位的元素，也能继续浮动，但不推荐
• 相对定位的元素，也能通过margin调整位置，但不推荐
• 绝大多数情况下，相对定位会与绝对定位配合使用

2.绝对定位

（1）设置绝对定位

1.给元素设置position:absolute
2.可以使用leftrighttopbottom四个属性进行调整

.shili{position:absolute;left:10px;}

（2）位置参考点

参考它的包含块

• 对于没有脱离分档流的元素：包含块就是父元素
• 对于脱离文档流的元素：包含块是最近的拥有定位属性的祖先元素；如果所有祖先元素都没定位，那么包含块为整个页面

（3）特点

• 脱离文档流，会对后面的兄弟元素、父元素产生影响
• left和right一起设置，top和bottom不能一起设置
• 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
• 绝对定位的元素也能通过margin调整，（前面某方位设置了绝对定位，后面该方位才能设置margin）但不推荐

.shili{position:absolute;left:10px;margin-left:20px;<!-- margin-right不能设置 -->}

• 无论是什么元素，设置为绝对定位之后，就变成了定位元素
  • 定位元素：默认宽、高都被内容所撑开，且能自由设置高度

3.固定定位

（1）设置固定定位

1.给元素设置position:absolute
2.可以使用leftrighttopbottom四个属性进行调整

.shili{position:fixed;left:10px;}

（2）位置参考点

参考它的视口

（3）特点

• 脱离文档流，会对后面的兄弟元素、父元素产生影响
• left和right一起设置，top和bottom不能一起设置
• 固定定位、浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主
• 固定定位的元素也能通过margin调整，（前面某方位设置了固定定位，后面该方位才能设置margin）但不推荐

.shili{position:fixed;left:10px;margin-left:20px;<!-- margin-right不能设置 -->}

• 无论是什么元素，设置为固定定位之后，就变成了定位元素

4.粘性定位

（1）设置粘性定位

1.给元素设置position:sticky
2.可以使用leftrighttopbottom四个属性进行调整

（2）位置参考点

离它最近的一个拥有“滚动机制”的祖先元素

（3）特点

• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
• 粘性定位和浮动可以同时设置，但不推荐这样做
• 粘性定位也能通过margin调整位置，（前面某方位设置了粘性定位，后面该方位才能设置margin），但不推荐这样做
• 粘性定位和相对定位的特点基本一致，但粘性定位可以在元素到达某个位置时将其固定

5.定位的层级

• 定位元素显示的层级比普通元素高，无论什么定位，显示层级都是一样的
• 如果发生重叠，默认情况：后面的元素显示在前面的元素之上，后来者居上
• 可以通过CSS属性z-index调整元素的像是阶层，属性值为数字，数字越大，显示层级越高
• 只有定位元素设置z-index才有效
• 比较同级的层级

6.定位的特殊应用

（1）让定位元素的宽充满包含块

给定位元素同时设置left和right为0

（2）让定位元素的高充满包含块

给定位元素同时设置top和bottom为0

（3）让定位元素在包含块中居中

前提：该定位元素必须设置宽、高

• 方案一：

left:0;right:0;top:0;bottom:0;margin:auto;

• 方案二

left:50%top:50%margin-left:负的宽度的一半margin-right:负的高度的一半

（4）注意点

• 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，但仍然可以设置宽高
• 发生相对定位后，元素依然是之前的显示模式
• 以上所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素

六、布局

1.版心

• 在PC端网页中，一般会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心
• 版心的宽度一般是960-1200像素之间
• 版心可以是一个，也可以时多个

2.常用布局名词

3.重置默认样式

（1）方案一：使用全局选择器

*{margin:0;padding:0;...}

此种方法，在简单案例中可以使用，但在实际开发中不会使用，因为*选择的时所有元素，并不是所有元素都有默认样式

（2）方案二：reset.csss

选择具有默认样式的元素，清空其默认样式

（3）方案三：Normalize.css

Normalize.css是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式
优点：- 保护了有价值的默认演示，而不是完全去掉它们
- 为大部分HTML元素提供一般化的样式
- 新增对HTML5元素的设置
- 对并集选择器的使用比较谨慎，有效避免调试工具杂乱

七、HTML5简介

1.HTML5优势

• 针对JavaScript，新增了很多可操作的接口
• 新增了一些语义标签、全局属性
• 新增了多媒体标签，可以很好的替代flash
• 更加侧重语义化，对于SEO更友好
• 可移植性好，可以大量应用在移动设备上

2.HTML5兼容性

支持Chrome、Safari、Opera、Firefox等主流浏览器

八、H5新增语义化标签

1.新增布局标签

article与section

• article里面可以有多个section
• section强调的是分段或分块，如果想要将一块内容分成几段时，可以使用section元素
• article比section更强调独立性，一块内容如果比较独立、完整，应该使用article

2.新增状态标签

（1）meter标签

1）语义

定义已知范围的标量测量，也被称为gauge(尺度），例如：电量、磁盘用量等

2）常用属性

• high：规定高值
• low：规定低值
• max：规定最大值
• min：规定最小值
• optimum：规定最优值
• value：规定当前值

3）应用

1.当没有规定最优值时，高值以上及低值一下被认定为警告区间，为橙色；低值到高值区间为正常区间，呈绿色

<span>手机电量：</span><metermax="100"min="0"low="20"high="80"value=""></meter>

此时，当value在0-20、80-100区间时，横条显示橙色；在20-80区间时，横条显示绿色
2.当最优值在高值与最大值区间时，该区间被认定为正常区间，呈绿色；低值与高值之间被认定为警告区间，呈橙色；最低值与低值之间被认定为危险区间，呈红色

<span>手机电量：</span><metermax="100"min="0"low="10"high="20"optimum="90"value=""></meter>

此时，当value在20-100区间时，横条显示绿色；在10-20区间时，横条显示橙色；在0-10区间时，横条显示红色

（2）progress标签

1）语义

显示某个任务完成的进度的指示器，一般用于表示进度条，例如：工作完成进度

2）常用属性

• max：规定目标值
• value：规定当前值

3.新增列表标签

• datalist：用于搜索框的关键字提示

<inputtype="text"list="mydate"><datelistid="mydate"><optionvalue="xxx">xxx</option><optionvalue="xxx">xxx</option><optionvalue="xxx">xxx</option></datalist>

• details：用于展示问题和答案，或对专有名词进行解释
• sumary: 写在details的里面，用于指定问题或专有名词

<details><summary>名词</summary><p>解释</p></details>

4.新增的文本标签

（1）文本注音

• ruby：包裹需要注音的文字
• rt：写注音，写在ruby的里面

<ruby><span>魑魅魍魉</span><rt>chī mèi wǎng liǎng</rt></ruby>

（2）文本标记

• mark：标记，建议用于标记搜索结果中的关键字

5.表单相关新增

（1）新增的表单控件属性

• placeholder：提示文字，适用于文字输入类的表单控件
• required：表示该输入项必填，适用于除按钮外其他表单控件
• autofocus：自动获取焦点，适用于所有表单控件
• autocomplete：自动完成，可以设置为on或off，适用于文字输入类的表单控件（密码输入框，多行输入框不适用）
• pattern：填写正则表达式，适用于文本输入类表单控件（多行输入不可用，且空的输入框不会验证，往往与required配合）

（2）input新增type属性值

• email：邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式
• url：url类型的输入框，表单提交时会验证格式，输入为空则不验证格式
• number：数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式
• search：搜索类型的输入框，表单提交时不会验证格式
• tel：电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘
• range：范围选择框，默认值为50，表单提交时不会验证格式
• color：颜色选择框，默认值为黑色，表单提交时不会验证格式
• date：日期选择框，默认值为空，表单提交时不会验证格式
• month：月份选择框，默认值为空，表单提交时不会验证格式
• week：周选择框，默认值为空，表单提交时不会验证格式
• time：时间选择框，默认值为空，表单提交时不会验证格式
• datetime-local：日期+时间选择框，默认值为空，表单提交时不会验证格式

（3）form标签新增属性

• novalidate：表单提交的时候不再进行格式验证

6.新增视频标签

（1）视频标签video

该标签用于定义视频，是双标签

（2）属性

• src：视频地址
• width：设置视频播放器的宽度
• height：设置视频播放器的长度（当长宽之比设置的与原视频不一致，则多出留白而不是铺满设置比例）
• controls：向用户显示视频控件（播放/暂停等按钮）
• muted：视频静音
• autoplay：视频自动播放
• loop：循环播放

<videosrc="..."cntrolsmutedautoplayloop></video>

video{width:100%;}

• poster：视频封面
• preload：视频预加载，如果使用autoplay,则忽略该属性
  • auto：下载整个视频文件，即使用户不希望使用它
  • metadata：仅预先获取视频的元数据（例如长度）
  • none：不预加载视频

7.新增音频标签

（1）音频标签audio

该标签用于定义视频，是双标签

（2）属性

除去没有width、height、poster外，与视频标签属性相同

8.新增的全局属性

• contenteditable：标识元素是否可被用户编辑
  • true：可编辑
  • false：不可编辑
• draggable：表示元素可以被拖动（配合JS使用）
  • true：可拖动
  • false：不可拖动
• hidden：隐藏元素
• spellcheck：规定是否对元素进行拼写和语法检查
  • true：检查
  • false：不检查
• dontextmenu：规定元素上下文菜单，在用户鼠标右键点击元素时显示
• data-*：用于储存页面的私有定制数据

九、H5兼容性处理

（1）添加元信息，让浏览器处于最优渲染模式

• 设置IE重视使用最新的文档模式进行渲染

<metahttp-equiv="X-UA-Compatible"content="IE=Edge">

• 双核浏览器，优先使用webkit(Chromium)内核进行渲染，如360浏览器

<metaname="renderer"content="webkit">

（2）使用html5shiv让低版本浏览器认识H5的语义化标签

<!--[if lt ie 9]> <script src="../sources/js/html5shiv.js"></script> <![endif]-->

• lt：小于
• lte：小于等于
• gt：大于
• gte：大于等于
• !：逻辑非

十、CSS3简介

（1）查询CSS3兼容性的网站

https://caniuse.com/

（2）常见浏览器私有前缀

（3）注意

在编码时，不用过于关注浏览器私有前缀，常用的CSS3新特性主流浏览器都是支持的，既是为了老浏览器加前缀，也可以借助线代构建工具（webpack）添加私有前缀