CSS入门2-CSDN博客

本文链接：https://blog.csdn.net/ZWJAS/article/details/135418438

CSS

光标样式

可以使用 cursor 属性指定显示给用户的鼠标光标类型（形状），该属性常用的取值有：

1、url：需要使用的自定义光标的URL
2、default：默认光标，通常是一个箭头
3、auto：默认，浏览器设置的光标
4、crosshair：光标呈现为十字线
5、pointer：光标呈现为一只手
6、move：指示某对象可以移动
7、e-resize：指示矩形框的边缘可被向右移动
8、ne-resize：指示矩形框的边缘可被向上以及向右移动
9、nw-resize：指示矩形框的边缘可被向上以及向左移动
10、n-resize：指示矩形框的边缘可被向上移动
11、s-resize：指示矩形框发热边缘可被向下移动
12、se-resize：指示矩形框的边缘可被向下以及向右移动
13、sw-resize：指示矩形框的边缘可被向下以及向左移动
14、w-resize：指示矩形框的边缘可被向左移动
15、text：光标指示文本
16、wait：指示程序正忙
17、help：指示可用的帮助
18、not-allowed：禁止
19、no-drop：无法释放

url 值是指可以为元素定义一个自定义的图标作为光标形状，只是使用url时，最好在列表的末端始终定义一种普通的光标，这样，当没有由 URL 定义的可用光标时还可以替代显示普通光标。比如，我们可以这样定义：

案例：(鼠标指针（光标）类型)

    <style>
        img {
            /* cursor:鼠标指针， pointer:手型，move:移动 ,help:帮助，wait：等待， not-allowed：禁止 */
            /* cursor: no-drop; */
            cursor:url("./images/pointer02.png"),no-drop;
        }
    </style>
</head>
<body>
    <!-- 鼠标指针（光标）类型 -->
    <img src="./1.jpg" alt="图" title="图" />
</body>

案例：(使用背景图片实现鼠标进入改变现实的内容)

    <style>
        p {
            width: 200px;
            height: 120px;
            background-color: lime;
            background-image: url("./2.jpg");
            background-repeat: no-repeat;
            background-position: -30px -105px;
        }
        p:hover {
            cursor: pointer;
            background-position:-300px -105px;
        }
    </style>
</head>
<body>
    <!-- 使用背景图片实现鼠标进入改变现实的内容 -->
    <p></p>
</body>

列表样式

列表样式主要是列表项样式：list-style-type，list-style-image

list-style-type属性用于控制列表中列表项标志的样式。该属性的取值需要依据列表的类型

list-style-image属性可以用来替换列表项的标记

无序列表

有序列表

在这里插入图片描述

案例：

    <style>
        ul {
            /* 列表样式 :none 没有，disc:实心圆 默认,circle：空心圆,square:方形*/
            /* list-style-type:square; */
            /* 自定义图片 */
            list-style-image: url("./images/pointer01.png");
        }
        ol {
            list-style-type:lower-alpha; /* decimal:数字,decimal-leading-zero:带0的数字*/
        }
    </style>
</head>
<body>
    <!-- 列表样式 -->
    <ul>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
        <li>aaaa</li>
    </ul>
    <hr />
    <ol>
        <li>多少分都是</li>
        <li>多少分都是</li>
        <li>多少分都是</li>
        <li>多少分都是</li>
        <li>多少分都是</li>
        <li>多少分都是</li>
    </ol>
</body>

列表项图像

通过为list-style-image属性赋值一个图像的URL来显示图像标志。但是在设置图像标志时，建议始终规定一个 list-style-type属性以定义常规标志。这样做的好处在于，如果图像不存在或者因为某种原因导致图像不可用时，可以替换显示常规标志
```
ol{
    list-style-image: url("images/list01.png");
}
```
注意：列表项图像设置的图像需要小尺寸的才便于显示

overflow属性

overflow属性规定当内容溢出元素框时如何处理，可能的取值为：

visible：内容不会被修剪，会呈现在元素框之外，为默认值
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是始终会显示滚动条以便查看其余的内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
其他属性：
overflow-x：hidden | scroll | auto
overflow-y：hidden | scroll | auto

<div>
    别指望减肥了，八戒走了十万八千里，也没见瘦下来，而且，他还吃素
</div>
<style>
    div{
        width: 200px;
        height: 100px;
        background: #ff4433;
        white-space: nowrap; /* 不换行 */
        /* word-wrap: break-word; 允许超出元素内容部分自动换行 */
        overflow: hidden; /* auto | scroll | 默认visible |*/
        overflow-x: hidden; /* auto | scroll | 默认visible |*/
        overflow-y: hidden; /* auto | scroll | 默认visible |*/
    }
</style>

案例：

    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: lime;
            /* 内容溢出的处理办法 */
            /* overflow: auto; hidden:隐藏，scroll：滚动条 */
            overflow: auto;
        }
    </style>
