float浮动与布局

Css的背景设置:

背景简写形式 :官方没有提供固定顺讯

颜色单位:英语单词16进制rgb() hsl() transparent

background-color:red;

backgroundimage:url("https://photo.tuchong.com/395783/g/20329210.jpg");

background-repeat:no-repeat;

可以设置像素(支持正负数),可以设置方向和百分比(left=0%,center=50%,right=100%)

background-position:50%;

多背景,多个属性用逗号隔开

background-color:red;

backgroundimage:url("https://photo.tuchong.com/395783/g/20329210.jpg"),url("http://tse1.mm.bing.net/th?id=OIP.IbYQdbyj5ZaYJvDLgS4oYAEYEY&w=300&h=300&p=0&pid=1.7"),url("");

背景设置:

background-color:transparent;背景颜色为透明

background-image:url()背景图片设置

background-repeat: repeat-x | repeat-y |no-reoeat;背景平铺设置

background-position: x y;背景定位设置

background-size:;背景尺寸设置

float浮动:

float:left|right|none|inhret

1.设置float的元素会脱离文档流,往设置的方向进行浮动,直到遇到父级的边界或者其他的浮动元素就会停止

2.浮动的元素会脱离文档流

3.浮动的元素撑不开父级的高度

清除浮动的方法:

1.给浮动元素的父级设置高度

2.clear:left | right | both

3.伪类清浮动

content:before|after{

            content:””;

           display:block;

          clear:both;

}

float属性对块级元素的影响

1.设置浮动之后,块级元素的宽度不再跟随父级宽度,而是内容决定(内容撑开宽度)

2.float元素对行级元素的影响

3.可以设置尺寸以及盒模型

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,738评论 0 1
  • 一.外边距重叠 两个相邻盒子的外边距发生重叠时,外边距大的覆盖外边距小的盒子。 margin 可以设置负数,表现为...
    星辰星成阅读 3,541评论 1 2
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 7,486评论 0 25
  • 太阳渐渐披上外套,包裹住那发光发热的赤身裸体!家家户户点亮了自己五彩夺目的小太阳,都在各自儿屋里吃着晚饭… 孙子和...
    安戈洛阅读 3,352评论 0 2
  • 1、在不违背原则的情况下 ,对别人要宽容 ,能帮就帮, 千万不要把人逼绝了 ,给人留条后路。 2、快乐最重要,谁人...
    我青春我励志阅读 1,697评论 0 2

友情链接更多精彩内容