HTML实用小技巧

关于静态网页布局

• 网页内部跳转，最好使用span 而不是a标签
• 鼠标滑到按钮时，变成小手模式cursor:pinter
• textarea取消右小角改变大小：resize:none/versial/horizontal
• 输入框取消点击 边框变亮oversize：none
• 
• 同级兄弟元素选择器：：nth-of-type伪类选择器，类似:hover，所以不能单独使用，是写在标签后面，起修饰作用
  

• 同一标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，图片会覆盖颜色。
• 垂直居中的几种方法：
  • padding 设置上下一样的边距
  • line-height 设置行高line-height与height一样高
  • transform 设置transform: translate(-50%, -50%)

• 如果盒子本身没有width/height ，那padding不会撑开盒子大小。注意盒子本身，继承那种不算
• margin 嵌套块元素，垂直外边框塌陷
  
  • 解决方法:
    • 可以为父元素定义上边框
    • 可以为父元素定义上内边距
    • 可以为父元素添加overflow:hidden
      -行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转化为块级和行内块元素就可以了

定位

绝对定位的盒子居中
-  加了绝对定位的盒子不能通过<b>margin:0 auto</b>水平居中

- 定位和浮动的特殊特性：
- 1.行内元素添加浮动/绝对或者固定定位后，可以直接设置高度和宽度，类似 行内块元素
- 2.块级元素添加浮动/绝对或者固定定位后，如果不给宽度或者高度，默认大小是内容的大小
- 3.浮动的元素不会压住下面标准流的文字，绝对定位（固定定位）会压住下面标准流所有的内容》》》》》因为浮动产生的目的最初是为了做文字环绕效果。

vertical -align 属性应用

• 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

解决图片底部默认空白缝隙问题：

• 1.给图片添加 vertical-align:middle/top/bottom
• 2.把图片转化为块级元素 display:block

溢出的文字省略号显示

1.先强制一行内显示文本
white-space:nowrap;(默认normal自动换行)
2.超出的部分隐藏
overflow:hidden
3.文字用省略号代替超出的部分
text-overflow:ellipsis

多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
 -webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

• 文字抗锯齿形 让文字显示的更加清晰： -webkit-font-smoonting:antialiased;

2D旋转

• translate对行内元素无效
• 当我们同时有位移和其他属性的时候，记得要将位移放到最前

flex布局

• 当为父盒子设为flex布局后，子元素的float、clear和vertical-align属性将失效
• flex布局中默认是不换行的
• align-items设置侧轴上的子元素排列方式（单行），只有上对齐，下对齐，居中和拉伸（拉伸子元素不用设置height）
• align-content设置侧轴上的子元素的排列方式（多行），单行情况下无效。可以设置上对齐，下对齐居中，拉伸以及平均分剩余空间

项目总结

关于如何制作一个合格的logo

移动端注意点

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

• position:fixed时，如果要居中 margin:0 auto此时就不起作用咯，用left:50%再 transform回来半部分