1 浮动和清除浮动

在上篇的第十一节--定位中说道：

　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

普通流和绝对定位已经说完，接下来就是浮动了。

什么是浮动？

　　CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

　　我的理解是：浮动将元素‘上浮’一层，并保留元素在上层对下层的投影的位置。

请注意：

　　元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

　　一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　浮动元素之后的元素将围绕它。

　　浮动元素之前的元素将不会受到影响。

浮动：　　　　float　　=　　left

　　　　　　　　　　　　　　right

　　　　　　　　　　　　　　none

　　　　　　　　　　　　　　inherit

<!DOCTYPE html>

<html lang="en">

<head>

<style>

img {

    float:left;

}

</style>

</head>

<body>

<h1>hello world</h1>

<img src="l.jpg"/>

lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf

lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf

lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf

lsdflkasdkfjalksjdlfkjasjdhkashdfkjasdfjfajsdhfkjahskjdffhakjshdfkjahsdkjfhakjsdfkajhsdkfjhakjsdhfajsddf

</body>

</html>

浮动实例

我们可以通过clear属性清除元素周围的浮动

clear　　　　=　　　　left/right/both/none/inherit

<!DOCTYPE html>

<html>

<head>

<style>

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

.text_line

{

clear:both;

margin-bottom:2px;

}

</style>

</head>

<body>

<h3>Image Gallery</h3>

<p>Try resizing the window to see what happens when the images does not have enough room.</p>

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

<h3 class="text_line">Second row</h3>

<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">

<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">

<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">

<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

</body>

</html>

清除浮动实例

2 css伪类/伪元素

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：伪类的名称不区分大小写。

selector.class:pseudo-class {property:value;}

以上就是css中的所有伪类。

其中专门针对链接的有四个：

:link　　　　/* 未访问的链接 */
:visited 　 /* 已访问的链接 */
:hover 　　/* 鼠标划过链接 */ （这个hover伪类对其他块元素像<p>也是生效的，感兴趣的可以试试）
:active 　　 /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

:focus很有意思

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    input:focus{

        background-color: aquamarine;

    }

</style>

</head>

<body>

<h1>hello world</h1>

<form>

    name:<input type="text" name="name"/>

    job:<input type="text" name="job"/>

</form>

</body>

</html>

:focus实例

浏览器显示结果：

:first-letter

该伪类仅适用于块级元素。也就是说<p> <h1> 列表表格表单等块级元素都适用。（不清楚什么是块级元素？请点这里）

<!DOCTYPE html>

<html>

<head>

<style>

li:first-letter

{

font-size:200%;

color:#8A2BE2;

}

    p:first-letter{

    font-size:200%;

color:#8A2BE2;

    }

</style>

</head>

<body>

<ul>

    <li>hello</li>

</ul>

    <p>hello world</p>

</body>

</html>

first-letter实例

:first-line

该伪元素也仅适用于块元素。

:first-child

匹配父元素中第一个子元素

:before和:after

:before 选择器向选定的元素前插入内容。使用content属性（content详解）指定要插入的内容

<!DOCTYPE html>

<html>

<head>

<style>

p:before

{

content:"Read this -";

}

</style>

</head>

<body>

<p>My name is Donald</p>

<p>I live in Ducksburg</p>

<p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p>

</body>

</html>

:before实例

3 导航栏

绝大多数网页都会有导航栏，导航栏的重要性就不需要我说了。

导航栏大多是用列表来实现的。

<!DOCTYPE html>

<html lang="en">

<!DOCTYPE html>

<html>

<head>

<style>

    ul {

        list-style-type: none;

        margin:0;

        padding:5px;

    }

    a{

        font-size: 28px;

        color:white;

        text-decoration: none;

        text-transform: uppercase;

    }

    a:hover{

        color:gainsboro;

        background-color:darkgrey;

    }

    li{

        float: left;

        width:10%;

        background-color: grey;

    }

</style>

</head>

<body>

<ul>

    <li><a href="http://baidu.com" target="_blank">first</a></li>

    <li><a href="http://baidu.com">second</a></li>

    <li><a href="http://baidu.com">third</a></li>

    <li><a href="http://baidu.com">fourth</a></li>

</ul>

</body>

</html>

不算丑的横向导航栏实例

css常用属性2的更多相关文章

好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
1+x证书学习日志——css常用属性
## css常用属性: 1:文本属性: 文本大小: font-size:18px; 文本颜色 colo ...
02: css常用属性
目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...
CSS常用属性-xy
一.文本Text CSS text-align 属性文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...
css常用属性汇总
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...
23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
css常用属性1
1 背景相关背景颜色 background-color = 颜色名称/rgb值/十六进制值背景图片 background-image = url('') 背景图片平铺方式 backgro ...
css常用属性总结：颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色当初我在初学前端的时候,就会冒出一个疑问“我该如何设置网页颜色?”,一般 ...
javascript之css常用属性
1. position : 属性值有absolute .fixed.relative absolute:生成绝对定位的元素,相对第一父元素进行定位: fixed : 生成绝对定位的元素,相对于浏览 ...

随机推荐

Maven详解（六）------ 生命周期
1.什么是生命周期? Maven 强大的原因是有一个十分完善的生命周期,生命周期可以理解为项目构建步骤的集合,它定义了各个构建环节的执行顺序,有了这个顺序,Maven 就可以自动化的执行构建命令. ...
sdram控制2
芯片手册要求sdram需要在64ms内刷新8K次,否则里面的数据会丢失,因此在64ms分成8192次,每次刷新充一次电,然后给两次自动刷新命令即可. /*----------------------- ...
Sublime Text3 最常用快捷键
软件快捷键再多,平时常用的也就那么几个,先总结如下: 全选:Ctrl+A 复制:Ctrl+C 粘贴:Ctrl+V 删除:Ctrl+X 快速复制到下一行:Ctrl+Shift+D 快速向上移动代码:Ct ...
ASP.Net Core Razor 页面路由
在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中, ...
Java基础---继承、抽象、接口
一.概述继承是面向对象的一个重要特征.当多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继那个类即可.这时,多个类可以称为子类,单 ...
有哪些关于 Python 的技术博客？
Python是一种动态解释型的编程语言,它可以在Windows.UNIX.MAC等多种操作系统以及Java..NET开发平台上使用.不过包含的内容很多,加上各种标准库.拓展库,乱花渐欲迷人眼.因此如何 ...
docfx （一）
什么是docFX? DocFX 是一个基于.NET的API文档生成器,当前支持 C# 和 VB.它可以通过你的代码中的三斜杠注释生成 API 参考文档.同样也支持你使用 Markdown 文件创建一些 ...
CPU和GPU的差别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt317 首先需要解释CPU和GPU这两个缩写分别代表什么.CPU即中央处理器, ...
Project 5:替换指定字符串
这个程序主要用于替换指定字符串,较为简单. #include <stdio.h> void change(char *,char *,char *); int ju(char *,char ...
JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

css常用属性2

1 浮动和清除浮动

css常用属性2的更多相关文章

随机推荐

热门专题