css笔记

最新推荐文章于 2024-06-13 11:45:00 发布
最新推荐文章于 2024-06-13 11:45:00 发布
阅读量78 收藏
点赞数
分类专栏： 笔记 文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51497041/article/details/120641177
版权

快捷键：

        shift+alt+向下方向键     把上一行复制到下一行

        ctrl + /                            加注释

        

浮动 float

 

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: blanchedalmond;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: black;
            float: left;
        }
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
</body>
</html>

 

 float其他特点

 

 浮动不会覆盖文字

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            float: left;
        }
        .box2{
            
            background-color: blue;
            
        }
        .s1{
            width: 100px;
            height: 100px;
            background-color: wheat;
            /* 设置浮动后 设置的宽高将不再被行内元素限制 */
            /* float: left; */
        }
    </style>
</head>
<body>
        <div class="box1"></div>
        <p>
            打发打发手动打发手动阀手动阀手动阀打撒打算多发多发发的发的发射点发射点发射点发射点发射点大沙发手动阀手动阀打打发手动阀手动阀手动阀打撒打算多发多发发的发的发射点发射点发射点发射点发射点大沙发手动阀手动阀打打发手动阀手动阀手动阀打撒打算多发多发发的发的发射点发射点发射点发射点发射点大沙发手动阀手动阀打打发手动阀手动阀手动阀打撒打算多发多发发的发的发射点发射点发射点发射点发射点大沙发手动阀手动阀打打发手动阀手动阀手动阀打撒打算多发多发发的发的发射点发射点发射点发射点发射点大沙发手动阀手动阀打阀手动阀手动阀打撒打算多发多发发的发的发射点发射点发射点发射点发射点大沙发手动阀手动阀打手动阀手动阀手动阀打撒打算多发多发发的发的发射点发射点发射点发射点发射点大沙发手动阀手动阀打发手动阀打发士大夫的说法大撒旦发射点发射点发
        </p>
        
        <div class="box2">hello</div>
        <span class="s1">span</span>
</body>
</html>

 float练习：导航条练习

<!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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        
        .nav{
            /* 设置宽度和高度 */
            width: 1210px;
            height: 48px;

            background-color: thistle;

            margin: 100px auto;
        }
        .nav li{
            /* 设置li想做浮动，已使菜单横向排列 */
            float: left;

            /* 设置li的高度 */
            /* height: 48px; */

            /* 将文字在父元素中垂直居中 */
            line-height: 48px;
            
        }
        
        .nav a{
            /* 需要修改a行内元素的行和列大小，所以需转换成块元素 */
            display: block;
            
            /* 去除下划线 */
            text-decoration: none;

            color: #000;

            /* 设置字体大小 */
            font-size: 18px;

            padding: 0 73px;
        }

        /* 鼠标移入效果 */
        .nav a:hover{
            background-color: aqua;
            color: blueviolet;
        }

    </style>
</head>
<body>
    <!-- 导航条结构 -->
    <ul class="nav">
        <li>
            <a href="#">gao</a>
        </li>
        <li>
            <a href="#">xiu</a>
        </li>
        <li>
            <a href="#">qi</a>
        </li>
        <li>
            <a href="#">gao</a>
        </li>
        <li>
            <a href="#">xiu</a>
        </li>
        <li>
            <a href="#">qi</a>
        </li>
        <li>
            <a href="#">gao</a>
        </li>
    </ul>
</body>
</html>

高度塌陷和BFC

 

 浮动后出现高度塌陷

 

 

 

 解决后：

