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回来半部分
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值