目录
position属性用于对元素进行定位。该属性有以下一些值:① static 静态:
1. 什么是CSS:
全称级联样式表:Cascading Style Sheets。
2. CSS语法:
一条CSS样式规则由两个主要的部分构成:选择器,以{}包裹的一条或多条声明。
选择器:除前示的元素选择器外,还有id和class选择器,id 选择器适用范围只有一个元素,元素的class值可以多个,也可以重复.
3. CSS样式如何生效:
外部样式表:先创建一个HTML的文件,再在同目录下创建一个CSS后缀文件。
内部样式表:将样式放在HTML文件中。
内联样式:所谓内联样式,就是直接把样式规则直接写到要应用的元素中。
4. 级联优先级:
① 内联样式
② 内部样式表或外部样式表
③ 浏览器缺省样式
颜色、尺寸、对齐:
尺寸:可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有:像数 px,百分比 %等。
对齐:对于元素中的文本,我们可以简单的设置text-align属性为left, center, right即可(显然缺省的是左对齐)
5. 盒子模型:
由内容:content, 内边距:padding, 边框:border, 外边距:margin构成
① 内容:盒子的内容,如文本、图片等
② 内边距:填充,即内容和边框之间的区域
③ 边框:默认不显示
④ 外边距:边框以外与其它元素的区域
6. 定位:
position属性用于对元素进行定位。该属性有以下一些值:
① static 静态:
设置为静态定位position: static;,这是元素的默认定位方式,也即你设置与否,元素都将按正常的页面布局进行。即:按照元素在 HTML出现的先后顺序从上到下,从左到右进行元素的安排。
② relative 相对:
设置为相对定位position: relative;,这将把元素相对于他的静态(正常)位置进行偏移。
③ fixed 固定:
设置为固定定位position: fixed;,这将使得元素固定不动,此时元素固定的位置仍由top, bottom, left, right属性确定,但相对的是视口。
④ absolute 绝对:
设置为绝对定位position: absolute;,将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移。,如果该元素的所有父元素都没有设置定位属性,那么就相对于这个父元素。
7. 溢出:
当元素内容超过其指定的区域时,我们通过溢出overflow属性来处,这些溢出的部分。溢出属性有一下几个值:
① visible 默认值,溢出部分不被裁剪,在区域外面显示。
② hidden 裁剪溢出部分且不可见。
③ scroll 裁剪溢出部分,但提供上下和左右滚动条供显示。
④ auto 裁剪溢出部分,视情况提供滚动条伪类和伪元素:伪类或伪元素用于定义元素的某种 特定的状态或位置。