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

【php基础班】第6天 padding_margin、CSS背景、CSS Sprite、CSS表格属性、CSS浮动与清除

2017-05-13 15:28 671 查看

第一节 padding_margin

1. padding内填充

padding

padding-top

padding-right

padding-bottom

padding-left

padding:2px

padding:10px20px;

padding:10px20px 30px;

padding:10px20px 30px 40px;

n Padding:一个数字，指的是四个方向是一样的（上右下左）

n Padding-top,padding-right,padding-bottom,padding-left

n Padding:两个数字

u Padding:10px 20px;

u 指的是上下为10px,左右为20px

u 注意：两个数字之间有空格。

n Padding三个数字

u Padding:10px 20px 30px;

u 指的是上10px,下面的填充为30px,左右为20px;

n Padding:四个数字

u 如：padding:10px 20px30px 40px;

u 按着顺时针方向。(上右下左)

n Padding:0 10px;

n Padding:0;

2. margin外边距

margin - top

margin - right

margin - bottom

margin - left

margin :2px

margin :10px 20px;

margin :10px 20px 30px;

margin :10px 20px 30px 40px;

n margin:一个数字，指的是四个方向是一样的（上右下左）

n margin-top,margin-right,margin-bottom,margin-left

n margin:两个数字

u margin:10px 20px;

u 指的是上下外边距为10px,左右为20px

u 注意：两个数字之间有空格。

n margin三个数字

u margin:10px 20px 30px;

u 指的是上外边距10px,为30px,左右外边距为20px;

n margin:四个数字

u 如：padding:10px 20px30px 40px;

u 按着顺时针方向。(外边距，上右下左)

n margin:0 10px;

n margin:0;

3.CSS属性——内外边距

第一节 CSS背景

background

background：颜色图片路径重复位置依附

background-color: 背景色,英文单词或十六进制颜色都可以。

Background-image:url(图片路径)背景图

background-repeat:none repeat-x,repeat-y,repeat

background-position:top right bottom left

background-attachment:fixed

第三节 CSS Sprite

背景图定位

小图放到整合成大图，减少向服务器的请求

在大图上要显示哪一部分，通过坐标进行定位

背景图的左上角是0，0 坐标

一般定位：背景图Y轴向上移，X轴向左移

background-positon:-100px-50px;

意思是：背景将向上移100px,同时向左移动50px.

第四节 CSS属性——表格属性

第五节浮动与清除

IE6IE7 下，若浮动元素之前存在兄弟行内非浮动元素，IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边，导致该浮动元素折行。

浮动的元素可以理解为该元素已经脱离文档流。“已经不存在了”

浮动只有两个方向：left,right

float:left(左浮动), float:right（右浮动）;

浮动的位置：浮动到包含元素的边界。或具有浮动属性元素的边上。

浮动元素的层级高于普通元素。

凡是浮动的元素都是块元素。

如果浮动前行内元素，浮动后自动转为块元素。

备注：行内元素没有宽高，只有块元素才有宽高。

关于浮动，我们能通常用在，将块元素在一行内显示。

主要应用于排序（DIV+CSS）

凡是设置了浮动这之后，一定要有清除浮动。

主要目的，清除上面的有浮动属性，对后面的元素造成的影响。

（上面的浮动属性，如果不清除，下面的元素会默认继承。）

清除浮动的写法：clear:left,right,both

.Clear:both,清除两边，我们通常用在版权独占一行。

清除写的位置：具有浮动属性的最后面。

通常，用一个空的<div class=”clear”></div>

CSS浮动介绍

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动框浮动后，将脱离原来的普通文档流，并且不会占用空间，层级会高于普通文档流。

浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动元素一般要指定一个明确的宽度；否则，它们会尽可能地窄。

• 请看下图，当把框1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

• 再请看下图，当框1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框 2 从视图中消失。

• 如果把所有三个框都向左移动，那么框1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

• 如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

CSS清除

•     假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。

•     因为浮动元素脱离了文档流，所以包围图片和文本的div 不占据空间。

•     如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用clear(清除浮动)。

第六节 CSS继承特性

l CSS继承性

n HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。

n HTML中，<body>是其他元素的容器，是其他元素的最外层元素，所以<body>元素中定义的样式将影响其他所有元素的显示格式。

l 具有继承的CSS属性

n 文本相关的属性是继承的

u text-align、color、text-indent、font-family、font-size

u font-style、font-weight、 letter-spacing、word-spacing

u text-transform、line-height等

第六节 CSS优先级

l 单个选择器优先级

n !important > 行内样式 > ID选择器> Class选择器 >元素选择器

n 定义!important的选择器，优先级最高，但IE6不支持。

n 例如：h1{color:#ff0000!important;}

<style type="text/css">

        /*（1）行内样式优先级最高 */

#title{ color:#0000ff;} /*（2）ID选择器比Class选择器优先级高 */

.title{ color:#00ff00; } /*（3）Class选择器比元素选择器优先级高 */

h1{ color:#ff0000; }     /*（4）元素选择器，优先级最低*/

</style>

<h1 class="title" id="title"style="color:#999900">人社部官员</h1>

1. 组合选择器的优先级是如何计算的？

a) 特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。

b) 一般而言，选择器指向的越准确，它的优先级就越高。通常我们用1表示标签选择器的优先级，用10表示class选择器的优先级，用100标示ID选择器的优先级，用1000表示行内样式。

c) 叫做“I-C-E”计算公式

d) 举例：

       i.     div.box span{ } 优先级为12

     ii.     .box span{ }       优先级为11，优先级小于上边

重点要注意：!important优先级最高，

高于上面一切。* 选择器最低，低于一切。

第七节 CSS优先级实例

<style type="text/css">

div.news div{color:#ff0000;}

.title{color:#0000ff;font-size:24px;height:30px;font-family:黑体;}

</style>

<div class="news">

    <divclass="title">横跨党政军规格胜其他领导小组</div>

    <divclass="content">不能将国家安全委员会作为一个政府部门来看待。</div>

</div>

第八节综合案例限时抢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{ margin:0;padding:0;border:0;}

body{font-size:12px;}

ul,li{ list-style:none}

.box{ border:1px solid black; width:650px; margin:50px auto; padding:10px;}

.box li{ float:left; text-align:center; border:1px solid green; position:relative; margin:5px;}

.box li img.up{ position:absolute; top:-10px;right:-10px;}

h2{ color:#ff3300; border-bottom:2px solid #ff3300; margin-bottom:10px; font-size:24px;}

.box a:hover{opacity:0.5;}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

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

标签： padding margin background CSS浮动与清除

相关文章推荐

新的分享

章节导航