首页 > 作文

CSS中width和height的默认值auto与%案例详解

更新时间:2023-04-03 20:16:40 阅读: 评论:0

结论

width的%:定义基于包含块(父元素)宽度的百分比宽度,会突破父级的限制width的auto:尽量被父级包裹height的%:基于包含它的块级对象的百分比高度,会突破父级的限制height的auto:尽量被父级包裹

案例

一定复制代码跑一遍,花几分钟体会一下尽量被父级包裹与突破父级的限制

width案典雅的反义词是什么例

<!doctype html><html lang="en"><head>    酒店论文<meta chart="utf-8">    <title>document</title>    <style type="text/css">        * {            margin: 0;padding: 0;        }        body {            background: #dcdcdc;        }        .box {            width: 400px;            border: 3px solid red;            padding: 0 50px;        }        .box1 {            width: auto;            height: 100px;            background: pink;            padding:  长相思 0 50px;            margin: 0 50px;            border-width: 0 50px;            border-style: solid;            border-color: green;        }        .box2 {            width: 100%;            height: 100px;            background: gold;            padding: 0 50px;            margin: 0 50px;            border-width: 0 50px;            border-style: solid;            border-color: green;        }    </style></head><body><div class="box">    <div class="box1"></div>    <div class="box2"></div></div></body></html>

height案例

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>document</title>    <style type="text/css">        * {            margin: 0;padding: 0;        }        body {            background: #dcdcdc;        }        .box {            width: 400px;            border: 3px solid red;            padding: 50 0px;            height: 400px;        }        .box1 {            width: 200px;            height:auto;            background: pink;            padding: 50px 0px;            margin: 50px 0px;            border-width: 50px 0px;            border-style: solid;            border-color: green;        }        .box2 {            width: 200px;            height:100%;            background: gold;            padding: 50px 0px; 形容美女的词           margin: 50px 0px;     以眼泪为话题的作文       border-width: 50px 0px;            border-style: solid;            border-color: green;        }         </style></head><body><div class="box">    <div class="box1"></div>    <div class="box2"></div></div></body></html>

到此这篇关于css中width和height的默认值auto与%案例详解的文章就介绍到这了,更多相关css width和height默认值内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!

本文发布于:2023-04-03 20:16:38,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/677d36d7ebc9bf1ac85b49e5d5327994.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS中width和height的默认值auto与%案例详解.doc

本文 PDF 下载地址:CSS中width和height的默认值auto与%案例详解.pdf

标签:包裹   百分比   案例   宽度
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图