css的定位和浮动 - 相关文章

css区块定位之浮动与清除属性

float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止浮动元素出现在所属对象旁边,如果它被放置为与浮动元素相邻,则它将下沉至浮动元素为止. [CSS区块定位有两种方法:相对定位和绝对定位]…

定位浮动 float代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #d0,p{ width: 400px; border: 1px solid red; } #d0 div{ width:100px; height:100px; margin:10px; } #d1{ background-c…

CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

一.定位所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿定位就是改变元素在页面上的默认位置分类: 普通流定位(元素默认的定位方式) 浮动定位相对定位绝对定位固定定位 1.普通流定位文档流是页面元素默认的定位方式块级:从上到下排列(独占一行) 行级:从左到右排列(不独占一行) 2.浮动定位如果将元素的定位方式设置了浮动定位那么具有以下几个特点 1.浮动元素会脱离文档流,其他未浮动的元素要上前补位 2.浮动元素会停靠在父元素的左边或者右边,或者停靠在其他浮动元素的边缘…

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float…

CSS学习笔记——CSS中定位的浮动float

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么? 第一个问题:浮动到底是怎么样的? W3CSCHOOL对浮动属性的解释:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种. 我个人的理解是:HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而…

CSS：CSS定位和浮动

CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻译为文档流):普通流默认是静态定位,将窗体自上而下分成一行一行,块级元素从上至下. 行内元素在每行中按从左至右的挨次排放元素,即为文档流. 2.Float:浮动流浮动流:元素的浮动,即可以让一个元素脱离原来的文档流,漂到另一个地方,漂到左边或右边等等. 3.Absolute position:绝对…

CSS彻底研究(3) - 浮动,定位

Github pages 博文 CSS彻底研究(3)-浮动,定位一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定. II . 演示规则准备代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="…

CSS中的定位与浮动

CSS中的定位与浮动本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:static,相对定位:relative,绝对定位:absolute. static: 采用默认定位时,一般可以不用设置position样式. 各个元素是按照文档流的形式从上往下排,同时保证块状元素独占一行的原则. relative : 生成相对定位的元素,相对于其正常位置进行定位,同时配合top, b…

深入css布局篇(2) — 定位与浮动

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

CSS：盒子的定位与浮动

CSS--盒子定位.浮动与居中 HTML中的每个元素都是一个盒子浏览器对HTML文档进行解析,根据盒子的属性对其进行排列. 每个元素默认使用标准文档流定位标准文档流:是指浏览器读取HTML内容后对元素进行排列的一种标准方式.浏览器会根据读取到标签的先后顺序来排列HTML元素,按照从左至右.自上而下的顺序排列.行内元素从左至右排列,块级元素自上而下排列. 通过display属性可以将行内元素按块级方式来显示,并可以设置width和height.也可以将块级元素行内显示. dis…

笔记《精通css》第3章盒模型，定位，浮动，清理

第3章盒模型,定位,浮动,清理 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框与行内框, 利用display属性来改变特性,display:block,display:inlne-block 3. 3种基本的定位机制:普通流,绝对定位,浮动 4.相对定位是普通流定位的一部分,与文档流相关,根据自身原先的位置进行移动无论是否移动都占据原来空间position:relative 设置top,…

CSS 的定位方式和含义

CSS 的定位方式和含义总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情况下,所有的 CSS 元素都在普通流中定位,在这种模式下,元素的位置由于浏览器根据元素在 html 文档中的位置决定,块级元素从上到下排列,行内元素水平排列. <style> div { padding: 0; margin: 0; } #div0 { width: 200px; padding:…

CSS中定位机制的想法

对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | fixed 适用于:除 <' display '> 属性定义为「table-column-group | table-column」之外的所有元素. 继承性:无. 归类总结一下定位的四种属性特点: 绝对定位: 1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的. 2:盒子嵌套的时候,如果父…

CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法…

CSS3定位和浮动详解

本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. css定位的属性: position 把元素放在一个静态的,相对的,绝对的,或者固定的位置中 top/left/right/botom 元素向上/左/右/下的偏移量 overflow 设置元素溢出其区域发生的事情 clip 设置元素显示的形状 vertical-align 设置元素显示的对其方式 z-i…

转：Selenium之CSS Selector定位详解

CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式. 百度输入框: <input name="wd" id="kw1" style="width: 489px;" type="text" maxLength="100"autocomplete="off" jQuery11020395699…

CSS(04) 定位

布局常用的三种:标准流.定位.浮动: 1.文档流-标准流窗体自上而下分成一行行(元素在 (X)HTML 中的位置),并在一行行中从左到右排放元素: 2.CSS 定位 Position 属性(绝对定位.固定定位.相对定位.静态(默认)) 可以设置左右上下偏移: 绝对定位:脱离了文档流,位置是相对与父元素或者浏览器左上角(也可以理解为Body),并且父元素是设置了Position 为固定/绝对/相对,如果父元素中找不到就会以浏览器左上角为位置: 固定定位:脱离了文档流,位置是由浏览器左上角为启始点…

