今天来整理一下做网页遇到的问题吧

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 文档流 背景图底部充满的更多相关文章

  1. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  2. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  3. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  4. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  5. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. css盒子模型、文档流、相对与绝对定位、浮动与清除模型

    一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...

  8. float/文档流

    float : left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置. 浮动的定义: 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻 ...

  9. CSS的布局之文档流,与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

随机推荐

  1. bootstrap 模态框日期控件datepicker被遮住问题的解决

    找到日期输入框,并将  .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:

  2. Typeclassopedia 阅读笔记:导言与 Functor

    Typeclassopedia 阅读笔记 本文是对介绍 Haskell 中类型类(type classes)的文档 Typeclassopedia 的阅读笔记和简短总结,包含此文档中重要的知识点.读者 ...

  3. Entity FrameWork 操作使用详情

    Entity FrameWork 是以ADO.net为基础发展的ORM解决方案. 一.安装Entity FrameWork框架 二.添加ADO.Net实体数据模型 三.EF插入数据 using Sys ...

  4. sql server time(7) 默认值

    语句为 ALTER TABLE dbo.YourTable ADD CONSTRAINT DF_TimeDefault DEFAULT '00:00:00' FOR YourTimeColumn 比如 ...

  5. BZOJ [Poi2000]病毒 AC自动机_DFS_细节

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  6. EF6 mysql配置

    如何把一个ef项目 从sqlserver改为mysql 首先在引入了ef的层再引入这两个包,注意两个的版本一定要一样,一定要一样,一定要一样,不然就会报错 MySql.Data.Entity目前的最新 ...

  7. 【Shell编程】Shell基本语法

    Shell 语法   Shell程序设计作为一种脚本语言,在Linux系统中有广泛的应用,本文记录了关于Shell程序设计的基础语法知识和常用命令,方便查询,熟练使用shell也需要经常实践,这对于完 ...

  8. Hzoi 2018.2.11多边形 区间DP

    给定一个由N个顶点构成的多边形,每个顶点被赋予一个整数值,而每条边则被赋予一个符号:+(加法运算)或者*(乘法运算),所有边依次用整数1到N标识. 一个多边形的图形表示 首次移动,允许将某条边删除: ...

  9. 程序错误通常有2种,一种是运行时错误,这种错误ide会抛出异常,我们可以根据异常寻找问题.

    1.程序错误通常有2种,一种是运行时错误,这种错误ide会抛出异常,我们可以根据异常寻找问题. 2.可以根据异常寻找问题. 3.可以根据异常寻找问题

  10. 高速学会Mac上托管代码到github(具体解释)

    之前最開始的时候就一直在github浏览下载各种代码,然后弄了一下代码上传不知道咋弄就不了了之了.刚好近期有空余时间就研究了下github托管代码,这里就具体说说怎样高速的学会github上传你的代码 ...