HTML+CSS知识总结第四期

一.CSS基础知识总结（接上篇）

（1）标签显示模式

                1.块级元素：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

                特点：会独占一行  可以设置宽度高度  块级元素可以容纳任意元素  主要有div ， h1-h6， p ， hr ，br ，ul ，li ，ol 标签

                2.行内元素：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

                特点：不会独占一行  不可以设置宽度高度  行内元素里面只能容纳文本和图片 主要有span， input， a ，b， i ，s ，u 标签

                3.行内块元素：

                 特点：不会独占一行   可以设置宽度高度   可以容纳任意元素和内容

                4.标签显示模式转换：display   块转行内：display:inline; 行内转块：display:block; 块、行内元素转换为行内块： display: inline-block;

         （2）背景样式

                1.背景颜色：background-color（接第二期）

        .q {

                    width: 150px;

                 height: 150px;

                    background-color: rgba(0, 213, 255, 0.5);

            text-align: center;

                }

                2.背景图片：background-image

                3.图片重复方式：background-repeat

                repeat ：背景图像将在垂直方向和水平方向重复。 repeat-x ：背景图像将在水平方向重复。 repeat-y ：背景图像将在垂直方向重复。 no-repeat ：背景图像将仅显示一次。

                4.图片位置：background-position

 .w {

            width: 900px;

            height: 1000px;

            text-align: center;

            background-image: url(./3333.jpg);

            background-repeat: no-repeat;

            /* background-repeat: repeat-y; */

            /* background-repeat: repeat-x; */

            /* 图片是否平铺 */

            /* no-repeat 不平铺  repeat-x  水平平铺  repeat-y 垂直平铺 */

            background-position: 250px 250px;

            /* 背景图片的定位方式 */

            /* 设置坐标 左上角为原点 向左边极限为负  向上边极限为负  x,y向中心为正 */

 }

                5.背景附着：background-attachment  设置背景图像是否固定或者随着页面的其余部分滚动。属性值：scroll | fixed

                6.背景尺寸：background-size

.e{

            width: 800px;

            height: 600px;

            /* background-image: url(./3333.jpg); */

            /* background-color: rgba(0, 213, 255, 0.5);  透明度*/

             background-attachment: fixed;  

            /* 背景附着 */

            background-size: 100% 100%;

            /* 背景尺寸 */

        }

                小技巧：background: color image repeat attachment position（简写）

                6.精灵图：CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

                特点：1. 精确测量，每个小背景图片的大小和 位置。 2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

.c {

            /* 精灵图 */

            width: 150px;

            height: 150px;

            background-image: url(./3333.jpg);

            background-position: -319px -250px;

            /* 检查 调大小 选择数字 用上下键进行加减  先找位置 再调大小 找到自己想要的位置 */

        }

        （3）盒子模型

                1.盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）内边距（padding）边框（border）内容（content）。

                2.盒子边框：border : border-width || border-style || border-color

                border-width 定义边框粗细，单位是px

                border-style  边框的样式  solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线  double：边框为双实线

                border-color 边框颜色

                border-top(上边框)   border-bottom(下边框) border-left(左边框)  border-right(右边框)

                        border: 1px solid red; 没有顺序

c{

            width: 100px;

            height: 100px;

            border: 5px solid red;

            /* 边框 线的粗细程度 边框的样式 颜色*/

            border-top: 15px solid rgba(255, 255, 255, 0);

            border-right: 15px dashed rgba(0, 0, 255, 0);

            border-left: 15px double rgba(0, 128, 0, 0);

            border-bottom: 15px dotted pink;

        }

                方框变成圆：

 .b{

            width: 100px;

            height: 100px;

            border: 1px solid red;

            /* border-radius: 20px 20px 20px 20px ; */

            /* 边角圆化   左上角  左下角 右下角 右上角*/

            border-radius: 50%;

            /* 圆 */

            background-image: url(./3333.jpg);

        }

                风车：

    

 结果展示：