css 相对父元素缩放

2024-11-03

css 实现元素长宽等比缩放

实现思路(长宽比2:1): 以父级元素为基准, 子级 width:100%; (也就是父级宽度的 100%), padding-top:50% (也就是父级宽度的 50%, 根据 css 规范, padding 用百分比表示的话, padding: 100% 等于父元素的宽度); 为什么不直接 width: 100%; height: 50%; ? 那样高度就成了父级高度的 50% (不合题意, 除非父级宽高相等); <style type="text/css"> #con

css float父元素高度塌陷

css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis

CSS实现父元素半透明，子元素不透明

CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明.但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承. 如下代码,则子元素中也将是半透明效果,无论你将子元素的半透明值重置还是如何都不会改变这一情况. .parent{opacity:0.5; background-color:#fff;} .child{opacity:1.0; back

关于css中父元素与子元素之间margin-top的问题

之前在使用经常遇到下面的问题: html: <div class="top"> <div class="one">I'm the first!</div> <div class="two">I'm the second!</div> </div> css: .one{ width: 100px; height: 100px; background: red; margin-t

CSS float 父元素高度自适应

<html> <head><title></title><style type="text/css">*{margin:0 ;padding:0;}.content{border:1px solid red;}.fl{float:left}</style></head> <body> <div class="content"> <div class=&q

[css]当父元素的margin-top碰上子元素的margin-top

出现条件:父元素和子元素都设置了margin-top 现象:子元素的margin-top可能会失效,导致父元素和子元素粘连在一起解决方法: 1.给父元素加padding-top:1px. 2.给父元素加border:1px solid transparent 3.给父元素加float:left 4.给父元素加overflow:hidden(我觉得最好的) 5.给子元素加display:inline-block

CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的内容自动适应的. 亦或者在子元素的最后一个清楚浮动.

#CSS margin-top父元素下落

[我的解决方法] 给该父元素添加如下代码 border-top: 1px solid rgba(0,0,0,0); box-sizing:border-box; [原因] css2.1盒模型中规定的内容 In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance se

在css中父元素不固定高度，怎样实现子元素的高度100%

父元素使用 position: relative; 子元素使用 position: absolute; height: 100%;

css控制父元素下的子元素自适应高度，且高度一致

css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;} .right{background:#eee;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;} html

转：CSS设置HTML元素的高度与宽度的各种情况总结

1.元素不设宽度第一种情况:元素为文档流中元素<div style="width:100px;"> <div style="background:orange;">dd</div></div> <div style="width:200px;"> <div sty

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{

css设置时父元素随子元素margin值移动

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div class="box1"> <div class="box2"> <div class="content"> <div class="margin">123</div> &l

改变父元素的透明度，不影响子元素的透明度—css

1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度写法</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin:20

css之子元素获取(未定义高度)父元素的高度

你可能碰到过这样的需求,一个高度不固定的区域(内容由用户创造),当鼠标经过该区域或者其神马操作时,需要出现一个与该区域一样大的模版: 我们用一个span来处理这个mask.由于 .sample-1 和 .sample-2 的高度是不确定的,也就是说我们没有对它们定义 height.如果父元素没有定义高度,子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度. 除了IE6,几乎所有的主流浏览器都支持子元素获取父元素(未定义高度)的高度: 对于这个用户创造内容的区域,高度会在一个

父元素与子元素之间的margin-top问题(css hack)

hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. hytml代码: <div class="box1"> <div class="box2"></div> </div> css代码: .box1{height:200px;width:200px;background:gray;} .box2{

html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

模态框: html部分:  <button id="box" onclick="pop_box()">弹出框</button>  <div class="div-container" id="div-container" style="display: none;"> <div class=&

CSS中如何设置父元素透明度不影响子元素透明度

原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果,但是有没有更简单的方法呢?使用 .例如: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度. 即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opa

css使子元素在父元素居中的各种方法

html结构: <div class="parent"> <div class="child"></div> </div> 方法一: display:flex .parent { width: 500px; height: 500px; background: red; display: flex; align-items: center; justify-content: center; } .child { wid

css position absolute相对于父元素的设置方式

手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角. 有时候我们需要在父元素的容器内设置相对的绝对位置要做到这一点需要把父元素的position属性设置为relative,设置为relative之后不

css 相对父元素缩放

热门专题