您的位置：首页 > Web前端 > CSS

CSS学习笔记二~~浮动

2014-07-24 20:51 585 查看

CSS清除和浮动

Float：使HTML元素向左或向右浮动，取值：left、right

浮动的元素，可以向左或向右浮动，直到碰到包围框的边上或者上一个浮动框的边上为止；

浮动的元素将脱离普通文档流，并且不再占用空间，浮动元素的层级要高于普通文档流中的元素。

浮动元素将生成块元素，不管它原来是什么元素(块元素、行元素)。换句话说，行内元素浮动后，将变成块元素，就可以设置width和height。

注意：行内元素<span>设置width和height是没有用的，行内元素主要是靠内容决定width和height。

Clear：清除上面的浮动特性，取值：left(左浮动)、right(右浮动)、both(两者)

（1）如何让包围元素从“视觉上”包住浮动元素呢？就需要在包围元素的最下边(浮动元素)加上一个清除浮动。

（2）清除浮动的后面的其它元素，都将恢复默认排版。

CSS盒子模型

每一个HTML元素，都可以看成一个“盒子”。

一个“盒子”具有：内容的宽或高、边框线、内边距、外边距。

一个“盒子”具有：width和height、border、padding、margin

一个“盒子”宽度或高度的计算：内容宽为70px，左右内边距分别为5px、左右外边距分别为10px，求“盒子”的宽度？

总宽度＝内容宽70px + 左右内填充 5px*2 + 左右外边距 10px*2 = 100px

举例2：盒子总宽度为100px，内容宽度80px，内填充5px，求左右的外边距？

一个外边距＝(100px – 80px – 10px)/2 = 5px

CSS边框属性

Border-left：设置元素的左边线，border-left:粗细线型颜色;

              例如：border-left:2px solid #FF0000;

Border-right：设置元素的右边线

Border-top：设置元素的顶边框线

Border-bottom：设置元素的下边框线

Border：简写形式，同时设置四个边框线；

       border:1pxsolid #FF0000; //同时设置四个边框线

线型的取值：

       None：无边线；

       Solid：实线；

       Dashed：虚线；

       Dotted：点状态线

       Double：双线

CSS内填充(内边距)

Padding-top：上内填充距离

Padding-right：右内填充距离

Padding-bottom：底内填充距离

Padding-left：左内填充距离

Padding：简写形式

       Padding：5px;   //上右下左内填充分别为5px

       Padding：5px 10px; //上下分别为5px，左右分别为10px

       Padding：5px 10px 15px; //上填充5px，左右分别为10px，下填充为15px

       Padding：5px 10px 15px 20px; //顺序必须为：上右下左，上填充5px，右填充10px，下填充15px，左填充20px；

CSS外边距

Margin-top：上外边距

Margin-right：右外边距

Margin-bottom：下外边距

Margin-left：左外边距

Margin：简写形式

       Margin:5px;   //上右下左，外边距分别为5px

       Margin:5px10px; //上下分别为5px，左右外边距分别为10px

       Margin:5px10px 15px; //上外边距5px，左右外边距分别10px，下外边距15px

       Margin:5px10px 15px 20px; //分别设置四个外边距，顺序是：上右下左

外边距合并的问题(怪异现象)

两个垂直块元素的上下外边距，会发生合并的问题，取其中较大的一个值。

行内元素、浮动元素、定位元素，外边距不会发生合并；

解决的方法：

       （1）只能其中一个元素增加下外边距，另一元素的上外边距设置为0px；

       （2）也就是在上下两个元素的中间，加一个100px高的空<div>

HTML引入CSS的方法

1、内嵌式

       通过<style></style>标记来引入CSS代码，<style>一般放在<head>标记中；

       <stype type=“text/css”>

       Body{

              Margin:0px;

              Padding:0px;

}

</style>

2、外链式：链接外部的CSS文件(.css)

       通过<link>标记，来引入外部的CSS文件，<link>标记一般放在<head>标记中。

       格式：<link href=“CSS文件路径” rel=“stylesheet” type=“text/css” />

       Href：指定外部CSS文件的路径和名称；

       Rel：当前文件与链入的文件的关系，取值：stylesheet；

       例如：<link href=“css/public.css” rel=“stylesheet”type=“text/css”
/>

3、行内式

       每一个HTML元素都有一个公共属性style，通过该属性可以直接给该元素添加样式，并且它的优先级最高。

<p style=“width:400px;height:300px;border:1pxsolid #444;padding:20px;”>这里是一个段落</p>

选择器优先级：行内样式> ID选择器 > 类选择器 > 标签选择器

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航