html学习重点记录（CSS）

Pluto_ssy

已于 2023-07-01 22:56:56 修改

阅读量81

点赞数 1

文章标签： css html 学习

于 2023-04-07 13:41:02 首次发布

本文链接：https://blog.csdn.net/pluto_ssy/article/details/130010307

版权

HTML5学习记录

CSS部分

背景图片尺寸

 body {
            background: url(images/bg3.png) no-repeat;
            /* background-size: contain; */
            background-size: cover;
        }

内减模式

/* css3盒子,不需要手动计算盒子尺寸||内减模式 */
  box-sizing: border-box;

解决盒子塌陷问题

.father {

  width: 100px;

  height: 100px;

  background-color: pink;

  /* 方法1，给父集加border或者padding */

  /* border: 1px solid #000; */

  /* 方法2，加overflow: hidden; */

  overflow: hidden;

}

.son {

  width: 50px;

  height: 50px;

  background-color: skyblue;

  margin-top: 10px;/* 塌陷源头 */

  /* 方法3，传化行内块元素 */

  /* display: inline-block; */

  /* 方法4，加浮动 */

}

伪元素的使用

/* li:first-child {
    color: aqua;
}
li:last-child {
    color: red;
}
li:nth-child(3) {
    color: blue;
}
li:nth-last-child(2){
    color: blueviolet;
}
li:nth-child(-n+5) {
    前五个
    background-color: #3f906a;
}
li:nth-child(n+3) {
    从第三个往后
    background-color: #073d3d;
} */

图片垂直居中

行内块元素同样可以使用vertical-aglin来解决浏览器基线对齐产生的问题（浏览器默认把行内元素和行内块元素当做文字处理，也可以用

display:block;

解决）

/* 调节图片垂直方向对齐方式 */
/* 给父级添加行高 */
father {
	line-height:100px;
	text-align:center;/* 水平居中 */
}
img {
    vertical-aglin: middle;//重点
}

清除float影响

/* 清除float影响
    1.尾部额外标签，添加块元素的css样式clear:both

    2.单伪元素清除法
    .clearfix::after{
        content:'';
        display:blok;
        clear:both;
        //低版本浏览器添加
        height:0;
        visibility:hidden;
    }

    3.双伪元素解决塌陷法
    .clearfix::before,
    .clearfix::after{
        content:'';
        display:table;
    }
    //真正清除浮动部分
     .clearfix::after{
        clear:both;
    }

    4.父元素添加overflow:hidden;
*/

定位

.box1 {
    /* 相对定位，参考之前位置 
    （具备之前块特点）
    */
	/* 固定定位，永远参考浏览器进行定位
    1.脱标-不占位置
    2.参考浏览器窗口改变位置
    3.具备行内块元素特点
    */

    /* 绝对定位(1.脱标，不占位置 2.改变之前标签显示模式，具备行内块的特点)：
    先找到已定位（有position）的父级(广义父级，就近原则)，如果有就以这个父级为参考移动
    如果没有，就以浏览器窗口为参考移动 
    */
    position: absolute;
    left: 0;

    width: 50px;
    height: 50px;
    background-color: #450d9f;
}

.box2 {
    /* 绝对定位的盒子不能使用margin:0 auto;居中 */
    position: absolute;
    /* margin: 0 auto; */

    /* 居中方法1 */
    /* left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
    */

    /* 居中方法2 */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    width: 300px;
    height: 300px;
    background-color: #450d9f;
}

默认情况，定位的盒子，后来者居上

z-index:整数;取值越大，显示顺序越在上；默认为0,必须配合定位。

鼠标样式

.box {
    width: 500px;
    height: 500px;
    background-color: #705c91;

    /* 鼠标小手,默认箭头default */
    /* cursor: pointer; */

    /* 鼠标I形状 */
    /* cursor: text; */

    /* 鼠标十字形，可移动 */
    cursor: move;
}

正圆

.box {
    /* 圆形 */
    border-radius: 50%;
    width: 500px;
    height: 500px;
    }

overflow溢出

.box6 {
    width: 200px;
    height: 200px;
    background-color: #71c4a7;
    /* 溢出部分隐藏 */
    /* overflow: hidden; */

    /* 是否溢出都显示滚动条 */
    /* overflow: scroll; */

    /* 溢出部分可见 */
    /* overflow: visible; */

    /* 根据溢出判断是否显示滚动条 */
    overflow: auto;
}

元素隐藏

1、visibility:hidden;占位隐藏

2、display:none;不占位隐藏，常用

精灵图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        span {
            display: inline-block;
            /* 精灵图中具体小图片大小 */
            width: 18px;
            height: 24px;
            /* 精灵图 */
            background-image: url(images/bg3.png);
            /* 背景图位置属性 
            水平，垂直方向；向左向下取负数
            */
            background-position: -3px 0;
        }
        
        b {
            display: inline-block;
            /* 精灵图中具体小图片大小 */
            width: 25px;
            height: 21px;
            /* 精灵图 */
            background-image: url(images/bg3.png);
            /* 背景图位置属性 
            水平，垂直方向；向左向下取负数
            */
            background-position: 0 -90px;
        }
    </style>
</head>
<body>
    <!-- 精灵图不能用img标签 -->
    <!-- 精灵图的标签只能用行内标签 span b i... -->
    <span></span>
    <b></b>
</body>
</html>

过渡

 /* 过渡配合hover属性，谁变化谁加transition */
        .box {
            width: 200px;
            height: 400px;
            background-color: #de1f1f;

            /* 宽度200px，鼠标悬停时候变成400px，花费1秒 */
            /* transition: width 1s,background-color 1s; */
            /* all表示所有 */
            transition: all 1s;
        }
        .box:hover {
            width: 400px;
            background-color: #12cb34;
        }

SEO搜索引擎优化

1、竞价排名

2、将网页制作成html后缀

3、标签语义化（在合适的地方使用合适的标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO">
    <meta name="keywords" content="SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO">
    <title>SEO</title>
    <* 浏览器标题栏图片 *>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    SEO
</body>
</html>

4、…

项目目录准备

在这里插入图片描述

面试问题

1、搭建网页都需要用到哪些布局方式

①标准流（标签自带布局）

②浮动（float）

③定位（position）

层级关系

标准流<浮动<定位(默认情况，定位的盒子，后来者居上；z-index:整数;取值越大，显示顺序越在上；默认为0,必须配合定位。)

Pluto_ssy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html学习重点记录（CSS）

行内块元素同样可以使用vertical-aglin来解决浏览器基线对齐产生的问题（浏览器默认把行内元素和行内块元素当做文字处理，也可以用。(默认情况，定位的盒子，后来者居上；z-index:整数;取值越大，显示顺序越在上；默认为0,必须配合定位。z-index:整数;取值越大，显示顺序越在上；默认为0,必须配合定位。3、标签语义化（在合适的地方使用合适的标签）默认情况，定位的盒子，后来者居上。③定位（position）
复制链接

扫一扫