正文

css容器十大排名（css 容器）

发布时间：2023-05-05 05:03:21 稿源：创意岭阅读： 955

大家好！今天让创意岭的小编来大家介绍下关于css容器十大排名的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，相关业务请拨打电话：175-8598-2043，或添加微信：1454722008

本文目录:

1、CSS中提及到的容器和元素两词，是什么意思呢?能举个例子说明一下吗？
2、CSS如何设置不同屏幕宽度时某个DIV容器里显示不同的图片？
3、css如何让两个容器并排显示
4、css3 容器宽高之间的比例怎么写

css容器十大排名（css 容器）

一、CSS中提及到的容器和元素两词，是什么意思呢?能举个例子说明一下吗？

是这样的拿个简单的例子来说吧

<p>就是一个容器，中国就是元素

二、CSS如何设置不同屏幕宽度时某个DIV容器里显示不同的图片？

中间这句话，必须要

@media (max-width: 768px){

.hello{

}小余768

@media(min-width:769px){

}大于768

</style>

图片的话写个宽度，高度自动。如果是背景图的话，就不一样

三、css如何让两个容器并排显示

是这样的吗：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

div,img{border:1px;border:red solid;margin:0px;} /*此行可删除*/

#personal_info{

margin:0 auto;

height:100%;

border-color:red;

width:910px;

height:100%;

clear:both;

}

#profile_img{

float:left; /*控制此DIV居左*/

height:90px;

width:90px;

border:1px solid #333;

clear:right;

}

img{ margin-left:4px;margin-top:4px;} /*另行控制图片*/

#profile_info{

width:800px;

float:right; /*控制此DIV居右*/

margin-left:10px;

}

#profile_name{

float:left;

clear:right;

margin-top:5px;

margin-bottom:5px;

width:100%;

font-size:16px;

font-weight:bold;}

#profile_status{

width:100%;

clear:both;

margin-bottom:5px;

}

#profile_time{

width:100%;

color:#999;

margin-bottom:5px;

clear:both;

}

#profile_wen{

width:100%;

clear:both;

}

</style>

<body>

<div id="profile_status">很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字

很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的

文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很

长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文

字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长

的文字很长的文字很长的文字很长的文字很长的

</div>

<div id="profile_wen">另一段文字</div>

</div>

</body>

</html>

四、css3 容器宽高之间的比例怎么写

用js实现一个宽度自适应，高度随着宽度变化而变化的矩形，相信大家肯定都会。无非是js获取一下元素宽度，然后再计算出相应比例的高度，然后赋给元素，但如果要求只用CSS实现呢。

html代码如下，

<div class='content'>content</div>

</div>

css代码如下,

复制代码

.container{

background-color: silver;

width:100%;

position:relative;

display: inline-block;

}

.dummy{

margin-top: 100%;

}

.content{

position:absolute;

left:0;

right:0;

top:0;

bottom: 0;

}

有什么问题你可以去《5 1r gb》看看里面的论坛

接下来分析一下，究竟是如何实现的。首先容器container块内包含了两个div，一个是dummy，这个纯粹是为了实现缩放效果加的，另一个content里面放的是我们真正想要展现的内容。其实原理也很简单，大家都知道div是块元素，它默认就是占一行，宽度本来就是自适应的，所以我们需要做的是让它的高度能随宽度改变。在不使用js的前提下，靠的就是前面提到的dummy那个块来实现，dummy只设置了一个css属性，margin-top:100%，相信大家都反应过来了。因为容器宽度已经在那儿了，通过dummy块的margin-top来把整个的高度撑得和宽度一样，当容器宽度改变时，dummy的位置也会改变，进而容器高度就跟着发生了变化。-《http://v.youku.com/v_show/id_XMTMzMjg3MTU3Ng==.html?f=26081534》-

但是，还是会有个问题——外部容器发生了高度塌陷。而”高度塌陷“这个词大家肯定都不是第一次听到，大家肯定都处理过因为子元素浮动导致父元素高度塌陷，所以这里采用的方法也是类似清除浮动的方法，设置父元素display:inline-block或overflow:hidden。这里说个题外话，不知道大家在使用这两种方法清除浮动的时候有没有过疑问，为什么给父元素这样设置之后就能把父元素高度撑起来呢，准确的原理解释起来有点复杂。可以简单的理解为，当子元素脱离文档流时，父元素不知道子元素的存在，所以导致高度塌陷。当设置父元素为display:inline-block或者overflow:hidden时，迫使父元素去检查自己内部有哪些子元素，而这时候就发现了之前absolute定位的子元素，所以高度就撑开了。

这里给dummy块设置margin-top:100%，出来的是个可自适应缩放的正方形，如果需要长方形只需要更改此值即可，比如需要4:3的长方形，则应设为margin-top:75%。

以上就是关于css容器十大排名相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。