VScode中常见/易忘CSS代码(原理)

已于 2023-07-05 18:43:15 修改
阅读量5.7k 收藏 48
点赞数 16
分类专栏： CSS 文章标签： vscode css 前端 学习
于 2022-07-09 09:37:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72322475/article/details/125689286
版权

（内容持续更新中。。主要是博主自己看）

1.让标准流盒子在整个页面水平居中

选择器{

            margin:0 auto;

}

(数字0也可换成其他数字，该位置控制上下外边距，例如写10px,则该盒子的上下外边距为10px)

2.做网页时，为了去掉整体页面中默认的外边距、内边距，CSS第一句话要写

*{

    margin:0;

    padding:0;

}

3.CSS中，如想让插入的图片宽度与父盒子一样宽

选择器{ 

           width:100%;

}

4.文字加粗&不加粗

（1）文字加粗

选择器{

          font-weight:700;

}

（2）文字不加粗

选择器{

          font-weight:400;

}

5.CSS中替换盒子的背景颜色为一张图片

e.g.

选择器{

                 height:300px;

                 background:url(images/pic1.png) no-repeat top center;

}

其中url后面的（）中是图片地址，no-repeat控制图片不重复，top center控制图片在盒子中靠上且居中。

6.CSS中使用ul套li布局网页，去除li前面的默认小点的方法

li{

       list-style:none;

}

7.行内元素，块元素，行内块元素的转换

（1）CSS中行内元素转为块元素

e.g.

a{

         display:block;

         width:100px;

         height:200px;

         background-color:purple;

}

(2)CSS中块元素转为行内元素

e.g.

div{

         display:inline;

         width:100px;

         height:200px;

         background-color:purple;

}

(3)CSS中块元素/行内元素转为行内块元素

e.g.

选择器{

         display:inline-block;

         width:100px;

         height:200px;

         background-color:purple;

}

8.CSS行内元素加了绝对定位/固定定位/浮动之后，不用转换为行内块元素/块级元素，直接设置width/height有效

e.g.1行内元素span加绝对定位（position:absolute)设置width/height有效

<!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>Document</title>
</head>
<style>
    span {
        width: 100px;
        height: 200px;
        background-color: pink;
        position: absolute;
    }
</style>

<body>
    <span>123</span>
</body>

</html>

得到的结果是

e.g.2行内元素span加固定定位（position:fixed)设置width/height有效

<!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>Document</title>
</head>
<style>
    span {
        width: 100px;
        height: 200px;
        background-color: blue;
        position: fixed;
    }
</style>

<body>
    <span>123</span>
</body>

</html>

得到的结果是

 e.g.3行内元素span加浮动（float：left/right)设置width/height有效

<!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>Document</title>
</head>
<style>
    span {
        width: 100px;
        height: 200px;
        background-color: purple;
        float: left;
    }
</style>

<body>
    <span>123</span>
</body>

</html>

得到的结果是

9.CSS块级元素加了绝对定位/固定定位/浮动之后，如没有设置width,则默认width=内容宽度

VS

CSS块级元素没加绝对定位/固定定位/浮动，如没有设置width,则默认width=父级盒子宽度（如无就是浏览器）

e.g.1块级元素div加绝对定位（position:absolute)，没有设置width

<!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>Document</title>
</head>
<style>
    div {
        background-color: red;
        position: absolute;
    }
</style>

<body>
    <div>123</div>
</body>

</html>

得到的结果是width=内容宽度

 e.g.1块级元素div没加绝对定位（position:absolute)，没有设置width

<!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>Document</title>
</head>
<style>
    div {
        background-color: red;
        
    }
</style>

<body>
    <div>123</div>
</body>

</html>

得到的结果是width=父级盒子（如无就是浏览器）宽度

10.CSS 中加了浮动的盒子之间没有缝隙

11.CSS 中，让文字去掉下划线（常用于修改<a href="#">文字</a>这样的超链接里面的文字）

选择器{

            text-decoration：none;

)

12.圆角边框

(1)CSS中设置圆角边框

选择器{

           border-radius:数值（e.g.10px指圆角的半径）/百分比；

}

(2)CSS中用圆角边框制作小圆点

e.g.用块级元素做半径是4px白色圆点(8X50%=4)

选择器{

                  border-radius:50% ;

                  background-color:#fff;

                  width:8px;

                  height:8px;

}

13.CSS中，如果一个盒子既有left属性，又有right属性，则默认执行left属性；如果一个盒子既有top属性，又有bottom属性，则默认执行top属性

