• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css(display,float,position)深入理解

css(display,float,position)深入理解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,display,float,position等相关知识,佚名 希望在学习及工作中可以帮助到您

display 用来设置元素的显示方式

display : block | none | inline | inline-block

inline:指定对象为内联元素

block:指定对象为块元素

inline-block:指定对象为内联块元素

none:隐藏对象

float 控制元素是否浮动显示

float : none | left | right

none:设置对象不浮动

left:设置对象浮在左边

right:设置对象浮在右边

浮动的目的:

就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性

1.任何申明为 float 的元素自动被设置为一个“块级元素”

2.在标准浏览器中浮动元素脱离了文档流 ,所以浮动元素后的元素会占据浮动元素本来应该所处的位置

3.如果水平方向上没有足够的空间容纳浮动元素,则转向下一行

4.文字内容会围绕在浮动元素周围

5.浮动元素只能浮动至左侧或者右侧

clear 清除浮动

clear : none | left | right | both

none:默认值。允许两边都可以有浮动对象

left:不允许左边有浮动对象

right:不允许右边有浮动对象

both:不允许有浮动对象

position 对象的定位方式

position : static | absolute | fixed | relative

static:默认值。无定位,对象遵循常规流。此时4个定位偏移属性不会被应用

relative:相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素

absolute:绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠

fixed:固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动

absolute 说明:

1.脱离文档流

2.通过 top,bottom,left,right 定位

3.如果父元素 position 为 static 时,将以body坐标原点进行定位

4.如果父元素 position 为 relative 时,将以父元素进行定位

例:div { position: absolute; left:100px; top:100px;}

relative 说明:

1.相对定位(相对自己原来的位置而言)

2.不脱离文档流

3.参考自身静态位置通过 top,bottom,left,right 定位

例:div { position: relative; left:100px; top:100px;}

fixed 说明:

固定定位实际上只是绝对定位的特殊形式,固定定位的元素是相对于浏览器窗口而固定,而不是相对于其包含元素,即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一 样的地方

例:div { position: fixed; right:0; bottom:0;}

z-index 对象的层叠顺序

z-index : auto | number

当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序

较大 number 值的对象会覆盖在较小 number 值的对象之上

以上这篇css(display,float,position)深入理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持微课江湖。

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06css 滑动门技术的介绍及实例分享
  • 2017-08-06如何布局登录页面
  • 2017-08-06纯css3(无图片/js)制作的几个社交媒体网站的图标
  • 2017-08-06重新封装的JQuery获取浏览器信息的代码
  • 2017-08-06未知长宽元素在已知300px*300px的容器中垂直居中(IE6/7/8/FF)
  • 2017-08-06使用CSS伪元素实现文字部分变色的方法
  • 2017-08-06IE下textarea中font-size值很大时文字不显示的解决方法
  • 2017-08-06通过定位来实现不定宽度居中显示
  • 2017-08-06css3实例教程 一款纯css3实现的发光屏幕旋转特效
  • 2017-08-06DIV+CSS布局也需要注意的SEO原则

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用CSS的overflow属性防止float撑开div的方法
    • body背景图片拉伸另类实现
    • 前端设计师需要了解的9个问题
    • IE 元素默认高度研究
    • CSS3过渡transition效果实例介绍
    • 一款基于css3的列表toggle特效实例教程
    • 浅析CSS实现水平垂直同时居中的5种思路
    • 全面总结CSS代码的编写规范及优化建议
    • Css设置img属性让图片水平居中/居左/居右的写法
    • 纯CSS无hacks的跨游览器自适应高度多列布局 推荐

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有