CSS笔记3

最新推荐文章于 2024-09-29 09:36:14 发布
最新推荐文章于 2024-09-29 09:36:14 发布
阅读量58 收藏
点赞数
文章标签： css 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TID12/article/details/130582392
版权

文档流
文档中可显示对象在排列时所占用的位置/空间

标准文档流会产生的问题

  • 高矮不齐，底边对齐
  • 空格会有折叠（多个空格会变成一个）
  • 元素无间隙

脱离文档流

  1. 浮动
  2. 绝对定位
  3. 固定定位

浮动
原理：浮动后脱离了文档流，只有左右浮动，没有上下浮动，相当于在页面上增加了一个浮层来放置内容，可以理解为有两层页面，一层是底层的原来页面，另一侧是脱离文档的上层页面，所以会出现折叠现象。
float属性定于元素在哪个方向浮动，任何元素都可以浮动，放在浮动层里面的元素就不会有文档流上的问题

值描述
left元素向左浮动
right元素向右浮动
<!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>
        #box1{
            width: 200px;
            height: 200px;
            float: left;
            background-color:aqua;
        }
        #box2{
            width: 400px;
            height: 400px;
            background-color: brown;
        }
        img{
            height: 200px;
            width: 200px;
            float:left
        }
       
        
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div><img src="https://img.tukuppt.com/photo-big/00/00/94/6152bc0ce6e5d805.jpg" alt="">
        <img src="https://img.tukuppt.com/photo-big/00/00/94/6152bc0ce6e5d805.jpg" alt="">
    </div>
    
</body>
</html>

运行结果：
在这里插入图片描述
浮动可以横向摆放（并且用外边距让元素之间有边距）
当横向摆放的宽度不够时，会到下一行摆放

