因为只有块元素才会有物理属性,在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调整宽度的更多相关文章

  1. 块级元素或者行内元素在设置float属性之后是否改变元素的性质?

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

  2. 为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?

    HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element).- 替换元素是指用作为其他内容占位符的一个元素.最典型的就是img,它只是指 ...

  3. 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

    postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...

  4. 行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值

    曾经学过的教程中写明:行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外 ...

  5. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  6. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  7. day001-html知识点总结(-)块级。行内元素区分

    -.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...

  8. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

  9. 从块级元素和行内元素的分析到bfc的布局理解

    接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...

随机推荐

  1. The GuidRepresentation for the reader is CSharpLegacy, which requires the binary sub type to be Uuid

    使用客户端链接MongoDb报错 The GuidRepresentation for the reader is CSharpLegacy, which requires the binary su ...

  2. Android如何安装系统应用,及自己增加安装系统应用的接口

    根据SIM卡安装系统应用 功能: 1:如何安装系统应用,apk放在system/app系统分区下面. 2:根据SIM卡的归属国家选择性的安装应用. 一:本人使用方法: 在开机的服务里面添加接口(Pac ...

  3. python-opencv学习第一章

    一.opencv读入图像 retval=cv2.imread(文件名[,显示控制参数]) 常用三个参数如下 CV. IMREAD_UNCHANGED 不改变原先什么样子现在就是什么样子 CV. IMR ...

  4. [BZOJ2791]:[Poi2012]Rendezvous(塔尖+倍增LCA)

    题目传送门 题目描述 给定一个有n个顶点的有向图,每个顶点有且仅有一条出边.每次询问给出两个顶点${a}_{i}$和${b}_{i}$​​,求满足以下条件的${x}_{i}$和${y}_{i}$:   ...

  5. How do I add a simple onClick event handler to a canvas element?

    How do I add a simple onClick event handler to a canvas element? When you draw to a canvas element, ...

  6. React Native商城项目实战05 - 设置首页的导航条

    1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...

  7. leetcode-mid-math-29. Divide Two Integers-NO

    mycode   91.28% class Solution(object): def divide(self, dividend, divisor): """ :typ ...

  8. Navicat Premium Mac 12 破解方法-亲测成功

    参照这2篇文档,破解成功了.操作步骤写的很清楚,不再缀述,只记录一下自己破解过程中,认为要注意的点.以免以后再多花时间熟悉重新熟悉操作步骤 Mac安装Navicat(破解版) Navicat Prem ...

  9. rocketMQ 通信协议格式

    rocketMQ 使用 netty 通信,端对端的通信,为了避免粘包.分包,需要指定发送数据的边界. 使用的解码器是 LengthFieldBasedFrameDecoder // org.apach ...

  10. c# 跨应用程序域通讯

    public class MyTask { public class MyEventArgs : EventArgs { public object EventData { get; private ...