CSS基础课程笔记-day3

最新推荐文章于 2024-05-18 22:24:22 发布

Obsession_k

最新推荐文章于 2024-05-18 22:24:22 发布

阅读量178

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Obsession_k/article/details/128093328

版权

01-CSS三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

1.层叠性

2.继承性

继承：子元素会继承父元素的文字、文本、颜色等属性。

行高的继承性

<style>
        body {
            color: black;
            font: 16px/1.5 'Microsoft YaHei';
        }

        div {
            font-size: 12px;
            /* 不给div设置行高 所以div继承其父亲body的行高1.5 
            意思是此时的行高是当前文字的1.5倍 12*1.5=18 当前div行高为18px */
        }
    </style>

3.优先级

  <style>
        div {
            /* 标签（元素）选择器 权重0001 */
            color: blue;
        }

        .color {
            /* 类选择器/伪类选择器 权重 0010 */
            color: purple;
        }

        #pink {
            /* id选择器 权重0100 */
            color: darkgreen;
        }

        p {
            /* !important重要的 权重∞无穷大 */
            color: chartreuse !important;
        }
    </style>
</head>

<body>
    <div class="color" id="pink" style="color: pink;">我是div</div>
    <!-- 行内样式 style="" 权重1000 -->
    <p>我是p</p>
</body>

优先级注意点：

<style>
        li {
            /* 标签（元素）选择器权重为0，0，0，1 */
            color: red;
        }

        ul li {
            /* 复合选择器中的后代选择器 两个元素选择器 会进行权重叠加 0,0,0,1+0,0,0,1=0,0,0,2 */
            color: blue;
        }

        .nav li {
            /* 复合选择器中的后代选择器 类选择器和元素选择器 进行权重叠加 0,0,1,0+0,0,0,1=0,0,1,1 */
            color: pink;
        }
    </style>

4.权重练习题

------练习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>
        .nav {
            color: red;
        }

        /* 最后li呈现的颜色为pink 因为虽然选择器有权重 但是继承的权重为0 */
        li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</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>
        .nav {
            color: red;
        }

        /* 最后li呈现的颜色为pink 因为虽然选择器有权重 但是继承的权重为0 */
        li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</body>

</html>

02-盒子模型导读

03-盒子模型

页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。

1.看透网页布局的本质

2.盒子模型（Box Model)组成

3.边框（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>盒子模型之边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width 边框的粗细 一般以px作单位 */
            border-width: 5px;
            /* border-style 边框的样式 
               solid 实线边框 
               dashed 虚线边框
               dotted 点线边框
            */
            border-style: solid; 
            border-style: dashed;
            border-style: dotted;

            /* border-color 边框的颜色 */
            border-color: blue;

        }
    </style>
</head>

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

</html>

3.1.边框的复合写法

<style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            /* 层叠性 只是层叠了 上边框   就近原则*/
            border-top-color: red;
        }
    </style>

3.2 表格的细线边框

3.3 边框会影响盒子实际大小

4.内边距

4.1 padding复合属性

以上4种情况，在开发过程中都会遇到。

    <style>
        div {
            width: 200px;
            height: 200px;

            /* 第一种方法 每个边分开写 */
            /* padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px; */

            /* 第二种方法 复合写法  同上 每个边内边距都为5px*/
            /* padding: 5px; */


            /* 上下内边距为5px；左右内边距为10px； */
            padding: 5px 10px;


            /* 上内边距为5px 左右内边距为10px 下内边距为15px */
            padding: 5px 10px 15px;


            /* 上内边距为5px 右内边距为10px 下内边距为15px 左内边距为20px
               依次是四个边的顺时针次序 */
            padding: 5px 10px 15px 20px;
        }
    </style>

4.2 padding会影响盒子实际大小

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

5. padding应用-新浪导航栏

案例：新浪导航案例-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>新浪导航栏</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            /* a行内元素转换为行内块元素 以设置行高 */
            display: inline-block;
            height: 41px;
            color: #4c4c4c;
            /* 不设置宽度 直接设置padding 挤开 */
            padding: 0px 20px;
            text-decoration: none;
            font-size: 12px;
        }

        .nav .dh1:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #ff8500;
        }

        .nav .dh2:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #ff8500;
        }

        .nav .dh3:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #ff8500;
        }

        .nav .dh4:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #ff8500;
        }

        .nav .dh5:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #ff8500;
        }

        .nav .dh6:hover {
            background: rgba(0, 0, 0, 0.1);
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="dh1">设为首页</a>
        <a href="#" class="dh2">手机新浪网</a>
        <a href="#" class="dh3">移动客户端</a>
        <a href="#" class="dh4">博客</a>
        <a href="#" class="dh5">weibo</a>
        <a href="#" class="dh6">关注我</a>
    </div>
</body>

</html>

6.盒子模型外边距margin

6.1外边距典型应用

注：以上方法是让块级元素水平居中，行内元素或者

行内块元素居中给其父元素添加 text-align：center 即可。

<!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>
        div {
            width: 500px;
            height: 300px;
            background-color: pink;
            /* 
            外边距margin左右设置为auto 可以实现盒子水平居中对齐 
            设置前提是必须设置了盒子宽度width
            */
            
            margin: 0 auto;
        }
    </style>
</head>

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

</html>

应用效果：

6.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>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            /* 首先让父亲盒子上外边距为50px 则父盒子向下移动50px 因为继承性 子盒子也向下移动50px  */
            margin-top: 50px;

            /* 块元素塌陷 解决方案 */
               /* 1.为其父元素定义上边框 border: 1px soild transparent; */
               /* 2.为其父元素定义上内边距 padding-top: 1px; */
               /* 3.为其父元素添加 overflow:hidden */
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 然后让子盒子上边距变成100px 企图和父盒子保持一定距离 
            但是造成了块元素塌陷 父子元素的上外边距同时变成了100px */
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

6.3 清除内外边距

04-PS基本操作

05-综合案例

案例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>综合案例-产品模块布局分析</title>
    <style>
        * {
            /* 将页面自带的内外边距清除 */
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: white;
            /* 让块级盒子水平居中对齐 */
            margin: 100px auto;

        }

        .box img {
            /* 和父亲一样宽 */
            width: 100%;

        }

        .box p {
            height: 70px;
            font-size: 14px;
            /* 因为这个段落没有width属性 所以padding不会撑开盒子宽度 */
            padding: 0 28px;
            /* 因为这个段落有height属性 所以不能设置padding 会撑开盒子高度 */
            margin-top: 50px;
        }

        .box .appraise {
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 28px;
            margin-top: 30px;

        }

        .box .info h4 {
            display: inline-block;
            font-weight: normal;

        }

        .box .info span {
            color: #ff6700;
        }

        .box .info {
            font-size: 14px;
            margin-top: 30px;
            padding: 0 28px;
        }

        .box .info em {
            font-style: normal;
            font-weight: 600;
            color: #b0b0b0;
            margin: 0px 5px 0px 15px;
        }

        a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" target="_blank"><img src="images/1.jpg"></a>
        <p class="review"><a href="#" target="_blank">快递牛，整体不错蓝牙可以说秒连。红米给力</a></p>
        <div class="appraise">来自于 117384232的评价</div>
        <div class="info">
            <h4><a href="#" target="_blank">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;

        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            line-height: 32px;
            padding-left: 15px;
        }

        .box ul li a {
            text-decoration: none;
            color: #666;
            font-size: 12px;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
        }

        .box ul {
            margin: 8px 20px;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】母亲节,健康好礼低至5折!</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片!</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

</html>