精华内容
下载资源
问答
  • 最近看面试题,看到很多次类似的题目,左侧定右侧自适应, 或则右侧定左侧自适应。网上众说纷纭,示例很多没有原理讲解。所以借助自己复习总结。希望能给初学者,自学者一些...通过设置margin(值 = 固定的) ...

    最近看面试题,看到很多次类似的题目,左侧定宽右侧自适应, 或右侧定宽左侧自适应。网上众说纷纭,示例很多缺少原理讲解。所以在此复习总结。希望能给初学者,自学者一些帮助吧。共勉。。。

    目前我所知的主要6种方式

    方法一:

    固定宽度区域浮动,自适应区域设置margin(值 = 固定的宽)

    原理:float的固定宽度区域脱离文档流。自适应区域默认占满父元素宽度。通过设置margin(值 = 固定的宽) 来控制自适应区域的宽度。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                border: 1px solid;
                overflow: hidden; /*清浮动*/
            }
            .left{
                float: left;
                width: 200px;
                height: 500px;
                background-color: skyblue;
            }
            .right{
                height: 200px;
                background-color: pink;
                margin-left: 200px; /*值 = 固定的宽*/
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左边固定宽度200</div>
            <div class="right">右边自适应</div>
        </div>
    </body>
    </html>
    

    左侧浮动定宽,右侧自适应
    注:此种方法必须要把浮动的固定区域放在前面。因为浏览器的渲染顺序,自适应的区域会先撑满整个区域。否则如图所示

    <body>
        <div class="box">
            <div class="right">右边自适应</div>
            <div class="left">左边固定宽度200</div>
        </div>
    </body>
    

    浮动的固定区域放在后面渲染
    方法二:

    固定宽度区域和自适应区域均浮动,自适应的宽度:calc(100% - 固定的宽)

    原理:左右浮动布局,通过calc计算剩余宽度给自适应区域

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                border: 1px solid;
                overflow: hidden; /*清浮动*/
            }
            .left{
                float: left;
                width: 200px;
                height: 500px;
                background-color: skyblue;
            }
            .right{
                float: right;
                height: 200px;
                background-color: pink;
                width: calc(100% - 200px); /*calc(100% - 固定的宽)*/
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左边固定宽度200</div>
            <div class="right">右边自适应</div>
        </div>
    </body>
    </html>
    

    方法三

    固定宽度区域浮动, 自适应区域overflow:hidden/auto

    原理:触发BFC(块级格式化上下文),形成自己的封闭空间。固定区域和自适应区域都触发BFC,且自适应区域流动性没有破坏,自然而然的占据了剩余的宽度。(^ _ ^overflow:scroll会产生滚动条所以不适用)
    触发BFC的情况(想多了解的推荐张鑫旭的《css世界》)

    • 根元素
    • float值不为none
    • overflow的值为auto、scroll和hidden
    • display的值为table-cell、table-caption、inline-block
    • position的值不为relative和static
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .left{
                float: left;
                width: 200px;
                height: 500px;
                background-color: skyblue;
            }
            .right{
                height: 200px;
                background-color: pink;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左边固定宽度200</div>
            <div class="right">右边自适应</div>
        </div>
    </body>
    </html>
    

    BFC两栏自适应布局
    方法四

    固定宽度区域position:absolute,自适应区域设置margin(值 = 固定的宽)

    原理同方法一二。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                position: relative;
            }
            .left{
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 500px;
                background-color: skyblue;
            }
            .right{
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左边固定宽度200</div>
            <div class="right">右边自适应</div>
        </div>
    </body>
    </html>
    

    左侧固宽绝对定位,右侧自适应
    方法五

    父元素设置display:table, 固定宽度区域和自适应宽度区域设置diplay:table-cell

    原理:利用display: table-cell 子元素宽度之和等于父元素的宽度;如果有子元素未设置宽度,那么占据剩余所有宽度。如果子元素设置的宽度相加不等于100%,默认按子元素个数比例均分父元素宽度。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                display: table;
                height: 500px;
                width: 100%;
            }
            .left{
                display: table-cell;
                width: 200px;
                background-color: skyblue;
            }
            .right{
                display: table-cell;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左边固定宽度200</div>
            <div class="right">右边自适应</div>
        </div>
    </body>
    </html>
    

    display:table两栏自适应布局
    方法六

    flex布局(推荐)

    flex: flex-grow, flex-shrink, flex-basis
    flex-grow: 可以来扩展子元素的宽度(默认为0),设置当前元素应该占据剩余空间的比例值。比例值计算:当前空间的flex-grow/所有兄弟元素的flex-grow的和.
    flex-shrink: 定义收缩比例(默认值为1),通过设置的值来计算收缩空间。比例值计算:当前空间的flex-shrink/所有兄弟元素的flex-shrink的和.
    flex-basis:指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                display: flex;
            }
            .left{
                width: 200px;
                height: 500px;
                background-color: skyblue;
            }
            .right{
                flex: 1;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">左边固定宽度200</div>
            <div class="right">右边自适应</div>
        </div>
    </body>
    </html>
    

    flex两栏自适应布局

    展开全文
  • 获取屏幕高,状态栏宽高,actionbar高,layout高,导航(虚拟按键)高度的方法   目录顺序 代码测试的机型 状态高度 actionbar高度 屏幕高度 导航(虚拟按键)高度 layout高 总结   代码...

    看这个博客你可以知道

    获取屏幕宽高,状态栏宽高,actionbar宽高,layout宽高,导航栏(虚拟按键栏)高度的方法

     

    目录顺序为

    代码测试的机型

    状态栏高度

    actionbar高度

    屏幕高度

    导航栏(虚拟按键栏)高度

    layout宽高

    总结

     

    代码测试的机型:小米8青春版

    这里我们用的是小米8青春版手机测试(刘海屏)

    小米8青春版屏幕px为1080*2280,相当于360*760dp

     

     

    获取状态栏高度

    //获取状态栏
    private int getStatusBarHeight() {
        Class<?> c = null;
        Object obj = null;
        Field field = null;
        int x = 0;
        try {
            c = Class.forName("com.android.internal.R$dimen");
            obj = c.newInstance();
            field = c.getField("status_bar_height");
            x = Integer.parseInt(field.get(obj).toString());
            return getResources().getDimensionPixelSize(x);
        } catch (Exception e1) {
            Log.d(TAG, "get status bar height fail");
            e1.printStackTrace();
            return 75;
        }
    }
    Log.i(TAG, "onCreate: "+getStatusBarHeight());

    上面的是获取状态栏方法,获得状态栏的高度(px)

    因为这里用的小米手机是刘海屏,状态栏为20dp,通常手机屏幕的状态栏高度为25dp

     

    dp=60/3=20dp

    Rect frame = new Rect();
    getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
    int statusBarHeight = frame.top;
    Log.i(TAG, "onPause: "+statusBarHeight);

     

    上面的是第二种获取状态栏高度的方法(px)

    P.s.该方法写在onCreate()中不可以,会获取到0

    dp=60/3=20dp

     

    获取ActionBar高度

    //第一种获取方法
    int actionBarHeight = getSupportActionBar().getHeight();
    
    
    //第二种获取方法
    int contentTop = getWindow().findViewById(Window.ID_ANDROID_CONTENT).getTop();
    

    上面是获取Actionbar高度的方法(px)

    dp=168/3=56dp 

    P.s.该方法写在onCreate()中不可以,会获取到0

     

    获取屏幕宽高

    int screenWidth,screenHeight;
    WindowManager windowManager = getWindowManager();
    Display display = windowManager.getDefaultDisplay();
    screenWidth = display.getWidth();
    screenHeight = display.getHeight();
    Log.i(TAG, "onCreate: "+screenWidth+","+screenHeight);
    
    DisplayMetrics dm = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(dm);
    int screenWidth2 = dm.widthPixels;
    int screenHeight2 = dm.heightPixels;
    Log.i(TAG, "onCreate: "+screenWidth2+","+screenHeight2);

    这是两种获取屏幕宽高的方法,单位为px

    (获取到的屏幕为状态栏+actionbar+页面内容)

    (不包含虚拟按键栏)

    因为小米8青春版底部为虚拟按键栏,所以虚拟按键栏高度为2280-2150px=130px=43.3dp

     

    获取虚拟按键栏高度(导航栏)

    //获取虚拟按键栏高度
        public static int getNavigationBarHeight(Context context, boolean b) {
            int result = 0;
            //是否纯在虚拟按键栏(导航栏)
            if (b) {
                Resources res = context.getResources();
                int resourceId = res.getIdentifier("navigation_bar_height", "dimen", "android");
                if (resourceId > 0) {
                    result = res.getDimensionPixelSize(resourceId);
                }
            }
            return result;
        }

    上面是获取虚拟按键栏(导航栏)高度的方法(px) 

    dp=130px/3=43.3dp

     

     

    获取控件宽高

            LinearLayout linearLayout;
            linearLayout=findViewById(R.id.ll_layout);
            linearLayout.measure(0,0);
            Log.i(TAG,"onStop:"+linearLayout.getMeasuredHeight()+","+linearLayout.getMeasuredWidth());
            Log.i(TAG,"onStop:"+linearLayout.getLayoutParams().height+","+linearLayout.getLayoutParams().width);
            Log.i(TAG,"onStop:"+linearLayout.getHeight()+","+linearLayout.getWidth());

    上面分为3种,第一种是获取组件测绘宽高,第二种是控件设置的宽高,第三种是控件实际显示的宽高

    P.s.第一种获取的是子控件的测绘宽高

    第二种设置match_parent时显示-1,设置wrap_content时显示-2

    第三种方法在View没加载完成时,获取的值为0,所以写在onCreate中会获取到0(写在onStart和onResume第一次调用也为0,只是查看的话可以写在onStop中,这个时候View肯定加载完成)(可以设个监听器持续监听,直到View加载完成,宽高不为0为止)

    高dp=1922px/3=640.7dp

    宽dp=1080px/3=360dp

     

     

    注意点:尽量别在oncreate中获取各类高度,因为在Android界面创建过程中,容易读取不到宽高,会出现0的情况

     

     

    总结:小米8青春版手机界面高度:

    状态栏(StatusBar)        60px=20dp

    ActionBar(标题栏)        168px=56dp

    页面内容                       1922px=640.7dp

    虚拟按钮栏(导航栏)       130px=43.3dp

    共计2280px=760dp

     

     

    ___________________________________分割线______________________________________

     

    再用我自己的华为P10 plus真机测试一下屏幕高度

    自己平时用的华为P10 plus,  分辨率为1440*2560px,dp为360*640dp

     

    状态栏(StatusBar)        24dp

    ActionBar(标题栏)        56dp

    页面内容                      560dp

    高度共计640dp

     

    华为P10 plus没有虚拟按键栏,也不是刘海屏,所以和上面的小米手机有点区别

     

    华为P10屏幕分辨率1440*2560px,测出来一直是1080*1920px,后来发现是华为手机的智能分辨率功能,可以调节为屏幕密度2,3,4三种对应的分辨率

    展开全文
  • Latex定长表格(双环境)

    万次阅读 2019-03-09 19:03:55
    一个单表格: 在table后边加*就可以跨栏啦。 \begin{table*}[t] \centering \begin{tabular}{ccccccc} \hline Test Groups &amp; a &amp; b &amp; c &amp; d &amp; e &amp; f \\ ...

    一个单栏表格:

    在table后边加*就可以跨栏啦。

    \begin{table*}[t]
        \centering
        \begin{tabular}{ccccccc}
            \hline
            Test Groups & a & b & c & d & e & f \\
            \hline\hline
            Result1 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 \\
            Result2 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 \\
            \hline
        \end{tabular}
        \caption{Test}
    \end{table*}

    效果:

    一个不会跳到下一页的单栏表格:

    \usepackage{stfloats}
    
    % ....................
    
    \begin{table*}[t]
        \centering
        \begin{tabular}{ccccccc}
            \hline
            Test Groups & a & b & c & d & e & f \\
            \hline\hline
            Result1 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 \\
            Result2 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 \\
            \hline
        \end{tabular}
        \caption{Test}
    \end{table*}

    效果:

    一个定宽且不会跳到下一页的单栏表格

    \usepackage{stfloats}
    
    % ....................
    
    \begin{table*}[b]
        \centering
        \setlength{\tabcolsep}{7mm}{
        \begin{tabular}{ccccccc}
            \hline
            Test Groups & a & b & c & d & e & f \\
            \hline\hline
            Result1 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 \\
            Result2 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 & 0.00 \\
            \hline
        \end{tabular}}
        \caption{Test}
    \end{table*}

    效果:

     

    展开全文
  • 左右布局:左边定、右边自适应, 1.1浮动方法,使第一个div浮动起来脱离文档流,下面的div自动向上 先看代码 body{margin:0;} //为了统一布局,去掉了浏览器自带body的margin值 .left{ width:200px; ...

    左右布局:左边定宽、右边自适应,

    1.1浮动方法,使第一个div浮动起来脱离文档流,下面的div自动向上

    先看代码

    <style>

    body{margin:0;} //为了统一布局,去掉了浏览器自带body的margin值

    .left{ width:200px; float:left; height:400px;; background:#99F;}

    .main{ height:400px; background:#CCC;}

    </style>

    <body>

    <div class="left">左侧</div>

    <div class="main">主要</div>

    </body>

    1.2 绝对定位法

    此方法的原理大体就是将左侧的块元素设置为position:absolute;右侧默认宽度,且将margin-left的值设为200px,即为左栏的宽度。

    <style>

    body{margin:0;}

    .left{ position:absolute; top:0; width:200px; height:400px; background:#99F; left:0;}

    .main{ height:400px; background:#CCC; margin-left:200px;}

    </style>

    <body>

    <div class="left">左侧</div>

    <div class="main">主要</div>

    </body>

    1.3弹性盒

    display:flex; 设置为弹性盒子,其子元素可以通过设置 flex 的数值来控制所占空间的比例。

       body{margin:0; display: flex}

       .left{ width:200px; height:400px; background:#99F; left:0;}

       .main{ height:400px; background:#CCC; flex: 1}

    </style>

    <body>

    <div class="left"></div>

    <div class="main"></div>

    </body>

     

    2左右定宽中间自适应宽度

    1.1浮动方法,使第一个div浮动起来脱离文档流,下面的div自动向上

    <style>

      body{margin:0;}
        .left{ width:200px; float:left; height:400px;; background:#99F;}
        .right{ width:200px; float:right; height:400px; background:#39F;}
        .main{ height:400px; background:#CCC;}
    </style>
    <body>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="main">中</div>

    2.2 绝对定位法

    <style>

    body{ margin:0;}

    .left,.right{ position:absolute; top:0; width:200px; height:400px;}

    .left{ background:#99F; left:0;}

    .right{ background:#39F; right:0;}

    .main{ height:400px; background:#CCC; margin:0 200px;}

    </style>

    <body>

    <div class="left"></div>

    <div class="right"></div>

    <div class="main"></div>

    </body>

    <style>

    1.3弹性盒

    display:flex; 设置为弹性盒子,其子元素可以通过设置 flex 的数值来控制所占空间的比例。

        body{margin:0; display: flex}

        .left{ width:200px; height:400px; background:#99F; left:0;}

        .main{ height:400px; background:#CCC; flex: 1}

        .right{ width:200px; height:400px; background:#99F; left:0;}

    </style>

    <body>

    <div class="left"></div>

    <div class="main"></div>

    <div class="right"></div>

    </body>

    展开全文
  • 页面两栏布局

    万次阅读 2018-05-11 11:37:24
    1.javascript变量包含种不同数据类型的值:基本类型和引用类型。 基本类型值指的是简单的数据段,包括es6里面新增的一共是有6种,具体如下:number、string、boolean、null、undefined、symbol。 引用类型值...
  • 感谢IT大道,copy只为了防止原文被... 当我们需要计算屏幕中一些元素的高度时,或许需要先获取到屏幕或者各种栏目的高度,下面这个类包含了Status bar状态,Navigation bar虚拟按键,Action bar标题, Window屏
  • html/css-两栏(多栏)布局制作

    千次阅读 2019-03-12 12:12:12
    两栏布局制作: 步骤: 左栏不设置宽度,网页自适应决定,右栏定位到右边; 将左栏的右边框限制在右栏之外,采用外边距实现; html代码: &lt;!DOCTYPE html&gt; &lt;html lang="em"&...
  • Android StatusBar 状态颜色设置

    万次阅读 2016-11-01 17:33:38
    导读:最近在使用自己手机,发现一种动画效果非常不错,就是天气随着时间季节,状态和ToorBar颜色都会发生改变,搜索资料得出的三种方案….... * 设置透明状态 * * 可在Activity的onCreat()中调用 * <p>
  • 分四布局

    千次阅读 2018-04-14 18:42:47
    实现四栏等宽,中间设置一定间隙的自适应布局:一:利用浮动(注:如果多加一个元素就会换下一行)1.代码如下:&lt;style type="text/css"&gt; *{ margin:0; padding:0; } .clearfix:...
  • 本文主要介绍的是如何构建布局,主要利用的知识是margin、width的设置、块级元素的使用、并涉及到position、z-index、border、id众多html的常用元素,接下来就直接上代码吧~ 三式 HTML代码 <!DOCTYPE html> ...
  • 一、问题 Deepin 20 beta 中自带Chrome浏览器,默认标题...设置中心去掉勾选的个选项 Chrome设置中心图 去掉标题和书签效果图 (二)代码设置标题宽度 创建目录 # 二选一 # 默认的亮色主题 mkdir -p ~/.
  • css布局:table布局、两栏布局、三栏布局
  • 1. 两栏布局,左边定 //html <div id="left">左边定</div> <div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div> 1、 #left{ float: left; width: 200px; ...
  • C#中设置状态(statusStrip)的布局

    千次阅读 2019-09-23 10:06:05
    状态所有项目(StatusLabel、ProgressBar、DropDownButton)前添加一个空白的StatusLabel (Text属性空),并将其Spring属性设True。 Spring属性的作用是设置该项是否填满剩余空间,设True以后,当程序运行时...
  • 在一个偶然的机会,看到了百度阅读这款产品,找了几本免费的书,打开看了看,总体还不错的样子,但是由于公司电脑的屏幕比较,而百度阅读设置的阅读宽度是840px的固定宽度,所以看起来就比较费劲了。宽度不提供...
  • Android程序中要设置全屏包括个部分: 窗口全屏和Activity 全屏。窗口全屏 是指隐藏系统顶部用来显示时间、电量、信号信息的。 标题,Activity全屏 是指隐藏程序的标题。我们可以在程序代码中设置,也可以...
  • CSS-四种两栏式布局

    千次阅读 2018-08-27 22:42:52
    四种两栏式布局 先分别介绍float、position、flex和table 1.float属性指定一个盒子(元素)是否应该浮动。 在早期浏览器当中,文档类型基本都是图片加文字进行页面展示。float属性最开始的设计是想让文字环绕图片...
  • Android系统自带RatingBar,无法直接指定高,不然会出现无法全部显示的情况,使用系统自带的个主题 ?android:attr/ratingBarStyleIndicator和 ?android:attr/ratingBarStyleSmall 也只能做到固定小版或者...
  • Android状态微技巧,带你真正理解沉浸式模式

    万次阅读 多人点赞 2016-08-23 07:32:55
    记得之前有朋友在留言里让我写一篇关于沉浸式状态的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态的微技巧讲解。 其实说到沉浸式状态这个名字我也是感到很无奈,真不知道这种叫法是谁先...
  • Android底部导航最常用的种写法

    万次阅读 多人点赞 2018-01-22 09:58:36
    先来看看底部导航的效果 Android 底部导航有很多种写法,例如:   RadioGroup , Tablayout, TabHost , LinearLayout + ImageView + ...我们就来看最常用的种底部导航的用法  
  • right:宽度和父级一样,设置margin-right:left的宽度px,宽度随父级变化而变化 (固定+自适应) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
  • Android程序中要设置全屏包括个部分...窗口全屏 是指隐藏系统顶部用来显示时间、电量、信号信息的 标题 ,A ctivity全屏 是指隐藏程序的标题。我们可以在程序代码中设置,也可以通过修改AndroidManifest.
  • 获取状态的高度: Rect frame = new Rect(); ((MoveViewDemo) context).getWindow().getDecorView().getWindowVisibleDisplayFrame(frame); //这里得到的是除了系统自带显示区域之外的所有区域,这里就是除了...
  • 实现两列等宽布局的几种方法

    千次阅读 2016-08-20 11:17:21
    当你想实现两列等宽,左边一些内容,右边一些内容时,基本上都需要在一个容器的内部设置两个高度相等的列。每一面正好占用容器的一半,并且可以明显的区分他们。在CSS中有很多方法都可以实现,那么来看看如何用多种...
  • latex进行两栏排版时,有时会遇到一些宽度较大的图形或表格,没办法挤在一栏中,希望能够让其占据两栏,如下图,如何实现呢? ... ...其实很简单,只需要多加一个星号就可以了。...表格横跨两栏代码 ...
  • 实现这个效果首先要使用了一个层叠的方法,就是在导航的位置放置一个与导航长宽一致的div(以下称为cover),position设置为absolute,导航的position设置为relative,从而实现在同一位置的重叠,然后再开始写...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,593
精华内容 19,437
关键字:

如何设置为等宽两栏