<!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:100px;
            height: 100px;
            float :left
        }
        .box1
        {
            background-color: aquamarine;
        }
        .box2
        {
            background-color: black;
        }
        .box3
        {
            background-color: red;
        }
        ul li{
            float:left;
            margin: 0 40px;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
    </ul>
</body>
</html>

运行结果：
在这里插入图片描述
清除浮动
浮动的副作用：

  1. 浮动元素会造成父元素高速塌陷
  2. 后续元素会受到影响

解决方法

  1. 父级元素设置高度
  2. 收影响的元素添加clear属性（有left和right和both的三个值）对子元素添加
  3. overflow清除浮动（在父级标签的样式里面加：overflow：hidden和clear：both）可以适应大小
  4. 伪对象方式在class后面加上：：after 里面放，conten：”“ display：block，clear：both
<!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>
        .box0{
            width: 500px;
            background-color: chocolate;
            overflow: hidden;
            clear: both;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            float:left
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:blue;
            float:left
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color:darkorange;
            float:left
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: green;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box0"> 
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        
    </div>
    <div class="box4"></div>
   

    
</body>
</html>

运行结果：
在这里插入图片描述

<!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>
        .box0{
            width: 500px;
            background-color: chocolate;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            float:left
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:blue;
            float:left
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color:darkorange;
            float:left
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: green;
            
        }
        .box0::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box0"> 
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        
    </div>
    <div class="box4"></div>
   

    
</body>
</html>

运行结果与上面相同

定位

  • relative-相对定位
  • absolute-绝对定位
  • fixed-固定定位
    绝对对定位和固定定位会脱离文档流
    可以用left、top、right、bottom四个方向来调整

相对定位：

<!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">
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
      top:50px;
      left:100px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div>

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

运行结果：
在这里插入图片描述
绝对定位（会脱离文档流）
每设置一次都会添加一层，而浮动只有两层

<!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">
  <style>
      .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      position:absolute;
      top:50px;
      left:100px;
    }
    .box2{
      width:300px;
      height: 300px;
      background-color: blue;
      
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="box1">

  </div>
  <div class="box2">

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

运行结果：
在这里插入图片描述
固定定位
无论页面如何滚动，该定位都不会动

相对定位和绝对定位是相对于具有定位的父级元素进行位置调制，若父级元素不存在定位则逐级向上，直到顶层文档，即如果子级元素有设置定位，而父级没有设置，子级的定位就会往上找，直到找到有定位的父级元素或者顶层

<!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">
  <style>
      .box1{
      width: 500px;
      height: 500px;
      background-color: red;
      position:relative ;
      top:50px;
      left:100px;
    }
    .box2{
      width:300px;
      height: 300px;
      background-color: blue;
      position:absolute;
      top:50px;
      right:50px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="box1">

    <div class="box2"></div>
  </div>
  

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

运行结果：
在这里插入图片描述

<!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">
  <style>
      .box1{
      width: 500px;
      height: 500px;
      background-color: red;
    
    }
    .box2{
      width:300px;
      height: 300px;
      background-color: blue;
      position:absolute;
      top:50px;
      right:50px;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="box1">

    <div class="box2"></div>
  </div>
  

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

运行结果：
在这里插入图片描述
Z-index可以设置堆叠元素的顺序，有更高的顺序会在前面

圆角
通过border-radlus来设置

  • 四个值，分别为左上角右上右下和左下
  • 三个值，左上，右上角和左下角，右下角
  • 两个，左上和右下，右上和左下角
  • 一个，四个都一样
  • 50%/100%可以变成圆
<!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>
    .box1{
      background-color: red;
      width: 300px;
      height: 300px;
      border-radius: 30px;
    }
    .box2{
      background-color: blue;
      width: 300px;
      height: 300px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  
  <div class="box1">

  </div>
  <div class="box2">
  </div>
</body>
</html>

运行结果：
在这里插入图片描述

阴影

  • h-shadow-必选，水平方向的阴影位置
  • v-shadow-必选垂直阴影位置
  • blur-可选模糊距离
  • color-可选阴影颜色
<!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>
    .box1{
      background-color: red;
      width: 300px;
      height: 300px;
      border-radius: 30px;
      box-shadow:10px 10px ;
    }
    .box2{
      background-color: blue;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body>
  
  <div class="box1">

  </div>
  <div class="box2">
  </div>
</body>
</html>

在这里插入图片描述
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的次数
用百分比来规定变化发生事件，或者用from和to（from和to一般只有一个变化过程）
@keyframes创建动画

animation执行动画
animation: name duration timing-function delay iteration-count direction
名字、持续时间、速度调整、速度开始的时间、播放次数、方向

值描述
name设置动画的名称
duration设置动画持续的时间
timing-function设置动画效果的速率
delay设置动画开始的时间（延时执行）
iteration-count设置动画循环的次数，infinite为无限次循环
direction设置动画播放的方向
animation-play-state控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function的值描述
ease逐渐变慢（默认）
linear匀速
ease-in加速
ease-out减速
ease-in-out先加速后减速
direction值描述
normal默认值为normal表示向前播放
alternate动画再第偶数次再向前播放，第奇数次向反方向播放

选择器：hover（鼠标划到这上面就可以执行接下来的命令）

<!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: 300px;
      height: 300px;
      background-color: red;
      animation: DH 3s linear 0s infinite;
    }
    div:hover
    {
      animation-play-state: paused;
    }
    @keyframes DH
    {
       0%{
        width:200px;
        background-color: red;
       }
       50%
       {
          width: 400px;
          background-color: blueviolet;
       }
       100%
       {
        width: 200px;
        background-color: green;
       }
    }
    
  </style>
</head>
<body>
  
  <div>

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

呼吸图

<!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>
    .box
    {
      width: 500px;
      height: 500px;
      border-radius: 50%;
      box-shadow: 5px 5px 0 rgba(0, 0,0, 0.2);
      background-color: aqua;
      margin: auto;
      animation: DH 2.5s linear 0s infinite alternate;
    }
    
    @keyframes DH
    {
      0%
      {
        opacity: 0.2;
        background-color: aqua;
        width:500px;
      }
      25%
      {
        opacity: 0.5;
        background-color: aquamarine;
        width: 700px;
        height: 700px;
      }
      50%
      {
        opacity: 0.2;
        background-color: burlywood;
        width: 500px;
        height: 500px;
      }
      75%
      {
        opacity: 1;
        background-color: blue;
        width: 100px;
        height: 100px;
      }
      100%
      {
        opacity: 0.5;
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
      }
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
</body>
</html>

媒体查询
可以让页面在不同终端上有不同的显示
使用mate标签（补全时候自带）会禁止内容在不同终端上面缩放，只显示其自身的大小

当设备不同时可以显示不同的页面

<!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>
    .box
    {
      width: 400px;
      height: 400px;
    }
      @media screen and (max-width: 768px)  
      {
        .box
        {
          background-color:red;
        }
        .box1
        {
          display: none;
        }
        .box2
        {
          display: none;
        }
        
        
      }
      @media screen and (max-width: 996px) and (min-width:768px) 
      {
        .box
        {
          background-color:blue;
        }
        .box1{
          display: block;
        }
        .box2
        {
          display:none;
        }
      }
      @media screen and (min-width: 996px)  
      {
        .box
        {
          background-color:black;
          
        }
        .box1
        {
          display: block;
        }
        .box2
        {
          display:block
        }
        
      }
    
  </style>
</head>
<body>
  
  <div class="box">
    
  </div>
  <p class="box1">hhhh</p>
  <p class="box2">oooo</p>
</body>
</html>
  • display: block为显示，变为块级元素
  • display:none为不显示
  • display：inline变为行内元素（内联元素）

上述代码在不同的终端显示的不一样

雪碧图
可以只导入一张图片，然后调整，用这张图片里面的不同部分

字体图标（需要下载获取，Iconfont）
优点：

  • 轻量化：加载速度块，减少http的请求
  • 灵活：可以用CSS设置大小颜色等等
  • 兼容性：网页字体支持所有现代浏览器
TID12
关注
css笔记css笔记css笔记
04-03
3. CSS 字体属性： - **字体设置**（Font property）：`font` 属性允许一次性设置字体家族、大小、粗细和斜体等，如 `font: 16px Arial, sans-serif bold italic;`。 - **字体大小设置**（Font-size）：可以使用...
css3笔记知识点总结
06-24
css3笔记知识点总结
CSS笔记
weixin_58509345的博客
12-16 2547
一、基础认知 CSS：层叠样式表 CSS的作用：给页面中的HTML标签设置样式 1.1CSS语法规则 写在哪里？ CSS写在style标签中，style标签一般写在head标签里面，title标签下面 怎么写？ CSS初体验 常见属性：color（文字颜色）font-size（字体大小）background-color（背景颜色）width（宽度）height（高度） 注意点：1、CSS标点符号都是英文状态下的2、每一个样式键值对写完之后，最后需要写分号 1.2CSS引入方式 1.2.
CSS学习笔记
m0_58761900的博客
09-18 3109
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
css 笔记2
m0_68844946的博客
06-13 1788
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS入门笔记
m0_74293254的博客
09-19 1070
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。它为 HTML 提供了视觉上的美化工具，能够控制网页中元素的展示方式，包括字体、颜色、布局、间距、边框等。层叠：CSS 的“层叠”概念意味着样式规则可以以多种方式应用，它们的优先级会按一定的规则叠加生效。样式可以直接在 HTML 元素中定义，可以在页面的<style>标签中编写，也可以存储在外部的 CSS 文件中。样式。
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 6570
Html5 + Css3笔记详细汇总大全
前端css基础学习笔记
a_big_panda的博客
01-22 1001
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS 学习笔记
weixin_42098295的博客
05-06 1275
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1309
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
CSS3手写笔记.md
04-14
看黑马视频里面的前端css3笔记，里面主要是讲课老师在课堂上手写的笔记，非常详细，供大家学习，一起交流学习
CSS-Day3
最新发布
m0_74039531的博客
09-29 179
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
前端工程规范-3：CSS规范（Stylelint）
Vinca@的博客
09-26 1021
Stylelint 是一个灵活且强大的工具，适用于保持 CSS 代码的质量和一致性。结合其他工具（如 Prettier 和 ESLint），可以更全面地保障前端代码的整洁性和可维护性。
CSS开发全攻略
邓邓子的博客
09-25 1368
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
CSS学习 - 常用属性
Aaron121314的博客
09-25 451
font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。要按照顺序，可以不设置某个值，未设置的使用默认值。border-width、border-style 以及 border-color 的简写属性。可以去这边查看几乎所有的属性。
CSS3手写笔记：打造专业网页美容师
本资源是一份详细的CSS3手写笔记，旨在帮助前端开发者深入理解并掌握CSS3的核心概念和技能。笔记由黑马视频中的课程讲解整理而成，内容涵盖了广泛的CSS3知识点，包括但不限于： 1. **课程目标**： - 学习CSS选择器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值