HTML/CSS学习笔记

1.strong表示加粗，em倾斜，div大盒子，span小盒子

2.图片的高度和宽度一般情况下修改一个就行，等比例缩放

3.相对路径/, 绝对路径\

4.a超链接, _self在原来的窗口打开新页面，_blank在新窗口打开新页面，分为外部链接和内部链接，href=’#’ 表示空链接， 还有下载链接，href里是文件(.exe)或者压缩包(.zip)等形式
网页中的各种元素，如图片、文本、表格、音频、视频等都可以添加超链接
另外还有内部链接，可实现文件内两个页面之间的跳转。

5.锚点链接，可以快速定位到页面中的某个具体位置。

6.表格分为thead和tbody两部分, cellpadding和cellspacing一般为0
跨行合并在上侧，跨列合并在左侧。

7.ul中只能嵌套li, 输入其他标签或者文字是不被允许的，但li中可以容纳所有元素

8.dl自定义列表，dt是项目的名字，dd是描述每一个项目。

9.form表单用于收集用户的信息，input输入表单元素(input为单标签)，其中单选框radio和复选框checkbox需要设置相同的name，value值只在文本框中能看到效果，在单选框和复选框中是看不到效果的，为后台服务的。
单选按钮和复选框可以设置checked属性，实现当页面打开时就可以默认打开这个按钮。

10.label标签用于绑定表单元素

11.select下拉表单元素，select中至少包含一对option, 在option中定义selected="selected"时，当前项即为默认项。

12.标题标签比较特殊，需要单独指定font-size.

13.实际开发中，我们更提倡使用数字来表示加粗或者变细 font-weight。

14.字体连写是有顺序的，不能随意更换位置，另外字号和字体不可省略。

15.2em是当前元素两个文字大小的距离。

16.给图片加对齐是没有效果的，可以把图片看成文字，给图片的父亲加上居中对齐的效果。

17.伪类选择器, 其中a:active 选择的是鼠标正在按下但还没有弹起的那个链接。
实际开发中，a:hover用得最多。

18.a链接在浏览器中具有默认样式，所以实际工作中我们需要给链接单独指定样式。

19.input:focus 用于给光标选中的input表单修改样式。

20.文字类的元素内不能使用块级元素，比如 p，h1~h6标签，里面是不能放div的。

21.行内元素的宽、高直接设置是无效的，默认宽度就是它本身内容的宽度， 行内元素中只能放文本或其他行内元素。但是链接里面不能再放链接了。特殊情况链接a里面可以放块级元素。

22.行内元素可以转换为块元素，块元素也可以转换为行内元素
display:block display:inline

23.设置行高等于盒子高度可以实现垂直居中。

24.background-position,如果指定的两个词都是方位名词，则前后顺序无关，left top和top left是一样的，如果只指定了一个方位名词，另一个值省略，则另一个值默认居中对齐。
如果参数是精确单位，那么第一个一定是x的，第二个一定是y的，如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中。

25.border-collapse:collapse用于设置将表格的相邻边框合并在一起。

26.padding:两个值，上下和左右
padding：三个值， 上，左右，下
padding：四个值，上，右，下，左

27.如果盒子本身没有指定width/height大小，则此时padding不会撑开盒子大小。

28.外边距可以让块级的盒子水平居中，首先设置盒子的宽度，其次将左右外边距都设置为auto
行内元素或者行内块元素实现水平居中可以将其父元素添加text-align:center.

29.行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距，但是转换成块级和行内块元素就行了。

30.脱标之后，浮动的盒子不再保留原先的位置。
添加浮动之后，元素就会具有行内块元素相似的特性。
如果块级盒子没有设置宽度，默认宽度和父亲一样宽，但是添加浮动之后，它的大小根据内容来决定。

31.清除浮动
(1)给父级元素添加overflow:hidden
(2)套模板

32.CSS属性书写顺序：
1.布局定位属性，如display/position/float
2.盒子自身属性， 如width/height/margin/padding
3.文本属性， color/font/text-decoration/text-align
4.其他CSS3的属性，如content, cursor, border-radius

33.实际开发中，我们不会直接用链接a, 而是li加链接（li+a）的做法。

34.Button元素默认是有边框的，行内块元素之间默认有缝隙。
浮动的两个盒子之间是没有缝隙的

35.浮动的盒子不会有外边距合并的问题

36.行高line-height会继承

37.相对定位：相对于自己原来的位置移动
绝对定位：相对于祖先元素来移动的
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准
2.如果祖先元素有定位，则以最近一级有定位的祖先为参考点移动
3.绝对定位不再占有原先的位置，脱标

