【前端三要素】CSS快速入门

原创 已于 2022-09-03 22:32:56 修改 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #javascript #前端

于 2022-09-03 22:26:59 首次发布
本文详细介绍了CSS的基础知识，包括选择器、层叠、导入方式，以及如何通过CSS美化网页，涉及字体样式、颜色、布局、定位、浮动和阴影等技巧。此外，还深入讲解了盒子模型、列表、背景和渐变，以及关键的编程概念如浮动元素管理和定位策略。

文章目录


HTML+CSS+JavaScript

结构+表现+交互

1. 什么是CSS

如何学习

  1. CSS是什么
  2. CSS怎么用（快速入门）
  3. CSS选择器（重点+难点）
  4. 美化网页（文字，阴影，超链接，列表，渐变）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果）

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

1.2、发展史

CSS1.0

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

CSS2.1 浮动和定位

CSS3.0 圆角边框，阴影，动画…浏览器兼容性问题

1.3、快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--  规范 <style>    可以编写CSS代码，每一个声明，最好使用分号结尾
 语法：
    选择器{
        声明1;
        声明2;
        声明3;
    }
 
 
 -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>



</body>
</html>

CSS优势：

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

1.4 CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 内部样式 -->
  <style>
    h1{
      color: green;
    }
  </style>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

/*外部样式*/
h1{
    color: blue;
}

拓展：外部样式两种写法

  • 链接式：

    html

    <!--链接式-->
<link rel="stylesheet" href="css/style.css">

  • 导入式：

    @import是CSS2.1特有的

    <!--导入式-->
    <style>
        @import "style.css";
    </style>

区别：link属于html标签，而@import是css提供的一种方式，link标签不仅可以引入css，还可以做其他事，而@import只能引入css；@import只有在IE5以上才支持；而link标签不存在兼容性问题。

2. 选择器

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

2.1、基本选择器

  1. 标签选择器： 选择一类标签 标签{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
  <style>
    /*标签选择器会选择页面上所有这个标签的元素*/
    h1{
      color: #23bece;
    }
    p{
      font-size: 80px;
    }
  </style>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>

</body>
</html>

  2. 类选择器 class：选择所有class属性一致的标签，跨标签 .class的名称{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*类选择器的格式 .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用
    */
    .aaa{
      color: #23bece;
    }
    .bbb{
      color: red;
    }
  </style>
</head>
<body>


<h1 class="aaa">aaa</h1>
<h1 class="bbb">bbb</h1>
<h1 class="aaa">ccc</h1>

<p class="aaa"></p>


</body>
</html>

  3. id选择器：全局唯一 #id名称{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*    id选择器
              #id名称{}
              不遵循就近原则
              id选择器>class选择器>标签选择器
        */
        #susuus{
            color: #143fea;
        }
        .qqq{
         color:#23bece;
        }
        h1{
            color: blueviolet;
        }
    </style>
</head>
<body>

<h1 id="susuus" class="qqq">标题一</h1>
<h1 class="qqq">标题二</h1>
<h1 class="qqq">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>

</body>
</html>

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

2.2、层次选择器

  1. 后代选择器：在某个元素的后面

    /*  后代选择器*/
  body p{
    background: red;
  }

  2. 子选择器:一代，儿子

     /*  子选择器*/
     body>p{
       background: #143fea;
     }

  3. 相邻兄弟选择器：同辈

    /*  兄弟选择器 只有一个，向下（相邻）*/
  .active+p{
    background: red;
  }

  4. 通用选择器

    /*  通用选择器,当前选中元素的向下所有兄弟元素*/
  .active~p{
    background: #143fea;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
  /*p{*/
  /*  background: #23bece;*/
  /*}*/
/*  后代选择器*/
/*  body p{*/
/*    background: red;*/
/*  }*/
/*  子选择器*/
/*  body>p{*/
/*    background: #143fea;*/
/*  }*/
/*  兄弟选择器*/
/*  .active+p{*/
/*    background: red;*/
/*  }*/
/*  通用选择器*/
  .active~p{
    background: #143fea;
  }
</style>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p4</p>
  </li>
</ul>

</body>
</html>

2.3、结构 伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
  <style>
    /*ul的一个子元素*/
    ul li:first-child{
      background: cadetblue;
    }
    /*ul的最后子元素*/
    ul li:last-child{
      background: #143fea;
    }
    /*选中p1:定位到父元素，选择当前的第一个元素
    选中当前p元素的父级元素，选中父级元素的第一个
    */
    p:nth-child(1){
      background: red;
    }

    /*
        选中当前p元素的父级元素，选中父级元素的同标签的第二个
    */
    p:nth-of-type(2){
      background: yellow;
    }
  </style>
<body>

<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

</body>
</html>

2.4、属性选择器（常用）

id+class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: #23bece;
      text-align: center;
      color: gainsboro;
      text-decoration: none;
      margin-right: 5px ;
      font:bold 20px/50px Arial;
    }
    /*属性名，属性名=属性值（正则）
    =绝对等于
    *=包含这个元素
    ^=以这个开头
    $=以这个结尾
    */
    /*选中存在id属性的元素 a[]{} */
    a[id]{
      background: yellow;
    }
    /*id=first*/
    a[id=first]{
      background: green;
    }
    /*class中有links的元素*/
    a[class*="links"]{
      background: yellow;
    }
    /*选中href中以http开头的元素*/
    a[href^=http]{
      background: red;
    }
    a[href$=pdf]{
      background: red;
    }
  </style>
</head>
<body>

<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test" >2</a>
  <a href="images/123.html" class="links item" >3</a>
  <a href="images/123.png" class="links item" >4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PXG2TGUE-1662215054795)(C:\Users\Genius Sue\AppData\Roaming\Typora\typora-user-images\image-20220902150246896.png)]

