【用伪类实现一个div的宽度和高度是固定百分比】的更多相关文章

用伪类实现一个div的宽度和高度是固定百分比

遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用CSS来实现呢 下面是示例代码: HTML代码: <div class="outer"></div> CSS代码: .outer{ width: 30%; background: #eee; } .outer:after{ content: ''; display:…

关于Div的宽度与高度的100%设定

http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明 确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题! 其实,要弄懂div宽度|width100%.div高度|height100%到底是怎么实现…

Div的宽度与高度的100%设定

div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级div的padding和margin影响,而其实际宽高不受影响.值得玩味噢! 浏览器一般默认解释为内容的高度,而不是100%.但是只要为html和body设置高度为100%就可…

CCS进阶——div的宽度和高度是由什么决定的？

核心知识 文档流/普通流(Normal Flow) 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding) 块级元素的宽高(高度是内部文档流元素的高度总和,宽度默认适应父元素的宽度) 水平居中 垂直居中 文字溢出省略 盒模型 一比一的div(<div style="padding-top=100%;border: 1px solid red;"></div>) outline border调试大法 div的宽度 我们先来看…

利用伪类写一个自定义checkbox和radio

首先是效果图来一张 再来一张html结构 关键的CSS来了~ 首先呢要把input标签设置为display: none;  因为自定义的原理是通过label的for属性,来点击label转向为点击input的效果,再通过CSS来设置label的边框和宽来实现一个点击框的样子,通过css选择器:checked这个css3的选择器来动态设置label的样式,上图就明白了~ 图: 设置:checked+label来选择input被选中时后面跟着的label的样式~(注意!label要放到input的后…

用CSS伪类制作一个不断旋转的八卦图？

前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="yinyang"></div> </bod…

如何使用css伪类，实现div左上角出现封面等提示信息

 HTML <div class="ui-cover-tip”><div> CSS .ui-cover-tip{ position: relative; width: 200px; height: 200px; border: solid 1px red; } .ui-cover-tip:before{ content:''; position: absolute; display:block; width: 0; height: 0; border-top: 45px…

调用jquery的resize方法改变div的宽度和高度在IE中不变，在谷歌中可以正常显示

1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); }); //改变高度和宽度的方法 function haituheight() { var height = $(window).height()-$('.footer').height()-$('.header').height(); var width = $(window).width()-$…

12、第十二节课，css伪类 （转）

一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5.名称[表达式] 5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签:E[att=val] 匹配所有att属性等于“val”的E元素: 5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签: 5.3 [att^=val]获取所有定义了att…

理解使用before，after伪类实现小三角形气泡框

先来理解before和after伪类的用法吧,before从字面上的意思可以理解为前面的意思,它一般和content属性一起使用,把内容插入在其他元素的前面,同理after的含义就是把内容插入到其他元素的后面了.先来看一个简单的demo,如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &…