0923-0925css学习笔记

于 2022-09-25 17:29:20 发布
阅读量321 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端学习笔记 文章标签： 学习 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaobai_learning/article/details/127010404
本文深入讲解CSS中的背景图与img的区别、标签显示模式、元素显示模式转换、CSS特性等核心内容，并通过具体案例演示如何应用这些知识。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

内容参考：CSS进阶-12-背景图和img的区别_哔哩哔哩_bilibili

预计学习p77---p111，实际学习：p77---111

p77:背景图与img

重要的图片用img，美化型用背景图

p78-81:标签显示模式

一、块

代码:div,p,h,ul,li,dl,dt,dd,from,header,nav,footer

<!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>
        /* 块级标签:独占一行；宽度是父级的100%；添加宽高都生效*/
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
</body>
</html>

二、行内:一行显示多个(不换行)

代表：a.span,u,b,i,s,strong,ins,em,del...

宽高由内容撑开；不可以设置宽高。

<!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>
        /* 不换行;设置宽高不生效;尺寸内容的大小相同 */
        span{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>

    
</body>
</html>

三、行内块(可以一行显示多个，可以设置宽高)

代表：textarea,input,button,select...

四、元素显示模式转换

放对应的css标签内

 p82:标签嵌套

html嵌套规范:a可以嵌套任意元素但不能嵌套a

<!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>
<body>
    <!-- p 和 h 标题不能相互嵌套 -->
    <!-- p 里不能包含div -->
    <p>
        <h1>1级标题</h1>
    </p>
    <p>
        <div>div</div>
    </p>

    <!-- a套什么都行，不能套自己 -->
    <a href="#"><h1>aaa</h1></a>
    
</body>
</html>

p83-84:css特性

一、继承性

特性：子继承父的所有特点（文字控制的属性都可以继承）

<!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{
            color: red;
            height: 300px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里的文字
        <span>这是div里span的文字</span>


        <!--   ！！自己有颜色则不继承 -->
        <a href="#">www</a>
        <h1>一级标题</h1>
    </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{
            color: red;
            color: green;
        }
        .box{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        divdiv
    </div>
    
</body>
</html>

p85-86综合案例

<!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>案例1</title>
    <style>
        a{
            text-decoration: none;
            width: 200px;
            height: 100px;
            background-color: pink;
            display: inline-block;
            color: whitesmoke;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: rgb(169, 169, 236);
        }
    </style>
</head>
<body>
    <!-- a{导航$}*5 -->
    <!-- alt+shift+鼠标左 竖选 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</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>
        a{
            /* 文字颜色 */
            color:white;

            width: 100px;
            height: 100px;

            /* 居中 */
            text-align: center;
            line-height: 50px;

            /* 去除下划线 */
            text-decoration: none;

            /* 背景色 */
            background-color: pink;

            /* /转型 */
            display: inline-block;
        }

        .noe:hover{
            background-image: url(./icon_6.png);
        }
        .two:hover{
            background-image: url(./icon_5.png);
        }
        .three:hover{
            background-image: url(./icon_4.png);
        }
        
        .one{
            background-image: url(./icon_1.jpg);
        }
        .two{
            background-image: url(./icon_2.png)
        }
        .three{
            background-image: url(./icon_3.png);
        }

    </style>
</head>
<body>

    <a href="#" class="one">案例1</a>
    <a href="#" class="two">案例2</a>
    <a href="#" class="three">案例3</a>
    
</body>
</html>

//有些问题（第一个选项无法改图片无法设伪类）日后改

p87-111:盒子模型

一、优先级

复习：通配符选择器（理解）_杨宗健的博客-优快云博客_通配符选择器

原则：选中范围越广，优先级越低。

1.基本测试

<!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>
        #one{
            /* id选择器 */
            color: orange;
        }

        .box{
            /* 类选择器 */
            color:blue;
        }
        
        div{
            /* 标签选择器 */
            color:green !important;
        }

        body{
            /* 继承 */
            color:red;
        }

        /* !important不能提升继承的优先级 */
    </style>
</head>
<body>

    <!-- 当一个标签使用多个选择器，样式冲突，谁生效 -->
    <div class="box" id="one" style="color:pink">测试优先级</div>
    

</body>
</html>

2.叠加计算

<!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>
        /* 行内,id,类,标签 */
        /* 0101 */
        /* div #one{
            color: orange;
        } */

        /* 0020 */
        .father .son{
            color: aliceblue;
        }

        /* 0011 */
        .father p{
            color: aqua;
        }

        /* 0002 */
        div p{
            color: black;
        }
    </style>

</head>
<body>
    <div class="father">
        <p class="son" id="one">我是一个标签</p>
    </div>
    
</body>
</html>

复合优先级顺序（比个数）：行内，id，类，标签

3.计算题

注意：

 id选择器：#XXX

类选择器：.XXX

标签选择器:div{}

二、谷歌排错

f12

灰色：没用到

黄三角：语法错误

三、PxCook

下载以及使用PxCook - 高效易用的自动标注工具,生成前端代码,设计研发协作利器 (fancynode.com.cn)

四、组成

概念：把每个标签看做一个盒子，由“内容区域content”“内边距区域padding”“边框区域border”“外边框区域margin”组成。

<!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: pink;

            /* 边框线 (盒子描线)*/
            border: 5px solid #000;


            /* 内边距 */
            padding: 20px;
            /* 外边距 */
            margin: 20px;
        }

    </style>
</head>
<body>
    <div>ipad</div>
    
</body>
</html>

五、内容width和height

一般使用div，给div设置宽高

六、border使用方法

1.border: solid red;

实线：solid

虚线：dashed

点线：dotted

2.单面边框

border-left/right/top/botton

七、尺寸计算-borde 

盒子尺寸是width/height + border宽

八、案例

<!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: 280px;
            height: 280px;
            background-color: #ffc0cb;
            border : 10px solid #0000ff;
        }
    </style>