=

*=

^=

$=

3. 美化网页

3.1、为什么要美化网页

  1. 有效传递页面信息
  2. 美化网页、页面漂亮吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签：把重点要显示的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #titlel{
      font-size: 50px;
    }
  </style>
</head>
<body>
欢迎学习  <span id="titlel">Java</span>
</body>
</html>

3.2、字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
  font-family    字体
  font-size      字体大小
  font-weight    字体的粗细
  color          字体的颜色
  -->
  <style>
    body{
      font-family: 楷体;
      color: #23bece;
    }
    h1{
      font-size: 50px;
    }
    .p1{
      font-weight: bold;
    }
  </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">打哈稍等哈速度赶上发哦假发杰斯放假啊覅豆腐爱德华SV奥德赛V领哈酒</p>
<p>ida搭顺风懒得弄发简历hjc</p>

</body>
</html>

3.3、文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐方式 text-align: center;
  3. 首行缩进 text-indent: 2em;
  4. 行高 line-height: 300px;
  5. 装饰 text-decoration: ;
  6. 文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 颜色：
           单词
            RGB
            RGBA
        text-align：排版
        text-indent：段落首行缩进
        height: 300px;
        line-height: 300px;
        行高和块的高度一致就可以居中
        */
        h1{
            color: rgb(0,255,255);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #143fea;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .q1{
            text-decoration: underline;
        }
        /*中划线*/
        .q2{
            text-decoration: line-through;
        }
        /*上划线*/
        .q3{
            text-decoration: overline;
        }
        /*水平对其·参照物 a，b*/
   
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<p class="q1">12321</p>
<p class="q2">12321</p>
<p class="q3">12321</p>


<h1>故事介绍</h1>
<p class="p1">打哈稍等哈速度赶上发哦假发杰斯放假啊覅豆腐爱德华SV奥德赛V领哈酒</p>
<p class="p3">ida搭顺风懒得弄发简历hjc</p>

<p>
    <img src="images/1.png" alt="">
    <span>11111111111111123</span>
</p>


</body>
</html>

3.4、阴影

    #price{
      text-shadow: 10px 10px 1px #3cc7f5;
    }

3.5、超链接伪类

正常情况下a，a:hover

    /*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮状态*/
    a:hover{
      color: gold;
      font-size: 50px;
    }

    /*鼠标按住未释放的状态*/
    a:active{
      color: green;
    }

3.6、列表

/*ul li*/
/*
list-style
none:去掉圆点
circle：空心圆
decimal：数字
square：正方形
*/
/*ul{*/
/*    background: gray;*/
/*}*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

3.7、背景

  1. 背景颜色

  2. 背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 1000px;
      height: 700px;
      border: 1px solid red;
      background-image:url("images/a.png") ;
    /*默认是全部平铺的 repeat*/
    }
    .div1{
      background-repeat:repeat-x ;
    }
    .div2{
      background-repeat:repeat-y ;
    }
    .div3{
      background-repeat:no-repeat ;
    }
  </style>
</head>
<body>

<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>

</body>
</html>

3.8、渐变

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4. 盒子模型

