0529前端

CSS背景样式:

background-color:背景颜色

background-image:背景图片

background-repeat:背景图片的重复

repeat-y:只允许在y轴重复

repeat-x:只允许在x轴重复

no-repeat:不重复,只显示一次

background-position:背景图片的定位

取值:两个,分别表示x和y方向,如果只写一个,则两个值相等

雪碧图:各个小图标的集合,使用的目的是减少http的请求

background:是把上面所有的全部合在一起

background:color image repeat position

盒子模型

组成:

margin: 外边距  盒子与盒子之间的距离

合起来写的属性

四个

当写一个的时候,四个全部都相同

两个的时候,上右,对边补齐

三个的时候,上右下,对边补齐

margin-top  margin-right  margin-bottom  margin-left这四个可以单独拿出来写

border: 边框    包装盒

合起来写的属性

border-color  颜色

border-top-color  border-left-color

border-style 样式   分上下左右

border-width 宽度 分上下左右

写的时候不需要区分顺序

padding: 内边距   填充物

上右下左

对边补齐

定义的width和height只是content部分

content: 内容   买好的东西

盒子的大小=content+padding+border

定位

css 布局的一种方式

定位:top,left,right,bottom 只有元素增加定位的情况下才会使用

相对定位:一般不用top,left,right,bottom

绝对定位:元素会脱离文档流;一般不用margin

固定定位:元素会脱离文档流,只有浏览器的窗口可以管得住

一般情况下,相对定位和绝对定位是同时出现的

一般所有的下拉框都是绝对定位配合相对定位完成的

浮动

分为两种:左浮动,右浮动;

会脱离文档流

float

clear:both  清除所有的浮动

清除浮动:不是清除自身的浮动,而是清除上一个浮动对自身造成的影响

overflow:hidden溢出隐藏,主要是用于清除浮动

overflow:scroll 溢出部分以滚动条显示

增加一个空的标签,清除所有的浮动,即可解决高度失效的问题

猜你喜欢

转载自www.cnblogs.com/lxx121/p/10947507.html