css位置布局,CSS定位布局相关
本文档包括CSS的 样式 定位 框模型
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-p_w_upload 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body
{
background-p_w_picpath:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-p_w_upload:fixed
}
可以利用 background-position 属性改变图像在背景中的位置
background-position:center;
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
body
{
background-p_w_picpath: 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;}
This is a paragraph. The spaces between words will be increased.
This is a paragraph. The spaces between words will be decreased.
字间隔
word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
字母间隔
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
但是对于汉字来说word-spacing不起作用,letter-spacing属性才能控制两个汉字之间的距离
HTML列表
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于
- 标签。每个列表项始于
- 。
- Coffee
- Milk
浏览器显示如下:
.Coffee
.Milk
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于
- 标签。每个列表项始于
- 标签。
- Coffee
- Milk
浏览器显示如下:
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以
- 开始。每个自定义列表项的定义以
-
开始。
- Coffee
- Black hot drink
- Milk
- White cold drink
浏览器显示如下:
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;
}
css位置布局,CSS定位布局相关相关推荐
- 前端必经之路:CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
- flex 平铺布局_CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- css左右布局代码_如何使用CSS位置来布局网站(带有示例代码)
css左右布局代码 Using CSS position to layout elements on your website can be hard to figure out. What's th ...
- 前端面试CSS自检(下)页面布局、定位与浮动和场景应用(先看问题 自己自述一遍 不会再看答案 )
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
- CSS之定位布局(position,relative定位布局技巧)
文章目录 1.什么是定位: 2.各个属性值的描述: 3.各个属性值的具体作用: 4.定位布局技巧:position:relative 与 position:absolute 结合使用: 1.什么是定位 ...
- 使用绝对定位时浏览器大小改变排版会乱_HTML amp; CSS页面布局之定位
我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.这里总结一下 WEB前端CSS部分的定位问题,同时这些问题也是对一些基 ...
- css布局——定位布局
目录 四.定位布局 1.为什么需要定位布局 2.定位的组成 3.定位模式 4.边偏移 5.静态定位 6.相对定位 效果展示 7.绝对定位 效果展示 8.子绝父相 9.固定定位 10.定位总结 四.定位 ...
- CSS基础学习十七:CSS布局之定位
在我们开始学习CSS布局之前,先来了解一下文档流的概念.文档流即是HTML的布局机制,块级元素占一行, 行内元素不占一行.将窗体自上而下分成一行行,并在每行中按从左往右的顺序排放元素. 一CSS定位和 ...
最新文章
- Django Web开发学习笔记(4)
- python学习3. 无重复字符的最长子串(滑动窗口)
- python语言跨平台语言吗_python属于跨平台语言吗?
- 超详综述 | 基于深度学习的命名实体识别
- 什么是整型类型?Python整型详细介绍
- 深入浅出:5G和HTTP
- java面试题(转载其他人,方便日常看)
- 全款房抵押贷款利息和抵押率各是多少?
- Java文件类boolean setExecutable(boolean exec_file,boolean owner_access)方法,带示例
- Qstring 与tr翻译过来的中文进行比较的问题
- Xshell上传文件【转】
- 设计模式C++实现——工厂模式
- React.js 小书 阅读笔记
- HTTPS那些事(二)SSL证书
- linux加密狗复制克隆教程,Guardant Code/Guardant加密狗解密 复制 克隆 模拟
- Dota2 荒神罪 破解
- 关于里程碑图 2017.01
- [C++] 将 mp3 等音乐资源以资源形式嵌入 exe 文件中
- linux具有写保护权限的文件,细说Linux权限
- PostgreSQL中计算百分位数和中位数
热门文章
- Annu. Rev. Genet:植物微生物组——系统性见解与展望
- R语言plotly可视化:plotly可视化在散点图中添加误差条(Scatterplot with Error Bars with plotly in R)
- R语言进行主成分分析(PCA):使用prcomp函数来做主成分分析、使用summary函数查看主成分分析的结果、计算每个主成分解释方差的、每个主成分解释的方差的比例、以及多个主成分累积解释的方差比例
- R语言散点图可视化:自定义标题和标签、拟合回归线、lowess为散点图添加平滑拟合线、修改散点图中点颜色和点符号、分组散点图、添加图例、pairs可视化散点图矩阵、ggplt2可视化、lattice
- python库numpy基本用法
- SparkSQL入门_1
- 加速加速再加速——大数据机器学习模型实践
- 概率分布--------离散概率分布和连续概率分布
- bash: dotnet: 未找到命令..._Docker 常用命令(.NET Core示例)
- tf.keras.losses.BinaryCrossentropy 损失函数 示例