行内元素(例如)设置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打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...
随机推荐
- Ubuntu 16.04修改ssh端口
1 安装防火墙 sudo apt-get install ufw启用 sudo ufw enable sudo ufw default deny 作用:开启了防火墙并随系统启动同时关闭所有外部对本机的 ...
- pycharm selenium 安装firefox驱动和Google驱动教程
一.下载Firefox浏览器或Google浏览器 下载渠道有很多,直接下载最新版的就可以了. 二.下载驱动 Firefox驱动 地址:https://github.com/mozilla/geckod ...
- sqli-labs(34)
0x01构造闭合 同样 发现 ’被注释掉了 试探了一波发现什么信息都不会返回 正确错误的页面都一样 之前我们的方法就是将过滤函数添加的 \ 给吃掉.而get型的方式我们是以url形式提交的,因此数据会 ...
- android开机引导界面的几种实现
不少应用在设计的时候都会有几个引导界面,这里总结一下几个典型实现: 之前自己做过仅具有一个引导界面的应用,在welcomeActivity中设置一张图片,更复杂的为该图片设置一个渐入渐出的动画,然后利 ...
- rollup的学习
概述(Overview) Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序.Rollup 对代码模块使用新的标准化格式,这些 ...
- Mac ssh key生成
转载https://blog.csdn.net/wangjunling888/article/details/51115659 1. 查看秘钥是否存在 打开终端查看是否已经存在SSH密钥:cd ~/. ...
- iOS自动化--Spaceship使用实践
Spaceship ### 脚本操作 证书,app,provision等一些列apple develop后台操作,快速高效. github地址 spaceship开发文档 文档有列出常用的api调用d ...
- angular 的配置文件的应用
为什么要使用 angular 的配置文件: 好处:我们可以在一个页面上,实现多个页面的跳转的感觉,但只是在一个页面上进行的操作: 我们的准备工作:下载 angular-route.js 插件 在依赖模 ...
- React Native商城项目实战02 - 主要框架部分(tabBar)
1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...
- 初步理解JS的事件机制
一.事件流(捕获,冒泡) 事件流:指从页面中接收事件的顺序,有冒泡流和捕获流. 当页面中发生某种事件(比如鼠标点击,鼠标滑过等)时,毫无疑问子元素和父元素都会接收到该事件,可具体顺序是怎样的呢?冒 ...