4.1、什么是盒子

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2、边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*body有一个默认的外边距margin:0*/
    /*body{*/
    /*  margin: 0px;*/
    /*  padding: 0px;*/
    /*  text-decoration: none;*/
    /*}*/
    #box{
      width: 300px;
      border: 1px solid red;
    }

    h2{
      margin: 0px;
      font-size: 16px;
      background: green;
      line-height: 30px;
      text-align: center;
      color: white;
    }
    form{
      background:green;
    }
    div:nth-of-type(1)>input{
      border: 3px solid black;
    }
  </style>
</head>
<body>

<div id="box">

  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>姓名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="email">
    </div>
  </form>



</div>


</body>
</html>

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*body有一个默认的外边距margin:0*/
    /*body{*/
    /*  margin: 0px;*/
    /*  padding: 0px;*/
    /*  text-decoration: none;*/
    /*}*/
    #box{
      width: 300px;
      border: 1px solid red;
      padding:0 0 0 0 ;
      margin: auto;
    }

    h2{
      margin: 0px;
      font-size: 16px;
      background: green;
      line-height: 30px;
      text-align: center;
      color: white;
    }
    form{
      background:green;
    }
    div:nth-of-type(1)>input{
      border: 3px solid black;
      margin: auto;
    }
  </style>
</head>
<body>

<div id="box">

  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>姓名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="email">
    </div>
  </form>
</div>
</body>
</html>

盒子的计算方式：你这个元素到底多大

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDNZScPN-1662215054796)(C:\Users\PC\AppData\Roaming\Typora\typora-user-images\image-20220902231245892.png)]

margin+border+padding+内容宽度

4.4、圆角边框

4个角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    /*左上 右上 右下 左下*/
    /*圆角：圆角 = 半径*/
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 100px;
    }
  </style>
</head>
<body>

<div></div>

</body>
</html>

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 100px;
      box-shadow: 10px 10px 0 red;
    }
  </style>
</head>
<body>

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

5. 浮动

5.1、标准文档流

块级元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong…

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

5.2、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    <!--
      block
      inline 行内元素
      inline-block 是块元素，但是可以内联，在一行
    -->
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }

  </style>
</head>
<body>

<div>div块元素</div>

<span>span行内元素</span>

</body>
</html>

5.3、float

  1. 左右浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    <!--
      block
      inline 行内元素
      inline-block 是块元素，但是可以内联，在一行
    -->
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
      float: right;
    }

  </style>
</head>
<body>

<div>div块元素</div>

<span>span行内元素</span>

</body>
</html>

5.4、父级边框塌陷的问题

clear

/*
clear: right;  右侧不允许有浮动元素
clear: left;   左侧不允许有浮动元素
clear: both;   两侧不允许有浮动元素
clear：none； 
*/

解决方案：

  1. 增加父级元素的高度

    #father{
          border: 1px solid red;
          height: 500px;
      }

  2. 增加空的div，清除浮动

     <div class="clear"></div>

    .clear{
        clear: both;
        margin: 0;
        padding: 0;
    }

  3. overflow

在父级元素中，增加一个overflow：hidden
  1. 在父类添加一个伪类：after
 #father:after{
          content: '';
          display: block;
          clear: both;
      }

小结：

  1. 浮动元素后面增加空div

    简单，代码中尽量避免空div

  2. 设置父元素高度

    简单，元素假设有了固定高度，就会被限制

  3. overflow

    简单，下拉的场景尽量避免使用

  4. 在父类添加一个伪类:after（推荐）

    写法稍微复杂一点，但是没有副作用

5.5、对比

  • display
    • 方向不可以控制
  • float
    • 浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

6. 定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
    相对于自己原来的位置进行偏移
    -->
  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
      border: 1px solid red;
    }
    #father{

    }
    #one{
        position: relative;/*相对定位：上下左右*/
        top: -20px;
    }
    #two{
        position: relative;/*相对定位：上下左右*/
        bottom: 20px;
    }
    #three{

    }

  </style>
</head>
<body>
  <div id="father">
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
  </div>
</body>
</html>

相对定位：position: relative;

相对于原来的位置进行指定的偏移，相对定位任然在标准文档流中

top:10px
bottom:10px
left:-10px
right:-10px

6.2、绝对定位

定位：基于xxx定位，上下左右

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，那我们通常会相对于父级元素进行偏移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
      border: 1px solid red;
    }
    #father{
        position: relative;
    }
    #one{

    }
    #two{
        position: absolute;
        right: 30px;
        bottom: -100px;
    }
    #three{

    }

  </style>
