文档章节

CSS-display,overflow,CSS定位

人间四月
 人间四月
发布于 2015/12/01 15:07
字数 498
阅读 37
收藏 0
点赞 0
评论 0

display

  • 功能:规定网页元素如何显示的问题

  • 取值:none(隐藏),block(以块元素显示),inline(以行内元素显示)

  • block:可以实现行内元素转换成块元素

  • inline:可以实现将块元素转化成行内元素


overflow

功能:当内容溢出时,溢出的内容改该如何显示

取值:visible(可见的),hidden(隐藏),scroll(出现滚动条),auto(自动)


cursor

光标类型:网页中光标的类型

取值:help,wait,hand,pointer,,,


CSS定位

  • position:元素定位方式

    • 取值:static,fixed,relative,absolute

    • static:静态定位(默认状态,不定位)

    • fixed:固定定位

    • relative:相对定位

    • absolute:绝对定位

    定位方式配合定位坐标一起使用

  • 定位坐标:指定定位的元素,便宜目标元素的距离

    • left:目标元素左边的距离

    • top:上边

    • right:右边

    • botton:下边


  1. 固定定位:position:fixed

    1. 固定定位,是相对于浏览器窗口来进行的定位

    2. 固定定位,不占空间,层级要高于普通元素

    3. 固定定位,如果不指定定位坐标的话,固定定位元素的位置保持不变

  2. 相对定位:positon:relative

    1. 相对定位,是相对于“原来的自己”的位置进行定位

    2. 相对定位,仍然占用空间,层级要高于普通元素

    3. 相对定位,如果不指定定位坐标的话,固定定位元素的位置保持不变

    4. 相对定位一般配合绝对定位使用

  3. 绝对定位:position:abslute

    1. 绝对定位,相对于祖先(相对或绝对)定位元素来进行的定位

      1. 如果该元素上级元素没有进行定位的话,一直向上层寻找定位,最终相对于body进行定位

    2. 绝对定位,不占空间,层级高于普通元素

    3. 绝对定位,如果不指定定位坐标的话,固定定位元素的位置保持不变




© 著作权归作者所有

共有 人打赏支持
人间四月
粉丝 2
博文 70
码字总数 30455
作品 0
朝阳
程序员
什么是BFC?

Block Formatting Context css规范对它的定义 浮动,绝对定位元素,非块盒的块容器(例如,inline-blocks,table-cells和table-captions)和'overflow'不为'visible'的块盒会为它们的内容建立...

_YM雨蒙 ⋅ 02/02 ⋅ 0

[分享] 纯CSS完美实现垂直水平居中的6种方式

前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是...

没错就是酱紫 ⋅ 2016/07/29 ⋅ 0

详说 Block Formatting Contexts (块级格式化上下文)

在上文《详说清除浮动》中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性...

我是潮汐 ⋅ 2013/08/16 ⋅ 0

浮动元素容器的clearing问题

网页设计时,我经常遇到下面这个问题,一直不知道怎么解决。 今天,总算全部理解了,一定要写下来。 1. 问题的由来 有这样一种情形:在一个容器(container)中,有两个浮动的子元素,如图一...

阮一峰 ⋅ 2009/04/06 ⋅ 0

前端计划——面试题总结-CSS篇

前端面试之CSS篇 1、三种基本引入方式 外部样式表 内部样式表 内联 这是一个段落。 2、CSS的引入方式中link和@import的区别 link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@im...

Alarak ⋅ 2017/08/14 ⋅ 0

IE兼容性问题及BUG

1、终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]--> <!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]--> <!--[if gt IE 6]> 这......

yjl1006 ⋅ 2013/12/03 ⋅ 0

CSS布局中应用BFC的例子

BFC是啥? BFC(Block Formatting Context),“块状格式化上下文”。简单地说,它提供一个独立的布局环境。在同一个BFC中,盒子会一个挨一个地排列,margin边距还会在垂直方向上叠加。float和...

小陈同学 ⋅ 2014/03/15 ⋅ 0

DIV垂直居中的各种方法

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我...

alexian ⋅ 2010/10/28 ⋅ 0

浅谈CSS中的居中

css居中在我们平常的页面布局中应用的十分频繁,掌握css各种居中方式也是很有必要的,所以对各种居中方式进行一个小小的总结。 居中主要分为垂直居中和水平居中,而不同元素之间的居中也有所...

Leisured ⋅ 2016/08/24 ⋅ 0

CSS核心内容整理 - (上)

一. HTML标记与文档结构 文本用闭合标签,引用内容用自闭合标签.常见的块级标签:<h1>~<h6>,<p>,<ol>,<li>,<blockquote>等.行内标签则有:<a>,<img>,<em>,<strong>,<abbr>,<cite>,<q>等. 下面这......

顽Shi ⋅ 2014/03/31 ⋅ 8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 17分钟前 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 37分钟前 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 51分钟前 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部