浮动的特性/常用的CSS属性/精灵图技术(background-image)/定位

一.关于上篇博客的回顾

1.浮动:

(1).标准文档流

(2).作用:实现元素并排

(3).特点:第一个盒子会贴父盒子的边,第二个会贴第一个盒子的边...

(4).特性:

　　①.脱离标准文档流

　　②.收缩效果

　　③.字围

　　④.设置浮动,任意的标签都可以设置宽高

(5).总结:要浮动一起浮动,有浮动,清除浮动

(6).浮动带来的影响:如果父盒子不设置高度,子盒子浮动了,因为子盒子脱离了标准文档流,那么他们不在页面上占位置,撑不起父盒子的高度

2.清除浮动:

(1).给父盒子设置固定高度(后期不好维护)

(2).内墙法

　　给浮动元素的后面加一个空的块级标签,添加clearfix类,设置该属性值为clear:both

(3).伪元素清除法

.clearfix:after{
    content:‘.‘;
    clear:both;
    display:block;
    visibility:hidden;
    height:0;
}

伪元素清除法

(4).overflow:hidden

3.display

属性:

　　inline / block / inline-block / none

二.浮动的特性

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素有"字围"效果

4.收缩的效果

　　前提是标准文档流,margin的垂直方向会出现塌陷问题; 如果盒子居中:margin:0 auto; 如果盒子浮动了, margin: 0 auto; 就不起任何作用

5.需求:让浮动的盒子居中

　　给浮动盒子,加一个父盒子,设置宽度跟浮动盒子一样大小,并且overflow:hidden;设置该盒子margin: 0 auto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动的盒子居中</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 400px;
                height: 300px;
                background-color: burlywood;
            }
            .box1{
                width: 100px;
                overflow: hidden;
                margin: 0 auto;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: beige;
                margin: 0 auto;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1">
                <div class="box2"></div>
            </div>
        </div>
    </body>
</html>

使浮动的盒子居中

6.文本水平居中: text-align:center;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>水平居中文字</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                text-align: center;
                background-color: aquamarine;
                float: left;
            }
        </style>
    </head>
    <body>
        <div>娃哈哈</div>
    </body>
</html>

文本水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本属性和字体属性</title>
        <style type="text/css">
            body{
                /*定义文本下的一条线*/
                text-decoration: underline;
            }
            div{
                width: 200px;
                height: 240px;

                /*文本居中显示*/
                /*line-height: 200px;*/

                /*文本靠右显示*/
                /*text-align: right;*/

                /*两端对齐*/
                /*text-align: justify;*/

                /*首行缩进*/
                /*text-indent: 2em;*/

                /*文本大小*/
                /*font-size: 20px;*/

                /*规定应该从父元素继承 text-decoration 属性的值。*/
                /*text-decoration: inherit;*/

                /*文本字体的粗细*/
                /*font-weight: 800;*/

                /*文本字体样式*/
                /*font-family: "华文行楷";*/

                background-color: azure;
            }
        </style>
    </head>
    <body>
        <div>娃哈哈乳娃娃爽歪歪优酸乳营养快线</div>
        <a href="javascript:void(0);">百度一下</a>
    </body>
</html>

文本属性和字体属性

7.文本垂直居中: 行高=盒子的高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本属性和字体属性</title>
        <style type="text/css">
            body{
                /*定义文本下的一条线*/
                text-decoration: underline;
            }
            div{
                width: 200px;
                height: 240px;
                line-height: 200px;
                background-color: azure;
            }
        </style>
    </head>
    <body>
        <div>娃哈哈乳娃娃</div>
        <a href="javascript:void(0);">百度一下</a>
    </body>
</html>

文本垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行高</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 40px;
                font-size: 20px;
                background-color: burlywood;
                /*行高*/
                line-height: 40px;
            }
        </style>
    </head>
    <body>
        <div>哈哈哈哈哈哈哈哈哈哈</div>
    </body>
</html>

行高

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多文本垂直居中</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 160px;
                font-size: 20px;
                background-color: cornsilk;
                /*line-height: 40px;*/
                padding-top: 40px;
            }
        </style>
    </head>
    <body>
        <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    </body>
