HTML进阶+CSS进阶

Mousse.-

于 2023-11-25 19:17:28 发布

阅读量898

点赞数 16

文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_80441013/article/details/134618117

版权

一周的时间又过去了，我又来分享啦！话不多说，上笔记！

HTML进阶

（一）表单元素的练习

1. label元素里面是不能出现div的

2. .form-area .readme input:checked+.checkbox::after

表示在找到input元素的兄弟元素.checkbox即span元素中加一个子元素after，用来做方框里面的圆点

3. .form-area .readme input:checked+.checkbox

表示选中input元素的兄弟元素.checkbox即span元素之后对span元素的样式修改

4. 将默认样式隐藏掉

用display：none

5. haserror

会方便之后JS操作和后端开发人员操作

将haserror加在父元素的class属性中，然后再css中书写

.父元素.haserror .error{display:block} 就可以显示error元素内容

去掉隐藏error元素内容，加上显示error元素内容

haserror与父元素（form-item）并列

6. 禁用状态下的按钮

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重置页面</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/reg.css">

</head>
<body>
    <div class="form">
        <h2>
            <span>注册</span>
        </h2>
        <div class="form-area">

        <div class="form-item">
            <input type="text" placeholder="账号">
            <div class="error">
                改昵称已被其他人占用
            </div>
        </div>
        <div class="form-item">
            <input type="password" placeholder="密码,(6-16字符组成,区分大小写)">
        </div>
        <div class="form-item">
            <div class="select clearfix">
                <div class="select-item">
                    <div class="title">
                        中国大陆
                    </div>
                   <ul>
                    <li class="selected">Lorem.</li>
                    <li>Ex!</li>
                    <li>Omnis!</li>
                    <li>Voluptatibus!</li>
                    <li>Eos.</li>
                    <li>Quos.</li>
                    <li>Illum.</li>
                    <li>Quisquam?</li>
                    <li>Odit?</li>
                    <li>Placeat!</li>
                    <li>Nemo!</li>
                    <li>Fugiat?</li>
                    <li>Culpa!</li>
                    <li>Quasi.</li>
                    <li>Reprehenderit?</li>
                    <li>Consectetur?</li>
                    <li>In.</li>
                    <li>Autem.</li>
                    <li>Vitae.</li>
                    <li>Ipsum.</li>
                    <li>Praesentium.</li>
                    <li>Fugit.</li>
                    <li>Pariatur.</li>
                    <li>Ut.</li>
                    <li>Sint.</li>
                    <li>Sit.</li>
                    <li>Perspiciatis?</li>
                    <li>Quod?</li>
                    <li>Sapiente.</li>
                    <li>Enim!</li>
                    <li>Corrupti!</li>
                    <li>Iste.</li>
                    <li>Minima.</li>
                    <li>Natus.</li>
                    <li>Eaque.</li>
                    <li>Excepturi.</li>
                    <li>Animi?</li>
                    <li>Sunt?</li>
                    <li>Nihil.</li>
                    <li>Odio?</li>
                    <li>Hic?</li>
                    <li>Iste.</li>
                    <li>Labore!</li>
                    <li>Eos.</li>
                    <li>Ducimus.</li>
                    <li>Nihil.</li>
                    <li>Facere.</li>
                    <li>Iure!</li>
                    <li>Neque!</li>
                    <li>Mollitia?</li>
                   </ul>
                </div>

                <div class="input">
                    <input type="text" placeholder="填写常用的手机号">
                </div>
            </div>
        </div>

        <div class="form-item">
            <input type="text" placeholder="请输入短信验证码">
            <button type="button" class="huoqu">点击获取</button>
        </div>

        <div class="readme">
            <label >
                <input type="checkbox">
                <span class="checkbox">

                </span>
                <span>我已同意
                    <a href="">12345</a>和<a href="">678910</a>
                </span>
            </label>
        </div>

       <div class="form-item">
        <button class="fill">注册</button>
       </div>
       <div class="readme textright">
        <a href="">已有账号直接登录&gt;</a>
       </div>

    </div>
    </div>
</body>
</html>

CSS代码

.clearfix::after{
    content:"" ;
    display: block;
    clear: both;
}

body{
    line-height: 1.5;
}


