前端之----CSS

第一章 CSS的介绍与引入方式

一, CSS介绍

现在的互联网前端分三层：

HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开

降低网络流量

使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

二, CSS的引入方式

行内引入:(优先级最高)

<div style="color: brown">乳娃娃</div>

内接引入:

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        div{
            color: aqua;
        }
    </style>
</head>

外接引入--链接式:

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <link rel="stylesheet" href="index.css">
</head>

外界引入--导入式:

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style type="text/css">
        @import url('index.css');
    </style>
</head>

第二章 CSS选择器

一, 基本选择器

标签选择器
类选择器
id选择器
通用选择器

标签选择器:

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        /*标签选择器*/
        div{
            color: brown;
        }
    </style>
</head>
<body>
<div>我是测试代码,后面都是我</div>
</body>

类选择器:

所谓类：就是class,class与id非常相似,任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        .big{
            size: 40px;
        }
        .lv{
            background-color: antiquewhite;
        }
        .line{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
        <p class="lv big">我是p1</p>
        <p class="lv line">我是p2</p>
        <p class="ling big">我是p3</p>
    </div>
</body>

id选择器(#):

同一个页面中id不能重复。

任何的标签都可以设置id ，id命名规范:字母,数字,下划线;大小写严格区分aa和AA是两个不一样的属性值

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        #box1{
            font-size: 40px;
        }
        #box2{
            color: antiquewhite;
        }
        #box3{
            background-color: brown;
        }

    </style>
</head>
<body>
    <div id="box1">我是div1</div>
    <div id="box2">我是div2</div>
    <div id="box3">我是div3</div>
</body>

通用选择器:

所有的标签都会被选中,常用于消除样式

*{
   color: yellow;
}

二, 高级选择器

后代选择器
子代选择器
毗邻选择器
弟弟选择器
属性选择器
并集选择器(组合选择器)
交集选择器

后代选择器:

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        /*后代选择器就是不管嵌套多少层都能找到*/
        div p{
            color: #02ff09;
        }
    </style>
</head>
<body>
    <div>
        我是div自己
        <p>我是div的p后代</p>
        我是div自己
    </div>
</body>

子代选择器:

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

div>p{
     color: yellowgreen;
}

毗邻选择器: +

