CSS:外部DIV中有内部DIV，外部DIV的宽度300px，内部DIV宽度为100%，是按什么为基准的呢

你理解的不完全正确：

内容看是什么文字的话会换行，(英文数字需单独设置)，内容如果宽度超过父级当然会撑开，不管你设置的是否是100%，

分析：如果你把元素宽度设置了100%，他会因 填充、边距、边框像素大小。在100%基础上加大宽度

css3的-webkit-box-sizing:border-box; 可以解决，填充、边框的问题，边距无效

使用一段css代码：”word-wrap: break-word;word-break: break-all;overflow: hidden;“。

实例演示如下：

1、设计两个容器，放入一些文字，代码如下：

此时的页面展示如下：（均为换行）

2、修改两个容器的样式，给第一个容器加上了关键代码如下：

此时的页面展示（第一个已经换行）：

扩展资料：

css详解：

一、word-wrap: normal|break-word（word-wrap 属性允许长单词或 URL 地址换行到下一行）。

1、normal ，只在允许的断字点换行（浏览器保持默认处理，默认值）。

2、break-word， 在长单词或 URL 地址内部进行换行。

二、word-break: normal|break-all|keep-all（通过使用 word-break 属性，可以让浏览器实现在任意位置的换行）。

1、normal 使用浏览器默认的换行规则。（默认值）

2、break-all 允许在单词内换行。

3、keep-all 只能在半角空格或连字符处换行。

<style>

div{position:absolute;}

main{background-image:url("");top:0px;bottom:0px;left:0px;right:0px;}

</style>

<div id="idMain" class="main">

</div>

<script>

windowonload=function()

{

var id_main=documentgetElementById("idMain");

var w=Screenwidth;//

var h=Screenheight;//

var l;

var t;

w=(w<1600)-(1600-w):w-1600;

h=(h<)-(-h):-h;//

l=w/2;

t=h/2;

id_mainstylebackgroundPosition=l+"px "+t+"px";

}

</script>

楼主要的是不是这个效果，代码没测试过，楼主自测。

两边如果要放内容的话 就用table

<table width="100%">

<tr>

<td>左边自适应</td>

<td width="100">中间固定宽度</td>

<td>右边自适应</td>

</tr>

</table>

如果只是加个背景的话 这样写就行

<div style="width:100%;background:url(xxx) no-repeat center center;">

<div style="width:100px;margin:0 auto">中间固定宽度</div>

</div>

img{border:1px solid #CD171A;display:block;}

可以解决多出来的高度。

其他的，我没太看明白你说的什么意思。

以上就是关于CSS:外部DIV中有内部DIV，外部DIV的宽度300px，内部DIV宽度为100%，是按什么为基准的呢全部的内容，包括:CSS:外部DIV中有内部DIV，外部DIV的宽度300px，内部DIV宽度为100%，是按什么为基准的呢、内容超出div宽度后自动换行的css代码、DIV+CSS图片自动适应浏览器宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！