e.g.1给子盒子.box设置绝对定位(position: absolute)，它的父级盒子.father有相对定位（position: relative）来现在里面的子盒子.box以父级盒子.father为移动参考,给子盒子.box既加left:10px又加right:10px

<!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>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .father {

        position: relative;
        background-color: blue;
        width: 200px;
        height: 100px;

    }

    .box {
        background-color: red;
        position: absolute;
        width: 50px;
        height: 20px;
        left: 10px;
        right: 10px;
    }
</style>

<body>
    <div class="father">
        <div class="box">123</div>
    </div>
</body>

</html>

得到的结果是子盒子.box 最终执行的left:10px

e.g.2给子盒子.box设置绝对定位(position: absolute)，它的父级盒子.father有相对定位（position: relative）来现在里面的子盒子.box以父级盒子.father为移动参考,给子盒子.box既加top:10px又加bottom:10px

<!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>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .father {

        position: relative;
        background-color: blue;
        width: 200px;
        height: 100px;

    }

    .box {
        background-color: red;
        position: absolute;
        width: 50px;
        height: 20px;
        top: 10px;
        bottom: 10px;
    }
</style>

<body>
    <div class="father">
        <div class="box">123</div>
    </div>
</body>

</html>

 得到的结果是子盒子.box 最终执行的top:10px

14.CSS常用并集选择器归纳相同的代码

15.VScode中，文本默认左对齐，如果要文本右对齐,在CSS中

选择器{

           text-align:right;

}

16.黑色#333/rgba(0,0,0)

白色#fff/rgba（255，255，255）

17.CSS中给盒子设置border/padding会撑大盒子

e.g.1

给width:200px;height:300px;的粉色盒子加了一个四个边都是10px的蓝色实线边框

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: pink;
            border: 10px solid blue;
        }
    </style>
</head>

<body>
    <div>123</div>
</body>

</html>

得到的结果是盒子大小变成了width:220px;height:320px;

e.g.2

给width:200px;height:300px;的粉色盒子加了一个四个边都是10px的蓝色实线border，和四个边都是20px的padding

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: pink;
            border: 10px solid blue;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>123</div>
</body>

</html>

得到的结果是盒子大小变成了width:260px;height:360px;

所以如果要保证盒子加border后最终占位大小和加border之前一样，

解决方法1：加了border后，原盒子尺寸设置的width和height要减去对应的边框距离

解决方法2：开始按模板测量盒子直接就量边框内的大小

解决方法3（针对CSS3）：还是按之前的写，然后CSS中加一行

e.g.

div{

      width:200px;

      height:300px;

      background-color: pink;

      border: 10px solid blue;

      padding: 20px;

      box-sizing:border-box;

}

则盒子仍是之前的width200px;height:300px;

18.CSS上一行代码出错也会导致下一行不生效（出BUG的时候，注意检查上一行代码）

