前后端连接之CSS布局| 豆包MarsCode AI刷题CSS（后端项目需要，又听了一遍CSS）一 CSS基本学习 C

CSS（后端项目需要，又听了一遍CSS）

一 CSS基本学习

CSS是什么
CSS怎么用(快速入门)
CSS选择器
美化网页(文字、阴影、超链接、列表、渐变)
盒子模型
浮动
定位
网页动画(特效效果)

1.1 CSS

Cascading Style Sheet(层叠级联样式表)

CSS：表现(美化网页)

字体，颜色，边距，高度，宽度，背景图片、网页定位、网页浮动......

内容表现分离、网页结构表现统一，可以实现复用、样式十分丰富、建议使用独立于html的css 文件、利用SEO，容易被搜索引擎收录

1.2 CSS发展史

CSS 1.0

CSS 2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS 2.1 浮动、定位

CSS 3.0 圆角、阴影、动画...... 浏览器兼容性

1.3快速入门

原文件
<head>
       <link rel="stylesheet" href="../">
</head>
<h1>
    文字
</h1>

css文件中
h1{
    color:red;
}
也可以原文件中弄css，需要加<style></style>

1.4css的三种导入方式

优先级：遵循就近原则。行内样式 > 内部样式 or 外部样式

扩展：外部样式除了链接式(link) ，还有一种导入式(不咋用,在css2.1特有)

<h1 style="color:red">文字</h1>

<style>
h1{
    color:blue;
}
</style>

<link rel="stylesheet" href="../地址">

<style>
    @import "style.css";
</style>

二选择器

作用：选择页面上的某一个或者某一类的元素

2.1 基本选择器

标签选择器：选择一类标签

标签{}
类选择器 class ：选中所有class属性一致的

.类名{}
id选择器：全局唯一

#id名{}

优先级：id选择器 > 类选择器 > 标签选择器

2.2 层次选择器

后代选择器：在某个元素的后面祖爷爷，爷爷，父辈，子辈
```
/*后代选择器*/
body p{
    background:red;
}
```
子选择器：儿子，在某一个元素的后一个元素
```
/*子选择器*/
body>p{
    background: blue;
}
```
相邻兄弟选择器: 同辈，某一个元素同级的元素,只有一个，相邻（向下的一个）
```
/*相邻兄弟选择器*/
.active+p{
    background:skyblue;
}
```
通用选择器：当前选中元素的向下的所有兄弟元素

.active~{
	background:red;
}

2.3结构伪类选择器

伪类：条

/*ul的第一个子元素*/
        ul li:first-child{
            background: skyblue;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: brown;
        }
        /*选中 p1:定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
        */
        p:nth-child(2){
            background: wheat;
        }
        /*这个的意思是选中p类型的第3个元素*/
        p:nth-of-type(2){
            background: yellow;
        }

2.4属性选择器（常用）

id + class结合
格式：a[]{}

/*属性名， 属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        /*选中存在id属性的元素       格式：a[]{}
        a[id]{
            background: yellowgreen;
        }*/
        /*选中id是first的元素*/
        a[id=first]{
            background: brown;
        }
        /*class中带有links的元素的*/
        a[class*="links"]{
            background: darkorange;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: ivory;
        }

三美化网页元素

3.1为什么要美化网页

有效传递页面信息
美化网页，吸引用户
凸显页面主题
提高用户体验

span标签：重点要突出的字，使用span标签，约定俗成的

3.2字体样式 font

<!--
font-family:  字体
font-size:   大小
font-weight:  粗细
px是像素，em是缩进
-->

<!-- <style>
        p{
            font:oblique(字体风格) bolder(字体粗细) 12px(字体大小) "楷体"(字体样式)
        }
    </style> -->

3.3文本样式

颜色

<style>
        /*颜色：单词
        或 RGB 0~F
        或 RGBA rgb(0,255,255)  rgba(0,255,255,0.1) 0.1表示透明度*/
        h1{
            color:skyblue;
        }
    </style>

对齐方式 text-align

<style>
    h1{
		text-align: center;
    }

首行缩进 text-indent : 2em;
行高

块的高度：height:

行高：line-height:

单行文字上下居中：line-height=height
装饰

/*下划线 中划线 上划线*/
        .l1{
            text-decoration:underline;
        }
        .l2{
            text-decoration:line-through;
        }
        .l3{
            text-decoration:overline;
        }

/*文本图片水平对齐 必须有参照物 a,b*/
        img,span{
            vertical-align: middle;
        }

3.4超链接伪类阴影

正常情况下，a a:hover就欧克

    <style>
        a{
            text-decoration: none;
            color:#000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: ivory;
            font-size:50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
        /*已访问的链接*/
        a:visited{
            color:yellow;
        }
        /*未访问的链接*/
        a.link{
            color:yellowgreen;
        }
        /*阴影：水平阴影的距离 垂直阴影的距离 模糊阴影的距离  阴影颜色*/
        #web{
            text-shadow:10px 10px 10px deepskyblue;
        }
    </style>