</head>
<body>
    <!-- overflow:内容溢出的样式 -->
    <div>
        231543254353453445dsfgdgyfdghfdgfdgdfghdfghfdgdfgdsgdsfgfdgdfgfdghfdhfdhfdhfd
        231543254353453445dsfgdgyfdghfdgfdgdfghdfghfdgdfgdsgdsfgfdgdfgfdghfdhfdhfdhfd
        231543254353453445dsfgdgyfdghfdgfdgdfghdfghfdgdfgdsgdsfgfdgdfgfdghfdhfdhfdhfd
        231543254353453445dsfgdgyfdghfdgfdgdfghdfghfdgdfgdsgdsfgfdgdfgfdghfdhfdhfdhfd
        231543254353453445dsfgdgyfdghfdgfdgdfghdfghfdgdfgdsgdsfgfdgdfgfdghfdhfdhfdhfd
       
    </div>
</body>

display属性

CSS中的display属性用于定义元素的布局方式和外观，让块级元素和行内元素相互转换。常见的取值有block、inline、inline-block、none等

none：让生成的元素根本没有框，该框及其内容不再显示，不占用文档中的空间
block块级：让行内元素（比如<a>元素）表现得像块级元素一样，设置width、height有效，独占一行
inline行内：让块级元素（比如<p>元素）表现得像内联或行内元素一样，设置width、height无效，一行可显示多个
inline-block行内块：设置width、height有效，一行可显示多个

