div块中高度总是宽度的一半

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <style type="text/css">
 5     body {
 6         margin: 0;
 7         padding: 0;
 8     }
 9     .inner {
10         color: aliceblue;
11         height: 0;
12         padding: 25% 0;
13         background-color: coral;
14         display: flex;
15         align-items: center;
16         justify-content: center;
17     }
18     </style>
19 </head>
20 <body>
21     <div class="inner"> A </div>
22 </body>
23 </html>

原文地址:https://www.cnblogs.com/gaoxuerong123/p/9499133.html

时间: 2024-10-30 23:37:33

div块中高度总是宽度的一半的相关文章

子div块中设置margin-top时影响父div块位置的解决办法

在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办法1: 若子div块中使用margin-top,则在父div块中添加:overflow:hidden; 解决办法2: 若由于特殊情况不能在父div块中添加:overflow:hidden,那么在子div块中用padding-top代替margin-top;

js中高度与宽度的获取

JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧

CSS设置div的最小高度和最小宽度

CSS设置div的最小高度和最小宽度:所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍.如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如下:

设置一个DIV块固定在屏幕中央(两种方法)

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT

CSS设置div的最小高度和最小宽

CSS设置div的最小高度和最小宽度: 所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍. 如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如

BPM实例分享:如何设置开窗高度与宽度?

版本: V9.2.7 问题描述: DropDown的开窗查询中高度与宽度设置无效 解决方案: 修改MvcSheetAll,具体修改文件位置在: /Portal/WFRes/_Scripts/MVCSheet/Controls/SheetTextBox.js 修改内容如下图: 备注: H3中所有项目文件属性都默认为只读,打开长文本MvcSheetAll.js 时需更改后才能文本编辑格式化,至于压缩问题,需代码格式化.

jquery实现div自适应浏览器高度

<!DOCTYPE html><html><head><meta charset=UTF-8 /><title>jquery实现div自适应浏览器高度(宽度)</title><meta name="keywords" content="html5" /><meta name="description" content="html5 test&quo

CSS中的高度和宽度

1.简单的说,常规流向的块级元素,width为auto时,会尽量充满父元素的内容宽度,而height为auto时,则是由其内部的不浮动的子元素的高度决定(无浮动,绝对定位). 2.width:100%;width:auto <div>    <p>1</p></div><style type="text/css">div{ width:600px; overflow:auto;}p{ width:100%;      padd

(转载)html中div使用自动高度

为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签: static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定;relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了.absolute绝对定位,直接指定top,left,right,bottom.有意思 的是