</head>
<body>
    <div>

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

 

 

九、新浪导航

1.布局div

由外到内写

.box{

            height: 40px;

            border-top: 3px solid #ff8500;

            border-bottom: 1px solid #edeef0;

        }

2.内容a

<!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{
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            width: 80px;
            height: 40px;
            
            text-decoration: none;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
        }

        .box a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">新浪导航</a>
        <a href="">新浪导航</a>
        <a href="">新浪导航</a>
        <a href="">新浪导航</a>
    </div>

    
</body>
</html>

从外到内，先宽高背景色，放内容，调节内容位置，控制文字细节。

3.padding优化

.box a{

padding:  0 10px;//用内容撑开，左右距离10px

}

十、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: 300px;
            height: 300px;
            background-color: rgb(130, 88, 88);
            padding: 50px;

            /* padding 属性可以当作复合属性使用，表示单独设置某个方向的内边距 */
            /* padding 最多取四个值 */
            /* padding: 10px 20px 30px 40px ; */
            padding: 10px 20px 30px ;

            /* 快速换行  ctrl+enter */
            
        }
    </style>
</head>
<body>
    <div>文字

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

一般四个值，缺少的看对面

十一、尺寸-border和padding

border和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: 300px;
            height: 300px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;

            /* 变成css3的盒子，好处：加了border和padding不需要手动做减法 */
            box-sizing: border-box;

        }
    </style>
</head>
<body>
    <div>111</div>
    
</body>
</html>

十三十四、外边距

同内边距

十五、清除默认样式

*{
            margin: 0;
            padding: 0;
         
        }

十六、版心居中

margin: 0 auto;边距0，左右auto

十七、综合案例

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            padding: 42px 30px 0;
            margin: 50px auto;

        }

        .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;

            /* 行高是1倍，即字号的大小 */
            line-height: 1;
            padding-bottom: 9px;
        }

        /* 去掉列表的符号 */
        ul{
            list-style: none;
        }

        /* li{} */
        .news li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }

        .news a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计,平面设计,php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery的链式编程是什么</a></li>
        </ul>
        
    </div>
    
</body>
</html>

十八、外边距-问题

1.外边距折叠现象

        a.合并现象:垂直布局的块元素margin会合并

        

        解决方法：写一个就行

        b.塌陷现象:相互嵌套的块元素，子元素的margin-top会作用在父元素上,导致父元素下移

        

        解决方法：

        

 

十九、行内元素的垂直内外边距

即：行内标签使用margin或padding只能左右生效，无法上线生效（margin/padding-top或bottom同理）

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值