CSS层叠样式表

1.CSS简介

1.1 CSS简述

CSS：层叠样式表（英文全称： Cascading Style Sheets）:

是一种用来表现HTML样式的语言，CSS不仅可以静态地修饰页面，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体，字号样式，支持几乎所有的网页对象和模型样式编辑的能力

1.2为什么需要样式表

是为了实现内容与样式的分离：

1）HTML：负责页面的结构与内容 2）CSS：样式表负责页面外观的渲染(相当于华丽的衣服)。

CSS的特性：

1）内容与表现分离。  2）网页的表现统一，容易修改。 3）丰富的样式，使得页面布局更加灵活。 4）减少网页代码量，增加网页的浏览速度，节省网络带宽  5）运用独立于页面的CSS，有利于网页被搜索引擎收录  6）由浏览器解释运行 7）不区分大小写

2.CSS语法  

2.1 CSS基本语法

注）选择器： 选择器就是找到你要渲染的那个HTML标签

例子：

2.2 CSS选择器

1.基本选择器三种：

1）HTML标签选择器：直接作用于某个HTML标签

2）类选择器：可在页面中被多次使用

3）ID选择器：作用于同一个ID的某个资源，同一个页面只能使用一次

注：标签名称直接加括号写样式表，类选择器需要在html元素的class属性中添加类名，很多个html元素都可以使用一个类选择器， 

2.层叠选择器  

1）后代选择器 ：E F选择所有被E元素包含的F元素

 

2）子选择器：E>F选择所有作为E元素的子元素F（只选择第一代子元素）

3)群组选择器： 多个选择器通过逗号连接而成，利用群组选择器同时声明份额改革相同样式

3.伪类选择器：   

1）first-of-type: 选择一组子元素中的第一个（即使有其他元素，也不会受到影响）

2）last-of-type:选择一组子元素的最后一个（即使有其他子元素，也不会受到影响）

3.nth-of-type(): 使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）

2.3 CSS引入方式

1）行内样式：写在某个标签中，只对本行有效。（内联样式），这样写就写死了，一般不用

2）内嵌样式：样式写在某个页面的style标签中，支队本页面有效。前面的例子都是内嵌样式。

3）外部样式表：将样式代码写在一个单独的文件中（.CSS文件），使用时要将这个.CSS文件导入使用。

2.4 CSS优先级 

1）引用方式优先级： 行内样式 > 内嵌样 > 外部样式

2）选择器优先级：ID选择器 > 类选择器（属性选择器，伪类选择器）>标签选择器

3)如果在同一选择器上，外部样式，内嵌样式，行内样式都对某一属性使用了样式，也就是存在样式叠加时，那么要使用以下三个原则决定到底哪一种有效。

就近原则：距离最近的样式有效。

顺序原则：这里顺序是指书写顺序，也就是最后书写（不是调用）的样式有效

精细原则：或者叫特殊原则。即选择器的指向约精细越优先

2.5 CSS继承

1.html文档树（DOM节点树）

整个html就是一个树型结构。它的根就是html。

2.CSS继承规则：

1）子标签可以继承父标签的样式风格

2）子标签的样式不会影响父标签的样式风格

3）一般只有文字文本具有继承特性，如文字大小，文字加粗，文字颜色，字体等

3.盒子模型 

3.1盒子模型

每个HTML元素都可以看作一个装了东西的盒子：
  1）宽度，高度：盒子本身具有宽度（width）和高度（height）

  2）内边距: 盒子里面的内容到盒子边框之间的距离即内边距（padding）

  3）边框：盒子本身的边框（border）。

  4）外边距：盒子边框外和其他盒子之间，还有外边距（margin）

1.外边距样式

2.边框样式

3.内边距样式

4.盒子模型尺寸 

1）盒子模型总尺寸=border（两个边框宽度） + padding（两个内边距宽度）+内容宽度

2）盒子模型内容占用控件=margin（两个外边框宽度）+盒子模型总尺寸

3.2 元素默认样式与CSS重置

常用元素默认样式：

1.标签的margin为8px

2.p标签的上下外边距为16px

3.h1标签的上下边距为21.440px

4.u1标签的上下外边距为16px，左边距为40px

CSS重置：在实际开发中为了兼容性，也为了开发者更好的设置自己想要的样式，那么凡是浏览模式的样式，都不会使用，这就是CSS重置

3.3 元素分类

1.三种元素 

元素分类有三种：行级元素（内联元素），块级元素，行内块级元素，块级元素

1）块级元素 ： div ，p，ul，h1....

2）内联元素（lnline行内元素）： span,a,strong....

