CSS基础知识点（一）

CSS(Cascading Style Sheets)全称为：层叠样式表。

1、HTML元素类型

(1) 内联元素(inline)：可以理解为“文本模式”，即从左到右顺序显示，不单独换行。常用的内联元素有：a, img, input, select, lable, span, textarea 等，和一些文本标记标签，如：small, big, strong, em, i, b（加粗）, sub（下标）, sup（上标）, u（下划线）等。

(2) 块级元素(block)：单独一行，没有特殊定位时，从上到下依次排列 (文档流)。常见的块级元素包括：div, h1—h6, ul, li, ol, p, table, form 等。

　　css中，我们可通过 display:block; 将内联元素定义为块级元素，换行显示；通过 display:inline; 使块级元素行内显示。

2、块级元素的定位

　　position有4种定位类型，影响元素框的生成方式：

(1) static：默认定位方式。

(2) relative：相对定位。元素框偏移某个距离，不可以层叠。相对于其在普通流中的位置进行移动，依然存在于文档流中。

(3) absolute：绝对定位。元素从文档流中删除，可以层叠显示，层叠可以通过z-index属性设置。相对于其最近的一个有定位设置的父元素进行绝对定位，如果不存在这样的父对象，则相对于body定位。

(4) fixed：固定定位。与absolute相似，fixed相对于浏览器窗口对元素定位。(低版本的IE不支持)

3、浮动 float

　　在css中，任何的元素都可以浮动。给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框，此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

使用float会造成“塌陷”问题，为解决这个问题，这里给出2种方法（借鉴）：

(1) 在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div :

代码：

<div>

　　<div><span>块1</span> float:left </div>

　　<div><span>块2</span> float:left</div>

　　<div><span>块3</span> float:left</div>

　　<div></div>

</div>

(2) 在使用float元素的父元素添加 overflow:hidden;

4、'display'、'position' 和 'float' 的关系

(1) 浮动或绝对定位的元素，只能是块级元素或表格。

(2) "position:absolute;" 和 "position:fixed;" 优先级最高，有它存在的时候，浮动不起作用。

(3)  如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。

5、z-index 不起作用

z-index起作用的前提是元素要有position属性；

　　有时候position为relative是z-index也不去作用，这时候修改为absolute；有浮动时可能也会导致z-index失效，这时候仍是修改它的position属性；

 

6、文本溢出处理

(1) overflow:hidden，隐藏溢出文本。

(2) world-wrap:单词是否换行显示，break-word允许拆分长单词。

(3) text-overflow：当文本溢出包含元素时发生的事情。

　　注意：我们要想实现溢出文本以省略号显示，必须强制定义：文本在一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden）。
　　例：p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

 

7、border

一条边为透明： border-bottom-color：transparent；左上圆角：border-top-left-radius:5px;

border-radius的含义是：圆角.border-radius:100px / 10px;是一种缩写方法.如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。

(1)css制作小三角(朝下的红色小三角)： 

.san{ 
　　width: 0;
　　border-top: 5px solid red;
　　border-right: 5px solid transparent;
　　border-left: 5px solid transparent;
}

 

8、阴影效果

例：box-shadow:1px 2px 5px #ccc;

　　参数说明：（X轴偏移量 Y轴偏移量 模糊扩散范围 颜色），前两个参数为0表示，阴影为四周都有；可以添加多个阴影，eg：box-shadow:1px 2px 5px #ccc，1px 1px 3px #ccc inset(内部阴影)。

 

9、背景图片的设置

　　{background-image:url(a.jpg); width:200px; height:200px;}这里的宽度和高度设置的时盒子的大小，并非背景图片的大小。

　　注意：在盒子中添加背景图片时，要给出盒子的高度，否则图片不显示。

　　　　　Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。

 

(1)background-size 设置背景图片的大小

常见的属性值：

• cover：保持图像的宽高比，把背景图片扩展来完全覆盖背景区域；
• contain：保持图像的宽高比，将图片缩放到高度或宽度正好适应定义背景区域；
• 数值显示：background-size：100px 200px；（背景图片固定大小）
• 百分比显示：background-size：50% 80%；（图片拉伸，使宽度为背景区域的50%，高度为被背景区域的80%）。

(2) background-attachment 设置背景图像是固定还是随着滚动

常用属性值：

• scroll：滚动，默认值；
• fixed：固定；

(3) background-position 设置背景图片位置

需要先设置图像为固定，CSS中背景图片定位方法 background-attachment：fixed；

• center：上下左右居中；
• background-position：top center；水平靠上，左右居中
• 数值显示：background-position：100px 200px；距顶端100px，距左边200px；
• 百分比显示：background-position：20% 50%；

(4) background-clip 属性规定背景的绘制区域

• border-box：背景被裁剪到边框盒 (默认值)；
• padding-box：背景被裁剪到内边距框；
• content-box：背景被裁剪到内容框；

(5) background-origin 属性规定背景的定位区域

• border-box：背景相对于内边距框来定位(默认值)；
• padding-box：背景相对于边框盒来定位；
• content-box：背景相对于内容框来定位；

(6) 多重背景图

　　div { background-image: url(' img1.jpg '), url(' img2.jpg '); }

10、背景颜色设置

背景设置多个颜色，过渡效果：background-image:linear-gradient(to bottom ,red,yellow);

 

11、透明度设置

IE：filter:alpha(opacity:30);

FF/Chrome:opacity:0.3;

 

12 checkbox和radio设置对齐。

.checkbox {vertical-align:middle; margin-top:-2px; margin-bottom:1px;}

 

13、去除某些元素的默认样式

　　apprence:none;

　　-webkit-apprence:none;

 

14、设置placeholder的样式

　　placeholder是HTML5  input的新属性，英文意思是占位符。

　　::-webkit-input-placeholder

　　::-moz-placeholder

 

　　#field1::-webkit-input-placeholder { color:#00f; }

 

14、鼠标样式 cursor

cursor: pointer;      手；

cursor: wait;           沙漏；

cursor: help;           帮助；

cursor: text;            文字/编辑；

cursor: move;         可移动（四角标示）；

cursor: n-resize;     向上改变大小（North）

cursor: s-resize;      向下改变大小（South）

cursor: e-resize;      向右改变大小（East）

cursor: w-resize;     向左改变大小（West）

cursor: ne-resize;    向右上改变大小（North-East）

cursor: nw-resize;   向左上改变大小（North-West）

cursor: se-resize;     向右下改变大小（South-East）

cursor: sw-resize;    向左下改变大小（South-West）