</head>
<body>
  <div id="father">
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
  </div>
</body>
</html>

6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      body{
          height: 1000px;
      }
      div:nth-of-type(1)/*绝对定位：相对于浏览器*/
      {
          width: 100px;
          height: 100px;
          background-color: #3cc7f5;
          position: absolute;
          right: 0;
          bottom: 0;
      }
      div:nth-of-type(2){/*fixed，固定定位*/
          width: 100px;
          height: 100px;
          background-color: yellow;
          position: fixed;
          right: 0;
          bottom: 0;
      }
  </style>
</head>
<body>
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
</body>
</html>

6.4、z-index

图层

z-index：默认是0，最高无限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="content">
    <ul>
      <li>
        <img src="images/5058.png" alt="">
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>福建</li>
    </ul>
  </div>

</body>
</html>

opacity: 0.5;/背景透明度/

#content{
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
    width: 350px;
}
ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 350px;
    top: 216px;
    height: 25px;
}
.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度*/
    /*filter: Alpha(opacity=50);*/
}
.tipText{
    z-index: 2;
    color: white;
}
前端三语 HTML、CSS、JavaScript 入门简明教程
Quest_sec的博客
04-08 1112
文章目录（一）概述（二）第一阶段：HTML、CSS、网页布局一、HTML 本文为个人笔记整理，视频课程链接：https://www.bilibili.com/video/BV1sW411T78k? （一）概述 1、做什么？ 无论是前端工程师还是后台工程师，我们要做的工作无非是软件的开发。软件主要分两种架构（下图），本文章（前端工程师）主要从事的是B/S的软件的开发。 2、什么是B/S？ B指bro...
Web前端开发【新手入门指南】
Fighting1995的博客
08-14 1141
Web前端开发入行门槛低、薪资高，是互联网行业的紧俏岗位之一。目前Web前端开发人员年薪基本都在10万以上，一线城市的薪资会更高，这也吸引了很多人进入Web前端行业。对于完全不了解行业的人来说，他们对Web前端知之甚少。下面小菌就给大家解读一下Web前端开发到底是干什么的，初学Web前端的小伙伴不容错过。
html文档组成三要素,解析CSS基本组成三要素
weixin_34439193的博客
06-03 543
你对CSS的基本语法是否熟悉，这里和大家分享一下，CSS基本语法很简单主要由三个要素组成,分别是选择符、属性和值。CSS中选择符就是赋予内部或者外部样式表的名字，选择符可以是一个HTML标签，或者一个HTML中定义的元素ID。CSS基本语法-选择符、属性和值CSS基本语法很简单主要由三个要素组成,分别是选择符、属性和值。选择符选择符就是赋予内部或者外部样式表的名字,选择符可以是一个HTML标签,或...
CSS盒模型之内边距、边框、外边距 十九问（持续更新）
weixin_43964148的博客
05-05 955
第一问：什么是盒模型？ 可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。 但是，盒模型有标准盒模型和IE的盒模型。如果你打出来这两种， 第二问：两者...
CSS学习（第四天）（浮动，常见网页布局，清除浮动，PS切图）
ingenuou_的博客
08-27 2152
CSS学习（第四天）（浮动，常见网页布局，清除浮动，PS切图）
CSS(前端三要素之一)笔记整理一
qq_45867474的博客
09-16 289
目录 1.介绍 2.工作原理 3*.语法 4.如何让在html中使用css 5.css选择器 核心选择器 层次选择器 多选择器 属性选择器 伪类选择器 6.优先级 7.继承 8.单位 9.文本相关样式（可以被继承） 10.列表相关样式 list-style 11.其他样式 12.盒子相关的样式 13. ****盒子模型 1.介绍 层叠样式表 层叠：多个样式可以用于同一个元素 样式：color、font-size 表：css代码...
学习程序的3个要素
我本善良编程专栏
06-30 887
学习程序的3个要素（源于微软专家李建忠观点）： 1）时间：包括编译时（compiled time）和运行时（run time）的特性； 2）地点：存储在哪？ 堆上还是栈上，更具体来说就是地址；在不同地点有不同行为和生命周期； 如在栈上和在堆上是不一样的，在栈上内存是系统自动管理的，而在堆上是需要程序员来处理等 3）人物：写代码的程序员和写IDE环境的程序员；具体来说，就是当你在前台写一段代码时，后
前端基础知识实例：HTML、CSS与JavaScript综合应用
12-11
具体的实现内容有标题、段落、按钮及计数器，展示了前端三要素的协同运用方法。 适合人群：初学者或需要巩固基础的前端开发者。 使用场景及目标：本示例适用于刚接触Web开发的学习者，旨在通过实践加深对HTML、CSS和...
精选资源
小白前端开发入门之路：HTML/CSS+JS基础详解
06-13
Web前端开发技术包括三个要素：HTML、CSS和JavaScript，前端开发的入门门槛其实非常低，本套视频适合初级入门学习上手。目标驱动教学，拒绝填鸭式学习，轻松成为炙手可热的web前端工程师。配套完整的课件和源代码...
HTML+css基础入门学习教程之CSS 相对定位
01-20
在HTML和CSS的世界里，定位是布局设计的关键要素之一，特别是对于创建复杂和交互式的网页。CSS中的定位机制包括静态定位、相对定位、绝对定位和固定定位。在这里，我们将主要探讨相对定位，它是初学者必须掌握的基础...
分享:带会员注册登录一级纯css导航栏代码
迷失曾经
03-30 1831
分享:带会员注册登录一级纯css导航栏代码 代码如下: 带会员注册登录的导航菜单代码下载-免费模版               ›English›登录注册帮助找回密码                        首　页         电子商务         网络营销         导航素材
Javascript & CSS 实现「樱花飘落」、「雪花飘落」特效汇总
热门推荐
Constantiny的博客
03-16 4万+
素材来源于网络稍作修改 侵删如果觉得复制下面运行有问题或者嫌麻烦可以直接下载源代码欢迎fork、star。
CSS基础（一）
mlh110的博客
12-14 385
CSS基础（一）目录CSS基础一 目录 基本介绍 CSS的三种类型 CSS基本语法 选择器selector基本介绍CSS：Cascading Style Sheets HTML控制页面结构 CSS定义HTML中的元素如何显示，其可以将页面样式与内容相分离CSS的三种类型 内联样式 即在tag标签中增加style属性 <p style="color:red;background-c
axure原型和css的三要素
weixin_45466923的博客
10-10 574
LeetCode 77. 组合 | Python
"大梦三千秋的博客
09-08 763
使用数学组合数的思路，解决 LeetCode 《77. 组合》问题
前端三要素：HTML、CSS、JavaScript介绍以及三者的关系理解
鄙人kunzhi96，感恩遇见！
12-17 1万+
最近在重新系统的学习前端,接下来的博客会把一些前端知识总计下来,以便自己和大家学习参考. Web前端开发技术包括三个要素：html（结构）、css（样式）、javascript（行为动作）。 现在前端三要素也演化成HTML5、CSS3、jQuery（js中常用的库）。 HTML：HTML可以简单理解为在前端技术中勾勒出一个结构。就像我们盖楼房,需要钢筋水泥先搭建出来一个轮廓,而HTML...
Canvas架构手记 08 CSS Transform | CSS 显示模型 | React.memo
最新发布
im_AMBER的博客
12-10 1247
React.memo是 React 提供的高阶组件（HOC），本质是浅比较的组件缓存工具它会 “记住” 组件上一次渲染的结果；当组件的props 没有发生浅变化时，直接复用上次渲染的 DOM / 虚拟 DOM，跳过重新渲染；仅当 props 发生浅变化（比如值类型改变、引用类型地址改变）时，才重新渲染组件。// 自定义比较：仅比较 angle，忽略 className/style// 带自定义比较的 memo 组件// ... 组件逻辑。
CSS基础详解(2)--Grid网格布局详解
Coding...
12-10 1066
网格布局是一种通过水平与垂直线构成的页面排版方式，由列(column)、行(row)和沟槽(gutter)组成。通过CSS的display: grid属性可创建网格容器，使用grid-template-columns定义列宽（支持px、fr等单位），grid-gap设置间隙。repeat()函数可简化重复轨道定义，minmax()函数能灵活控制行/列尺寸范围。网格分为显式（手动定义）和隐式（自动生成）两种，通过grid-auto-rows可控制隐式行高。网格布局能实现响应式、精确的元素排列，提升页面统一性。
avue uploader图片预览拉伸变型的css处理方法
经验之谈，不做搬运工
12-10 291
摘要：针对avue uploader图片预览拉伸问题，可通过CSS覆盖解决。使用object-fit: cover属性可让图片覆盖容器并裁剪多余部分，保持比例不变。如需完整显示不裁剪，可改用object-fit: contain。示例代码展示了如何在el-upload组件中应用该样式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Genius-Sue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值