3)  块级内联元素：img,table,form.....

3.4 块状元素，与内联元素的盒子模型

1.内联元素是从左到右向向排列，到最右端自动折行，即部独占一行，块级以块状显现，并和同级块一次垂直排列，左右撑满，即独占一行

2.块级元素可以包含内联元素和块级元素（p标签不能包含p标签）。但内联元素不能包含块级元素。

3.内联元素与块级元素属性的不同，还主要体现在盒模型属性上。

   1）内联元素它的宽度和高度是自动的，也就是由内容撑开的，因此设置width和height无效。但是可以设置line-height。

   2）块级元素的border无效，margin上下无效，padding上下无效，也就是padding和margin的left和right是可以设置的。

  3）img比较特殊，它的border，margin，padding是有效的。

3.5显示与隐藏

display样式有两个功能：

   1）控制元素的显示和隐藏

   2）块级元素和行级（内联）元素的转变

display样式的值有如下几种：

   

3.6内容溢出处理

如果块的尺寸是固定的，而内容却有可能超出其尺寸时，可以使用overflow.        overflow属性：设置当对象的内容超过其指定的高度或宽度时如何处理内容。

4.元素定位

4.1元素定位概念

为了实现网页整体布局，我们先要知道，一个元素是如何定位到页面上的某个位置的，这就是元素定位。元素定位有四种，可以使用position样式来设置元素定位，所以此属性值有四种：

1）static：静态定位（默认）。依据文档流定位。

2）relative：相对定位。以自身为基准，设置坐标（left，top，right，bottom），不脱离文档流

3）absolute:绝对定位。以父元素为基准，设置坐标（left，top，right，bottom），脱离文档流。

4）fixed:固定定位，以浏览器窗口为基准，设置坐标（left，top，right，bottom），脱离文档流

1.静态定位（文档流定位） 

特点: 1)将页面上的元素，按照html的书写顺序，从上到下，从左到右，依次排列

          2）内联元素部独占一行，块级元素独占一行

2.相对定位 

特点：1）以自身为基准，设置坐标（left，top，right，bottom），不脱离文档流。

           2）不脱离文档流，也就是说：相对定位元素仍然会被文档流中的其他元素所影响。

           3）根据坐标定位到新位置之后，并不回收原位置空间。

3.绝对定位  

特点：1）以父元素为基准，设置坐标，脱离文档流。

                 也就是说绝对定位将不会被文档流中的其他元素所影响。

           2）根据坐标定位到新位置之后，原位置控件会被回收。

           3）如果父元素也为relative或absolute定位，那么就以父元素为基准。

4.固定定位   

特点： 固定定位以浏览器窗口为基准，设置坐标（left，top，right，bottom），脱离文档流。

4.2 总结  

1.绝对定位不能扩展和维护，只能应用在某个局部

2.相对定位只限制自身，只能应用在某个局部

3.固定定位只限制自身，只能应用在莫格局部

4.所以在实际开发中，都使用文档流定位来进行页面布局，就是静态定位（默认），它能够随着页面元素的变化而自动调节

5.另外绝对定位元素和固定定位元素脱离了文档流，当这些元素位置重叠时，就会出现覆盖问题，此问题使用z-index样式解决，z-index样式的值是一个整形数，就表示元素所在的层级。

5.弹性布局

5.1.页面布局概述  

1）传统的DIV+CSS+float浮动（布局方式），适用于PC端。

2）自适应布局方式，要开发多套页面，服务器根据不同的客户端返回不同的页面

3）响应式布局方式，开发一套页面，根据媒体查询返回的结果，跳转布局以适用不同的客户端。

4）多布局方式，类似报纸排版的样式。

5）弹性布局，适用与PC端与移动端。

5.2.弹性布局介绍  

一个元素的display属性值设置为flex，那么这个元素中的子元素，就会遵循弹性布局的规则。

1.主轴与侧轴

弹性布局中默认存在两根轴，一个是水平方向的主轴，一个是垂直方向的侧轴。

1）主轴开始的位置叫做main start 结束位置叫做main end；

2）侧轴的开始位置叫做cross end；

3）侧轴永远垂直于主轴

2.flex-direction样式              

fiex-direction属性就是用来设置主轴的方向的。

