首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css div高度设置100%如何生效!

div { width: 100%; /* 这是多余的 */ height: 100%; /* 这是无效的 */ background: url(bg.jpg); } 然后他发现这个...高度永远是 0,哪怕其父级塞满了内容也是如此。...事实上,他需 要如下设置才行: html, body { height: 100%; } 并且仅仅设置也是不行的,因为此时的也没有具体的高度值: body {...例如,一个 元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素的图片,此时,该高度就是 192 像素,假设此时插入一个子元素,高度设为 100%...要知道,auto 和百分比计算,肯定是算 不了的: 'auto' * 100/100 = NaN 但是,宽度的解释却是:如果包含块的宽度取决于该元素的宽度,那么产生的布局在 CSS 2.1 中是未定义的

5.7K00
您找到你想要的搜索结果了吗?
是的
没有找到

前端|CSS阴影和文字阴影

而在CSS3当中,就有box-shadow,text-shadow这样两个属性来展示出阴影的效果。...解决步骤: 1.盒阴影阴影的呈现方式是多样的,可以是图标、图形增加外部阴影,或者呈现发光样式等,这里介绍一个十分常见的案例——遮罩层,我们可以设置合适的参数来模拟一个半透明遮罩层的样式。...由于是模拟样式,则只需要模拟一个盒子为遮罩层,设置颜色参数为0(透明效果)的阴影。...(0, 0, 0, .5); //宽度设置为页面宽度 } 效果图: ?...结语 CSS3中的阴影属性,可以呈现的样式和层次感是十分丰富的,比如一个发光体,模糊字体,立体图标等样式都是在网页当中十分常见的,希望通过以上的简单介绍,能够启发读者更多的思考。

1.1K41

Css3 阴影详解

box-shadow 阴影 语法: box-shadow:none | [,]* box-shadow:none /* 设置none是表示没有阴影 */ 举例说明...> View Code ---- 外阴影outset与内阴影 inset box-shadow属性最后一个参数用于设置阴影 是否是内阴影,还是外阴影;  取值有2种: (1)outset:默认值,外阴影...> 内阴影 View Code 分析: 默认情况下,边框阴影是外阴影效果,设置最后一个属性值 为inset时,边框阴影为内阴影效果...---- 边框阴影 四条边框独立样式 box-shadow属性可以为边框的4条边的设置独立样 式。 其中,每条边的阴影属性值之间用英文逗号隔开 即可。...id="div1">外阴影 View Code   分析: 仔细观察水平阴影位置x-shadow和垂直阴影位置yshadow这两个取值是如何设置的。

82220

CSS 定位布局 - 绝对、固定定位设置居中悬浮div

仅供学习,转载请注明出处 讨论的问题 在上一篇 CSS 定位布局 - 相对、绝对、固定三种定位 中,发现当使用定位布局的时候,存在一个无法使用margin居中的方法。...下面设置一下相对定位,看看会不会影响这种居中效果 ? 从上图可以看出相对定位并不会影响margin居中布局。 设置一下绝对定位,看看会不会影响这种居中效果 ?...这种情况下,该如何设置布局呢? 在绝对定位的情况下,设置div居中布局 居中布局当然就要先使用left偏移来进行设置,不过这次偏移需要用百分比,不然浏览器稍微缩放就无法居中了。 ? ?...可以从上图看到left偏移了50%之后,div依然不是居中的,那么下一步该怎么办呢?...好了,从上面来看,绝对定位已经可以设置div居中了,那么固定定位是否也是如此呢? 固定定位设置div居中 ? ?

3.3K20

Android 控件设置阴影效果

本文主要记录Android控件设置阴影 给控件设置阴影,会使得界面元素更好看一写,google 给我们提供了一个现成的控CardView,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果...本文是使用给控件设置背景实现阴影 在res/drawable 下新建一个 Drawable Resource File 使用 layer-list 图层 就是说可以多个图层一层一层盖上去 新建一个渐变的图层...新建一个图层,作为顶层图层, 阴影实现的原理,就是顶层的小显示一点,露出一部分下面的图层,这个就需要设置Item的 left, top, right, bottom属性,这几个参数的设置就类似于设置margin..., 这样就可以出来阴影效果了,当然为了效果,我的参数设置的有点夸张,只设置了右边和下边的阴影,solid 设置填充, 还有stroke 设置边框,设置了颜色,设置了宽度就可以看见边框效果了 <item...radius="10dp" / </shape </item </selector </item </layer-list 总结 以上所述是小编给大家介绍的Android 控件设置阴影效果

1.9K31

CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; )

盒子模型阴影 使用 如下 属性设置 : box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; 只有 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的四个值可以省略...2px 2px 2px blue; 展示效果 : 8、内外阴影示例 内外阴影示例代码 : 只修改第六个属性值 ; 如果设置阴影 , 不需要写第六个值 , 就是默认状态 , 写了就错了 ; /*...只修改第六个属性值 ; 如果设置阴影 , 第六个属性值设置 inset ; /* box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影;*/ box-shadow: 2px...type="text/css"> /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } div { width...body> 显示效果 :

1K20

css+div知识温馨

居中的两种方式: 直接对盒子设置margin-left:auto; margin-right:auto ,如果要设置垂直居中,发现这种方法无效,无法通过设置margin:auto让垂直也居中...火狐里根本就不显示任何东西 对于IE 漂浮不漂浮是在同一个文档流下, 而火狐是显示的不同文档流 让所有区块都漂浮就可以解决这两个兼容问题 (IE9已经解决以上问题 ) line-height 属性: 对文字可以设置水平居中...,却无法实现垂直居中,如果希望文字垂直居中,不要设置文字外框的height,而是设置line-height属性, 这样文字会居中在这个高度。...position:absolute 及时添加了z-index属性也不起作用 position:relative 是相对于自己在z-index=0的位置,position:absolute是相对于自己最近的设置了...结构建议采用 base.css+common.css+page.css的模式 其中base.css 定义CSS reset 以及一些原子类 common.css 可以定义页面的框架 page.css

1.6K20

自学DIV+CSS总结

1、CSS有四种控制方式:行内样式、内嵌式、链接式、导入式(优先级从高到低) 2、CSS选择器有:标记选择器(p、ul、a、li、img、span、input、select、等)、类别选择器(class...8、定位 div和span的区别在于div是块级标记可以包含span但是span不可以包含div,span是行内元素 float定位:可以向左靠紧float:left、float:right向右靠紧...div设置成relative z-index:空间定位,z-index值大的在小的上面 9、CSS控制盒子模型 所有的div都可以看成盒子,其中内容(content)、边框(border)、间隙(padding...10、设计和编辑div+CSS心得 根据设计的ps图,先把页面划分成几个板块(越少越好),然后几个板块的关系以及margin和padding和边框都设计好(做到心中有图,胸有成竹),继续写成对的div...进行命名和声明和注释(解决div不成对和注释少的问题),确定每个块的名字和样式(精确到大小和颜色),最后写代码调试(每个浏览器的方法不一样编写的css可能有不同的样式,需要进行深入研究) 11、补充

2K60
领券