CSS概要

laiqun@msn.cn

1. css的引入

使用style属性
```
<div style="background:#ff0000"> <div>
```

在head标签中加入style标签

<html>

<head>

   <style>
   .main{
     background:#ff0000;
   } 
   </style>

</head>

<body>

    <div class="main">

    </div>

</body>

</html>

在head标签中使用link标签引入外部的css文件

<html>

<head>

    <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >

</head>

<body>

    <h1>我通过外部样式表进行格式化。</h1>

    <p>我也一样！</p>

</body>

/html>

2. css的选择器及效果图

选择器用来制定那些节点需要使用样式

CSS 元素选择器
CSS 选择器分组
CSS 类选择器详解
CSS ID 选择器详解
CSS 属性选择器详解
CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器
CSS 伪类
CSS 伪元素

参照：w3school

3. css 盒模型

box

设置了width 和height属性后。默认：width和height只与content（内容）有关。

设置了box-sizing:border-box后，我们设置的width和height，不再只是content的宽度高度，而是content的宽度高度+padding（内边距）+border（边框）的和。

4. css 浮动

4.1. 浮动的作用：

左浮动，让出右边的空间，且让出的右边的空间，可以给给其他元素占；
右浮动，让出左边的空间，且让出的左边的空间，可以给给其他元素占。

4.2. 浮动的影响：

如果未设置宽度，则浮动元素的宽度随内容增长而增长。而不是默认的占父元素的100%

示例：第一个div元素未使用浮动，未设置宽度，默认占父元素的100%；第二个div使用了浮动，不设置宽度的话，默认宽度为内容所占的宽度。
浮动会会清除后面元素的新起一行的效果，紧跟其后的块元素不会新起一行

示例：

如何清楚浮动造成的紧随其后的元素无法新起一行的问题？方法：清除浮动

5. css 定位

5.1. static

默认的定位方式。特点：从左往右，从上往下。

5.2. fixed

相对与左上角定位。特定：不随鼠标移动而变化，表现为一直跟随的广告，一直跟随的导航条等。

5.3. relative

特点：原先位置保留，相对与原先位置定位。

如果对应的块元素没有设置宽度，则宽度为内部内容的宽度
原来的位置保留，是相对于它自己以前位置的偏移 top left right bottom
一旦设置了就有了bottom top left right 属性以及z-index属性

举例：

5.4. absolute

特点：寻找其祖先元素第一个已经定位的元素（fixed relative absolute），相对它为原点进行定位。
1. 如果对应的块元素没有设置宽度，则宽度为内部内容的宽度
2. 原来的位置不保留。寻找其祖先元素中已经定位的（定位方式为fixed relative absolute中的任意一种）的元素。以它的为参照点进行定位
3. 一旦设置了就有了bottom top left right 属性以及z-index属性

来自为知笔记(Wiz)

posted @ 2016-06-16 13:18 QQLQ 阅读(239) 评论(1) 编辑收藏举报

刷新页面返回顶部