精华内容
下载资源
问答
  • 通过上图我们就可以知道手机屏幕主要的三个区域了,下面我们开始使用代码来获取这三个区域的高度。 这里需要注意一下,这里我们所测的高度并不1920,因为最底下有一个模拟的虚拟按钮占据了一定的空间高度,...
    

    首先要了解的是安卓的屏幕分布区域(这里我采用的是1080 * 1920的屏幕),如下图所示:

    这里写图片描述

    通过上图我们就可以知道手机屏幕主要的三个区域了,下面我们开始使用代码来获取这三个区域的宽高度。

    这里需要注意一下,这里我们所测的高度并不是1920,因为最底下有一个模拟的虚拟按钮占据了一定的空间高度,所以具体的高度,会根据手机的具体情况获取。

    为什么我有时候在使用getLeft(), getRight(), getTop(), getBottom()它们得到的结果是0?
    出现这种情况可能是在刚启动程序,程序刚开始绘制 view 的时候,你马上使用代码去捕获上面的值。这个时候,由于view 是刚开始绘制的,你得到的就会是 0,所以,这里我们所有的测试都放在点击事件里面来进行。

    1. 获取整个屏幕的宽度:

    可以通过一下5中形式获取整个屏幕的宽高度

    /**
         * 获取屏幕的总宽度
         * 采用5中方法
         */
        public void getTotalScreenWidthAndHeight() {
            //方法1
            WindowManager manager1 = getWindowManager();
            Display display = manager1.getDefaultDisplay();
            Point point = new Point();
            display.getSize(point);
            Log.d(TAG, "getTotalScreenWidth: width = " + point.x);
            Log.d(TAG, "getTotalScreenWidth: height = " + point.y);
            //方法2
            WindowManager manager2 = (WindowManager) getSystemService(WINDOW_SERVICE);
            int width = manager2.getDefaultDisplay().getWidth();
            int height = manager2.getDefaultDisplay().getHeight();
            Log.d(TAG, "getTotalScreenWidth: width = " + width);
            Log.d(TAG, "getTotalScreenWidth: height = " + height);
            //方法3
            WindowManager manager3 = getWindowManager();
            int width1 = manager3.getDefaultDisplay().getWidth();
            int height1 = manager3.getDefaultDisplay().getHeight();
            Log.d(TAG, "getTotalScreenWidth: width = " + width1);
            Log.d(TAG, "getTotalScreenWidth: height = " + height1);
            //方法4
            WindowManager manager4 = this.getWindowManager();
            DisplayMetrics outMetrics = new DisplayMetrics();
            manager4.getDefaultDisplay().getMetrics(outMetrics);
            int width2 = outMetrics.widthPixels;
            int height2 = outMetrics.heightPixels;
            Log.d(TAG, "getTotalScreenWidth: width = " + width2);
            Log.d(TAG, "getTotalScreenWidth: height = " + height2);
            //方法5
            Resources resources  = getResources();
            DisplayMetrics dm = resources.getDisplayMetrics();
            float density1 = dm.density;
            int width3 = dm.widthPixels;
            int height3 = dm.heightPixels;
            Log.d(TAG, "getTotalScreenWidth: width = " + width3);
            Log.d(TAG, "getTotalScreenWidth: height = " + height3);
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    获取的结果为:width = 1080 height = 1794 上面也已经说过了,这里为什么不是1920,因为虚拟按钮部分占据了126的高度

    1. 获取标题栏的高度以及到底部的高度
    /**
         * 获取屏幕标题栏到底部的高度
         */
        public void getScreenTitleHeight() {
            Rect outRect = new Rect();
            getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect);
            //打印标题栏的高度
            Log.d(TAG, "height = " + outRect.top);
            //打印标题栏到底部的高度
            Log.d(TAG, "width = " + outRect.width() + " height = " + outRect.height());
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    结果为:height = 63 outRect.top是状态栏占用的高度为63 width = 1080 height = 1731 宽度不变是毫无疑问的,高度是1731 刚好整个屏幕的高度(1794) - (1731)标题栏到底部的高度 就刚好是63了。

    1. 获取view绘制区域的高度:
    /**
         * 获取view绘制区域的高度
         */
        public void getScreenViewHeight(){
            Rect outRect = new Rect();
            getWindow().findViewById(Window.ID_ANDROID_CONTENT).getDrawingRect(outRect);
            Log.d(TAG, "height = " + outRect.height());
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    结果为:height = 1584 表示的是view绘制区域到底部的高度, 这样获取的结果就出来了,下面总结一下整个的需要掌握的高度

    屏幕总宽高度: 1080 * 1794

    屏幕标题栏到底部的宽高度 : 1080 * 1731

    屏幕状态栏的高度:63

    屏幕view绘制区域的宽高度 : 1080 * 1584

    屏幕的标题栏高度为:1794(整个屏幕高度) - 1584(view绘制区的高度) - 63(状态栏的高度) = 147(标题栏的高度)。

    另外补充:


    @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); Rect rect = new Rect(); Window win = getWindow(); win.getDecorView().getWindowVisibleDisplayFrame(rect); //状态栏高度
            int statusBarHeight = rect.top; //状态栏与标题栏高度总和
            int contentViewTop = win.findViewById(Window.ID_ANDROID_CONTENT).getTop(); int titleBarHeight = contentViewTop - statusBarHeight; Log.d("状态栏高度:" + statusBarHeight); Log.d("标题栏高度:" + titleBarHeight); }


    展开全文
  • 平常我们做开发的时候,常用的方法就是获取屏幕宽高,但是真正的屏幕宽高是什么,顾名思义,屏幕的宽是屏幕的宽,但是屏幕的高到底是指哪一部分的高,整体的高?还是显示区域的高,此时屏幕的高是指包括导航和状态...

    平常我们做开发的时候,常用的方法就是获取屏幕宽高,但是真正的屏幕宽高是什么,顾名思义,屏幕的宽是屏幕的宽,但是屏幕的高到底是指哪一部分的高,整体的高?还是显示区域的高,此时屏幕的高是指包括导航栏和状态栏吗,还是不包括,如果没有系统导航栏的时候,屏幕的高是指哪,如果有导航栏呢?没有具体的定义,所以,我总结了一些屏幕高度方法.

     

    /**
    	 * 通过反射拿到屏幕实际的高度(包括状态栏和导航栏),获取的是正常竖屏的高
    	 */
    	public int getScreenRealHeight() {
    		int dpi = 0;
    		Display display = ((Activity) mContext).getWindowManager().getDefaultDisplay();
    		DisplayMetrics dm = new DisplayMetrics();
    		@SuppressWarnings("rawtypes")
    		Class c;
    		try {
    			c = Class.forName("android.view.Display");
    			@SuppressWarnings("unchecked")
    			Method method = c.getMethod("getRealMetrics", DisplayMetrics.class);
    			method.invoke(display, dm);
    			if (isScreenLandscape()) {
    				dpi = dm.widthPixels;
    			} else {
    				dpi = dm.heightPixels;
    			}
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		if (dpi == 0) {
    			if (isScreenLandscape()) {
    				dpi = getScreenWidth();
    			} else {
    				if (ImmersionBar.hasNotchScreen((Activity) mContext)) {
    					dpi = getScreenAvailableHeight() + getNotchHeight() + getNavigationBarHeight();
    				} else {
    					dpi = getScreenAvailableHeight() + getStatusBarHeight() + getNavigationBarHeight();
    				}
    			}
    		}
    		return dpi;
    	}

     

    	/**
    	 * 计算屏幕可用高度(如果底部导航栏显示,高度为底部导航栏上到顶部状态栏下,如果底部导航栏不显示,高度为屏幕底部到顶部状态栏下)
    	 */
    	public int getScreenAvailableHeight() {
    		Rect rect = new Rect();
    		mWindow.getDecorView().getWindowVisibleDisplayFrame(rect);
    		if (isScreenLandscape()) {
    			return rect.right - rect.left;
    		} else {
    			return rect.bottom - rect.top;
    		}
    	}
    	/**
    	 * 获取导航栏虚拟按键的高度,如果虚拟按键隐藏就返回0,否则返回虚拟按键的高度
    	 */
    	public int getNavigationBarHeight() {
    		if (isNavigationBarShow()) {
    			return calculateNavigationBarHeight();
    		} else {
    			mNavigationBarHeight = 0;
    			return mNavigationBarHeight;
    		}
    	}
    /**
    	 * 计算虚拟按键的高度
    	 */
    	private int calculateNavigationBarHeight() {
    		if (mNavigationBarHeight == 0) {
    			try {
    				Class<?> clazz = Class.forName("com.android.internal.R$dimen");
    				Object object = clazz.newInstance();
    				int height = Integer.parseInt(clazz.getField("navigation_bar_height").get(object).toString());
    				mNavigationBarHeight = mContext.getResources().getDimensionPixelSize(height);
    			} catch (Exception e) {
    				e.printStackTrace();
    			}
    		}
    
    		if (mNavigationBarHeight == 0) {
    			Resources res = mContext.getResources();
    			int resourceId = res.getIdentifier("navigation_bar_height", "dimen", "android");
    			if (resourceId > 0) {
    				mNavigationBarHeight = res.getDimensionPixelSize(resourceId);
    			}
    		}
    
    		if (mNavigationBarHeight == 0) {
    			Rect rect = new Rect();
    			mWindow.getDecorView().getWindowVisibleDisplayFrame(rect);
    			Point realSize = new Point();
    			mWindowManager.getDefaultDisplay().getRealSize(realSize);
    			mNavigationBarHeight = realSize.y - rect.bottom;
    		}
    		return mNavigationBarHeight;
    	}
    
    /**
    	 * 判断虚拟导航栏是否显示
    	 *
    	 * @return true(显示虚拟导航栏),false(不显示或不支持虚拟导航栏)
    	 */
    	public boolean isNavigationBarShow() {
    		//判断小米手机是否开启了全面屏,开启了,直接返回false
    		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    			if (Settings.Global.getInt(mContext.getContentResolver(), "force_fsg_nav_bar", 0) != 0) {
    				return false;
    			}
    		}
    		if (Build.VERSION.SDK_INT == Build.VERSION_CODES.JELLY_BEAN_MR1) {
    			int screenRealHeight = getScreenRealHeight();
    			int statusBarHeight = getStatusBarHeight();
    			int screenAvailableHeight = getScreenAvailableHeight();
    
    			return screenAvailableHeight + statusBarHeight < screenRealHeight;
    		} else {
    			//其他手机根据屏幕真实高度与显示高度是否相同来判断
    			Display d = mWindowManager.getDefaultDisplay();
    
    			DisplayMetrics realDisplayMetrics = new DisplayMetrics();
    			if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
    				d.getRealMetrics(realDisplayMetrics);
    			}
    
    			int realHeight = realDisplayMetrics.heightPixels;
    			int realWidth = realDisplayMetrics.widthPixels;
    
    			DisplayMetrics displayMetrics = new DisplayMetrics();
    			d.getMetrics(displayMetrics);
    
    			int displayHeight = displayMetrics.heightPixels;
    			int displayWidth = displayMetrics.widthPixels;
    
    			return (realWidth - displayWidth) > 0 || (realHeight - displayHeight) > 0;
    		}
    	}

     

    /**
    	 * 判断当前屏幕方向是否为横屏
    	 *
    	 * @return true 横屏  false 竖屏
    	 */
    	public boolean isScreenLandscape() {
    		Configuration mConfiguration = mContext.getResources().getConfiguration(); //获取设置的配置信息
    		int ori = mConfiguration.orientation; //获取屏幕方向
    		return ori == Configuration.ORIENTATION_LANDSCAPE;
    	}

    以上方法是自己总结的,每个方法都有说明,这里就不再具体说明了。

    展开全文
  • 我这里把小米商城首页那个导航截了下来用ps测量1565px,然后做一个相同宽度的盒子显示出来的却比原型网站得多,试了半天只能设置1200px才能显示出来和原型网站一样宽度的dao'hang'lan ![图片说明]...
  • 4G+仍然4G技术的一种,但是采用了更高的Category技术,也就是载波聚合,它的原理将4G网络不同频谱的载波聚合成一个更的频谱,从而提高4G的上网速度。比如一条高速公路原本四车道的,通过载波聚合就可以变成...

    你可能把4G+和HD混为一谈了,这实际上是两种不同的功能。

    4G+仍然是4G技术的一种,但是采用了更高的Category技术,也就是载波聚合,它的原理是将4G网络不同频谱的载波聚合成一个更宽的频谱,从而提高4G的上网速度。比如一条高速公路原本是四车道的,通过载波聚合就可以变成八车道,车速就可以更快。

    由于载波聚合的网速比普通4G网速更快,但它仍然是基于4G LTE的技术,所以人们就形象地称它为“4G+”。通常4G网络的下行速率可能在70Mbps左右,通过载波聚合之后的4G+网速可以超过100Mbps。中国移动通过4G LTEAdvanced Cat.9三载波聚合,实测速率可达290Mbps以上。

    但是由于4G+仍然是基于4G网络的,而目前4G网络受到基站带宽的限制,普遍被运营商限速。普通手机使用4G网络,网速通常不会超过50Mbps。而在运营商的限速模式下,即使有4G+功能,也不可能突破运营商的限速。而正在建设中的5G网络速度远比4G+更快。因此现在4G+实际上和普通4G没有区别,对4G用户的意义不大。

    如下图所示,我曾在2016年测试过中国电信的4G+,当时该功能刚刚开通,基本上没什么人用,因此可以达到91Mbps的网速。但是现在支持4G+的手机越来越多,基站带宽却没有增加多少,用4G+网络基本上不可能有这样的网速了。

    至于手机上的“HD”图标,通常指的是VoLTE功能,它的英文全称交错“Voice Over LTE”,也就是通过4G LTE网络传输的音频数据。在4G网络普及之前,手机的语音是通过2G网络来传输的,移动和联通是通过GSM网络,电信是CDMA网络。但是2G网络由于带宽的限制,能够传输的语音数据有限,从而导致2G时代的语音通话都不是特别清晰。

    而到了4G时代,通过VoLTE技术可以将语音数据放在4G网上传输,因此可以传输更加高清的语音数据,让通话更加清晰。

    如果是电信的手机卡,VoLTE还有一个好处就是打电话的时候不会断网。因为2G CDMA网和4G LTE网并不完全兼容。过去没有VoLTE功能的时候,电信手机接打电话时,网络都会回落到2G,这时4G网络就会断开,手机看的在线视频,玩的网络游戏也都会断网,非常恼人。而使用VoLTE之后,由于语音数据也是走4G网络的,所以即使接打电话,4G网络也不会断开了。

    VoLTE还有一个好处就是通话等待时间短,过去我们给别人打电话的时候,可能要等十几秒才会听到“嘟——”的提示音,有的时候等待时间过长,都让人以为手机没有正常接通。而两台同网的VoLTE手机在拨打电话是,几乎就没有通话等待的时间了,按下拨号的一瞬间就能听到提示音。

    总的来说,4G+个VoLTE(HD)是两项不同的技术,其中4G+由于4G网络带宽的限制,基本上没有太大作用了。而VoLTE则是一个比较实用的功能,现在新出的手机绝大部分也都支持VoLTE功能了。

    展开全文
  • 其实网上有很多方法,但还是跟着我的例子敲一遍代码吧,这样自己才能知道原理是什么,也有助于理解。 一、圣杯布局(让left和right占据container的padding) html界面:分别是左中右的三个div &lt;div class...

    面试的时候经常会被问到这个题目,以及我们在平常做界面的时候也会遇到这种三栏布局的要求,那么如何实现呢?其实网上有很多方法,但还是跟着我的例子敲一遍代码吧,这样自己才能知道原理是什么,也有助于理解。

    一、圣杯布局(让left和right占据container的padding)

    html界面:分别是左中右的三个div

    <div class="container">			
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>						
    </div>		

    1、给center、left、right分别设置宽度。(由于三个部分都是div,是块级元素,所以每个元素都从新的一行开始)其实现的效果是center占满了宽度,left和right分别另起一行。

    .center{ 
        background-color:red;
        width:100%;
    }			
    .left{
        background-color:green;
        width:200px;					
    }		
    .right{
        background-color:blue;
        width:200px;	
    }	

    2、为了让三个部分都处在一行中,给他们设置float:left。(这样就会根据元素的宽度先进行一行的占位,当宽度不够时才另起一行,这也解释了为什么left和right会在第二行上)

    .container>div{
        float:left;
    }

    3、 因为center的宽度是100%,所以将left和right挤到了下一行。如何把left和right放到和center同一行?分别给left和right设置margin-left:-100%, margin-left:right的宽度。(margin-left为负值说明向左移动指定的长度)   

    .left{
        background-color:green;
        width:200px;	
        margin-left:-100%
    }	
    .right{
        background-color:blue;
    	width:200px;	
    	margin-left:-200px
    }		

     

       有人会问了,left向左移动100%的宽度到达第一行的左侧是可以理解的,那为什么right仅需要向左移动200px而不是400px呢?

        其实这个问题是我最开始的疑问,因为这个其实是有先后顺序的,当left向左移动了100%后,right就在第二行中以最左侧为起点了,如下图所示,所以再将right向左移动200px就可以啦。 

    4、此时,center中的部分内容被左右两个div覆盖了。因此给外层的container设置padding:0 200px(使整个container横向向中间缩了200px,),overflow:hidden(隐藏掉超出div框的内容)

    .container{
        padding:0 200px;
    }

    5、将left和right再分别向两边移动,占据上一步留出来的左右两边空白。分别设置left:-200px,right:-200px;(光设置这两项发现left和right还是没有移动,原因是positon默认值是static,当 "position" 属性的值为 "static",那么设置 "left" 属性不会产生任何效果。)

    .left{
    	background-color:green;
    	width:200px;	
    	margin-left:-100%;
    	left:-200px;<!--向左移动200px-->
    }	
    .right{
    	background-color:blue;
    	width:200px;	
    	margin-left:-200px;
    	right:-200px;<!--向右移动200px-->
    }	

    6、将lelft和right的position设置为relative,即相对自己原来的位置进行偏移。当设置left:-200px时,即把该div的左边缘设置在其原来位置的左边缘的左侧200px。

    .container>div{
    	float:left;
    	position:relative;
    }

    二、双飞翼布局(让left和right占据center里层的margin)

    和圣杯布局的不同点在于如何解决center的两侧被遮挡的问题。采用在center里加一层content。给content设置margin来让left和right占据content的margin部分,从而做到不遮挡文字内容。(写以下代码也能实现上图效果)

    1、html结构

    <div class="container">		
    	<div class="center">
    		<div class="content">centereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>		
    	</div>
    	<div class="left">left</div>
    	<div class="right">right</div>						
    </div>	

    2、 设置content的样式

    .content{
    	margin-left:200px;
    	margin-right:200px;
    }

    三、flex布局

    1、设置基本html结构:container里包括left、center、right。

    <div class="container">	
    	<div class="left">left</div>
    	<div class="center">centereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee	</div>
    	<div class="right">right</div>						
    </div>	

    2、 根据要求设置left和right的定宽为200px。实现效果为根据html结构中三者的顺序进行顺序渲染,left和right各占200px,center占一整行。

    .left{
    	width:200px;
    	background-color:blue;								
    }	
    .center{
    	background-color:red;
    }	
    .right{
    	width:200px;
    	background-color:green;								
    }

    3、采用flex布局,给外层的container设置display:flex。同时给center设置flex:1 1 auto(flex-grow:1设置item的放大比例,为1表示当存在剩余空间时会放大;flex-shrink:1表示item的缩小比例,为1表示当空间不足时会缩小。)

    .container{			
    	display: flex;
    	flex-direction:row;
    }
    .center{
    	background-color:red;
    	flex:1 1 auto;
    }	

     四、绝对定位布局

    (优点是简单,缺点就是,绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流)

    1、给外层container加上positon:relative(因为positon:absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。)

    .container{
    	position:relative;
    }	

    2、给左中右三者设置positon:absolute,并精确三者相对于top left和right的距离。

    .container > div{
    	position:absolute;
    }			
    .left{
    	background-color:red;
    	width:200px;	
    	top:0;
    	left:0;
    }
    .right{
    	background-color:green;
    	width:200px;
    	top:0;
    	right:0;
    }
    .center{
    	background-color:blue;	
    	width:100%;
    	top:0;
    	left:200px;
    	right:200px;
    }

     

    五、float布局

    (浮动布局的优点就是比较简单,兼容性也比较好。但需要做清除浮动)

    1、html结构,注意一定是左右中的布局;给left和right加定宽200px。

    .left{
    	background-color:green;	
    	width:200px;
    }
    .right{
    	background-color:red;	
    	width:200px;	
    }

     2、给left设置float:left和right设置float:right即可实现要求。

    .left{
    	background-color:green;	
    	width:200px;
    	float:left;
    }
    .right{
    	background-color:red;	
    	width:200px;	
    	float:right;
    }

    补充:为什么是左中右的布局呢?

    1. 浮动元素有一个规则:当非浮动元素和浮动元素同时存在且非浮动元素在前,那么浮动元素不会高于非浮动元素,即浮动和非浮动会按页面上下顺序排列。将center放在最前面的效果如下:(两个浮动元素left和right不会超过非浮动元素center)
    2. 因为div是块级元素,默认的宽度是100%,即它的父级元素container的宽度,此时为浏览器的宽度。

    六、Table-Cell布局

    (缺点是当某一个单元格的高度超出的时候,两侧的单元格也会一起变高)

    1、html结构:左中右的布局,左右固定宽度200px。

    .left{
    	background-color:red;
    	width:200px;
    }
    .right{
    	background-color:green;
    	width:200px;	
    }
    .center{
    	background-color:lightblue;	
    }

    2、将外层container设置display:table。将左中右设置display:table-cell。此时确实是三栏布局,只不过center的宽度为内容的宽度。并没有自适应浏览器中剩余的宽度。

    .container{
    	display:table;
    }	
    .container > div{
    	display:table-cell;
    }			

    3、为了让center的宽度自适应,设置为100%。结果是center的宽度是撑开了,但是left和right的宽度确被挤压到只有内容的宽度了。

    .center{
    	background-color:lightblue;	
    	width:100%;
    }

    4、为了解决left和right的宽度不被挤压的问题,给二者分别设置min-width:200px。结果便能实现预期效果。

    .left{
    	background-color:red;
    	width:200px;
    	min-width:200px;
    }
    .right{
    	background-color:green;
    	width:200px;	
    	min-width:200px;
    }

     

    七、网格布局

    1、将container配置为display:grid,grid-template-columns:200px auto 200px。

    (grid-template-columns 用来把网格指定列的宽度;grid-gap 用来指定列(或行)的间距)

    .container{
    	display:grid !impornant								
    	grid-template-columns:200px auto 200px;
    	grid-gap:5px
    }

    有一个问题就是给外层的container设置display:grid和flex时,浏览器的默认样式总是覆盖掉我自己写的样式,这个要怎么处理呢?

    第一、不太清除为什么浏览器默认的样式会覆盖掉自己写的样式,而且没有语法错误。

    第二、采用了!impornant给我自己设置的display加了最高优先级

    不知道小伙伴儿们有没有遇到过这种情况的,欢迎大家一起来讨论呀。

     

     

    展开全文
  • 修改工具的字体File->Setting->Appearance。...为什么编辑器大多使用等字体:1,编程中容易发现拼写错误(通过字符串长度)2,使用等字体,文本对齐的,发现错误时,可以很容易定位到某一列,方便调试。
  • 什么是布局 布局简单来说就是如何排列页面中各部分的内容 那么,如何排列呢? 页面中常见的布局 单列布局 等的单布局 中间内容略窄的单布局 两布局(一遍定、另一边自适应) 通过 float + overflow ...
  • 频谱泄露1.1 什么是频谱泄露1.2 频谱泄露的影响1.3 如何减少频谱泄露2. 栅栏效应2.1 什么是栅栏效应2.2 怎样减小栅栏效应 1. 频谱泄露 1.1 什么是频谱泄露 实际情况下,时频谱都被限制为有限长序列。在处理过程中...
  • 圣杯布局是什么三列布局,中间宽度自适应,两边定;中间要在浏览器中优先展示渲染;实现HTML代码如下:middleleftright实现一:使用浮动1、先给左右列固定宽度,然后给中间列的设为100%,都设置为向左浮动:#...
  • 作者:林东洲 ... ...三布局在开发十分常见,那么什么是布局?比如我打开某东的首页: 映入眼帘的就是一个常见的三布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器...
  • 很多人CAD制图初学入门者不...在浩辰CAD机械软件中调用【绘图】—【表格】,首先清楚要定义的参数的规格,长宽多少,适用于几号图纸以及内容是什么,这些依不同需求而异,这里就不再赘述。在表格中填写自定义内容。
  • |6|设定栏宽的原则 |7|表格框线的原则:上下粗,其余细 专栏 投资银行的Excel经过特殊设计 |8|文字靠左对齐,数字靠右对齐 |9|表格不要从A1单元格开始 4.改变数字或背景的颜色 |1|改变数字的颜色 专栏 同...
  • js相关高   第一章.window和document对象 一.window和document有什么区别  window指的就是浏览器的窗口,包括工具,地址等等  window一般可以省略     Document对象Window...
  • 圣杯布局和双飞翼布局解决的问题一样的,就是两边定,中间自适应的三布局,中间要放在文档流前面以优先渲染。 但是圣杯布局和双飞翼布局在实现方式上有一点差别。 圣杯布局的来历2006年发在a list part...
  • 这节课,我们来介绍如何设置标签的图标,什么是标签图标呢?就是这里: image 这种图标通常需要有一个透明的背景。 在哪设置这个图标呢? 自定义 &gt; 站点身份 &gt; 站点图标: image 它...
  • 最近在学习CSS布局和HTML,这个部分给我的感觉内容很多,虽然代码简单,不需要什么算法, 但是我们很难将盒子模型放在我们需要的位置上,再加上一些行高、边距、继承,让人如身在云里雾里。 在学习网页的过程中,...
  • 沉浸式状态页面popupwindow全屏处理

    千次阅读 2019-06-23 11:45:03
    没图没鸡脖,先看效果图 这个页面的引导层我采用自定义一个PopupWindow覆盖在外部,由于页面沉浸式,...设置好以后并没有什么卵用,然后检查, 设置外层pop高: this.setWidth(ScreenUtils.getScreenWidth(c...
  • 使用electron开发了一个桌面应用程序,设置了默认全屏,但是在点击了任务的桌面按钮后会自动退出全屏,不知道用什么方法能够避免这个问题 ![图片说明]...
  • 圣杯布局与双飞翼布局 ...说白了,就是要你进行两边定,中间自适应的三布局,并且中间要放在文档流前面以优先渲染。而圣杯布局与双飞翼布局就是用来解决这个问题最常见的布局方法。但两者在实现上有一些差异。
  • 使用js和dom操作时,我们着重强调的高未知便不是什么大问题,因为使用js获取一个元素的高度实在再简单不过的事情了。 但随着vue和react的普及,低效且繁琐的DOM操作已经逐渐退出舞台。而强大的CSS3又提供了非常...
  • A:今天2013/10/10,日期变为八位,宽度就不够了,把任务就好了Q:win7 任务时间区可以拉吗?使之显示日期等A:你的任务锁定了的,右键单击任务-锁定任务前面的勾去掉,鼠标移动到任务边缘,会...
  • table表示不服气,凭什么我要被抛弃 衍生 - display:table-cell; pc端定死?那inline-block携手width也个好方法 * 以下汇总方法不贴图的,都和上边这个图一模一样的效果。 案例初始化html结构如下:...
  • >>update 吗 >>又alter 跟update 有何不同呢 update 是否耗时和数据结构的组成有密切关系,最有效率的那种 每笔纪录都有固定栏数栏宽的资料表结构,那么 update 和 new 的速度差不多,new 直接摆在资料表最...
  • 有时候会遇到以下的情况,绘制一个原图等高时,图片在界面上看上去清晰,而当把PNG缩小高之后绘制的图片有明显锯齿,这是什么原因? 说明 使用Gdiplus::Graphics对象的方法DrawImage可以绘制原图的Rect源...
  • 如何布局电子商务网站

    千次阅读 2014-05-15 11:13:57
    电子商务网站的布局类别繁多,按栏位分有两式、三式、多栏式,按对齐方式分有居中对齐、左对齐,按照宽度分也有宽屏和非宽屏之分。如此之多的布局,那电子商务网站该采用何种布局呢?  让我们先来看看外国电子...
  • //获取当前文档的 高 nowWidth = $(window).width(); nowHeight = $(window).height(); //获取大的背景div one = $(".one"); two = $(".two"); three = $(".three"); <!-- alert(typeof(nowHeight)...
  • H+一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了左右两式等多种布局形式,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了最新的jQuery版本(v2.1.4)...
  • css常见布局

    2019-12-11 17:50:18
    什么是布局 布局简单来说就是如何排列页面中各部分的内容 那么,如何排列呢? 页面中常见的布局 单列布局 等的单布局 中间内容略窄的单布局 两布局(一遍定、另一边自适应) 通过 float + overflow ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 165
精华内容 66
关键字:

栏宽是什么