.form{
    width: 980px;
    margin: 1em auto;

}
/* 表单中所有的a元素的样式 */
.form a{
    color: #00a1d6;
}
/*1. 所有表单框的样式*/
.form h2{
    text-align: center;
    font-size: 38px;
     border-bottom: 1px solid #ddd;
     height: 30px;
     margin-bottom: 60px;
}
.form h2 span{/*找到h2下的span元素给他设置一个白色背景把设置的下边框挡住*/
    background: #fff;
    padding: 0 20px;
}
.form-area{
    width: 423px;
    margin: 0 auto;
}

.form-area .form-item{
    margin: 50px 0;

}
.form-area .form-item .error{
    position: absolute;
    width: 240px;
    right: -250px;
    top: 10px;
    color: #f45d90;
    font-size: 12px;
    
}

/*统一的文本框样式*/

input[type="text"],input[type="password"]{
    border: 1px solid #dcdfe6;
    width: 100%;/*内容区的宽度，边框也有宽度，两者加在一起，会将宽度变大，所以用box-sizing: border-box;将边框宽度不算进内容里*/
    box-sizing: border-box;
    border-radius: 4px;
    height: 40px;
    text-indent: 1em;
    font-size: 14px;
    color: #606266;
}


input[type="text"]:hover,input[type="password"]:hover{
    border-color: #c0c4cc;/*鼠标点击时边框的颜色*/

}
input[type="text"]::placeholder,input[type="password"]::placeholder{
    color: #ccc;
   }

input[type="text"]:focus,input[type="password"]:focus{
    border-color: #00a1d6;
}


/*2.*/
.form-area .select .select-item,.form-area .select .input{
    float: left;
    height: 40px;
}
.form-area .select .select-item{
    width: 140px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    border-radius: 4px 0 0 4px;/*左上，右上，右下，左下依次设置圆角边框*/
/*   border-top-right-radius:0 ;*/
    border-right: none;
    position: relative;
}
.form-area .select .select-item ul{
    /*最大高度256像素*/
    max-height: 256px;
    background: #fff;/*设置背景颜色来遮挡溢出的部分*/
    color: #606266;
    position: absolute;
  z-index: 1;/*  相对于图层往上一层，遮挡溢出的部分*/
    left: 0;/*设置边框*/
    top: 50px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px 0 0 4px;
    padding: 10px 0;
    overflow-y:auto ;/*方向上溢出的话，产生滚动条*/
  display: none ;  /*隐藏内容*/

}
.form-area .select .select-item ul li{
    height: 34px;
    padding: 0 20px;
    cursor: pointer;
}
.form-area .select .select-item ul li.selected{
    color: #00a1d6;
    font-weight: bold;
}
.form-area .select .select-item ul li:hover{
    background: #f5f7fa;
}