#### 3.6列表

#nav{ width:300px; background: aliceblue; } .title{ font-size:30px; font-weight: bold; text-indent: 2em; line-height:60px; background: skyblue; } /*ul li list-style:none; 去掉圆点，改变原点的样式 circle：空心圆 decimal：有序数字 ...

*/ a{ text-decoration:none; color:black; } ul{ background: aliceblue; } ul li{ height:30px; list-style: none; text-decoration:20em; } a:hover{ color:orange; }


#### 3.7背景及渐变

背景颜色

背景图片

div{ width:1000px; height:700px; /*边框：边框粗细边框样式边框颜色;*/ border:1px solid red; background-image: url("image/img.png"); /*默认全部平铺*/ } .div1{ background-repeat: repeat-x; /*水平平铺*/ } .div2{ background-repeat: repeat-y; /*垂直平铺*/ } #abc{ background-repeat: no-repeat; }


**渐变：**

background-color: #0093E9; background-image: linear-gradient(108deg, #0093E9 0%, #80D0C7 100%);


### 四 盒子模型

#### 4.1 啥是盒子

margin:外边距

padding：内边距

border：边框

#### 4.2 边框

0.  边框的粗细
0.  边框的样式
0.  边框的颜色

Title

<style>
    /*body有一个默认的外边距 margin:0 */
    h1,ul,li,body{
        margin:0;
        padding: 0;
        text-decoration: none;
    }
    /*border:粗细 样式 颜色*/
    h2{
        background: silver;
        margin:0;
    }
    #box{
        width:300px;
        border:1px solid red;
    }
    form{
        background: ivory;
    }
    div:nth-of-type(1) input{
        border:2px soild black;
    }
</style>

会员登陆

name:

password:

email:

```

4.3 内外边距

盒子的计算方式：元素的大小

margin + border + padding + 内容宽度


<!--外边距的妙用 居中元素 margin:0 auto-->
    <style>
        h2{

            background: lightskyblue;
            margin: 0;
            padding-left: 30px;
        }
        /* auto意为自动填充。 以margin:0,auto;为例，
        程序会自动计算剩余左右两部分的空白长度，把其等分再作为div左右的外边距。*/
        #box {
            background: ivory;
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        /*
        顺时针旋转
        margin:0 默认代表上下左右
        margin:0 1px; 代表上下和左右
        margin：0 1px 2px 3px 代表上、右、下、左
        */
        form{
            background: ivory;
            margin-right: 10px ;
            margin-left: 10px;
        }
        input{
            border:1px solid black;
        }
        div:nth-of-type(1){
            padding:10px 0 10px 30px;
        }
        div:nth-of-type(2){
            padding:10px 30px 10px 0px;
        }
        div:nth-of-type(3){
            padding:10px 0px 10px 30px;
        }
    </style>

4.4 圆角边框

4个

<style>
        /*圆角边框：（两个值） 左上右下  右上左下
                  （四个值）左上 右上 右下 左下 顺时针
        */
        /*圆圈 ： 圆角=半径*/
        div{
            width:400px;
            height:400px;
            border:10px solid slategrey;
            border-radius:200px 200px;
        }
    </style>

4.5 盒子阴影

box-shadow: 10px 10px 10px 10px green;

行内元素与块元素的居中

5、浮动

标准文档流

块级元素：独占一行

h1~h6  p div 列表...

行内元素（内联元素）：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之则不可以

5.1 display

display:block; 把行内元素变成块元素
display:inline-block; 使其既是行内元素也是块元素
display:inline 变成行内元素
display:none 消失

QQ导航栏

5.2 reason

浮动可以改变元素标签的默认排列方式
最典型应用：可以让多个块级元素一行内排列显示，添加浮动之后具有行内块元素相似的特性
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法：

选择器{ float:属性值; }

属性值	描述
none	元素不浮动：默认值
left	元素向左浮动
right	元素向右浮动

设置了浮动(float)的元素最重要特性：
- 脱离标准流的控制(浮)移动到指定位置(动)，俗称脱标
- 浮动的盒子不再保留原先的位置

5.3 清除浮动

清除浮动的策略是：闭合浮动只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

一、额外标签法

//清除浮动的方法一：额外标签法
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 下面的span就不行-->
        <span class="clear"></span> 
    </div>
    <div class="footer"></div>

</body>

</html>

二、父级添加overflow

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>为什么需要清除浮动</title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

三、after伪元素法以及父级双伪元素法，IE-6不支持


    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>

<!DOCTYPE html>

    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>

六、定位

定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，且可以压住其他盒子

定位：将盒子定在某一个位置，定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移属性	实例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

前后端连接之CSS布局| 豆包MarsCode AI刷题