案例:

    <style>
        /* p:first-child {
            width: 30px;
            height: 30px;
            background-color: aqua;
        }
        p {
            width: 30px;
            height: 30px;
            background-color:red;
        }
        span {
            width: 300px;
            height: 300px;
            background-color: lime;
        }
        img {
            width: 50px;
            height: 200px;
        } */
        p {
            display: inline; /*inline：行内元素 */
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        span {
            display: block; /* block:块级元素 */
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        a {
            display: inline-block; /* inline-block：行内块级*/
            width: 100px;
            height: 100px;
            background-color: lime;
        }

        p {
            display: none; /*none不显示*/
        }
    </style>
</head>
<body>
     <p>a</p>
     <p>b</p>
     <span>abc</span>
     <a href="#">点击</a>
     <img src="./images/01.jpg" />
</body>

盒子模型

盒子模型是指CSS中的一个重要概念，用来描述一个元素在页面中占据的空间和位置

在CSS中认为所有的HTML标签都是一个盒子，这些盒子有以下内容：边框border、内容content、内边距padding（内容与边框的距离）、外边距margin（盒子与盒子之间的距离）

在这里插入图片描述

盒子模型详解

每个盒子都有：边界、边框、填充、内容四个属性。并且每个盒子都有尺寸。每个属性都包括四个部分：上、右、下、左这四部分，可同时设置，也可分别设置
```
盒子有尺寸，用CSS写法为宽度（width）和高度（height）
 width：标签的宽度 = 外边距 + 边框 + 内边距 + 内容 
 height：标签的高度 = 外边距 + 边框 + 内边距 + 内容 
盒子有边框，用CSS写法为上下左右边框（border）
盒子有内边距，CSS写法为上下左右内边距（padding）
盒子有外边距，CSS写法为上下左右外边距（margin）
```
在HTML中，所有的容器标签都可以认为是一个盒子，但是行内标签与块标签有着明显的差别。行内标签无法设置尺寸（宽度和高度）等等，块级标签才是一个完整的盒子，具有四大属性以上四大属性
宽度高度
边框border
内边距padding
外边距margin
盒子阴影

案例：

    <style>
        div {
            /* 设置大小：width，height */
            width: 600px;
            height: 200px;
            background-color: lime;
            /* 设置外边距：margin：四个方向（left right top bottom） */
            /*margin: 10px;*/ /* top bottom left right都是10px*/
            /*margin: 10px 30px;*/ /* 上下是10px 左右：30px */
            margin: 10px 20px 30px 40px; /*top:10px right:20px bottom:30px left:40px */

            /* 设置边框：border */
            border:10px solid red; /*1px:边宽 solid：实线  */
            border-radius: 10px; 

            /* 设置内边距：padding：四个方向 */
            padding: 10px 20px;

            /* 设置盒子的大小不变 */
            box-sizing: border-box;
            /* 设置盒子的阴影 */
            /* box-shadow: 200px 30px 30px yellow; */
        }
        div:hover {
            box-shadow: 20px 10px 30px yellow; 
            transition: all 5s;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>

文档流

CSS文档流指的是HTML文档中元素按照一个规定好的方式排列的过程。HTML提供了3中文档流规则：

普通流/文本流：文档中的元素默认显示规则
浮动流：设定元素向某一个方向倾斜浮动的方式排列元素
定位流：直接定位元素在文档或在父元素中的位置，表现为漂浮在指定元素上方

普通流

文档中的元素默认显示规则：

1. 从上到下，从左到右
2. 块级元素独占一行，行内元素不换行

在这里插入图片描述

浮动float

设定元素向某一个方向倾斜移动，用于做左右布局的

只要设置了浮动，就将盒子脱离了文本流。由于浮动框不在文本流中，所以文本流中的其它元素，表现出就像浮动框不存在一样，自动上移，占有浮动框的位置

在这里插入图片描述

float属性

如果需要指示框浮动在包含框的左边或者右边，我们可以通过 float 属性来实现。取值如下表所示：

在这里插入图片描述

clear属性

浮动会对后面的元素造成影响。clear 属性用于设置一个元素的侧面是否允许其他的浮动元素。clear 属性定义了元素的哪边上不允许出现浮动元素，取值如下：

案例：

    <style>
        .div1 {
            width: 300px;
            height: 120px;
            background-color: lime;
            margin: 10px 0px;
            /* 设置浮动：float,left:将标签浮动起来，从左边开始排列 */
            float: left;
        }
        .div3 {
            width: 300px;
            height: 120px;
            background-color:pink;
            margin: 10px 0px;
            float: right;
        }
        .div2 {
            width: 500px;
            height: 220px;
            background-color: red;
            margin: 10px 0px;
            /* 不受浮动的影响，清除浮动 clear：left right both */
            clear:both; /* 清除右浮动*/

        }
    </style>
</head>
<body>
    <!-- 讲解浮动：改变标签默认排列方式，网页布局 -->
    <div class="div1"></div>
    <div class="div3"></div>
    <div class="div2"></div>
</body>

定位position

广义的说，浮动也属于定位。这里主要讲定位属性position，用于设置或检索对象的定位方式。相关属性有：

在这里插入图片描述

position属性

static：静态定位也是普通流定位，元素位于文档流中，正常显示。忽略元素的top，bottom，left，right。为默认值
relative：相对定位，对象遵循普通流，相对于原始位置。 
absolute：绝对定位，对象脱离普通流，相对于浏览器窗口或已经设置定位的父元素
fixed：与absolute一致，相对于浏览器窗口。当出现滚动条时，对象不会随着滚动，通常用来做广告div

相对定位

相对定位是相对于它原来的位置进行偏移，具体的位置由偏移属性（top、bottom、left、right）来设置，元素原来所占的空间仍保留。如果需要设置元素为相对定位：

1. 首先需要设置position属性的值为relative
2. 然后使用偏移属性left属性或者right属性设置水平方向的偏移量
3. 也可以使用偏移属性top属性或者bottom属性设置垂直方向的偏移量
4. 如果有多个相对定位，可以使用z-index设置层次关系

绝对定位

绝对定位是相对于浏览器窗口设置偏移（假如父元素没有设置定位），具体的位置由偏移属性（top、bottom、left、right）来设置。元素原来所占的空间不保留。如果需要设置元素为绝对定位：
```
1. 首先需要设置 position 属性的值为 absolute
2. 然后使用偏移属性left 属性或者right 属性设置水平方向的偏移量
3. 也可以使用偏移属性top 属性或者bottom 属性设置垂直方向的偏移量
4. 如果有多个绝对定位，可以使用z-index设置层次关系
```
**注意：**一旦修改了元素的定位方式，则元素可能会发生堆叠。可以使用z-index 属性来修改堆叠上下文来控制元素框出现的重叠顺序，z-index属性的值为数值，数值越大表示堆叠顺序更高，则离用户更近。可以设置为负数，表示离用户更远

固定定位

固定定位相对于浏览器窗口设置偏移，是指将元素的内容固定在页面的某个位置。脱离文本流，元素原来所占的空间不保留。当用户向下滚动页面时元素框并不随着移动，通常用来做广告div。设置固定定位：

1. 首先需要设置position属性的值为fixed
2. 然后使用偏移属性left属性或者right属性设置水平方向的偏移量
3. 也可以使用偏移属性top属性或者bottom属性设置垂直方向的偏移量
4. 如果有多个固定定位，可以使用z-index设置层次关系

案例：

    <style>
        /* .div1 {
            width: 300px;
            height: 100px;
            background-color: red;
            margin: 10px 0px;
            默认定位静态定位
            position: relative; /* relative:相对定位 ，相对原有的位置，可以景调动位置，但是原有位置不会释放
             top:10px;
            left: 300px; 
            right: 50px;
        }
        .div2 {
            width: 300px;
            height: 100px;
            background-color:lime ;
             
        } */


        .div1 {
            width: 300px;
            height: 100px;
            background-color: red;
            margin: 10px 0px;
            /* position: absolute; /*absolute:绝对定位，相对浏览器的顶部,要释放原有的位置 */
            z-index: 100; 
        }
        .div2 {
            width: 300px;
            height: 1000px;
            background-color:lime ;
            margin: 10px 0px;
            /* position: relative;
             z-index: 1; */
        } 
        .div3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* 固定定位 */
            position: fixed;
            top:500px;
            left:200px;
        }

    </style>
</head>
<body>
    <!-- 讲解定位：position -->
    <!-- 1、相对定位 -->
    <div class="div1">

    </div>

    <div class="div2">

    </div>

    <!-- 2、绝对定位 -->

    <!-- 3、固定定位 -->
    <div class="div3"></div>
</body>

}
.div3 {
width: 100px;
height: 100px;
background-color: yellow;
/* 固定定位 */
position: fixed;
top:500px;
left:200px;
}

  </style>

  </div>

  <div class="div2">

  </div>

  <!-- 2、绝对定位 -->

  <!-- 3、固定定位 -->
  <div class="div3"></div>

```