一丶浮动的补充

　　浮动的特性:

　　　　1. 浮动的元素脱标

　　　　2.浮动的元素互相贴靠

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

　　　　4.浮动的元素有收缩的效果

　　　　前提是标准文档流,margin的垂直方向会出现塌陷问题

　　　　如果盒子居中:margin: 0 auto;如果盒子浮动了,margin 0 auto;就不起作用了

　　那我们如何让浮动的盒子居中呢?

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>浮动盒子居中</title>

        <style>

            *{

                padding: 0;

                margin: 0;

            }

            .father{

                width: 400px;

                height: 300px;

                background-color: red;

            }

            .main{

                width: 100px;

                overflow: hidden;

                margin: 0 auto;

            }

            .child{

                width: 100px;

                height: 100px;

                background-color: blueviolet;

                margin: 0 auto;

                float: left;

            }

        </style>

    </head>

    <body>

        <div class="father">

            <div class="main">

                <div class="child">

                </div>

            </div>

        </div>

    </body>

</html>

浮动盒子居中

二丶文本属性和字体属性

　　1.文本对齐

　　　　text-align属性规定元素中的文本的水平对齐方式

　　　　属性值: none | center | left | right | justify

　　2.文本颜色

　　　　color 属性

　　3.文本首行缩进

　　　　text-indent属性规定元素首行缩进的距离,单位建议使用em

　　4.文本修饰

　　　　text-decoration属性规定文本修饰的样式

　　　　属性值;none | underline(下划线) | overline(定义文本上的一条线) | line-through(定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值)

　　5.行高

　　　　line-height就是行高的意思,指的就是一行的高度

　　6.字体大小

　　　　font-size表示设置字体大小,如果设置成inherit表示继承父元素的字体大小值

　　7.字体粗细

　　　　font-weight表示设置字体的粗细

　　　　属性值: none(默认值,标准粗细) | bold(粗体) | border(更粗) | lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold) | inherit(继承父元素字体的粗细值)

　　8.字体系列

　　　　font-family

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

　　　　如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值.如果都不支持则显示宋体.

　　9.行高

　　　　line-height

　　　　单行文本垂直居中:

　　　　　　行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本.

　　　　多行文本垂直居中:

　　　　　　行高的高度不能小于字体的大小,不然上下字之间会紧挨一起

　　10.font-family

　　　　字体设置需注意:

1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，

比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，

那么就会变成宋体

页面中，中文我们只使用： 微软雅黑、宋体、黑体。

如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

2.为了防止用户电脑里面，没有微软雅黑这个字体。

就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，

没有安装微软雅黑字体，那么就是宋体：

font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。

3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，

就自动的变为后面的中文字体：

font-family: "Times New Roman","微软雅黑","宋体";

4.所有的中文字体，都有英语别名，

我们也要知道： 微软雅黑的英语别名：

font-family: "Microsoft YaHei";

宋体的英语别名： font-family: "SimSun";

font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字号的百分之多少。

一般来说，都是大于100%的，因为行高一定要大于字号。

font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;

反过来，比如： font:16px/48px “宋体”;

等价于 font:16px/300% “宋体”

字体设置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            text-decoration: underline;

        }

        div{

            width: 200px;

            height: 240px;

            /*line-height: 200px;*/

            background-color:red;

            /*text-align: right;*/

            /*两端对齐*/

            /*text-align: justify;*/

            /*首行缩进*/

            /*text-indent: 2em;*/

            /*font-size: 14px;*/

            /*text-decoration: inherit;*/

            /*font-weight: 800;*/

            /*font-family: "Microsoft Yahei"*/

            /*font-family: '华文行楷'*/

            font: 12px/240px '华文行楷';

        }

        a{

            text-decoration: none;

        }

        a:hover{

            text-decoration: line-through;

        }

    </style>

</head>

<body>

    <div>

        武小猪武小猪

    </div>

    <a href="#">百度一下</a>

</body>

</html>

文本属性和字体属性

三丶background

　　background-color 属性表示背景颜色

　　background-img :表示设置该元素的背景图片,默认水平和垂直方向都上平铺

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

　　　　属性值:   repeat: 默认,背景图像将在垂直方向和水平方向重复

　　　　　　　　repeat-x :  背景图像将在水平方向重复

　　　　　　　　repeat-y : 背景图像将在垂直方向重复

　　　　　　　　no-repeat : 背景图像将仅显示一次.

　　　　　　　　inherit : 规定应该从父元素继承 background-repeat属性的设置

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

　　

　　雪碧图技术(精灵图技术)

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：

只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用

2）拼图维护比较麻烦

3）使CSS的编写变得困难

4）CSS 雪碧调用的图片不能被打印
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            div{

                height: 100px;

                width: 200px;

                /*background-color: rgb(0,255,255);*/

                /*background-color: rgba(0,0,0,.6);*/

                background: #999;

            }

        </style>

    </head>

    <body>

        <div></div>

    </body>

</html>

background

四丶定位

　　相对定位

　　　现象和使用:

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

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

　　　特性:

　　　　1.不脱标

　　　　2.形影分离

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

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

　　　用途:

　　　　1.微调元素位置

　　　　2.做绝对定位的参考(父相子绝)绝对定位会说到此内容

　　　参考点:

　　　　自己原来的位置做参考点

<!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: red;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: green;

                position: relative;

                top: 20px;

                left: 100px;

                /*设置元素的堆叠顺序*/

                z-index: 5;

            }

            .box3{

                width: 200px;

                height: 200px;

                background-color: blue;

                position: relative;

            }

            </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

    </body>

</html>

相对定位

　　绝对定位

　　　特性:

　　　　1.脱标  2.做遮盖效果,提成了层级.设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高.