.form-area .select .input{
    width: 283px;
}
.form-area .select .select-item .title{
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    color:#909399 ;
    cursor: pointer;
}
.form-area .select .input input{
    border-radius:0 4px 4px 0 ;
}
/*统一设置按钮样式*/
button{
    height: 40px;
    background-color:#00a1d6 ;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}
button:hover{
    background: #33b4ed;
}
.form-area .form-item{
    position: relative;
}
.form-area .form-item .huoqu{
    width: 130px;
    height: 36px;
    position: absolute;
right: 2px;
top: 2px;
}
.form-area .readme{
    /*设置上下margin为负，使该区域内容与上下两区域内容之间的距离变小*/
    margin: -40px 0;
    font-size: 12px;
}
/*设置多选框的样式,自己写一个多选框样式，并且将默认样式隐藏掉（美化表单）*/
/*未选中时的效果*/
.form-area .readme .checkbox{
    display: inline-block;/*为了设置宽高，所以设置行块盒*/
    height: 14px;
    width: 14px;
    border: 1px solid #dcdfe6;
    /*加了边框后，宽度变了，所以就用*/
    box-sizing: border-box;
    border-radius: 4px;
}
/*选中时的效果*/
.form-area .readme input{
    display: none;
}
.form-area .readme input:checked+.checkbox{
    border-color: #00a1d6;
}
.form-area .readme input:checked+.checkbox::after {
/*找到input元素的兄弟元素.checkbox即span元素,再加一个子元素after*/


    content: "";
    display: block;
    height: 7px;
    width: 7px;
    background: #00a1d6;
    border-radius: 2px;
    margin-left: 2.5px;
    margin-top: 2.5px;

}
.form-area .form-item .fill{
    width: 100%;/*宽度撑满*/
    box-sizing: border-box;
}
.textright{
    text-align: right;
}

效果图

（二）表格元素

# 表格元素

在css技术出现之前，网页通常使用表格布局

后台管理系统中可能会使用表格.

前台:面向用户

后台:面向管理员。对界面要求不高，对功能性要求高。

## 表格的说明

>术语1

>术语2：表格行

>术语3:单元格

## 注意事项

1. <thead> <tbody> <tfoot>这三个元素不一定要全部都写

2. table中的子元素border-collapse，

默认值为border-collapse：separate，一个个表格之间是分离的。

border-collapse: collapse;可以将表格合在一起，每个表格之间没有空隙

3. 在表格中进行单元格的合并

>跨列

在td元素后面加上colspan=“几”

>跨行

在td元素后面加上rowspan=“几” 然后下一行的数据1就不写了<td rowspan="2">数据1</td>

（三）其他元素

# 其他元素

1. abbr

缩写词

2. time

提供给浏览器或者搜索引擎阅读的时间

3. b（bold）

以前是一个无语义元素，主要用于加粗字体，读的时候，会重音

4. q

一小段引用文本（会自动加一个双引号）

5. blockquote

>q和blockquote都可以在其后面加一个cite：引用文段的网址（给浏览器看，是从哪里引用的）

大段引用的文本，自动加了一个margin

6. br

只有功能，无语义

主要用于在文本中换行

7. hr

无语义，主要用于分割

（6.7都不推荐使用，应该用css来控制样式）

8. meta

用于给网页添加源数据，还可以用于搜索引擎优化(SEO)

9. link

链接外部资源（CSS，图标）

re1属性: relation，链接的资源和当前网页的关系

type属性:链接的资的MIME类型（可以不用书写，会根据前面的类型自动确认的）

引用图标

CSS进阶

（一）@规则

# @规则

at-rule：@规则，@语句，css语句，css指令

1. import

@import “路径”

导入另外一个css文件（可以不用写link：reset，只写link：自己的样式，然后在自己样式表里第一行就写@import “reset”

2. charset

@charset "utf-8";（出现中文时最好写上）

告诉浏览器该CSS文件，使用的字符编码集是utf-8，该指令必须写到第一行

（二）Web字体与图标

# Web字体和图标

## Web字体

解决用户电脑上没有安装相应字体时，强制让用户下载该字体

使用@font-face规则制作一个新字体

src:url()表示新字体的位置

## 字体图标

在网站iconfont中下载图标

### 在fontclass中生成（推荐）

- 在线下载引用

可以通过设置字体的一些样式实现对字体图标样式的设置

选择图标加入购物车，添加到项目，并且生成一个含有图标的css文件

1. 在HTML文件的link中填入链接地址

2. 写一个i元素来放字体图标（i元素是一个行盒）

<p>

<i class="iconfont icon-ditu(复制图标代码)"></i>

</p>

- 离线下载引用

1. 在iconfont中点击下载至本地，将文件夹中所有文件复制到新建的css文件中

2. 在html文件中用link引用css/iconfont.css

3. 后面操作与在线引用一样

### 在unicode中生成

1. 将生成的地址复制在style中

2. 书写新建的字体样式

3. 写一个i元素来放字体图标（i元素是一个行盒）

<p>

<i class="iconfont ">



</i>

</p>

### 注意

重新加了图标之后，在线要更新代码；离线要重新下载文件，css地址在更新后会变

（三）块级格式化上下文

简称BFC

## 解释

2. ![Alt text](image-2.png)

overflow默认值为visible绝对定位和固定定位仍会在其内部创建BFC

3. （常规流块盒计算高度时不会计算浮动元素的高度，就会导致高度坍塌（1）是不计算绝对定位，固定定位元素的高度的

（绝对定位，固定定位彻底脱离了常规流）

（2）

常规流盒子摆放时看不见浮动元素创建了BFC之后，会避开浮动盒子![若要调整这俩个盒子之间的距离，应该设置浮动元素的margin

（3）

### 解决高度坍塌方法

> 1. 清除浮动 (最推荐)

clearfix::after{

content:"";

display:block;

clear:both;}

> 2. 清除浮动

clearfix{

overflow:hidden

}

> 3. 在浮动元素的父元素中设置绝对定位![Alt

>4. 使用浮动

>5. 副作用最小的方式overflow:hidden

（四）布局

## 多栏布局

### 两栏布局

1. aside元素表示侧边栏

2. 浮动元素宽度是自动的，适应内容，内容太多了，把一行盛满了，下一个元素只能排在下面，排不到右边了,一般给侧边栏定宽，来解决这种问题

3. 定宽效果

若想要主区域的内容不定宽，宽度自适应的话，即内容宽度会随着视口的变化而变化，

则可以（1）先固定总区域的宽度，

（2）不将主区域浮动,不定宽，用overflow：hidden

4. 若想设置主区域与侧边栏之间的距离的话，应该设置浮动元素的margin，而不是为浮动元素，即主区域元素的

### 三栏布局

1. 文字是行盒，行盒会避开浮动元素

## 等高布局

1. CSS3的弹性盒

2. JS控制

3. 伪等高

（一般是侧边栏内容少高度小，主区域内容多高度大）

> 1. 先给侧边栏一个很大很大的高度10000，30000px等这部分尽量大

>2. 再设置一个margin-bottom：-9999px，-29999px等这部分要在不影响侧边栏内容的情况下尽量的小，让最后侧边栏盒子的内容高度很小，最好10px左右（）

>3. 再给主区域加上overflow：hidden

## 元素书写顺序

1. 若有浮动元素的话，应该先写浮动元素，再写其他元素（常规流）

因为浮动元素会避开常规流，且若浮动元素多的话，会撑满整个区域，浮动盒子就只能排在下面了

2. 主区域代码靠前书写

1. 不要BFC，设置margin，把左右的空间留出来

2. 左右两边用绝对定位，固定在两边

缺点：外层容器完全不知道两边绝对定位的元素的高度（绝对定位完全脱离了常规流）但是好在侧边栏的高度一般没有主区域高

## 后台页面的布局

1. 想要出现滚动条，则用overflow：auto

2. 后台页面不用给浏览器看所以不用管书写顺序

3. 侧边栏一般用浮动+定宽

4. /*让标题栏以下的区域撑满整个视口，包括标题栏*/

可以设置内容区的width和height

width: 100%;

height: 100%;

5. .app{/*整个页面撑满整个视口，且不产生滚动条*/

position: fixed;

width: 100%;

height: 100%;

}

（五）盒子的位置

（六）行高的取值

line-height

行高通常在父元素中统一设置，行高可以继承

1. px，像素值

（推荐单行文本时使用，若多行文本还统一设置会出问题，字体太大时文字会重叠在一起）

2. 没有单位的数字（多行文本时推荐）

先继承再计算

行高为字体大小的几倍，会先继承子元素字体大小，再计算像素值

3. em

先计算在继承

行高为字体大小的几倍，会先计算像素值（父元素字体大小的几倍），再继承，不论后面有没有设置字体大小，都不管

若全都没有设置字体大小，则用基准字号来计算

4. 百分比

先计算在继承

行高为字体大小的百分之几，会先计算像素值（父元素字体大小的几倍），再继承，不论后面有没有设置字体大小，都不管

若全都没有设置字体大小，则用基准字号来计算

px，em，百分比，在书写多行文本时都可能会出现问题

（七）body背景

1. 背景颜色填充边框盒

**画布 canvas**

一块区城

特点:

1. 最小宽度为视口宽度（但是可以大于视口宽度而出现滚动条）

2. 最小高度为视口高度（但是可以大于视口宽度而出现滚动条）

**HTML元素的背景**

覆盖画布

**BODY元素的背景**

如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）

如果HTML元素没有背殒，BODY元素的背费疆盖画布

**关于画布背景图**

如果HTML元素有背景，背景图正常（背景覆盖边框盒）

如果HTML元素没有背景，背景图的背景覆盖整个画布

> background-size：100%；设置背景图的尺寸，横向撑满，纵向自适应

>background-size：左右上下；

1. 背景图的宽度百分比，相对于视口

哪怕画布很宽，背景图也只有相对于视口部分的大小

2. 背景图的宽度百分比，相对于网页高度（html元素高度）

3. 背景图的横向位置百分比，预设值（top，crnter，right，left），是相对于视口的

4. 背景图的纵向位置百分比，预设值（top，crnter，right，left），是相对于网页高度（html元素高度）

（八）多个行盒的垂直对齐

## 多个行盒在垂直方向上的对齐

给没有对齐的元素设置vertical-align

预设值 middle，sub等

数值几px

百分比

## 图片的底部白边

图片的父元素是一个块盒，块盒高度自动，宽度撑满，图片底部和父元素底边之间往往会出现空白。

解决方法

1. 设置父元素的字体大小为0（但是会有副作用，父元素里面的字就看不见了，就算重新设置字体大小，也看不见）

2. 将图片设置为块盒block（推荐），必须为块盒，行块盒都不行

（九）浏览器的兼容性

## 问题产生原因

- 市场竞争
- 标准版本的变化

## 厂商前缀(不是标准属性,但是此浏览器支持)

- 市场竞争,标准没有发布
- 标准仍在讨论中(草案),浏览器厂商希望先支持(先可以使用)

两者发生层叠，以靠后的样式为准

> 使用厂商前缀时，这样书写

>常见的浏览器厂商前缀

IE: -mS-

Chrome, safari: -webkit-

opera: -o-

firefox: -moz-

浏览器在处理样式或元素时，使用如下的方式:

>当遇到无法识别的代码时，直接略过,不会报错

### 例子

1. （非标准）谷歌浏览器的滚动条样式

只对谷歌浏览器有用

实际上，在开发中使用自定义的滚动条，往往是使用div+CSS+JS实现的

2. 多个背景图中选一个作为背景，以适应各自屏幕的分辨率

设置 background-image：厂商前缀+image-set（url（）几x，url（）几x，url（）几x）；

## css hack

根据不同的浏览器(主要针对IE)，设置不同的样式和元素（只有某个浏览器才能识别，其他浏览器识别不了会忽略）

1. 样式

IE中，CSS的特殊符号

*属性，兼容IE5、IE6、IE7
_属性(下划线)，兼容IE5~IE6
属性值\9，兼容IE5~IE11
属性值\0，兼容IE8~IE11
属性值\9\0，兼容IE9~IE10

IE5、6、7的外边距bug，浮动元素的左外边距翻倍以前这样书写

2. 条件判断（元素写法都不同）

IE浏览器可以识别注释里面的某些带有特殊符号的东西，还可以在这个符号里面引用一些特别的样式表

其他浏览器能识别，但IE不能识别

（蓝色笔所画部分在其他浏览器中为取消注释，但在IE中仍然认为他是注释）

## 渐进增强和优雅降级

两种解决兼容性问题的思路，会影响代码的书写风格

渐近增强:先书写适应大部分浏览器样式，然后针对新版本的浏览器，加入新的样式

在书写代码时，先尽量避免书写有兼容性问题的代码，完成之后，再逐步加入新标准中的

代码。

优雅降级:先制作完整的功能，然后针对低版本浏览器进行特殊处理

书写代码时，先不用特别在意兼容性，完成整个功能之后，再针对低版本浏览器处理样式

## caniuse

查找css兼容性 https://caniuse.com

（十）居中总结

居中：盒子在其包含快中居中

## 水平居中

### 行盒（行块盒）水平居中（行盒一定是常规流）

直接设置行盒（行块盒）的父元素```text-aline:center```

### 常规流块盒水平居中

定宽（必须定宽，否则会撑满整个块盒），设置左右margin为auto，上下无所谓，可以为0，也可以不为0

)![

注意：浮动元素暂时只能设置margin等来调整使其看起来水平居中

### 绝对定位元素的水平居中

定宽，设置左右的位置坐标为0 （left：0，right：0），将左右margin设置为auto，上下无所谓

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况
唯一区别是，固定定位的包含块是浏览器的可视窗口
若是固定定位父元素写啥定位都无所谓，都不会成为其的包含块
固定定位相对于整个视口居中

## 垂直居中

### 单行文本的垂直居中

设置文本所在元素的行高（line-height），为整个区域的高度

line-height=height

### 行块盒或块盒内多行文本的垂直居中

行盒本身是不能有高度的，其高度适应内容

没有完美方案

1. 设置上下的padding相同达到类似的效果

(缺点：没有办法知道盒子的高度，知道文字居中后距离上下为500px，这种就没有办法)

2. 设置该文本为绝对定位，然后定高，设置上下的坐标为0 (top:0，bottom:0) ，将上下margin设置为auto

### 绝对定位的垂直居中

定高，设置上下的坐标为0 (top:0，bottom:0) ，将上下margin设置为auto

（十一）样式补充

## display:list-item

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子（会生成两个盒子）

元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列

调整的宽高，margin，padding都调的是主盒子，次盒子没法调整。

而且次盒子与主盒子之间的距离也没有办法调整

涉及的css:

1. ```list-style-type```

设置次盒子中内容的类型(可以继承，圆点，一，等等)

2. ```list-stylc-position```

设置次盒子相对于主盒子的位置，默认值为outside

3. 速写属性```list-style```

![Alt text](image-4.png)