页面制作HTML+CSS基础乱炖

2017-4-17 11:21 |来自: 互联网 2370 0

摘要: 1.meta charset="utf-8"head/head里的meta charset="utf-8"一定要放在第一行，如果放在了title下面可能会有问题。2.标签大集合3.HTML5语义化标签4.页面内锚点a href="#jump"我跳！/a ... div id="jum ...

1. `<meta charset="utf-8">`

<head></head> 里的 <meta charset="utf-8"> 一定要放在第一行，如果放在了 <title> 下面可能会有问题。

2.标签大集合

3.HTML5语义化标签

4.页面内锚点

<a href="#jump">我跳！</a>
...
<div id="jump">跳到这里来！</div>

可用于“回到顶部”功能。

5. `<img>` 标签一般要求写上 `alt` 属性

6.HTML5中可以用 <video> 标签插入视频，用 <audio> 标签插入音频

7.总记不住row表示行，column表示列。表格中tr表示行(table row)，th和td(table data cell)表示列。

8.语义化的好处

（1）SEO（Search Engine Optimization）搜索引擎优化

（2）提高可访问性，使盲人使用屏幕阅读器更好的访问。

（3）提高代码可读性，便于多人修改维护，提高开发效率。

9.实体字符

 
>
<
...

10.css引入

<link rel="stylesheet" href="common.css">

11.属性选择器

<input class="section-left" type="text" disabled value="张三">
<p class="section-right">right</p>
<div class="nav">nav</div>

//css

[disabled] { ... }

input[type="text"] { ... } 
//属性值不加双引号也可以哎 [type=text] { ... }
//关于是否需要使用引号：当属性值包含空格或者有特殊符号时，必须要使用引号

[class^="section"] { ... } 
//这样可以选中以class属性以"section"开头的元素，即上面的input 和 p

伪类选择器: 一个冒号

12.a标签上的伪类选择器顺序从上到下不能变： link visited hover active

13. li:nth-child(even) { ... } 或 li:nth-child(2n) { ... } 选中偶数项li元素

14. :not(p) 不包含p元素。

:not(.class-a) 不包含class值有 class-a 的元素。

伪元素选择器:: CSS3变为两个冒号

15. ::first-letter { ... } 第一个字母或汉字

16. ::first-line { ... } 第一行

17. ::before 和 ::after

p::before{ content: "before"; }//在元素前添加内容
p::after{ content: "after"; }//在元素后添加内容

18. ::selection{ ... } 应用于被用户选中的内容的样式

19.兄弟选择器 h1+p { ... } 选中h1后面同级的 紧邻着的一个 p元素

20.多个兄弟选择器 h1~p { ... } 选中h1后面同级的所有p元素，不需要紧邻着

21.继承属性： color , font , text-align , list-style
22.非继承属性： background , border , position
如何从文档中知道当前属性是否可以继承？文档中Inherited为yes即为可以继承。

23.选择器优先级

https://jsfiddle.net/DarcyAn/... 奇怪，这个咋是伪元素选择器优先级比伪类的高呢？

注意伪类与类优先级相同，伪元素与标签优先级相同。

24.优先级最高： p { color: red !important; }

CSS文本

25. font 属性至少要设置 font-size 和 font-family .

26. text-indent 属性原本用于设置首行缩进，一般设置为 2em ，也可设置负值然后配合 overflow: hidden; 来达到隐藏文本的效果。

27. white-space ：

pre 完完整整保留了tab和空格，超出时也不会换行。

pre-wrap 保留了tab和空格。当超出时会自动换行。

28. word-wrap: break-word; 长单词超出时自动换行。

29. text-shadow: 1px 2px pink; 文字阴影：x轴偏移 y轴偏移 [阴影模糊半径]? [颜色]?。

30.text-overflow: clip | ellipsis;

一定要配合 overflow: hidden; white-space: nowrap; 同时服用。

CSS盒模型

盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

31.margin合并

（1）相邻元素的margin会合并

（2）父元素与子元素的margin会合并。（前提是父子元素之间没有padding、border和其他元素）

