Css问题 margin float 文档流 背景图底部充满
今天来整理一下做网页遇到的问题吧
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不能同时用 百度了一下说可以......还没发现为什么,再试试下次解释。
Css问题 margin float 文档流 背景图底部充满的更多相关文章
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- 认识CSS中布局之文档流、浮动、定位以及叠放次序
前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...
- 前端基础-CSS如何布局以及文档流
一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
- float/文档流
float : left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置. 浮动的定义: 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻 ...
- CSS的布局之文档流,与行内/块级元素的延伸
文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...
随机推荐
- bootstrap 模态框日期控件datepicker被遮住问题的解决
找到日期输入框,并将 .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:
- Typeclassopedia 阅读笔记:导言与 Functor
Typeclassopedia 阅读笔记 本文是对介绍 Haskell 中类型类(type classes)的文档 Typeclassopedia 的阅读笔记和简短总结,包含此文档中重要的知识点.读者 ...
- Entity FrameWork 操作使用详情
Entity FrameWork 是以ADO.net为基础发展的ORM解决方案. 一.安装Entity FrameWork框架 二.添加ADO.Net实体数据模型 三.EF插入数据 using Sys ...
- sql server time(7) 默认值
语句为 ALTER TABLE dbo.YourTable ADD CONSTRAINT DF_TimeDefault DEFAULT '00:00:00' FOR YourTimeColumn 比如 ...
- BZOJ [Poi2000]病毒 AC自动机_DFS_细节
Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...
- EF6 mysql配置
如何把一个ef项目 从sqlserver改为mysql 首先在引入了ef的层再引入这两个包,注意两个的版本一定要一样,一定要一样,一定要一样,不然就会报错 MySql.Data.Entity目前的最新 ...
- 【Shell编程】Shell基本语法
Shell 语法 Shell程序设计作为一种脚本语言,在Linux系统中有广泛的应用,本文记录了关于Shell程序设计的基础语法知识和常用命令,方便查询,熟练使用shell也需要经常实践,这对于完 ...
- Hzoi 2018.2.11多边形 区间DP
给定一个由N个顶点构成的多边形,每个顶点被赋予一个整数值,而每条边则被赋予一个符号:+(加法运算)或者*(乘法运算),所有边依次用整数1到N标识. 一个多边形的图形表示 首次移动,允许将某条边删除: ...
- 程序错误通常有2种,一种是运行时错误,这种错误ide会抛出异常,我们可以根据异常寻找问题.
1.程序错误通常有2种,一种是运行时错误,这种错误ide会抛出异常,我们可以根据异常寻找问题. 2.可以根据异常寻找问题. 3.可以根据异常寻找问题
- 高速学会Mac上托管代码到github(具体解释)
之前最開始的时候就一直在github浏览下载各种代码,然后弄了一下代码上传不知道咋弄就不了了之了.刚好近期有空余时间就研究了下github托管代码,这里就具体说说怎样高速的学会github上传你的代码 ...