CSS学习03
来源:互联网 发布:查询java类库的文件 编辑:程序博客网 时间:2024/05/21 10:19
- CSS定位
- 定位方式:要与定位属性配合使用。
- position:元素定位方式,取值:statics、fixed、relative、absolute
- statice:静态定位(默认状态、不定位)
- fixed:固定定位
- relative:相对定位
- absolute:绝对定位
- 定位坐标:指定定位的元素,偏移目标元素多远的距离。
- left:定位元素,距离目标元素左边的距离。
- top:定位元素,距离目标元素上边的距离。
- right:定位元素,距离目标元素右边的距离。
- bottom:定位元素,距离目标元素下边的距离。
- 固定定位,position:fixed;
- 固定定位,是相对于浏览器窗口来进行的定位。
- 固定定位,不占空间,层级要高于普通元素。它不会随着网页的滚动而滚动。
- 固定定位,如果不指定定位坐标的话,固定定位元素的位置在原地不动。
- 固定定位元素,一定是“块元素”,不管原来它是什么元素。
- 相对定位,position:relative;
- 相对定位,是相对于“原来的自己”进行定位。
- 相对定位,依然占据空间,层级高于普通元素。
- 相对定位,如果不指定定位坐标的话,相对定位元素的位置在原地不动。
- 相对定位,原来是行内元素,定位后依然是行内元素;原来是块元素,定位后还是块元素。
- 提示:相对定位和绝对定位,一般情况下是配合使用。
- 绝对定位,position:absolute;
- 相对于祖先定位元素(相对定位或绝对定位),来进行的定位。
- 如果它的父元素没有进行任何定位的话,再往上找定位元素。
- 如果一直找到<body>都没有找到定位元素的话,那就相对于<body>来进行定位。
- 绝对定位元素,不占空间,层级要高于普通元素。
- 绝对定位,如果不指定定位坐标的话,绝对定位元素的位置在原地不动。
- 绝对定位元素,是一个“块元素”,不管原来它是什么元素。
- 例如:
<pre name="code" class="css">.news { width: 600px; border: 1px solid #444; margin: 20px auto; padding: 20px; position: relative; }.news .div1{ width: 100px; height: 100px; background: red; position: absolute ; /*相对定位*/ right: 50px; bottom:50px; }
- 如何调整层叠顺序:z-index: 100; /*堆叠顺序,值越大越靠前排*/
- HTML引入CSS的方式
- 嵌入式
- 通过<style>标记,来引入CSS样式。
- 语法格式:<style type="text/css"></style>
- 提示:<style>中的CSS样式,只能给当前网页使用。
- 同一个网页中,<style>标记可以多次出现。
- 外联式
- 通过<link>标记,来引入一个外部的CSS文件(.css),这样的话,可以实现公共的CSS代码被多个网页共享。
<linke rel="stylesheet" type="text/css" href="css/public.css">
- 常用属性:
- rel:也就是引入的是什么类型的文件,取值:stylesheet.
- type:内容类型。
- href:引入的CSS文件地址。
- 提示:
- <link>标记放在<head>标记中。
- 同一个网页,可以使用多个<link>来链入多个外部样式文件。
<link href="css/my.css" rel="stylesheet" type="text/css" /><!--HTML文件引入CSS样式表格式--><pre name="code" class="css">body { font-size: 14px; color: #444; font-family: 黑体; background: yellow; } /*my.css文件内容*/
在CSS文件中,不能出现HTML标记。全部都是CSS的属性样式。- 行内样式
- 每一个HTML标记,都有一些公共的属性:class、id、title、style。
- HTML标记中的style属性的值,与CSS中样式一模一样。
- 提示:
- 行内样式中,CSS代码不能写的太多;
- 行内样式中,多个CSS属性不能换行,也就是一行写完。
- 经常用于Javascript中。
- 优先级:
- 行内样式>嵌入式>外链式
- CSS表格属性
- border-collapse:表格边框线合并,取值:collapse。
- 例如:
<table width="500" border="1" align="left" style="border-collapse:collapse"> <tr> <td> </td> <td> </td> <td> </td> </tr>
- 盒子模型
- 我们可以把每一个HTML标记,都看成是一个“盒子”。
- 这个“盒子”有哪些特征:内容的height或width、border、padding、margin
- 上下左右都有的计算方式:
- “盒子”的总宽度:内容的宽度+边框宽度*2+内填充*2(左右)+外边距*2(左右)
- 上下外边距合并问题——这是一种现象
- 什么情况下?上下外边距会合并呢?
- 上下两个块元素,如果每一个元素都制定了四个外边距,那么上下相邻的那个外边距会发生合并的现象,合并后取其中较大的外边距。
- 举例:
<pre name="code" class="css"><style type="text/css">.body { margin: 0; padding: 0; }.div1 { width: 200px; height: 200px; background-color: red; margin: 50px; }.div2 { width: 200px; height: 200px; background-color: blue; margin: 50px; }</style><body> <div class="div1"></div> <div class="div2"></div></body>
- 如果要实现上下两个<div>之间的距离为100px,该如何实现呢?
- 上下两个<div>其中一个只指定margin-bottom:100px;而另一个<div>的margin-top:0px;
- 可以在上下两个<div>中间,添加一个空的<div>,并给空<div>指定高度为100px,也可以实现
- 行内元素没有宽高属性!!行内元素没有宽高属性!!行内元素没有宽高属性!!行内元素没有宽高属性!!
- 同一个class属性,可以指定多个类名样式,多个类样式之间用空格隔开。
0 0
- CSS学习03
- CSS学习笔记03
- 前端学习-CSS-03
- 前端学习笔记03,CSS
- 【CSS学习】CSS语法
- 【CSS学习】CSS 创建
- 【CSS学习】CSS 背景
- 【CSS学习】CSS 表格
- 【CSS学习】CSS 边框
- css学习--css基础
- 学习CSS
- CSS学习
- CSS学习
- css学习
- CSS 学习
- CSS学习
- css 学习
- CSS 学习
- LeetCode205. Isomorphic Strings
- 1057. Stack (30)
- Codeforces Round #340 (Div. 2)[Codeforces617]
- C++:泛型编程vector(排序)
- android graphic(4)—surfaceflinger和Vsync
- CSS学习03
- WindowManager.LayoutParams
- 内存模型和名称空间
- 讨论一个Android 异步开发中容易忽视的bug
- c++ diary3
- 不重新启动LINUX服务器添加新硬盘!
- APUE_文件管理
- poj2251 Dungeon Master (广度搜索)
- javascript获取函数名称、函数参数、对象属性名称的代码实例