CSS中width和height的默认值auto与%案例详解_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

auto是随内容的高度而撑开2113的。100%是根5261据父级元素的高度来决定的4102。例如:<div style="height:100px;width:200px;"> <div style="height:auto;width:100px;float:left;">这个容器的高度是随里面1653的内容的高度而定</div> <div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度,100px</div> </div>,auto是自动默认高度- -!height:100%的话如果你父级有height的话就是父级的高度,这么说2113,比如一个表格在另一5261个表格里面,如果外面的表格高是100,里面4102表格当是auto的时候,如果1653表格里面没有东西,它就没有高度,表格里面的内容有多高,它就有多高,而当是100%的时候,无论里面有没有内容,它都和外面的表格是一样高的,一个是 固定值,一个是 自动的,就是说能有多大就多大,,height:auto;是自动的默认高度height:100%;是最大高度www.zgxue.com防采集请勿采集本网。

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

height:auto 代表的意思就是高度随即,根据div和CSS样式表的变化而变化,是一个不定值,但是如果你中间插入的内容(例如图片)比较大的话,他会把图片全部显示出来,这是相对于内容来判断的 而height:100%代表的是相对于DIV和CSS样式的大小填充

案例

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

不要考虑这个了,如果页面使用div布局,根本就不支持高度100%,默认属性,高度就是auto。 你写了也没有什么效果。 除非用js来控制 或者把html,body元素也写成100%;这样的话,布局的时候,会遇到很多其他问题,不推荐

width案例

记住了,这样写:min-height:300px; height:auto!important; height:300px;这三个顺序不可以变,min-height和heihgt的值必须一样。

<!DOCTYPE html><html lang="en"><head> <meta charset="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>

你的这个listl的父容器是哪一个呢? 你这个listl容器想要高度自适应,首先它得知道它的父容器的高度,因此你要把父容器的样式设置一个高度。 .a{height:30px;} .b{float:left; height:auto; overflow:hidden;} .c{float:right; height:20px;} bb

height案例

margin:0 auto; 是边距0;width:990px; height:300px; 是宽990高300;overflow:hidden是溢出部分隐藏;float:left; 是左侧浮动 你上面这个代码应该是contentleft contentright这样2个同行包含在content里这样的效果吧 做3个一行的话div按左中右

<!DOCTYPE html><html lang="en"><head> <meta charset="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默认值内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

在CSS中,元素的width和height属性的默认值都是auto,所以说:css中 把height和width设成auto与不设height.width是一样的,auto根据对象实际大小自适应宽度,设height.width是多少就多少内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css中height和width在ie和其他浏览器中的区别图文详解
  • css行内元素padding,margin,width,height没有变化
  • ie6不支持css中的min-width/height属性问题的解决方法
  • 科讯cms纯css控制图片最大宽度
  • css中 把height和width设成auto与不设height.width...
  • CSS,height:auto和height:100%有什么区别?
  • 关于css盒模型中垂直格式化(height、margin、padd...
  • 网页css代码的 margin:0 auto是什么意思
  • CSS样式中,height:auto和height:100%有什么区别?
  • CSS,height:auto和height:100%有什么区别?
  • css中的height:auto不兼容IE6,下面这段css代码要...
  • 网页设置了CSS height:auto ,但知为什么不起作用?...
  • 在DIVCSS布局里面这margin:0 auto; width:990px; h...
  • css height:auto;不起作用?外边容器高度不会自动...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程csswidthheight默认值auto与css中height和width在ie和其他浏览器中的区别图文详解css行内元素padding,margin,width,height没有变化ie6不支持css中的min-width/height属性问题的解决方法科讯cms纯css控制图片最大宽度css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css中width和height的默认值auto与%案例详解css一些不常见但很有用的属性操作大全解决搜索框和搜索按钮button边框不能重合的问题css使用bem命名规范实践css3+贝塞尔曲线实现可伸缩input搜索框效果css 实现圆形渐变进度条效果的示例代码纯css实现markdown自动编号的示例代码css 实现 图片鼠标悬停折叠效果让我来教你使用css中的字体图标的方法纯css实现轮播图banner自动轮换效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved