zoukankan      html  css  js  c++  java
  • 一些需要注意的知识

    1. 在布局时,可以多使用padding和margin来做,它可以很好的控制居中等,对于布局元素,一般不要设置其高度,而是由子元素来撑开,这样做的好处是更容易控制布局,清晰明了,代码较少。

    2. 使文字之间空开,可以采取两种方法:1. 给文字设置white-space:pre;这样在html中保留的任何字符都可以显示。2. 在html中使用shift+空格,切换到圆角符号,然后再空格,这时,我们得到的就是中文下的空格,就可以被保留了。

    3.多看看网易新闻和新浪新闻的布局方式,一般最外层的div或其他包裹元素都只是设置margin和padding,padding更多用于上下,margin多用于左右,这样是因为需要使用分隔线会更方便一些,当然如果对于分隔线没有需要,直接全部在包裹元素设置padding更为明了、方便,而设置宽和高往往是在最内部的元素设置,这样就可以将外部元素撑起来了,如果内层和外层都设置宽度和高度,这样的结构可能更难以控制并导致部分冲突。

    4.移动端布局时,可以大量采用css3的属性,因为移动端对齐支持的已经很好了。 另外,在移动端,可以发现像网易、腾讯、新浪这样大公司的网站,对于每一个条目,其将a标签扩在div外面,这样的好处是只要点任何一部分,都会进入该条目,并且点的瞬间,是没有active类似的颜色变化的,应当注意,使用-webkit-tap-highlight-color:rgba(255,0,0,0),但是新浪使用的方法感觉真的很乱,不推荐; 个人认为,搜狐公司这方面做的并不是很好,没有借鉴价值。

    5.截取、处理字符串时,有时候使用slice方法也会很简单

    6.设置图片的大小时,往往给外层div固定宽高,而img设置为100%,注意:更好的做法时给width设置100%,然后给height设置min-height和max-height,比如min-height为100%,max-height为130%。而网易的做法时设置min-height的高度。但是这样必须严格要求图片的百分比在某一个特定的范围内,否则会出现问题。

    7. 类数组对象不是数组,所以不能用数组的方法,比如$("p")这里获取的就是一个类数组对象。

    8.  width即为我们所写的width,而device-width为设备的width,媒体查询也可以很清楚地表明这一点,这部分的内容可以总结博客。

    9. 主页的问题在于有的元素从html或者body处溢出来了,所以才能左右晃动,这时只需要设置html元素的overflow-x:hidden即可实现,如果设置了body的overflow:hidden,那么这时候其offsetHeight不能使用。

    10. flex布局不能用在多行多列的情况下,而只能用在单行或者单列的情况下,多行多列我们可以用inline-block的布局方式。多行多列,直接给最外层div固定的width,这是必须的,这样才能精确控制,然后设置center这样内部的inline元素居中,有img则给img再来一个div包裹,然后让img的widht和height用百分比布局的方式。

    11.实在不知道到底优先级的问题,直接!important,效果还是不错的。

    12.在分页跳转时,我们可以使用 将两个模块的父元素设置为white-space:nowrap;  然后将子元素的display设置位inlineblock,并且将父元素的宽度设置为子元素的两倍(在子元素相等的情况下),这样我们就可以使用动画的形式来控制margin-left的值。

    13. 当自己不懂某一方面的设计时,可以多多参考优秀公司的网站。

    14. 有时候 a 标签明明在,但是点击却毫无反应,并且设置的cursor: pointer; 也没有用,这很有可能是你设置它或它的父元素为position: absolute;了,(也许不是这样),本质问题是z-index值太小,导致我们的鼠标够不到,只要设置较高的z-index值即可正常点击。 

    15. color属性一般情况下是继承的,但是对于<a>标签中的color属性是不会继承的,如果我们希望a标签中的color属性也能继承,那么我们可以给a标签添加属性 color: inherit; 这样a标签也可以继承父元素的color属性了。

  • 相关阅读:
    谈一谈对象池SafeObjectPool能干什么
    .net core 程序退出事件
    .NETCore 快速开发做一个简易商城
    Git创建子分支,合并分支并提交
    Vue项目中关闭eslint的方法
    Missing space before function parentheses
    单引号变双引号 格式化去掉分号
    Docker Swarm搭建多服务器下Docker集群
    Asp.Net Core中服务的生命周期选项区别和用法
    KnockoutJS-模板绑定
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6387440.html
Copyright © 2011-2022 走看看