文档章节

CSS定位布局相关

二两豆腐
 二两豆腐
发布于 2015/11/24 14:52
字数 1524
阅读 41
收藏 0

 

本文档包括CSS的 样式 定位 框模型

 

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

body 

  {

  background-image:url(/i/eg_bg_02.gif);

  background-repeat:no-repeat;

  background-attachment:fixed

  }

 

  可以利用 background-position 属性改变图像在背景中的位置

  background-position:center;

 

  如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。

  body

  { 

  background-image: url(/i/eg_bg_03.gif);

  background-repeat: repeat-y;

  }

 

缩进文本

把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果

CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。

p {text-indent: 5em;}

 

字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

 

<p class="spread">

This is a paragraph. The spaces between words will be increased.

</p>

 

<p class="tight">

This is a paragraph. The spaces between words will be decreased.

</p>

 

 

字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:

 

字母间隔

letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。

 

但是对于汉字来说word-spacing不起作用,letter-spacing属性才能控制两个汉字之间的距离

 

 

HTML列表

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

浏览器显示如下:

.Coffee

.Milk

 

有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

浏览器显示如下:

Coffee

Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

浏览器显示如下:

Coffee

Black hot drink

Milk

White cold drink

 

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

 

CSS 定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

 

CSS position 属性

通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

position 属性值的含义:

static

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。

 

 

position:relative

相对定位回按照元素的原始位置对该元素进行移动

 

 

position:absolute

通过绝对定位,元素可以放置到页面上的任何位置。

 

position:fixed

 

固定定位,滚动条无论如何滚动,它始终位于窗口的某一个地方

 

 

如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为

overflow:scroll 用滚动条显示,出现滚动条

overflow:hidden 隐藏超出部分内容

 

 

clear 属性规定元素的哪一侧不允许其他浮动元素

图像的左侧和右侧均不允许出现浮动元素:

img

  {

  float:left;

  clear:both;

  }

 

本文出自 “走在未来的路上” 博客,请务必保留此出处http://wtf0313.blog.51cto.com/1093061/1193172

© 著作权归作者所有

二两豆腐
粉丝 22
博文 103
码字总数 87685
作品 0
朝阳
高级程序员
私信 提问
深入CSS,让网页开发少点“坑”

通常我们在学习CSS的时候,感觉很容易掌握,却常常在实际应用中碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Stacking Context等诸多高级特性...

葡萄城控件技术团队
2015/12/03
64
0
CSS三栏布局的四种方法

前言 总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只...

Damonare
2016/12/11
0
0
CSS(一)详解position

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/u014744118/article/details/97300870 最近我想深入学习css知识,所以...

CoolSummmer
07/25
0
0
10月11月写的十几篇CSS文章综述

1. CSS :visited伪类选择器隐秘往事回忆录 主要介绍CSS :visited伪类选择器,由于安全方面的限制,很多你以为可以使用的CSS属性,在:visited这里都是不能使用的,当然,很多很多其他怪异的特...

张鑫旭
2018/12/11
0
0
CSS 布局模块

在众多浏览器刚刚支持 CSS 的时候,我就已经开始使用它了,并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候,浏览器之间的兼容性虽然不好,但我仍然热衷于尝试层出不穷的新特性...

楠木楠
2016/12/06
136
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员大数据教程分享Scala系列之模式匹配和样例类

好程序员大数据教程分享Scala系列之模式匹配和样例类 1.样例类 在Scala中样例类是一中特殊的类,样例类是不可变的, 可以通过值进行比较,可用于模式匹配。 定义一个样例类: 构造器中每一个...

好程序员官网
13分钟前
3
0
让nginx上的静态网页在访问的时候没有html后缀

需求背景: 公司产品小姐姐觉得这个访问带html后缀不专业,要求访问不带html后缀 nginx 配置 #原配置 location / { index index.html index.htm index.php; try_files $...

Linux_Anna
13分钟前
3
0
beetl的内置函数

函数调用Beetl内置函数请参考附录,以下列出了常用的函数date 返回一个java.util.Date类型的变量,如 date() 返回一个当前时间(对应java的java.util.Date); ${date( "2011-1-1" , "yy...

gantaos
14分钟前
3
0
spring cloud 2.x版本 Gateway自定义过滤器教程

前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 [toc] 本文基于前两篇文章eureka-server、eureka-client、eureka-ribbon、eureka-feign和spring-gataway的实现。 参考......

毛毛向前冲V5
17分钟前
3
0
VPGAME 的 Kubernetes 迁移实践

作者 | 伍冲斌 VPGAME 运维开发工程师 导读:VPGAME 是集赛事运营、媒体资讯、大数据分析、玩家社群、游戏周边等为一体的综合电竞服务平台。总部位于中国杭州,在上海和美国西雅图分别设立了...

阿里巴巴云原生
23分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部