<!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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        .outer{
            border: 10px red solid;
            
            /* 解决 高度塌陷问题*/
            overflow: hidden;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: rgb(12, 4, 4);
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
    <div style="width: 100px; height:200px;background-color: royalblue;"></div>
</body>
</html>

BFC演示

 被浮动覆盖

开启BFC后 

<!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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            float: left;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: seagreen;
            /* 开启BFC 不会被浮动元素覆盖 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
        <div class="box2"></div> 
</body>
</html>

clear

        

 

 

 clear:right;

 clear:left;

 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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
            .box1{
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            float: left;
        }

        .box2{
            width: 400px;
            height: 400px;
            background-color: seagreen;
            overflow: hidden;
            float:right
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(1, 2, 2);

            /* 解决高度塌陷, */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

after

添加div清除浮动格式

<!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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        .box1{
            border: 10px red solid;

        }
        .box2{
            width: 100px ;
            height:  100px ;
            background-color: rgb(151, 91, 91);
            float: left;
        }
        /* box3把box1撑起来了，清除了box2浮动的影响 */
        .box3{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"> aa </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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        .box1{
            border: 10px red solid;

        }
        .box2{
            width: 100px ;
            height:  100px ;
            background-color: rgb(151, 91, 91);
            float: left;
        }
        /* after默认行内元素：不独占一行 */
        /* after 选中的是box1的最后 */
        .box1::after{
            /* 与after和before配合使用，负责在元素头或尾，插入生成内容 */
            content: 'hello';
            /* 行内元素转块元素 */
            display: block;

            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

 clearfix

 问题：不是只有box2移动而是box1也移动了下来

<!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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: royalblue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></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>
    <link rel="stylesheet" href="../../reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rosybrown;
        }

          /* 行元素转成块元素  table可以隔开且不会占空间 */
        /* 第一种方法 */
        /* .box1::before{
            content: '';
          
            display: table;
        } */
        .box2{
            width: 100px;
            height: 100px;
            background-color: royalblue;
            margin-top: 100px;
        }
        
        /* 第二种方式 */
        /* clearfix 这个样式可以同时解决高度塌陷和外边距重叠问题，直接在class的box 后加clearfix */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

相对位置

 

巡山小钻风つ
关注
专栏目录
HTML CSS学习笔记1
weixin_68319789的博客
06-20 120
学习笔记
CSS笔记
最新发布
2201_76100326的博客
08-12 2281
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
CSS学习笔记
m0_58761900的博客
09-18 3110
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css 笔记2
m0_68844946的博客
06-13 1795
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS笔记（精简）
weixin_46160720的博客
03-11 7562
CSS笔记 HTML 前端教程 前端笔记
CSS笔记II
皮鞭蘸碘伏边抽边消毒
01-15 1316
CSS3最全笔记 ，非常详细，HTML5+CSS3 详细完全体笔记
B站pink老师HTML+CSS笔记
m0_56428225的博客
07-20 3247
b站pinkl老师HTML+css笔记（包括h5c3+移动端)
css笔记1
qq_61466402的博客
03-13 8233
目录 css语法 实例 例子解释 css选择器 css使用 三种使用css的方法 外部 CSS 内部 CSS 行内 CSS 多个样式表 层叠顺序 css注释 实例 实例 实例 HTML 和 CSS 注释 css颜色 css背景色 CSS 文本颜色 CSS 边框颜色 CSS 颜色值 实例 css背景 CSS background-color css背景图像 css背景重复 css背景附着 css背景简写 css语法 CSS 规则集（rule...
第一周学习html css笔记
DarrenTitor的博客
10-05 392
0 1 solid不能遗漏 2 缺口方框，用“&amp;lt;fieldset”和“&amp;lt;legend”组合 3 图片固定在某位置，不随滚轮滚动，position：fixed 4 标题在表格的上方中央，caption-side: top ...
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
css笔记css笔记css笔记
04-03
在网页设计领域，CSS（层叠样式表）扮演着至关重要的角色，它使得网页的布局、字体、颜色、背景等视觉元素得以精确控制。CSS 的引入解决了早期纯 HTML 页面表现与结构混合的问题，实现了内容与样式的分离，提高了...
HTMLCSS笔记.pdf
07-14
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
字符串去除重复字符
java后端攻城狮
08-28 1910
方法一： import java.util.LinkedHashSet; public class Solution { public String handle(String str) { int len = str.length(); char[] c = str.toCharArray(); //用Set可以去除重复元素， //LinkedHashSet 可以保存输入顺序 //hashSet 可以快速读访问s.
git小乌龟下载及汉化
java后端攻城狮
08-07 1413
在文件夹里，右键选择 tortoiseGit——>settings修改语言。
vue学习
java后端攻城狮
04-09 1200
创建空文件夹，用IJ打开
super && 自定义异常
java后端攻城狮
08-12 895
使用自定义异常 类MyException继承了Exception类，需要你定义一个包含字符串类型的有参构造函数，用来输出异常的详细消息字符串。 类Solution包含validate方法，传入一个整型的num，你需要对其传入的参数进行判断，当数字包含 0 到 100 之间的任意数字，则输出该数字，若输入的数字不在该范围，则抛出自定义异常MyException并打印输出The number you entered is not legal。 public class MyExce...
CSS笔记整理：HTML与CSS基础，字符编码及网页结构
"这是一份关于CSS的个人学习笔记，作者分享了自己在学习CSS过程中的理解和总结，旨在帮助读者更好地理解和应用CSS。...通过这份CSS笔记，读者可以系统地学习和复习CSS的基础知识，为进一步深入学习和实践打下坚实基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值