</html>

多行文本垂直居中

8.盒子如果浮动了,那么垂直方向上不会出现塌陷问题

9.CSS中有三种方让盒子"脱表"

(1).浮动float

(2).绝对定位

(3).固定定位

三.常用CSS的属性

1.中心对齐: text-align: center

2.两端对齐: text-align: justify

3.首行缩进: text-indent: 2em;

4.字体大小: font-size: 14px

5.修饰文本:text-decoration

6.line-height:

　　单行文本垂直居中: line-height = height

　　多行文本居中: 行高的高度不能小于字体的大小, 不然上下字之间会紧挨一起

　　第一步:一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

　　第二步:第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

四.精灵图技术(background-image)

1.background-img: 表示设置该元素的背景图片

2.background-repeat: 表示设置该元素平铺的方式

属性值:

给元素设置padding之后,发现padding的区域也会平铺背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 24px;
            height: 35px;
            /*border: 1px solid red;*/
            /*默认水平平铺和垂直平铺*/
            /*background-image: url(./xiaohua.jpeg);*/
            /*background-image: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);*/
            /*不平铺*/
            /*background-repeat: no-repeat;*/
            /*background-position-x: 0;*/
            /*background-position-y: -162px;*/
            /*固定定位*/
            /*background-attachment: fixed;*/
            background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat 0 -162px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

精灵图技术

3.background-position: 属性设置背景图像的起始位置,这个属性设置背景原图像（由background-img定义）的位置

属性值:

五.定位

定位有三种:

　　相对定位(position:relative); 绝对定位(position:absolute); 固定定位(position:fixed);

默认:position:static; 静态定位

1.相对定位:

position: relative;

相对定位:相对于自己原来的位置定位

(1).现象和使用:

①.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子没什么区别

②.设置相对定位之后,我们才可以使用四个方向的属性: top, bottom, left, right

(2).特性:

①.不脱标

②.形影分离

③.老家留坑(占着茅坑不拉屎, 恶心人)

所以说相对定位,在页面中没有什么太大的作用,影响我们页面的布局,我们不要使用相对定位来做压盖效果

(2).用途:

①.微调元素位置

②.做绝对定位的参考(父相子绝)绝对定位会有此内容

(3).参考点:

