• 网站建设

    五年网站建设经验:企业营销型网站、论坛门户、网络商城、功能型网站开发

    了解更多
    Slide 1
  • 网站优化推广

    专业的网站优化推广,助中小型企业实现公司产品、公司品牌的网上营销

    了解更多
    Slide 2
  • 网站托管

    网站安全维护修改、资料修改更新,节约您的技术成本,全程无忧

    阅读更多
    Slide 3
您所在的位置:首页 > 新闻资讯 > 网建百科 > 正文
网建百科

网站建设前端页面开发中用到的一些小知识点

作者:郑州网站建设 来源:http://www.zzjianzhan.com.cn 日期:2018-1-28 23:00:03 人气:0

  网站建设中,前端界面是直观的展示,也是用户接触到的最直观的印象,虽然技术一般情况下的技术含量要低于后端程序开发,但却是网站开发中的一个重点,毕竟客户的视觉体验是比较直观,也比较重要的体验之一。下面分享些前端页面开发中用到的六个小知识点:
  
  1、box-sizing: border-box
  
  通俗一点来说,默认情况下,padding和border是会额外占据空间的,假如元素宽是10px,如果设置了1px border边框,实际的宽就是12px,padding同理。那么这样会导致,布局的宽高不好控制,计算也特别麻烦。所以我们会给全局的元素用上border-box, 只要设置了宽高,那么border和padding无论怎么变化,元素的宽高都不会变,这样方便布局和计算。
  
  2、伪类的 content attr
  
  伪类before,after的content属性,是用来插入内容的,我们可以通过attr 传入一个当前元素的属性名,把属性值,载入进伪类内容,这个是一种写法,但实际应用场景可能并不多,就当了解一下吧
  
  3、元素的上下间距
  
  布局的时候从上往下开始写页面,一般都是写下一个的元素margin-top来决定和上一个元素的间距,那么就尽量不要又是写margin-top又是写margin-bottom,如果混着用,后期不好维护,比如某一块区域需要摞位置,或者是一个组件可能会被很多地方共用,混着写的话后期在改的时候,可能会麻烦一点,这里导致的问题可以说不痛不痒,但是不管是js还是css,注重细节并养成好的习惯,是代码能力的一种体现。
  
  4、rem布局的文字大小
  
  大家都知道浏览器一般不会让文字小于12px,如果设置小于12px浏览器都会显示12px, 我们在用到rem布局的时候,元素是会根据屏幕宽度等比例缩放的,比如设计师给到750px的设计稿,如果某一个元素文字是22px,那么当用户的屏幕宽度是375的时候,文字会缩放为11px,实际浏览器就会显示为最小12像素,那么其他非字体元素比例仍然会缩小,这个时候字体可能和其他元素的比例就不是原设计稿的比例了,如果用户屏幕是320px,那么和原设计稿元素间的比例就差更多了。所以我们一定要根据自己的情况告诉设计师,在宽是750像素的设计稿里,字体最小应该是多少像素。
  
  5、0.5px边框的理解误区
  
  我之前写边框的时候就发现,只要让边框的颜色更淡,边框看起来就更细,所以当设计师问我为什么边框看起来比较粗的时候,我都告诉他们颜色调浅一点就好了,这个技巧我一直在实际使用。网上有博客说通过css3 transform的缩放scale 50%,可以实现0.5px边框,我一直很奇怪,1px实际是物理的最小单位,怎么可能实现0.5px,就这样我做了个实验,我设置了1px颜色为000的边框(黑色),当我使用scale缩放50%的时候,颜色变成了c5c5c5,但是实际仍然有1px。
  
  6、object-fit: cover:
  
  我们在做列表页的时候,图片都是固定的大小,比如是一个100px*100px的正方形图片,但是很有可能拿到的图片并不是正方形的,这个非正方形图片放到正方形的img标签里,就会变形如果使用object-fit:cover  可以裁剪超出比例的部分,这样图片看起来就不会是变形或者拉伸的了,但是这样会导致图片残缺,根据图片的不同,可能裁剪掉关键部分的内容,但是鉴于列表本来就是缩略图,所以还是可以加上这个属性的,是一个比较折中的办法。

    标签:
    相关信息