【css】浮动和定位对元素的宽度-外边距或其他元素的影响
<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;//设置左右内边距为10pxmargin:0px 10px;//设置左右外边距为10pxheight: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:leftwidth: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>
【备注】: 正如上面所说,浮动会脱离文档流从而不占据其他元素的物理位置,而我们让div1向左浮动了,这表示我们在考虑div2的布局的时候完全可以把div1当作不存在。那么这个时候又由于div2默认为width:auto;并且此时参考元素为body,那么设margin-left:230px;(略大于div1的宽度),那么由于width:auto会自动计算宽度,此时div2宽 = body宽度(全屏宽度)- 230px = 除去div1部分剩余的屏幕宽度,实现右栏自适应
转载于:https://www.cnblogs.com/Mr--Li/p/7493041.html
【css】浮动和定位对元素的宽度-外边距或其他元素的影响相关推荐
- CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
- css --- [读书笔记] 盒模型(边框、内外边距)
说明 源代码 学习 盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位 目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距 能说出内边距的作用,设置不同数值分别代表 ...
- CSS浮动、定位及显示隐藏元素
一.CSS浮动 1.标准流(普通流/文档流:即标签按规定默认排列方式) 块级元素独占一行,从上到下排列. 行内元素会按顺序,从左至右排列,碰到父级元素边缘则自动转行. 2.为什么浮动? (1)多个块级 ...
- 前端学习记录(三) CSS浮动、定位与居中
目录 浮动 清除浮动方法1: 清除浮动方法2: CSS定位 relative定位 absolute定位 fixed定位 居中 水平居中 垂直居中 水平垂直居中 浮动 现在我们想在页面中 ...
- CSS浮动、定位总结
一.CSS 浮动 1. CSS 浮动属性简介 CSS float 属性是一个定位属性,用于使元素脱离正常的文档流,并浮动在它的父容器的左侧或右侧 float 设置元素在水平方向浮动,意味着元素只能 ...
- CSS浮动与定位 逆战班
1.浮动(float): 属性值: left right float 是元素脱离文档流(文档流另有详解)后,方便进行布局, 想左右排列的元素,例如:li设置浮动后,使其由垂直排列变成水平排列 此时,由 ...
- 前端学习(2846):css浮动和定位布局
<< 我们一起来做秒杀 >>一.css浮动 float none left rightclearnone both left right二.css定位#div_test{pos ...
- 内联元素与块级元素及内外边距的影响
内联元素与块级元素 块级元素(block): 新行开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素 常用的块级元素:div.h1~h6.dl. ...
- css设置 ul的内外边距,9月3日学习CSS选择器,背景设置,及内外边距知识总结
实例 html> 选择器 p:nth-of-type(2) { background-color: crimson; } 猪哥 朱老师 西门大官人 欧阳克 潘金莲 运行实例 » 点击 " ...
最新文章
- Fedora的ifconfig命令
- 元宇宙iwemeta:元宇宙催生新的行业机会,看看你能抓住哪些机遇?
- Java利用TreeMap实现统计种类
- Windows7查看本地Java安装是否成功和路径的方法
- Linux 命令之 curl 的选项(英文版)
- Unity与Android交互
- maven工程打包老是报错_maven工程pom文件老是报错
- 排除jar_通过IDEA快速定位和排除依赖冲突
- Indeterminate ProgressBar
- php语句insert,SQL INSERT INTO
- RTSP视频流直播实现(海康)
- HiJson——Json解析工具
- 【.Net】asp.net 把图片从CMYK印刷模式转换为RGB原色模式
- 百度地图infowindow上添加自定义点击事件
- Google推出GDrive免费云存储服务
- Unity3D Shader 新手教程(2/6) —— 积雪Shader
- 【转载】通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?
- 工大SCIR | 文本摘要简述
- HTTP协议格式(请求格式、响应格式)
- 二维码的扫描与生成(含动态权限)