最近笔记 (杂乱)

发表于 更新于 分类于 本文字数： 614 阅读时长 ≈ 2 分钟

很久没写日志了，不是忘了，确实是最近学习上的杂事多。不多说，扯远了。
这次就分下面几个小方面记录一下最近的学习心得吧，免得忘记。

关于 background 属性的使用

attachment 属性，用来说明背景的固定与否；
position 属性，可用百分数，或者像素或者文字（先水平后垂直）；
repeat 属性，选择背景图片是否重复。一般不重复。no-repeat；
clip 属性设置背景的绘制区域，是在内容盒，内边距盒还是边框盒（默认）；
origin 是定位基准。默认内边距；
size 属性很有用，设置背景图片大小。

font 设置

font 不能单独用来设置 font-size，会失效。font 设置字体大小的格式， fontSize/lineHeight

非块状元素的垂直 margin 无效

内联元素垂直方向的 margin 对视距尺寸是没有影响的。可用 line-height 影响。不过一般用其他块级元素的 margin 即可.

对于下拉框后的下拉图标

使用背景图片，设置定位即可.

如何将 select 下拉框右边的下三角去掉，而表现的像一个按钮？

使用 css3 的 appearance:button 即可。

base 标签

HTML <base> 标签，设置 href 属性，则文档中 a 标签若是相对地址，则是相对这个基准地址。<base> 还可设置 target 属性，target
_blank
_parent
_self
_top

下拉单选

1
2
3
4
5
6
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

或者

1
2
3
4
5
<select id="cars1">
	<option value="BMW">BMW</option>
	<option value="Ford">Ford</option>
	<option value="Volvo">Volvo</option>
</select>

文档结构

尽量多了解 H5 新标签，如 header, footer, section, figure, article, aside 等等，做到语义化.

均分自适应导航栏

可以用 flex 实现均分布局（justified content，flex-direction 等属性设置在包裹层），各导航栏之间的分割线可用 hr 元素填充，自适应居中放置。

纯 CSS 实现单页 tab

使用纯 CSS 实现单页中 tab 跳转。使用 ul 中 li 为页面。并且 li 元素都为绝对定位（相对于容器），四个方位值设为 0，使每个 li 与容器完全重合。利用 a 的 html 锚对不同 id 的 li 元素进行跳转（css 中使用：target 选择器，设置 z-index）

高亮显示查询内容

可以通过正则表达式 .replace (正则，包含元素标签的字符串) 来快速改变。