固定定位：以浏览器的可视窗口为参照点移动，固定定位也是脱标的，不再占有原来的位置，可以把固定定位看成是一种特殊的绝对定位

粘性定位：相对定位和固定定位的混合体

38.如何固定在版心的右侧：
1.先让固定的盒子left:50%, 走到浏览器可视区域的一半
2.再让固定的盒子margin-left 版心宽度一半的距离，即多走版心宽度一半的距离

39.加了绝对定位的盒子是不能通过设置margin: 0 auto 设置水平居中的，绝对定位的盒子实现居中
1.left：50%，让盒子的左侧移动到父级元素的水平中心位置
2.margin-left: -n px, 让盒子向左移动自身宽度的一半

40.绝对定位和固定定位也和浮动类似
1.行内元素添加了绝对或者固定定位，不需要转换为块元素，可直接设置宽度和高度。
2.块级元素添加了绝对或者固定定位， 如果不给高度和宽度，默认大小是内容的大小。
3.浮动元素，绝对定位(固定定位)的元素都不会触发外边距合并的问题。

41.浮动的元素只会压住它下面标准流的盒子，但不会压住盒子里面的文字
但绝对定位（固定定位）会压住它盒子下面的所有内容。

42.相对定位的盒子不脱离标准流， 使用 margin: 0 auto可以实现水平居中

43.如果一个盒子既有left属性，又有right属性，则按照先左后右的原则，同理先上后下

43.display属性用于设置一个元素应该如何显示
1.display:none 隐藏元素
2.display: block 除了有转换为块级元素，还有显示元素的作用
display隐藏元素之后，不再占有原来的位置

44.visibility: visible 元素可视
visibility:hidden 元素隐藏
与display不同，visibility隐藏元素后，继续占有原来的位置

45.overflow 属性设置了溢出的内容该如何显示
overflow: visible ， overflow :hidden 溢出的部分隐藏
但是如果有定位的盒子，慎用overflow: hidden ，因为他会让多余的部分隐藏起来

46.tudou:hover .mask {display: block},
当鼠标经过tudou这个盒子时，让mask这个盒子显示出来

47.CSS三角形的做法
宽高都为0， 设置某一个边框border-left-color有颜色， 其余边框透明

48.文本域标签textarea尽量写在一行上， 这样就不会有空格
outline: none 取消表单轮廓， resize: none防止拖拽文本域

49.图片和表单都属于行内块元素， 给行内块元素的 vertical-align 属性设置为middle, 就可以让文字和图片实现水平居中对齐

50.解决图片底部默认空白缝隙的问题
1.给图片添加属性 vertical-align: bottom/top/middle
2.把图片转换为块级元素 display: block

51.单行溢出文字显示省略号
white-space: nowarp, 强制一行内显示
overflow: hidden
text-overflow: ellipsis
多行溢出文字显示省略号

52.给行内块元素的父亲添加text-align:center 就可以让行内块元素水平居中

53.在IE9中，需要将header、nav、footer等元素转换为块级元素

54.我们验证的时候必须添加form表单域

55.修改placeholder里面的字体颜色
input :: placeholder{
color:pink;
}

56.nth-child和nth-of-type的区别
nth-child会把所有的盒子都排列序号，div:nth-child 执行的时候先看nth-child再去看前面的div
nth-of-type会把指定元素的盒子排列序号，div:nth-of type 先看div, 再去看nth-of-type第几个孩子

57.before和after创建一个行内元素，权重为1

58.box-sizing:border-box, padding和border就不会撑大盒子的大小

59.text-align对行内元素和行内块元素有作用

60.一般情况下，a如果包含有宽度的盒子，a需要转换为块级元素

61.translate最大的优点：不会影响其他盒子的位置，里面的参数可以是百分比，相对于自己的宽高而不是浏览器的大小，另外对行内标签没有效果

62.transform: scale 的优点：不会影响其他的盒子，而且可以设置缩放的中心点

63.2D转换综合写法：位移translate()要写在最前面

64.translate3d中的translateZ一般写px单位，不能写百分比

65.透视写到被观察元素的父盒子上面

66.transform-style: preserve-3d 子元素开启立体空间，给父元素加， 影响的是子盒子

67.二倍图：为了解决移动端放大后清晰度的问题

68.移动端常见布局：
流式布局（百分比布局）
flex布局（伸缩布局）

69.align-items单行
align-contentduohang

70.固定定位的盒子必须要有宽度

71.定位的盒子用margin没有效果，只能通过top, left来修改

72.margin:auto 只对块级元素有效