自己原来的位置做参考点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: aquamarine;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: burlywood;
                position: relative;
                /*可是使用用top left right bottom*/
                top: 20px;
                left:100px;
                z-index: 5;
            }
            .box3{
                width: 200px;
                height: 200px;
                background-color: coral;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

示例

2.绝对定位

position:absolute;

(1).特性:

　　①.脱标, ②.做遮盖效果,提升层级,设置绝对定位以后,不区分行内元素和块级元素,都能设置宽高

(2).参考点(重点):

①.单独一个绝对定位的盒子

a.当我们使用top属性描述的时候,是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置

b.当我们使用bottom属性描述的时候,是以首屏页面左下角为参考点来调整位置

②.一父辈盒子作为参考点

a.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸, 它也可以是爷爷,曾爷爷

b.如果父亲设置了定位,那么以父亲为参考点, 那么如果父亲没有设置定位, 那么以父辈元素设置的定位为参考点

c.不仅仅是父相子绝, 父绝子绝, 父固子绝, 都是以父辈元素为参考点

注意了: 父绝子绝,没有实战意义,做站的时候不会出现父绝子绝, 因为绝对定位脱离标准流,影响页面的布局, 相反"父相子绝"在我们页面布局中,是常用的布局方案,因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置

(3).注意:绝对定位的盒子无视父辈的padding

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: darkgray;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: darkorange;
                position: absolute;
                top: 40px;
                left: 0;
            }
            .box3{
                width: 250px;
                height: 200px;
                background-color: wheat;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </body>
</html>

示例

3.子绝父相

如果父辈盒子设置相对定位,子盒子设置绝对定位,以父辈盒子的0,0为参考点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子绝父相</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .father{
                width: 992px;
                height: 460px;
                background-color: rosybrown;
                float: right;
                position: relative;
            }
            .prev{
                width: 50px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                background-color: #000;
                color: #fff;
                top: 50%;
                left: 0px;
            }
            .next{
                width: 50px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                background-color: #000;
                color: #fff;
                top: 50%;
                right: 0;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <span class="next">></span>
            <span class="prev"><</span>
        </div>
    </body>
</html>

示例

4.绝对定位的盒子居中

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
        }

示例

5.固定定位

固定当前的元素不会随着页面滚动而滚动

(1).特性:

　　①.脱标, ②.遮盖,提升层级, ③.固定不变

(2).参考点:

设置固定定位,用top描述,那么是以浏览器的左上角为参考点

如果用bottom描述,那么是以浏览器的左下角为参考点

(3)作用:

　　①.返回顶部栏; ②.固定导航栏; ③.小广告

原文地址：https://www.cnblogs.com/rixian/p/9688376.html

时间： 2024-08-28 18:21:20

浮动的特性/常用的CSS属性/精灵图技术(background-image)/定位的相关文章

整理 W3CSchool 常用的CSS属性列表

近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版本. 目录: 01. CSS背景属性(Background) 02. CSS边框属性(Border和Outline) 03. CSS文本属性(Text) 04. CSS字体属性(Font) 05. CSS外边距属性(Margin) 06. CSS内边距属性(Padding) 07. CSS列表属性(

常用的CSS属性的英文单词总结及用法、解释

在div css制作中常用的CSS属性的英文单词介绍.解释与css样式用法总结.这些单词无需一定要记住会拼写,但是要求看见他们就能认识他们并知道他们的属性及用法,这里有个记住他们属性的技巧就是多制作和手写div+css推荐用Dreamweaver(DW)因为此工具在写CSS和html的代码时候会自动弹出用到的CSS代码,多用多看就能记住他们的用法及属性.(如果您的记忆力好能记住也好不影响) 一.(盒子)布局排版类   -   TOP float浮动:设置块元素的浮动效果.可选常用到参数left.

CSS之精灵图与字体图标

本文内容: 精灵图 字体图标 首发日期:2018-05-01 精灵图: 在以前,每个图片资源都是独立的一张张图片,浏览器访问网站中的不同网页时是重复获取这一张张图片的,这代表需要访问很多次资源. 为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源,如果前一次获取到了这个资源,那么后面不会再访问了,直到缓存的资源失效了.[意思有点类似去游乐园,有些票能玩所有游戏,而有些票只能玩一个游戏,如果你拿着能玩所有游戏的票,那你就不用麻烦去一次次买票了]). 将

常用的CSS属性

CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位:PX.PD.EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-

精灵图技术

在加载图片时,每加载一次,就向网络中发送一次请求icon为小图标,同样需要向网络发送请求为了节省网络资源,将页面中需要用到的icon集成到一张图中,使用时,只需发送一次请求即可在css文件中使用时,只需要使用到icon在整张图中的相对位置即可,使用background-position:;是icon显示出来 <body> <div class="icon icon-1"></div> <div class="icon icon-2&q

css基础 精灵图 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css属性大全

SS 属性大全文字属性「字体族科」(font-family),设定时,需考虑浏览器中有无该字体.「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小>|<长度>|<百分比>(一般设置双数)「字体加粗」(font-weight),除了 normal(正常).bold(粗体).bolder(特粗).lighter(细体)外,还有9种以像素为度量为单位的设置方式(100,200,300,400,500,600,700,800,900).「字体

CSS 属性大全

1. 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体.  「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小>|<长度>|<百分比>(一般设置双数)  「字体加粗」(font-weight),除了 normal(正常).bold(粗体).bolder(特粗).lighter(细体)外,还有9种以像素为度量为单位的设置方式(100,200,300,400,500,600,700,800,900). 

css属性hack

我们常用到css属性hack来兼容不同浏览器或设置不同浏览器的不同属性值 说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 语法: selector{<hack>?property:value<hack>?;} 取值: _: 选择IE6及以下.连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适. *: 选择IE7及以下.诸如