一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了width:auto试图…

---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了w…

显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 display的三个属性值显示效果 属性 值 效果 display inline 显示为内联元素 display block 显示为块级元素 display inline-block 显示为行内块级元素 overflow内容溢出 属性 值 效果 overflow visible 可见 overflow hi…

一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 2.特点 a:浮动盒子的宽度不会自动伸展,宽度以内容.外边距.内边距属性为准 b:标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置,但内容会受到浮动盒子宽度的影响. c:父级盒子中的所有盒子都采用浮动形式,若父级盒子未指定高度则父级盒子的高度为0,因为所有…

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果. position: absolute|relative; 要配合top,left等定位; 使用: position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱…

这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r…

在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设置宽.高,宽度为父盒子的100%.例如:div.p.标题元素(h1-h6).列表元素(ul li.dl dt dd) 3.行内元素(inline):默认并排显示,不能设置宽.高,宽度为内容的宽度.例如:span.a.b.i 4.margin-bottom 和margin-top 塌陷,以最大值为准.…

清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 没有清除浮动前:高度为0 清除浮动后:有了高度 常见解决方案: <!…

CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称            属性值                说明 width              像素/百分比            区块的宽度 auto height              像素/百分比            区块的高度 auto min-height            像素/百分比             区块最小高度 a…

第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素就可以并排了. CSS中的float属性,默认为none.就是标准流通常的情况. 如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧.同时默认情况下,盒子的宽度不再伸张,而是根据盒子里…

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性…

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear…

先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响…

深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识. 上篇文章我们讲完了css布局中盒模型和元素分类的相关知识,同时介绍了box-sizing和行框.这篇我们继续... 一.定位与浮动 上篇我们讲解了不同类型元素的特点,我们可以随意的排列组合他们来达到我们想要的效果.但是他们都是基于一个二维平面的,如果我们想在布局中有遮挡,重叠之类的更丰富效果,我…

一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/height+padding+border+margin)  块元素行内元素 浮动流:产生?影响?如何解决? 定位流:静态定位(不定位)  相对定位  绝对定位  固定定位 JavaScript(JS): ECMAScript:语法 DOM: BOM: 1.2 浮动产生的背景? 背景:浮动产生的初衷是为了解决…

1.CSS 中区块的使用 2.CSS 中浮动的使用 3.CSS 中定位的使用 4.CSS 中溢出的使用 5.CSS 中滚动条的使用 17.1 CSS 中区块的使用 属性名称 属性值 说明 width 像素/百分比 区块的宽度 auto height 像素/百分比 区块的高度 auto min-height 像素像素/百分比 区块最小高度 auto max-height 像素像素/百分比 区块最大高度 auto min-width 像素像素/百分比 区块最小宽度 auto max-width 像素…

浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程. 如何定义浮动? 在CSS中,通过float属性来定义浮动,其基本语法格式如下: 选择器{float:属性值;} float属性值 left 元素向左浮动 right 元素向右浮动 none 元素不浮动(默认值) 清除浮动 为什么要清除浮动? 由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响,这时就需要在该元素中清除浮…

这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮动时,其他内容会环绕该元素.浮动元素会生成一个块级框,不论这个元素本身是什么.并且浮动元素周围的外边距不会合并.如果要浮动一个非替换元素,必须显式声明width. 浮动元素的几条规则: 1)      浮动元素的左(右)外边界不能超出其包含块(包含快是其最近的块级祖先元素)的左(右)边界.但是负外边距或者浮动…

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. <!DOCTYPE html> <html> <head> <meta c…

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m…

众所周知,一个页面可能包含多个div,如何对这些div进行排列,以便具有较好的显示效果呢? css提供了浮动和定位两个属性进行div的排列,下面主要针对浮动和定位进行详细地阐述. (一)何为浮动? 浮动即是让div块向左或者向右靠拢,向左浮动(float:left);向右浮动(float:right). 向左或者向右浮动时,当浮动块碰到前一个块或者边框时,则停止浮动. 例如:1.向左浮动 想左浮动,即是div块向左边移动,直到div块碰到左边框或者另一个div块,如上图右侧所示,代码如下 htm…

目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 1.字体的属性 设置字体属性: body{font-family:"Microsoft Yahei"} body{font-family:"Microsoft Yahei",&quo…

上期内容回顾 CSS简介 # 主要就是给HTML标签添加样式 # 固定语法结构 选择器 {属性名1:属性值;属性名2:属性值} 三种引用方式 1.link标签引入外部css文件(最正规) 2.HTML文档结构中的head标签内通过style标签内部直接编写(一般用于学习时期) 3.直接在标签内部通过style属性编写(不常用) 诸多选择器 # 一个页面上有很多相同的标签 但是需要有不同的样式 1.基本选择器 id选择器 类选择器 标签选择器 通用选择器 2.重要选择器 儿子选择器 后代选择器 毗…

CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布局流派 网页布局的本质就是用CSS控制盒子的摆放来形成页面 CSS提供了三种流派来控制盒子: 普通流 浮动 定位 所谓普通流就是我们前面所学习的内容: 标签按照规定好的默认方式排序 块级元素独占一行 行级元素顺序排列,遇到父元素边缘换行 接下来让我们走进浮动和定位的世界 浮动 首先我们为什么需要浮动…

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clear float</title> <style type="text/css"&…

前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼.下面根据我的学习和编程经验来谈一下这方面的要点. 要想完美的实现自己的布局,那首先一定要把盒模型搞清楚.盒模型由内容区.内边距(padding).边框(border)和外边距(margin)构成.这些属性值都是可选的,相互之间没有依赖关系,但在具体的布局时会需要设置某些属性.我们平时…

DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所帮助.感谢博客园平台!---- 来自<一只有梦想的前端小白> DIV+CSS 浮动效果是指,父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(PS:正常情况下,父元素的高是由子元素撑起来):或者因为部分子元素的而浮动,脱离文本流而造成其他元素的布局错乱的情况. DIV+…

CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 2.position属性的relative(相对定位)值时,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,  在使用相对定位时(top.left),无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变. <div style="border:…

这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ----------------------------------以下是原文 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布…

float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns…