浮动元素的display属性

在页面布局的时候，我们经常会将元素设置成浮动效果来解决一些实际问题，无论当前元素是块级元素还是行内元素，

似乎都有需要设置成浮动的时候，但与此同时，我们有没有想过，在元素被设置成浮动之后，他们的block属性还是和

原来的一致么？为了解决该疑问，我简单做了个小测验，如下：

//css部分

    .box1 {float: left;width: 100px;height: 100px;display: block;background: red;}.box2 {float: left;width: 100px;height: 100px;display: block;background: blue;}.box3 {float: left;display: inline;background: yellow;}.box4{float: left;width: 100px;height: 40px;line-height: 40px;background: #eee;}.box5{float: left;background: pink;}.box6{float: left;background: green;}

//html部分

<div class="box1">我是block元素</div>
<div class="box2">我是inline-block元素</div>
<div class="box3">我是inline元素</div>
<p class="box4">我是小p</p>
<a href="#" class="box5">我是小a</a>
<span class="box6">我是span</span>

//浏览器（chrome）效果

box1---可见，原来display:block 的元素，浮动后，diaplay值没变，依然是block;

box2---由上图可知，原来display：inline-block的元素，浮动后，display为block;

box3---由上图可知，原来display：inline的元素，浮动后，display值也被设置成block;

box4---由上图可知，box4的原来block的值和box2一样，并且浮动后，block值同样也变成了block;

box5---如图可知，即便是行内元素a,在其设置浮动后，其display属性也默认变成block;

box6---同样，行内元素span在其设置浮动后，其display属性也默认变成block;

总结：无论行内元素还是块元素，被设置浮动之后，display属性值都变为block;

以上是对浮动元素的display属性的简单探索，如有不正确不合符标准的地方，欢迎指正~~

转载于:https://www.cnblogs.com/lmy-ms/p/6425504.html

浮动元素的display属性相关推荐

CSS 元素的display属性
使用 display属性,可以改变一个框的显示类型,显示类型就决定了一个元素生成框的类型,同时也会影响一个框的行为. 可以把行内元素的 display属性设置为 block,它将生成一个块级框,并表现 ...
JQuery获取元素的display属性
JQuery获取元素的display属性 $('#input_id').css('display')
修复IE的浮动元素双倍边距Bug
CSS开发人员可能经常会碰到的一个现象是,一个页面在IE(特别是老版本的IE)中显示正常,而在现代浏览器中却完全变形了,或者情况完全相反. 常常能听到有人抱怨:"在IE上开发时间中,超过 6 ...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
CSS入门（CSS常用属性----字体、对齐方式、display属性、浮动）
CSS常用属性设置 3.字体设置字体 font-family ①当font-family的属性值包含空格或特殊字符时,需要将font-family的属性值用引号括起来. ②font-family有& ...
CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
移位 display属性内补白外补白 Layout布局
移位移位的三种方式-------translate translate(45px,45px) translatex(45px) translatey(45px) matrix----放大+倾斜 ma ...
css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法
一.问题多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来. 若浮动元素前面还有同级元素没有浮动则会影响页面结构. 二.解决办法 ...
css display属性及使用方法
1.display的取值浏览器支持 IE Firefox Chrome Safari Opera 支持支持支持支持支持所有主流浏览器都支持 display 属性. 注释:如果规定了 !DO ...

浮动元素的display属性

浮动元素的display属性相关推荐

最新文章

热门文章