标签：浮动 定位 repeat margin 0529 background border 前端

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 溢出部分以滚动条显示

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

 

标签：浮动,定位,repeat,margin,0529,background,border,前端
来源： https://www.cnblogs.com/lxx121/p/10947507.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。