div>p: 找div后面的的兄弟标签中的第一个p标签

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        span+a{
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        <a>我是a1标签</a>
        <span>span标签</span>
        <a>我是a2标签</a>  <!--找到了这个-->
        <a>我是a3标签</a>
    </div>
</body>

弟弟选择器: ~

div~p: 找div后面的的兄弟标签中的所有p标签

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        span~a{
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        <a>我是a1标签</a>
        <span>span标签</span>
        <a>我是a2标签</a><!--找到了这个-->
        <a>我是a3标签</a><!--找到了这个-->
    </div>
</body>

属性选择器: [属性]/[属性="值"]

div[title], div[title='aaa'] 找到所有含有title属性的div/找到所有title属性='aaa'的div

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        a[href]{
            color: bisque;
        }
        input[type="text"]{
            background-color: antiquewhite;
        }
        label[for="2"]{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.baidu.com">百度一下</a>
        <a>我是一个没有href属性的a标签</a>
    </div>
    <div>
        <label for="3">用户名:</label><input type="text" id="3">
        <label for="2">用户名:</label><input type="password" id="2">
    </div>
</body>

并集选择器:

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

<head>
    <meta charset=GBK">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h3,a{
            color: brown;
        }
    </style>
</head>
<body>
    <h3>我是一个三级标题</h3>
    <a href="http://www.taobao.com">我是一个a标签</a>
    <span>我是没人管的span标签</span>
</body>

交集选择器:

使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：h4.active

比如有一个<h4 class='active'></h4>这样的标签。那么它表示两者选中之后元素共有的特性。

<head>
    <meta charset=GBK">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h4.active{
            color: brown;
        }
    </style>
</head>
<body>
    <h4>我是一个没有class的h4标签</h4>
    <h4 class="active">我是一个有class的h4标签</h4>
</body>

三, 其他选择器

伪类选择器
伪标签选择器

伪类选择器:

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，一定要遵循"爱恨准则" LoVe HAte

<head>
    <meta charset=GBK">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{
            font-size: 80px;
        }
        /*link表示没有被访问的a标签的样式*/
        a:link{
            color: brown;
        }
        /*visited表示访问过后的a标签的样式*/
        a:visited{
            color: aquamarine;
        }
        /*hover表示鼠标悬停时a标签的样式*/
        a:hover{
            background-color: darkorchid;
        }
        /*active表示鼠标摁住的时候a标签的样式*/
        a:active{
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>

伪元素选择器:

<head>
    <meta charset=GBK">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*设置第一个字符的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;
        }
        /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content: '前缀';
        }
        /*在....之后 添加内容，使用非常频繁 通常用于（清除浮动）*/
        p:after{
            content: '后缀';
            color: aqua;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>我是一个普通的p元素</p>
</body>

四, CSS选择器优先级

选择器	优先等级(数值越大优先级越高)
行内引入	1000
id选择器	100
类选择器	10
标签选择器	1
继承	0

所有的值可以累加但是不进位
优先级如果相同,写在后面的生效

div.a{
    background-color: green !important; 提高样式的优先级到最高
}

第三章盒模型

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。称为这种盒子叫盒模型。

盒模型有两种：标准模型和IE模型。主要使用标准模型。

盒模型示意图:

盒模型的属性:

代码	作用
width	内容的宽度
height	内容的高度
padding	内边距，内边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
border	边框,指的是盒子的宽度
margin	外边距,盒子外边框到附近最近盒子的距离

盒模型的计算:

如果一个盒子设置了padding，border，width，height
盒子的真实宽度 = width+2*padding+2*border
盒子的真实高度 = height+2*padding+2*border

如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width

一, padding的设置

padding有四个方向，分别描述4个方向的padding。描述的方法有两种：

# 指明设置
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

# 综合设置  空格隔开
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上  左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

标签的默认padding: 比如ul，ol标签，有默认的padding-left值

清除页面标签的默认pandding和margin:

*{
  padding:0;
  margin:0;    
}

二, border的设置

border:边框的意思，描述盒子的边框

边框有三个要素：粗细线性样式颜色（如不写颜色默认为黑色。如不写粗细不显示边框。只写线性样式，默认有上右下左 3px宽度的实体黑色边框。）

# 按照三要素来设置border
border-width: 3px;
border-style: solid;
border-color: red;

# 设置顺序上 右 下 左
border-width: 5px 10px;   # 上下  左右
border-style: solid dotted double dashed; # 上 右 下 左
/*border-style: 实线，点状，双线，虚线*/
border-color: red green yellow;  #  上下  右  左

# 按照方向分别设置小属性
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

# 按照方向综合设置
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

border:none；
border：0；
# 表示border没有设置样式。

# 给图形设置圆角
border-radius: 50px;

# 利用border画三角形
# 把content的大小设为0,把border的右下左设为无色
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 40px;
            border-color: chartreuse transparent transparent transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>

三, margin的设置

margin：外边距的意思。表示边框到最近盒子的距离

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;

# margin的塌陷
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
                padding: 0;
                margin: 0;
            }
        .father{
            width: 400px;
            border: 20px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 10px;
        }
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
# 当给两个标准流下兄弟盒子设置垂直方向上的margin时，那么以较大的为准，称这种现象叫塌陷。没办法解决.在布局垂直方向盒子的时候注意margin的用法。当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题,而是两个margin的和

# margin设置盒子居中
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: lightcoral;
            /*水平居中盒子*/
            margin: 0 auto;
            /*水平居中文字*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div>我是一个div盒子</div>
</body>
# 0表示上下外边距为0,auto表示左右外边距为尽量远离两侧
# margin-right:auto;表示盒子尽可能远离右侧
# 如果盒子设置浮动,则居中失效
# 设置margin: 0 auto;水平居中,盒子必须有明确的width属性

四, 使用margin的坑,善于使用padding

margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

实现此效果:

# 错误示例
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
# 此时父盒子没有border,那么子盒子margin-top实际上踹的是“流”,这样会把父盒子一起带下来

# 版本二  给父盒子加上border,父盒子就不会随着子盒子下来
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
            border: solid;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

# 正确方式
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
            /*设置父盒子的padding内边距: 上为50px*/
            padding-top: 50px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