完整例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                display: flex;           /*将body设置为弹性布局*/
                flex-direction: column;  /*这里设置为侧轴方向排列*/
            }
            .son{
                width: 100px;
                height: 100px;
                border: solid 2px #f90;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
    </body>
</html>

总结： 

1）在弹性容器中，子元素想要水平方向排列，那就在弹性盒子中设置：flex-direction:row

2）在弹性容器中，子元素想要垂直方向排列，那就在弹性盒子中设置：flex-direction:column

3）在弹性容器中，以前的“块状元素独占一行”，“内联元素不独占一行”，“元素水平排列时需要浮> 动”等等规则，一律不再有效。

3.flex-wrap样式

由于弹性布局中的子元素能自动伸缩，所以，当父容器此次小于子元素整体尺寸时，子元素不会自动换行，而是自动收缩

那么，如果想要让子元素自动换行可以用flex-wrap：wrap；

4. justify-content样式

以主轴方向为例：子元素水平方向排列后，默认依次靠左排列。如果向让子元素居中，居右等，那么就可以设置justify-content样式。值有五种：

1.flex-start(默认)：左对齐

2.flex-end: 右对齐

3.center: 居中。

4.space-between: 两端对齐，子元素之间的间距都相等。

5.space-around: 每个子元素两次的间距相等。所以子元素之间间距比子元素到边框间距大一倍

5.align-items与align-content样式 

以主轴方向为例：子元素水平方向排列后，如果想让子元素垂直居中，那么就可以设置align-items样式。常用值为三种：

1.flex-start(默认) ：上对齐。

2.flex-end: 下对齐

3.center: 居中。

 

再来看align-content样式: align-content样式对单行没有效果，对多行有效果，而且是将多行整体作为一个这个题附加效果的。

总结：在弹性盒子中，子元素侧轴对齐方式可以使用align-items或align-content

1.align-items对单行和多行都有效，align-content对单行无效

2.在多行中，align-items让每一行都在各自范围中垂直居中，align-content将多行作为一个整体，然后居中。

6.flex样式

如果想让每个子元素所占空间不一致，那么可以使用flex给子元素分配控件。使用flex时要注意以下两点：

1.flex样式是设置在子元素上的。

2.如果设置了flex，那就说明要给子元素按比例分配空间，因此width与height就失效了。

实例1：
 

上面实例中：flex样式后跟1个值：表示子元素所占空间的比例。三个div的宽度分别是窗口的：1/4，1/2，1/4

实例2：

上面实例中：flex样式后跟3个值：

1.第一个值：子元素尺寸自动放大值

2.第二个值：子元素尺寸自动缩小值

3.第三个值：子元素尺寸

例如：

      1） 0 1 auto（默认）：父元素尺寸变化时，子元素不放大，只缩小，尺寸自动充满。

       2） 1 1 auto 父元素尺寸变化时，子元素自动放大缩小，尺寸自动充满

       3） 0  0 300px： 父元素尺寸变化时，子元素不放大缩小，尺寸固定

总结：可以使用flex让一行的所有子元素自动盛满窗口宽度。而且每个子元素的宽度可以按比例进行分配。

6.布局实例

6.1典型1-3-1布局

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    <style>
        header,nav,article, section,aside,footer{
            background-color: turquoise;
        }

        .container{
            width: 1200px;
            margin: 0 auto;
        }

        .container header{
            width: 100%;
            height: 60px;
            margin-bottom: 10px;
        }

        .container nav{
            width:100%;
            height: 60px;
            margin-bottom: 10px;
        }

        .container .main{
            width: 100%;
            margin-bottom:10px;
            display:flex;

        }


        .container .main article{
            flex: 0 0 200px;

        }

        .container .main section{
            flex:1;
            margin:0 10px;
        }

        .container .main aside{
            flex: 0 0 200px;
        }

        .container footer{
            width: 100%;
            height: 60px;
        }


    </style>



</head>
<body>
    <div class="container">
        <header></header>
        <nav></nav>

        <div class ="main">
            <article>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
            </article>


            <section>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
            </section>
        
            <aside>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
                bbbbb<br>
            </aside>
        </div>
        <footer></footer> 
    </div>

    

</body>
</html>

6.2 典型自适应高度后台管理布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>

    <style>
        html,body, .container{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
        }
        .container{
            display:flex;
            flex-direction: column;
        }
        .container header{
            flex: 0 0 60px;
            width:100%;
            background-color:#B3C0D1;
        }
        .container .main{
            flex: 1; 
            width:100%;
            display: flex;
        }
        .container .main aside{
            flex:0 0 200px;
            background-color: #D3DCE6;


        }

        .container .main section{
            flex: 1;
            background-color: #e9eff3;
        }

        .container footer{
            flex: 0 0 60px;
            background-color:#B3C0D1;

        }   

        
    </style>



</head>
<body>
    <div class="container">
        <header></header>
        <div class="main">
            <aside></aside>
            <section></section>
        </div>
        <footer></footer>  
    </div>
    
</body>
</html>