css基础css页面布局基础

浏览数：20 / 时间：2015年06月09日

样式可以在HTML中定义，也可以在一个单独的外部样式文件中定义。样式可以分为嵌入式样式表，外部样式表，内联样式表。

外部样式表：首先要建一个后缀为.css的样式表文件，然后在web文档中的<head>段使用<link>标记，这样就可以将一个外部样式表文件链接到文档中。

语法：<link rel="stylesheet" type="text/css" href="样式表的url"/>

嵌入式样式表：在web文档的<head>段使用<style>元素将样式包含在网页内部。仅用于该网页。

语法：<style type="text/css"/>样式定义</style>

内联样式表：多数的HTML标记都包含有一个style属性，允许指定在标记显示时的样式。

语法：<html标记 style="样式定义"></html标记>

比如想要将一个特定的<h1>标记的文本显示为红色。

多个样式定义可以层叠向下通过多个层次来影响文档。这种层叠是有优先级的，从小到大为：用户浏览器的设置，外部样式表，嵌入式样式表，内联样式表。

css页面布局基础：

css盒模型：属性包括border(边框),margin（外边据）,padding（内边距）,width（宽）,height（高）,这些属性可以用快捷方式表示，顺序为上右下左，值之间用空格隔开。

如;margin：10px 20px auto auto;

正常文档流的布局：在正常流中，文本元素按照从上到下，从左到右的格式布局。块级元素从上到下依次排列，内嵌元素从左到右一次排列。通过浮动或者定位，可以把元素从正常文档流中脱离出来，从而实现与正常文档流不同的复杂的布局。

元素浮动：为使元素浮动到左边或者右边，并且是后面的文本环绕它，我们可以对该元素应用float属性，float属性的取值包括三个：none（不浮动），left（左浮动），right(右浮动)。float属性可以应用于任何元素。

元素浮动的基本行为：1.当float不为none的时候，元素将被视作块级，等于设置display:block;2.当浮动一个文本类型元素时，必须指定该元素的width属性，如果不设置宽度，那么元素内容就会折叠到最小的宽度。3.浮动元素停留在包含它的父级元素的内容区域，不会穿过这个区域。4.浮动元素的margin值是不会重合的。

元素浮动可以很好的节省布局空间。但是有时候并不是最恰当的。这时候可以用clear属性来清楚浮动后的某一区域，让后续的元素从正确位置显示。clear属性的值有：none（允许元素两边都可以有浮动元素）,left（不允许左边有浮动元素）,right（不允许右边有浮动元素）,both（不允许有浮动元素），clear属性只能用于块级元素。

在页面布局中，有时候想要把内容显示到指定的内容，按照正常文档流来说，有时候很难放在想要的位置。这时候可以用定位（position属性）来解决问题。position属性有4个值：static,relative.absolute,fixed.

static：静态定位，表示按照正常定位方式，元素盒按照在文档流中出现的顺序一次格式化。

relative：相对定位，移动元素盒，它在文档流中的原始空间会保留下来，不会被占用。｛position:relative;top:;right:;bottom:;left:;｝

absolute：绝对定位，移动元素盒，它在文档流中的原始空间不会被保留，不会影响周边元素的布局。｛position:absolute;top:;right:;bottom:;left:;｝

fixed：固定定位，和absolute类似，元素从文档流中脱离出来，但是它是相对于视口定位，不是对于容器块定位。大多数情况下，视口就是指浏览器窗口。｛position:fixed;top:;right:;bottom:;left:;｝

元素溢出处理：如果一个元素的大小设置太小，以致不能包含其内容，那么可以使用overflow属性指定其内容不能填充时该如何处理。

overflow的取值可以是visible,hidden,scroll,auto，

visible表示不裁剪内容，强制显示元素的内容。

hidden表示裁剪内容，并不显示超出对象尺寸的内容。

scroll表示裁剪内容，同事提供滚动条，显示全部内容。

auto表示只有在必要的时候才裁剪内容并添加滚动条。

注意：如果要使用overflow属性，那么该元素的position属性必须是绝对定位。

元素的可见性：在CSS中，有两个属性可以设置元素的可见性。display和visibility。

display属性常用的值有:none,block,inline。

visibility属性的值有：visible(可见),hidden(影藏)，inherit（继承）。

这2种的区别在于：display影藏元素时，等于是脱离文档，不占据任何空间。而visibility影藏元素时，原有空间仍会被占据。

css可以设置动画效果，下面是一个动画效果的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#div2{
z-index: 1;
position: absolute;
top: 50px;
left: 400px;
animation-name: left-a ,left-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;
}
#div3{
z-index: 3;
position: absolute;
top: 50px;
left: 400px;
animation-name: center-a ,center-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;
}
#div4{
z-index: 2;
position: absolute;
top: 50px;
left: 400px;
animation-name: right-a ,right-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;

}
@keyframes left-a
{
0% {transform: scale(0,0) ;position: absolute;top:50px;left: 400px; }
100% {transform: scale(1,1) ;position: absolute;top: 100px;left: 100px;}
}
@keyframes left-b
{
0%{ left: 100px;}
15%{ left: 100px;z-index: 1;}
45%{ left:700px;}
55%{ left: 700px;z-index: 2;}
70%{ left: 400px;}
85%{ left: 400px;z-index: 3;}
100%{ left:100px ;}
}
@keyframes center-a
{
0% {transform: scale(0,0);position: absolute;top: 50px;left: 400px; }
100% {transform: scale(1,1) ;position: absolute;top: 100px;left: 400px;}
}
@keyframes center-b
{
0%{ left: 400px;}
15%{ left: 400px;z-index: 3;}
45%{ left:100px;}
55%{ left: 100px;z-index: 2;}
70%{ left: 700px;}
85%{ left: 700px;z-index: 1;}
100%{ left:400px ;}
}
@keyframes right-a
{
0% {transform: scale(0,0);position: absolute;top: 50px;left: 400px; }
100% {transform: scale(1,1);position: absolute;top: 100px;left: 700px;}
}
@keyframes right-b
{
0%{ left: 700px;}
15%{ left: 700px;z-index: 2;}
45%{ left:400px;}
55%{ left: 400px;z-index: 3;}
70%{ left: 100px;}
85%{ left: 100px;z-index: 1;}
100%{ left:700px ;}
}
</style>
</head>
<body>

在做网页的过程中，首先要布好局，布局好了，在往里添加内容，这样做起来才有思路，不会因为一些原因而使得思绪混乱，前面写完的代码，后面看就不知道代表的是什么了。在写代码的时候，我们给元素命组名或者id值的时候，一定要清晰明了，别全文档乱命名，想起什么就是什么，这样会混乱，不好改动。如果哪里需要改动，都不知道找哪里。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css基础css页面布局基础