第四章标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

标准文档流下有哪些微观现象？

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
文字还有图片大小不一，都会让页面的元素出现高矮不齐的现象，但是在浏览器查看的页面总会发现底边对齐
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示文字

第五章块级元素和行内元素的转换

在HTML的知识中,将标签分过类,当时分为了：文本级、容器级.

也了解了行内元素和块级元素的分类，其实这种分类方式是从CSS的角度讲的

行内元素:

与其他行内元素并排
不能设置宽、高。默认的宽度，就是文字的宽度

块级元素:

霸占一行，不能与其他任何元素并列
能接受宽、高。如果不设置宽度，那么宽度将默认为父块的100%

块级元素和行内元素的相互转换:

可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”

一, 块级元素转行内元素

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度
此时这个div可以和别人并排了

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            background-color: blue;
            display: inline;
        }
        .son{
            background-color: red;
            display: inline;
        }
    </style>
</head>
<body>
    <div class="father">我是div1</div>
    <div class="son">我是div2</div>
</body>

二, 行内元素转换为块级元素

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父块

三, 行内块

display: inline-block;

既可以设置宽高,又不独占一行

第六章浮动与定位

标准流里面的限制非常多，导致很多页面效果无法实现。如果现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位

一, 浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性

float：表示浮动的意思。它有四个值

none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动

代码示例:

# 浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了
# 并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版
# 所以此时father-div没有子块支撑,就看不到了
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            background-color: blue;
        }
        .son1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: right;
        }
        .son2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

# 消除浮动对父块的影响的方法
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*使用伪元素选择器*/
        .father:after{
            content: '';
            clear: both;
            display: block;
        }
        .father{
            background-color: blue;
        }
        .son1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: right;
        }
        .son2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

# overflow 清楚法
# 将父盒子的overflow设为: hidden scroll auto 均可清除浮动

浮动的四大特性：

浮动的元素会脱离标准文档流

脱标：就是脱离了标准文档流

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        span{
            background-color: green;
            width: 300px;
            height: 50px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">红盒子</div>
    <div class="box2">黄盒子</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了

说明:

红盒子设置了浮动，黄盒子没有设置浮动，红盒子脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为黄盒子是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。
所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

浮动的元素互相贴靠

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">红盒子</div>
    <div class="box2">黄盒子</div>
    <div class="box3">绿盒子</div>
</body>

效果:

如果父元素有足够的空间，那么第一个子元素靠着边,后面的元素靠着前面的元素,如果前面的元素后面没有足够的空间,就去找更前面的元素,直到靠着父元素的边

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

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
            padding: 0;
            margin: 0;
        }
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            float: left;
        }
        p{
            background-color: #666;
        }

    </style>
</head>
<body>
    <div></div>
    <p>
        我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字
    </p>
</body>
</html>

效果: 当div浮动，p不浮动，div的层级提高，div遮盖住了p，但是p中的文字不会被遮盖，此时就形成了字围效果

收缩的效果

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        我是一个盒子
    </div>
</body>

注意:

关于浮动，一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动

浮动的问题和清除浮动

浮动的问题:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 1126px;
            /*子元素浮动 父盒子一般不设置高度*/
            /*出现这种问题，要清除浮动带来影响*/
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    <div class="father2"></div>
</body>

效果: 如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局

浮动元素确实能实现页面元素并排的效果，这是它的好处，同时它还带来了页面布局极大的错乱,所以要清除浮动

消除浮动:

给父盒子设置高度

它的使用不灵活，一般会用于页面中固定高度的，并且子元素并排显示的布局。比如：导航栏

`clear:both`

clear：意思就是清除的意思。

有三个值：