MDN外边距合并

32. `border-radius: 50%;` 是一个圆

圆角的水平半径是宽度的50%，垂直半径是高度的50%，所以是一个圆。

33. box-shadow: 4px 4px 3px 3px red 可以只设置前两个值.

还可以设置 inset 内阴影，以及 多阴影 （用逗号隔开即可）。

CSS背景

34. background-attachment: scroll | local ; 设置当内容滚动时，背景图片的状态。

scroll : 背景图不动。

local : 背景图随与内容一起滚动。

35. background-position: 20% 50%; 设置为百分比的值要特别注意。

上述语句意思是：x轴上图片的20%在容器的20%的位置，y轴上图片的50%在容器的50%的位置，看图：

如果这样设置： background-position: 50% 50%; ，就居中了。也等于 background-position: center center;

可以设置负值，这在sprite雪碧图中经常用到。

36.线性渐变 linear-gradient() 可以用来画出渐变背景。

background: linear-gradient(to bottom, white,black);

向下渐变

37.background缩写： position 与 size 之间要加 / 不然会冲突。

CSS布局

布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)

38.position定位，如果同时设置top和bottom，那么元素会被撑开变大。

39. z-index 存在一个栈的概念。

红色元素的父元素z-index 为 9 ，蓝色元素的z-index为1，所以虽然蓝色元素z-index为100大于红色的1，但是因为红色的参照物的z-index高，所以红色还是在蓝色上面。相当于两副扑克牌上下叠加，下面那一副扑克牌不管内部怎样调整，都无法跑到上面那副扑克牌上面。

40. position: relative; 参照物为元素本身，最常用的使用场景为绝对定位元素的参照物(=ﾟωﾟ)ﾉ

41. position: absolute; 默认宽度是内容宽度 ，脱离文档流。

42. position: fixed; 常用场景：遮罩mask。

43. clear属性 清除浮动通用方案： .clearfix:after{ ... } 实际上是添加了一个看不见的点号。

主要代码：

.clearfix: after {
  content: ".";
  display: block;
  clear: both;
  //到这为止的前三条是用于清除浮动：设置了clear:both的块级元素可以清除浮动
  height: 0;
  overflow: hidden;
  visibility: hidden;
  //后面三条是为了让点号不可见
}

将clearfix这个class添加到浮动元素的父元素上，就清除了因为子元素浮动缩成一条的父元素的影响，完整代码见：

jsfiddle栗子

44.flex布局实现三行自适应+两列自适应

东西略多，放到这里了：

https://segmentfault.com/a/11...

CSS变形 `transform:`

45. transform: translate(20%,20%); 移动。这里的20%参照物是本元素的宽和高

46. transform: skew(30deg); 倾斜。

y轴负方向向 x轴正方向倾斜， x轴正方向向 y轴负方向倾斜。

（segmentfault抽风，一张相当直观的图一直放不进来。 ,,Ծ‸Ծ,, ）

47. transform: translate(100px) rotate(45deg); 先移动，再旋转。

与先旋转，再移动： transform: rotate(45deg) translate(100px); 效果是不一样的 。

因为 旋转后，x轴与y轴方向已经发生了变化 。

CSS动画: 过渡效果 `transition` + 动画 `animation`

48. transition 语法：

transition: <single-transition> [,<single-transition>]; //可包含多个动画
//每个动画的变化
<single-transition>: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

eg1: transition: color 2s ease 3s, left 2s;
eg2: transition: 2s; 等价于 transition: all 2s ease 0;

49.animation 与 transition区别：

（1）transition需要hover或click或js去触发，而animation是 自动运行 的。

（2）animation可以做多帧动画。

50. animation 语法：

animation: <single-animation>[,<single-animation>]
//每个动画包含：
<single-animation>: <animation-name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

@-webkit-keyframes abc {
  0%{ left:0; top: 0;}
  50%{ left: 250px; top: 100px; }
  100%{ left: 500px; top: 0; }
}
// 0% 等价于 from , 100% 等价于 to

@-webkit-keyframes flash { //闪动效果
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.1; }
}