您的位置：首页 > Web前端 > CSS

css 父元素设置padding、border、margin的情况下，子元素width100%呈现情况

2018-01-17 14:45 531 查看

父元素设置width、height、padding、border、margin，子元素设置width:100%;height: auto;呈现情况

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8">
<title>test</title>

<style>
html,
body,
div {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#imgbox {
width: 600px;
height: 100px;
background-color: red;
padding: 10px;
border: 2px solid black;
margin: 10px;
}
#image {
width: 100%;
height: auto;
background-color: green;
}

#txtbox {
width: 600px;
height: 100px;
background-color: blue;
padding: 10px;
border: 2px solid black;
margin: 10px;
}
#txt {
background-color: pink;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="imgbox">
<img id="image" src="i-7.png"/>
</div>

<div id="txtbox">
<p id="txt">Hello World!</p>
</div>
</body>
</html>

父元素设置width、height、padding、border、margin，overflow:hidden;子元素设置width:100%;height: auto;呈现情况

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8">
<title>test</title>

<style>
html,
body,
div {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#imgbox {
width: 600px;
height: 100px;
background-color: red;
padding: 10px;
border: 2px solid black;
margin: 10px;
overflow: hidden;
}
#image {
width: 100%;
height: auto;
background-color: green;
}

#txtbox {
width: 600px;
height: 100px;
background-color: blue;
padding: 10px;
border: 2px solid black;
margin: 10px;
}
#txt {
background-color: pink;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="imgbox">
<img id="image" src="i-7.png"/>
</div>

<div id="txtbox">
<p id="txt">Hello World!</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8">
<title>test</title>

<style>
html,
body,
div {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
}
#imgbox {
width: 600px;
height: 100px;
background-color: red;
padding: 10px;
border: 2px solid black;
margin: 10px;
overflow: hidden;
}
#image {
width: 100%;
height: auto;
background-color: green;
}

#txtbox {
width: 600px;
height: 100px;
background-color: blue;
padding: 10px;
border: 2px solid black;
margin: 10px;
}
#txt {
background-color: pink;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="imgbox">
<img id="image" src="i-7.png"/>
</div>

<div id="txtbox">
<p id="txt">Hello World!</p>
</div>

<script>
var element = document.getElementById("imgbox");
var width = window.getComputedStyle(element,null).width;
alert(width);
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航