left：当前元素左边不允许有浮动元素
right：当前元素右边不允许有浮动元素
both：当前元素左右两边不允许有浮动元素

在浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 1126px;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }
        .box4{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <!-- 无缘无故加了div元素  结构冗余 -->
    </div>
    <div class="father2"></div>
</body>

伪元素清除法(常用)

给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
```
.clearfix:after{
    /*必须要写这三句话*/
    content: '';
    clear: both;
    display: block;
}
```

二, overflow

overflow属性规定当内容溢出元素框时发生的事情

说明：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

有五个值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

三, 定位

定位有三种：相对定位、绝对定位、固定定位

一, 相对定位relative

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

现象和使用：

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

2.设置相对定位之后，才可以使用四个方向的属性： top、bottom、left、right

特性：1.不脱标 2.形影分离 3.依然占据原位置

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

用途：

1.微调元素位置

2.做绝对定位的参考（父相子绝）

二, 绝对定位absolute

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

参考点(重点)：

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

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

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

父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
如果父元素设置了定位，那么以父元素为参考点。那么如果所属父元素没有设置定位，那么以父辈元素设置定位的为参考点
不仅仅是父相子绝，父绝子绝，父固子绝，都是以父辈元素为参考点

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

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

设置绝对定位的盒子居中:

.box{
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
/*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。设置子元素绝对定位，然后left:50%; margin-left等于负的(元素宽度的一半)，实现绝对定位盒子居中*/

三, 固定定位fixed

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

特性: 1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div.father{
            width: 400px;
            height: 1000px;
            background-color: lightgray;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .d1{
            background-color: red;
            /*相对定位，占据原位置*/
            position: relative;
            left: 200px;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*绝对定位，并设为居中*/
            position: absolute;
            left: 50%;
            margin-left: -50px;
        }
        .d3{
            /*普通盒子*/
            background-color: green;
        }
        .d4{
            background-color: linen;
            /*固定定位，相对于浏览器来说*/
            position: fixed;
            bottom: 200px;
            right: 200px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
    <div class="d4">
        我是广告
        <img src="timg.jpg" alt="">
    </div>
</body>

四, z-index

指的就是各个盒子重叠在一起谁上谁下的问题

四大特性:

z-index 值表示谁压着谁，数值大的压盖住数值小的
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0,如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了的元素，永远压住没有定位的元素
从父现象：父元素低，子元素再高也不行

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 600px;
            background-color: gray;
            z-index: 0;

        }
        .box2{
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

第七章拾遗

一, 文本属性

属性	描述	属性值	说明
text-align	文本对齐方式	none,center,left,right,justify
color	文本颜色	rgb标识法,16进制表示法,单词表示法,rgba表示法
text-indent	首行缩进，单位建议em		em单位是一个相对单位,相对当前字体大小的像素是1em
text-decoration	规定文本修饰的样式	none underline overline line-throughinherit	默认下划线定义文本上的一条线定义穿过文本下的一条线继承父元素text-decoration属性的值
line-height	行高		针对单行文本垂直居中公式：行高=盒子高度，使文本垂直居中，只适用单行文本。针对多行文本垂直居中行高不能小于字体，不然字会紧挨一起。
text-shadow	阴影	[5px] [5px] [5px] [#FF0000]	[水平方向偏移量] ,[垂直方向偏移量],[模糊度], [阴影颜色]
text-overflow	文字溢出	[clip],[ellipsis]	[修剪文本],[显示省略号代表被修剪文本]
white-space	处理元素内的空白	[normal],[pre],[nowrap],[pre-wrap],[pre-line],[inherit]	[默认,空白被浏览器忽略],[空白会被浏览器保留],[文本不换行，直到遇到 `<br>`],[保留空白符序列，但正常地进行换行],[合并空白符序列，但是保留换行符],[继承父元素 white-space 属性的值]

二, 字体属性

属性	描述	属性值	说明
font-size	字体大小	px
font-weight	字体粗细	none/bold/border/lighter/100~900/inherit	默认值，标准粗细/粗体/更粗/更细/值，400=normal，700=bold/继承父元素字体的粗细值
font-family	字体系列	"Microsoft Yahei","微软雅黑", "Arial", sans-serif	浏览器使用它可识别的第一个值

三, 背景图片

给元素设置padding之后，发现padding的区域背景和content部分的一致

background-color —— 背景颜色

css: 
   <style>
       .demo{
           width: 50px;
           height: 100px;
           background-color: greenyellow;
       }
    </style>
html:
<body>
    <div class="demo"></div>
</body>

background-image —— 背景图片

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 2000px;
            height: 2000px;
            background-image: url("timg.jpg");
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

那么发现默认的背景图片，水平方向和垂直方向都平铺

background-repeat：设置背景图像的平铺方式

属性	作用
repeat	默认。背景图像将在垂直方向和水平方向重复
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeate	背景图像将仅显示一次
inherit	规定应该从父元素继承 background-repeat 属性的设置

background-position：设置背景图像的起始位置

可以从两个纬度上设定关键词：上中下左中右
垂直位置：top center bottom
水平位置：left center right
如仅规定了一个关键词，那么第二个值将是"center"
默认值：0 0;
这两个值必须挨在一起

background-attachment：设置固定的背景图像

属性	作用
scroll	默认值。背景图像会随着页面其余部分的滚动而移动
fixed	当页面的其余部分滚动时，背景图像不会移动
inherit	规定应该从父元素继承 background-attachment 属性的设置

滚动背景图片示例:

<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            height: 500px;
            background: url("shili.png") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: rgba(132,0,255,0.2);
        }
        .d2 {
            height: 500px;
            background-color: rgba(132,255,255,0.2);
        }
        .d3 {
            height: 500px;
            background-color: rgba(0,255,0,0.2);
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>

把所有的设置综合写在background中

background:red url("timg.jpg") no-repeat left center;

四, opacity

opacity: 0.5;调整d4对应的整个标签的透明度是50%
.box{
    opacity: 0.5;
}
<div class="box">
    我是示例盒子
	<img src="timg.jpg" alt="图片">
</div>

回到顶部

posted @ 2019-12-30 14:30 豆子V 阅读(140) 评论(0) 编辑收藏举报

刷新页面返回顶部

豆子V

生于忧患，死于安乐

前端之----CSS

第一章 CSS的介绍与引入方式

一, CSS介绍

二, CSS的引入方式

第二章 CSS选择器

一, 基本选择器

二, 高级选择器

三, 其他选择器

四, CSS选择器优先级

第三章盒模型

一, padding的设置

二, border的设置

三, margin的设置

四, 使用margin的坑,善于使用padding

第四章标准文档流

第五章块级元素和行内元素的转换

一, 块级元素转行内元素

二, 行内元素转换为块级元素

三, 行内块

第六章浮动与定位

一, 浮动

`clear:both`

二, overflow

三, 定位

一, 相对定位relative

二, 绝对定位absolute

三, 固定定位fixed

四, z-index

第七章拾遗

一, 文本属性

二, 字体属性

三, 背景图片

四, opacity

公告

豆子V

生于忧患，死于安乐

前端之----CSS

第一章 CSS的介绍与引入方式

一, CSS介绍

二, CSS的引入方式

第二章 CSS选择器

一, 基本选择器

二, 高级选择器

三, 其他选择器

四, CSS选择器优先级

第三章 盒模型

一, padding的设置

二, border的设置

三, margin的设置

四, 使用margin的坑,善于使用padding

第四章 标准文档流

第五章 块级元素和行内元素的转换

一, 块级元素转行内元素

二, 行内元素转换为块级元素

三, 行内块

第六章 浮动与定位

一, 浮动

clear:both

二, overflow

三, 定位

一, 相对定位relative

二, 绝对定位absolute

三, 固定定位fixed

四, z-index

第七章 拾遗

一, 文本属性

二, 字体属性

三, 背景图片

四, opacity

公告

第三章盒模型

第四章标准文档流

第五章块级元素和行内元素的转换

第六章浮动与定位

`clear:both`

第七章拾遗