css的定位机制

牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此还是很有必要了解一下元素的定位机制.那么在介绍定位机制之前呢,还是有必要先了解一些和位置有关的基本内容. 第一个需要了解的是盒子模型,在网页中所有的元素都是以盒子模型的方式存在的,即所有元素都可以看成是大小不一样的矩形“砖头”.在IE和Firefox中的开发人员工具中可以很直观的看到每个元素的盒子模…

（转载）CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

复习-css元素定位

css元素定位 <style type="text/css"> body{ margin: 15px; font-family: "Adobe 宋体 Std L"; font-size:12px; } .father{ background-color: black; border: 1px solid #111111; padding: 25px; } .son{ padding: 10px; margin:5px; background-color:…

CSS之定位，relative/absolute/fixed的用法

其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位的相对上下左右的距离,一般写法如下: position:absolute; top:20px; left:20px; 下面我们分情况讨论: 1.父级没有定位属性的情况,用relative和abosolute配合使用,解决一般的定位问题. abosolute:绝对定位,其意义是相对其最近的一个有定位属…

CSS(6)---通俗讲解浮动(float)

CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到盒子模型地址:CSS(5)---通俗讲解盒子模型一.理解浮动 1.概念概念浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次. 如果是第一次听说肯定还是还是一脸懵,下面我一步一步通过例子来解释这句话. 举例说明我们知道div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的标准流. 如下图可以看出,因为div是块级元素,所以即使div2的宽度很小,…

CSS Position定位过多是否会影响浏览器渲染速度

一直有个传说就是页面里的Position多了会影响浏览器渲染速度,今天做个测试看看结果如何. 检验的方法: 动态创建一定数量的div > 开始计算时间 > 导入css文件渲染 > onload计算时间,看那种方法延迟最短. 为了统计的数据有意义没有设置上万个节点,以cnmo首页的节点数为例,chrome firefox统计为4315,ie统计为4372,所以设置4500进行测试. 每次结果测试3次,取最低值. 不添加css属性数量 IE8 Chrome Firefox 100 71ms…

CSS：定位概述

background-position 背景定位如果,说浮动, 关键在一个 "浮" 字上面, 那么我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道.不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦! 元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分. 1.边偏移边偏移属性描述 top 顶端偏移量,定义元素相对于其父元素上边线…

[译]HTML&CSS Lesson5: 定位

CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置,使我们的设计具有结构,使内容更加易懂. CSS有好几种不同的定位属性,每种都有自己的使用场景.在这节课中我们会通过不同的案例--可复用的布局和针对单元素的布局--来介绍每种方法. 浮动定位的其中一种方法就是使用float属性.float属性非常好用,可以用在很多地方. 本质来说,float属性是使元素脱离正常的流式布局,并将它放置在父元素的左侧或右侧.然后页面中所有的元素都会环绕浮动元素布局.例如我们将段落间的一张图片设置为浮动…

Css深入理解之浮动_慕课网课程笔记

前言这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文. float的历史要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一个直抵本质的问题:float被设计出来是干嘛的? 答案是:实现文字环绕效果.对,就是这么简单因为这个属性是在很久很久以前就有了,那个时候是没有那么多炫酷的CSS效果的,所以这个属性设计的初衷很简单,就是实现文字环绕. float的特性我们知道float的特性有两个,一个是包裹,一个就是破坏.下面就…

css用clearfix清除浮动

本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开.这个时候我们可以用clearfix清除浮动什么是.clearfix CSS 代码复制 .clearfix:after { conte…

CSS 中定位的使用

position relative 设置区块基准点为左上角(相对定位以区块的左上角为基准点仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制 top/right/bottom/left 定位元素偏移量. absolute 设置网页的为基准点左上角(绝对定位以网页的左上角为基准点不会暂居原来的位置) a.使元素完全脱离文档流: b.使内嵌元素支持宽高: c.块属性标签内容撑开宽度(在没有设置宽的情…

CSS设计指南之浮动与清除

原文:CSS设计指南之浮动与清除浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效果.然而,这个属性也成为了创建多栏布局最简单的方式. 1.文本绕排图片在浮动一张图片或其他元素时,你是在要求浏览器把它往上方推,直到它碰到父元素的内边界.后面的段落不再认为浮动元素在文档流中位于它的前面了,因为它会占据父元素左上角的位置.不过,它…

CSS之定位布局（position，定位布局技巧）

css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置. 2.各个属性值的描述: static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,在普通流中,各个元素默认的属性. relative(相对定位) 对象不可层叠.不脱离文…

【css的定位和浮动】的更多相关文章