Css问题 margin float 文档流 背景图底部充满
2018-06-24 02:19:25来源:未知 阅读 ()
今天来整理一下做网页遇到的问题吧
1.插入背景图片并使图片居于div底部充满整个行。
<style> background:url(xxx.jpg) no-repeat; background-position:bottom; background-size:100%; </style>
属性:
background-position:背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select。
语法取值有两种:长度和关键字。
长度:设置水平方向数值(x轴)和垂直方向数值(y轴)如:background-position:10px 20px;
关键字:top left (左上)top center(上居中)等,第二个值不设默认为居中。
background-size:定义背景图片大小。
属性值1.length :第一个值是宽度,第二个值是高度,如果只设置第一个值,那么第二个值会自动转换为 “auto”
2.percentage:以父元素的百分比来设置图片的宽度和高度,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”。
3.cover :背景图扩展完全覆盖区域(不等比)
4.contain:背景图扩展完全覆盖区域(等比)
2.margin的问题
(1)margin:auto auto; 为什么不能垂直居中
不支持上下 auto 因为页面中 难以确定的是高度
(2)margin和padding的区别
margin:需要在border外侧添加空白时。需要相互抵消时。如15px + 20px的margin,将得到20px的空白。
padding:需要在border内侧添加空白。需要等于两者之和。如15px + 20px的padding,将得到35px的空白。
(3)对内联元素上下边距没效果。
3.float的问题
(1)对后面div左漂流到上方div上面时,上方div内文字会环绕漂流的div
与文档流有关,详见4
4.文档流
是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
脱离文档流,是将元素从普通的布局排版中拿走,块元素定位的时候当做漂流元素不存在。定位中的absolute和浮动float会脱离文档流。
部分无视:float脱离文档流,其他盒子会无视这个元素,但盒子内的内联元素会让出漂流的位置,而环绕它存在。
完全无视:absolute脱离文档流,其他盒子包括盒子内内联元素会完全无视定位的元素。
Margin和 float不能同时用 百度了一下说可以......还没发现为什么,再试试下次解释。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css自适应布局之“圣杯双飞翼”
下一篇:最全的页面初始化样式
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash