CSS基础

一、CSS基本语法

　　CSS规则由选择器(selector)和熟悉声明(declaration)两个主要部分构成。

selector{declaration;declaration1;...declarationN}

　　选择器就是你要设置样式的html元素,CSS选择器包括元素选择器、id选择器、类选择器、后代选择器、子元素选择器、兄弟选择器、伪类和伪元素选择器等。

　　每条属性声明由一个属性和一个值组成,属性和值直接用( : )隔开,多个属性声明之间用( ; )隔开。

二、CSS盒模型

　　1.css盒模型就是指平时我们在网页设计中经常用到的margin,padding,border等,但是css盒模型的属性可不止这三个,css盒模型的属性有内容(content),内边距(padding),边框(border),外边距(margin);

　　下图是W3Cshool的Box Model的详解:

　　2.内边距,边框,外边距的默认值都是0,增加内边距,边框,外边距不会影响内容的尺寸大小,但是会增加该元素的总尺寸大小。比如一个P元素,设置的初始宽度为70px,没有边框,每个边有10px的外边距和5px的内边距,那么现在这个p元素总宽度就是100px。要注意的是边框(border)的大小也会影响元素的总体大小。

三、浮动

　　1.浮动简介

　　浮动(float)就是可以把元素向左或者向右移动,直到它的最外边框碰到父元素的边框或者另一个浮动元素的边框为止,浮动会脱离文档流。

　　例如我们浮动三个div,但是父元素的宽度不足以容纳三个浮动的div,那么其他的div就会向下移动,直到有足够的空间为止,但是如果div的高度不同,那么向下移动的元素就会被其他的给卡住。

　　2.浮动属性

　　浮动就是规定元素往哪个方向移动,在CSS中,任何元素都可以被浮动。

　　float的属性有none(默认值,元素不浮动)、left(向左浮动)、right(向右浮动)。

　　3.清除浮动

　　如果想要阻止元素自己浮动,就要用到clear属性来对元素的浮动进行清除。

　　clear属性的值有none(默认值,允许元素浮动在两侧)、both(左右两侧均不允许浮动元素)、left(左侧不允许浮动元素)、right(右侧不允许浮动元素)、inherit(继承父元素的clear属性的值)。

四、定位

　　1.定位简介

　　定位就是指它可以允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

　　2.定位属性position

　　在css中,我们可以使用position来进行元素定位。position的值有4个,意思就是我们可以实现4中不同类型的定位。

　　static

　　position属性的默认值,表示CSS文档流定位,元素框正常生成。就是按照正常的布局流从上到下从左到右布局,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。平时我们没有指定 position,也就表示使用 static了。

　　relative

　　relative属性表示相对定位,表示根据该元素之前的位置来进行偏移。通过top、right、bottom和left属性来设置元素位置的偏移量。但是对元素设置相对定位，该元素之前的位置会保留下来。

　　absolute

　　absolute属性表示绝对定位,设置为绝对定位的元素就已经从文档流中删除了,并且相对于包含它的包含块进行定位,包含块可能是文档中的另一个元素或者是最开始的包含块（即相对于position属性非static值的最近父级元素进行偏移）,如果元素没有已定位的祖先元素,那么就相对于最开始的包含块进行定位。

　　fixed

　　fixed的属性表示固定定位,意思就是设置了固定定位的元素一直在屏幕的指定位置。但是子IE6上面不支持这个属性,IE7需要声明DOCTYPE。

五、float和postion的区别

　　我个人理解的是布局的话float比postion要好一些,因为float更灵活,而postion用来定位的话就必须要给每个元素都设置一个x,y坐标相对来说比较麻烦。

六、元素居中

　　1.文字图片水平居中

　　给父级元素设置text-align:center;

　　2.块级元素居中

　　给自身设置margin-left:auto;margin-right:auto;但是千万要记得设置自身宽度;

　　3.父元素高度确定的单行文本垂直居中

　　给文本设置行高等于父元素高度

七、动画animation

　　动画(animation)是在css3里面新增的属性,它的属性主要有以下这些:

　　动画效果在我目前的项目中用到的比较少,所以现在对这个属性还不是很熟悉,后面在实际项目中有用到了,在来补充例子。

　　下面这个是今天早上在W3C上面找的最简单的动画效果:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        div{
            width:100px;
            height:100px;
            background:green;
            position: absolute;
            animation:myfirst 5s linear 0s infinite alternate;
        }
        @keyframes myfirst{
            0%   {background: red; left:0; top:0;}
            25%  {background: yellow; left:200px; top:0;}
            50%  {background: blue; left:200px; top:200px;}
            75%  {background: green; left:0; top:200px;}
            100% {background: red; left:0; top:0;}
        }

    </style>
</head>
<body>
<div></div>
</body>
</html>

View Code

posted on 2016-06-24 21:24 大白- 阅读(313) 评论(0) 收藏举报

刷新页面返回顶部

大白-

导航

公告

CSS基础