css样式基础三
css的定位:
其中css中被分为块级元素与行内元素。如块级元素div、hx标签、p元素。行内元素span和strong
W3school给出的一切皆为框的定义。
而且可以使用display属性,强行将行内元素变为块级元素。如display:block。
CSS的定位机制:
主要分为三类:
普通流、浮动、和绝对定位。
position属性
static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
定位属性:
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 |
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align | 设置元素的垂直对齐方式。 |
z-index | 设置元素的堆叠顺序 |
CSS的相对定位:
如图所示,移动了位置任然占有原来的位置。
css样式基础三的更多相关文章
- CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- HTML CSS样式基础
一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...
- CSS样式基础:
CSS:外部文件导入 <link rel="stylesheet" type="text/css" href="./style.css&quo ...
- 使用CSS样式的三种方法
一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...
- css样式基础详解
一.字体属性:(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 2.样式 {font-styl ...
- CSS样式基础2
CSS: 一.常用样式:字体,颜色,背景 二.布局:浮动 定位 标签特性 三.标签盒子模型: 边距 边框 四.动画:旋转 渐变 注意:子标签会继承父标签的样式但不是所有的样式都会被继承. 1.1 ...
- CSS样式基础总结
首行缩进:text-indent:2em 行高:line-height:1.5em 1.5倍行距 也可以设置像素文字修饰:text-decoration:underline下划线 line-throu ...
- js改变css样式的三种方法
共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...
随机推荐
- ThinPHP命名空间,连接数据库是要修改的配置文件,Model数据模型层,跨控制器调用,如何获取系统常量信息,
一.命名空间(主要是为了实现自动加载类) *命名空间(相当于虚拟的目录),为了让类有一个统一的文件夹来管理(可以自动加载'类'),每个文件都要有命名空间*tp如何做命名空间:*TP框架下有一个初始命名 ...
- 谈一谈php://filter的妙用
php://filter是PHP中独有的协议,利用这个协议可以创造很多"妙用",本文说几个有意思的点,剩下的大家自己下去体会.本来本文的思路我上半年就准备拿来做XDCTF2016的 ...
- GIT远程仓库地址变更
将VS2013的解决方案添加到GIT源代码管理后会增加.gitattributes和.gitignore 2个文件以及.git目录 设置远程地址的文件在.git目录下的config文件中 直接修改上图 ...
- ACM集训的第。。。诶~不知道第几题=.=
题目: 郭铮鹏认为排序是一种很频繁的计算任务,所以他考虑了一个简单的问题:现在最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌排序的时候.在这个任务中可能的值只有三种1,2 ...
- 使用Django建立网站
# django-admin startproject csvt01 # cd csvt01 # django-admin startapp blog # vim csvt01/settings.py ...
- LeetCode Counting Bits
原题链接在这里:https://leetcode.com/problems/counting-bits/ 题目: Given a non negative integer number num. Fo ...
- rbd cache (一)
cache 1.why The existence of cache is based on a mismatch between the performance characteristics of ...
- 第三篇:白话tornado源码之请求来了
上一篇<白话tornado源码之待请求阶段>中介绍了tornado框架在客户端请求之前所做的准备(下图1.2部分),本质上就是创建了一个socket服务端,并进行了IP和端口的绑定,但是未 ...
- spark读取hdfs上的文件和写入数据到hdfs上面
def main(args: Array[String]): Unit = { val conf = new SparkConf() conf.set("spark.master" ...
- using的作用
using (ServiceHost host = new ServiceHost(typeof(OperationService))) 这样写代码有何好处?using的作用范围自动回收垃圾,在这个范 ...