行内元素(例如)设置float之后才能用width调整宽度
因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西,
1. 块元素。 特性:有物理属性,width,height写值起作用,而且要占据一行。
2. 内联元素。 特性:没有物理属性。但是margin,padding值有用。不占据一行,后边可以有兄弟元素。
3. 即是块又是内联,根据兄弟兄弟元素决定。
为什么是float之后才会有物理属性,这就是块与内联元素相互转化的问题。
块元素 -> 内联元素: display:inline;
内联元素 -> 块元素: display:block;
float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于:display:inline-block;
那为什么不直接display:inline-block;因为这个玩艺在ie6下有几个px的bug。
转载自:https://blog.csdn.net/u012698342/article/details/57419605
行内元素(例如)设置float之后才能用width调整宽度的更多相关文章
- 块级元素或者行内元素在设置float属性之后是否改变元素的性质?
块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...
- 为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?
HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element).- 替换元素是指用作为其他内容占位符的一个元素.最典型的就是img,它只是指 ...
- 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度
postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...
- 行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值
曾经学过的教程中写明:行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外 ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- li标签行内元素高度及居中
<head> <title><title> <style type="text/css"> * { padding: 0px; ma ...
- day001-html知识点总结(-)块级。行内元素区分
-.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
- 从块级元素和行内元素的分析到bfc的布局理解
接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...
随机推荐
- Spring Cloud云架构 - SSO单点登录之OAuth2.0登录认证(1)
今天我们对OAuth2.0的整合方式做一下笔记,首先我从网上找了一些关于OAuth2.0的一些基础知识点,帮助大家回顾一下知识点: 一.oauth中的角色 client:调用资源服务器API的应用 O ...
- 箭头函数详解()=>{}
摘要:箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,箭头函数继承而来的this指向永远不变. (2)不可以当作构造函数,也就是说,不可以使用n ...
- 常用的vi快捷方式
一般情况来说: 0代表行首,$代表行末 $,G代表最后一行 光标移动 0 移动到本行最前面 $ 移动到本行最后 G 移动文件最后一行 nG 移动到文件第n行 gg 移动到文件第一行 n[space]移 ...
- android底部标题栏的实现
一,使用TabActivity来实现底部导航 http://www.apkbus.com/forum.php?mod=viewthread&tid=125521 这种方法在最新版本的sdk中是 ...
- springMVC @response 中文乱码解决
以下任选一种 在web.xml中: 添加一个过滤器(filter),注册 org.springframework.web.filter.CharacterEncodingFilter <filt ...
- 错误 NETSDK1007 找不到“E:\Project\MyProject\MyProject.Common\MyProject.Utility.csproj”的项目信息。这可以指示缺少一个项目引用。 MyProject.Data C:\Program Files\dotnet\sdk\2.2.107\Sdks\Microsoft.NET.Sdk\targets\Microsof
因为对MyProject.Data引用的项目MyProject.Common进行了重命名为MyProject.Utility,导致这个错误 解决办法: 1.找到MyProject.Data中的E:\P ...
- ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)E Eve
E: 模拟题,一开始有n个人(有男有女),对于子女来说线粒体DNA是继承母亲的.然后有m个操作(按时间顺序),一种就是给了父亲,母亲的ID,生了一个孩子(编号从n+1开始往下):还有一个就是 -x , ...
- 搜索引擎算法研究专题五:TF-IDF详解
搜索引擎算法研究专题五:TF-IDF详解 2017年12月19日 ⁄ 搜索技术 ⁄ 共 1396字 ⁄ 字号 小 中 大 ⁄ 评论关闭 TF-IDF(term frequency–inverse ...
- Design a stack that supports getMin() in O(1) time and O(1) extra space
Question: Design a Data Structure SpecialStack that supports all the stack operations like push(), p ...
- SVN更新报错:Checksum mismatch for ……
问题: Checksum mismatch while updating '……'; expected: '3f9fd4dd7d1a0304d8020f73300a3e07', actual: 'cd ...