快意人生大社畜
关注
  • 16
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片垂直居中的代码的几种方法
03-27
图片垂直居中的css+div代码的几种方法编写
（vscode）CSS学习记录三
weixin_42277692的博客
10-29 1356
CSS学习记录三
手把手教你在VSCODE下写C/C++代码（内附如何连接远端服务器教程）
Weraphael的博客
06-04 1657
最详细的vscode配置
图片的居中和bug
AICE1的博客
08-16 2809
1 图片的居中 <style> .a{ width: 180px; height: 80px; background-color: pink; /* 水平居中 */ text-align: center; /* 垂直居中 */ line-height: 80px; font-size: 0; } .a img{ vertical-align: middle; } </style> 2 浮动/清除浮动 /* 浮动：飘出文档流半层，实际上没有占背景颜
css简介、书写位置、语法（vscode）
qq_51575219的博客
11-18 1650
css简介、书写位置、语法（vscode）
VSCode的一些笔记
m0_64946290的博客
03-22 2425
一些简单笔记，会连续更新
vscode运行html和css方法
kaiser010的博客
05-26 4526
vscode是一款源代码编辑器软件，能够用于windows、macOS以及Linux系统，开发的时候经常需要用vscode运行html文件，vscode怎么运行html和css，下面列出vscode运行html和css方法，如下。3、完成安装之后直接退回到html界面，使用鼠标右击，在弹出的选项中，点击“Open in other browse”,然后在弹出的界面中选择对应的浏览器即可。参考文章：http://tishang.net/articles/1685096063.html。
图片轮播代码展示仅供参考
06-03
在IT行业中，图片轮播是一种常见的网页元素，用于展示多张图片或内容，通常用于产品展示、相册浏览等场景。下面将详细讲解图片轮播的实现原理、常见技术及其实现步骤，以及如何利用软件工具进行辅助开发。 首先，...
前端学习笔记，做一个简单的网站-星星，学习代码
最新发布
06-20
5. **软件/插件**：尽管没有具体的软件或插件提及，但前端开发中常见的工具有VSCode编辑器、浏览器开发者工具、Git版本控制等。它们可以帮助你编写、调试和管理代码。例如，浏览器开发者工具可以让你实时查看和修改...
第十章_轮播图_
10-02
在本章中，我们将深入探讨轮播图的实现原理，并通过编写代码来实践这一功能。 首先，轮播图的基本工作原理是利用HTML、CSS和JavaScript来创建一个可滑动的容器，这个容器包含了多张图片或其他内容。HTML负责构建...
webPage
07-28
2. **开发工具**：在网页开发中，开发者经常使用各种工具，如代码编辑器（VSCode、Sublime Text等）、调试工具（Chrome DevTools）、版本控制（Git）等。博主可能介绍了他的工作流，推荐了一些实用的开发工具，或者...
微店技术周刊(总第 25 期)-本期主编-张尚金1
08-04
设计模式是解决软件设计中常见问题的模板，理解这些模式有助于编写可维护和扩展的代码。 7. **JavaScript工作机制**：@刘远洋推荐的文章讨论了JavaScript的内部工作原理，这对于深入理解JS引擎的执行流程和内存管理...
11.vscode
weixin_55101030的博客
05-30 2057
2.元素的显示模式 2.1什么是元素的显示模式 作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。 元素显示模式就是元素(标签)以什么方式进行显示,比如自己占一行,比如一行可以放多个. HTML元素-般分为块元素和行内元素两种类型。 2.2块元素 常见的块元素有<h1>~<h6>. <p>. <div>. <ul>、 <ol>. <li>等 ,其中<div>标签是最典
记录设置VSCode加粗字体
Wxin0721的博客
03-28 7749
记录设置VSCode加粗字体 设置页面 插件 ①Chinese (Simplified) (简体中文) // 转为中文 ②Luke Dark Theme(暗黑主题) ③Vue+Vue 2 snippets+Vue 3 snippets ④Live Server 最终样式
#2 VS Code字体大小和行间距设置
weixin_44915466的博客
02-09 4340
使用vs code写代码，总想把字母变粗一点（太细了看着难受），让行距宽一点，但是在设置里面找不到修改的参数，百度和CSDN一顿搜和实验，找到了！打开vscode --> 左下角设置的小齿轮 --> 设置。修改之后，vs code写代码就是下面这个样子啦。设置界面上方标题栏 --> 右上角json页面。加入以下两行代码，其余参数也可以改变。
（vscode）CSS学习记录四-盒子模型
weixin_42277692的博客
10-29 980
CSS学习记录-盒子模型
VSCode自定义代码块（快速生成代码框架）
zawami的博客
08-05 1748
本教程以vue2代码框架为例。
基于html+css的图片居中排列
BigDream
04-03 471
此代码可以实现图片的自适应居中排列展示效果，能够让让图片排版更加的美观。
vscode 样式字体粗细颜色自定义
m0_50395119的博客
01-15 2627
"editor.tokenColorCustomizations": { "comments": { // 设置字体样式 加粗 下划线 斜体等 "fontStyle": "", // 设置字体颜色 "foreground": "#4caee2" }, // 注释 // "keywords": "#0a0", // 关键字 // "variabl...
如何用vscode写css
05-16
可以通过以下步骤在 VS Code 中编写 CSS： 1. 打开一个 HTML 文件或者创建一个新的。在 VS Code 中打开文件或在菜单栏中选择“文件”>“新建文件”。 2. 在 HTML 文件中创建一个链接到 CSS 文件的 `<link>` 标签。例如：`<link rel="stylesheet" href="./styles.css">`。这将链接到一个名为 styles.css 的 CSS 文件。 3. 创建 CSS 文件。在 VS Code 中打开一个新的文件，并将文件另存为 styles.css 或其他你喜欢的文件名。 4. 编写 CSS 代码。在 CSS 文件中编写所需的样式代码。例如：`body {background-color: #f1f1f1;}`。 5. 保存文件。在 VS Code 中，按下 `Ctrl + S` 或选择菜单栏中的“文件”>“保存”来保存文件。 如果你希望在 VS Code 中获得更好的 CSS 编辑体验，可以安装一些 CSS 扩展，例如：CSS Peek、CSS Formatter、CSS IntelliSense 等等。这些扩展可以帮助你更快速地编写 CSS 代码，减少错误并提高效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值