CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别
<style type="text/css">
.outer{
width:200px;
height:100px;
border:1px solid black;
margin:20px;
}
.inner-100percent{
width: 100%;
height:100px;
background: darkcyan;
}
.inner-auto{
width:auto;
padding:0px 10px;
height:100px;
background:salmon;
}
</style>
<div class="outer">
<div class="inner-100percent"></div>
</div>
<div class="outer">
<div class="inner-auto"></div>
</div>
.inner-auto{
width:auto;
padding:0px 10px;//设置左右内边距为10px
margin:0px 10px;//设置左右外边距为10px
height:100px;
background:salmon;
}
.inner-100percent{
width: 100%;
height:80px;
padding:0px 10px;
background: darkcyan;
}
.inner-100percent{
position:relative;
width: 100%;
height:100px;
background: darkcyan;
}
.inner-100percent{
position:absolute;
width: 100%;
height:100px;
background: darkcyan;
}
<div class="outer">
<div style="position:relative;">
<div class="inner-100percent"></div>
</div>
</div>
.inner-auto{
position:absolute;//或position:fixed;或float:left
width:auto;
height:100px;
background:salmon;
}
(注意inner-auto本来是有颜色的)
<style type="text/css">
*{margin: 0;padding: 0;}
.div{
width:100px;
height:50px;
margin: 10px;
border:1px solid black;
}
.div1{
background:seagreen;
}
.div2{
background: cornflowerblue;
}
.div3{
background: gold;
}
.div4{
background: lightcoral;
}
</style>
<body>
<div class="div div1">div1</div>
<div class="div div2">div2</div>
<div class="div div3">div3</div>
<div class="div div4">div4</div>
</body>
.div2,.div3,.div4{
float: left;
}
.div2,.div3{
float: left;
}
.div1,.div2,.div3,.div4{
float: left;
}
.div1,.div2,.div3,.div4{
float: right;
}
.div2,.div3{
float: left;
}
.div4{
float:right;
}
<style type="text/css">
*{margin: 0;padding: 0;}
.div{
border:1px solid black;
margin: 10px;
}
.left{
float: left;
width: 200px;
height:200px;
background:darkcyan
}
.right{
margin-left:230px;
height: 400px;
}
</style>
</head>
<body>
<div class="div left">我是div1</div>
<div class="div right">我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2 我是div2</div>
</body>
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响的更多相关文章
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- CSS 中浮动的使用
float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 <!DO ...
- css的浮动与定位
显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 disp ...
- CSS的浮动和定位
一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- CSS中浮动的使用
CSS有两个性质 第一个是 :继承性 第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是 选中和没选中. 1.选不中的情况下,走继承性,(font,color,t ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
- 关于css中浮动的理解及实际应用
一.元素浮动的意义及使用:1. 浮动的意义:设置了浮动属性的元素会脱离普通标准流的控制,移动到其父元素中指定的位置的过程,将块级元素放在一行,浮动会脱离标准流,不占位置,会影响标准流,浮动只有左右浮动 ...
- 深入学习CSS中如何使用定位
CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...
随机推荐
- 基于JAX-WS的WebService实现
JAX-WS是一套Java用于开发XML Web Services的技术规范,它的实现一般有CXF.AXIS和JDK(version>=1.6),借助这些我们可以进行SOAP服务开发. CXF和 ...
- SpringMvc多视图配置(jsp、velocity、freemarker) 在src目录views.properties配置
#welcome为modelAndView.setViewName(" welcome " ) ; 中的welcome .(class)固定写法 welcome.(class)=o ...
- oracle默认用户名及密码
oracle默认用户名及密码(网摘) (1)user: internal password :oracle (2)user: s ...
- JavaScript+svg绘制的一个饼状图
结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...
- mysql获得自增的下条id的值
需求: 当数据表中存在一个字段需要该条数据中自增长的id值 实现方法:(1)代码中先插入该条数据后,再次修改数据 (2)在数据库中使用触发器完成 具体实现:实现方法中的第一种方法就不在此实现,以下便是 ...
- STL—vector
前面介绍了STL对象的构造与析构以及内存的配置与释放,那具体的容器是怎么应用STL的空间配置器的呢?这篇先介绍STL的容器vector. vector的数据成员 vector只有4个数据成员:3个迭代 ...
- ABAP,学习不一样的EXCEL导出----XLSX Workbench
这个工具是在查找ABAP导出EXCEL资料的时候发现,是国外的一位大牛自己开发的开源项目,体验了一番,确实很好用. 工具特点: No ABAP Programming Skills are requi ...
- 整理的 matplotlib 绘图笔记
- Mybatis Dynamic Query 简单筛选
在框架中,筛选描述类有两种(FilterDescriptor, FilterGroupDescriptor),这里我们主要举例来说明FilterDescriptor用法. FilterDescript ...
- JavaScript系统学习小结——Object类型、Array类型
今天学习JavaSript中引用变量中的Object类型和Array类型: 1. Js中大多数引用类型值都是Object类型的实例,Object类型在应用程序中存储和传输数据时,是非常理想的选择: 创 ...