　　　参考点:

　　　　一丶单独一个绝对定位的盒子

　　　　　　1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
　　　　　　2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

　　　　二丶以父辈盒子作为参考点

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

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

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

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

　　　　　　还要注意，绝对定位的盒子无视父辈的padding

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .box1{

            width: 200px;

            height: 200px;

            background-color: red;

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: green;

            position: absolute;

            top:40px;

            left:0;

        }

        .box3{

            width: 250px;

            height: 200px;

            background-color: blue;

        }

    </style>

</head>

<body style="height: 2000px;">

    <!--  -->

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</body>

</html>

绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .father{

            width: 992px;

            height: 460px;

            background-color: red;

            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>

父相子绝

　　如何让一个绝对定位的盒子居中

　　　　left:50%

　　　　margin-left:     宽度的一半

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- <link rel="stylesheet" href="header.css">

    <link rel="stylesheet" href="content.css"> -->

    <!-- <link rel="stylesheet" href="main.css"> -->

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        body{

            font-size: 14px;

        }

        ul{

            list-style: none;

        }

        a{

            text-decoration: none;

        }

        input{

            border: 0;

            outline: 0;

        }

        .father{

            width: 100%;

            height: 200px;

            background-color: red;

            position: relative;

        }

        .box{

            width: 400px;

            height: 100px;

            background-color: green;

            position: absolute;

            /**/

            left: 50%;

            margin-left: -200px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box"></div>

    </div>

</body>

</html>

让绝对定位的盒子居中

　　固定定位

　　参考点:浏览器的左上角

　　作用:固定导航栏  返回顶部  小广告

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        body{

            padding-top: 80px;

        }

        .header{

            width: 100%;

            height: 80px;

            background-color: red;

            /*脱离了标准文档流*/

            /*参考点：是以浏览器的左上角*/

            position: fixed;

            top:0;

            left: 0;

            z-index: 10000;

        }

        .active{

            position: relative;

        }

    </style>

</head>

<body>

    <div class="header"></div>

    <p>alex1</p>

    <p>alex2</p>

    <p>alex3</p>

    <p>alex4</p>

    <p>alex5</p>

    <p>alex6</p>

    <p>alex7</p>

    <p>alex8</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p class="active">alex6666</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

</body>

</html>

固定定位

　　z-index

　　　　1.z-index值表示谁压着谁,数值大的压盖住数值小的

　　　　2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index

　　　　3.z-index值没有单位,就是一个正整数,默认的z-index值为0,如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素.

　　　　4.从父现象:父亲怂了,儿子再牛逼也没用

浮动的补充丶文本和字体属性丶background丶定位的更多相关文章

  1. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

  2. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  3. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  4. python全栈开发day40-浮动的四大特性，浮动带来的问题和解决问题，文本属性、字体属性和颜色介绍

    一.昨日内容总结 1.盒模型及其属性 2.文本级标签.行内块.块级标签 3.继承性.层叠性.权重 4.浮动四大特性 # 浮动元素脱离标准文档流 # 贴靠 # 字围效果 # 自动收缩或紧缩 二.今日内容 ...

  5. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  6. 文本属性和字体属性,超链接导航栏案例 background

    文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...

  7. CSS样式----CSS属性：字体属性和文本属性（图文详解）

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  8. css 文本属性和字体属性

    1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. css 01-CSS属性：字体属性和文本属性

    01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...

随机推荐

  1. 分布式文件系统之FastDFS

    环境引入: 在一个大型的教育官网,会拥有大量优质的视频教程,并且免费提供给用户去下载,文件太多如果高效存储?用户访问量大如何保证下载速度?分布式文件系统是解决这些问题的有效方法之一 一.什么是文件系统 ...

  2. 高阶篇：4.1）QFD质量功能展开-总章

    本章目的:了解QFD概念和作用,为FMEA打下基础. 1.QFD定义 质量功能展开QFD(Quality Function Deployment),是把顾客或市场的要求转化为设计要求.零部件特性.工艺 ...

  3. HashSet存储过程中如何排除不同的自定义对象？

    HashSet HashSet存储过程中如何排除不同的自定义对象? 先看一个小demo public class Demo1 { public static void main(String[] ar ...

  4. [转] ScalaTest测试框架

    [From] https://blog.csdn.net/hany3000/article/details/51033610 ScalaTest测试框架 2016年04月01日 02:49:35 阅读 ...

  5. 主库binlog被purge的情形

    1.演示实验环境 --主库版本: root@(none)>show variables like 'version'; +---------------+-------------------- ...

  6. Jmeter使用指南----压力测试工具

    来源: https://blog.csdn.net/u012111923/article/details/80705141 https://www.cnblogs.com/st-leslie/p/51 ...

  7. (转)linux基本变量学习：位置变量$0 、$1 shift轮替、本地变量、环境变量、特殊变量

    原文:http://blog.51cto.com/woyaoxuelinux/1863045 shell: 弱类型编程语言 强:变量在使用前,必须事先声明,甚至还需要初始化: 弱:变量用时声明,甚至不 ...

  8. Apache和Tomcat的整合过程（转载）

    一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache只是作为一个转发,对jsp的处理是由 ...

  9. Node.js Express4.x生成程序骨架

    express 4.x版本中将命令工具分出来了,需要再安装一个命令工具,执行命令“npm install -g express-generator”完成后再测试就可以了. 最后通过"expr ...

  10. Linux上用户之间对话

    Linux上用户之间对话 昨天想在CentOS7上与另外一个用户对话,但把命令忘记了,特此记录下来. Write命令 write命令是单向发送一条消息给同机器的Linux用户.首先通过who命令查看谁 ...