CSS第三天

瑶瑶的猫

已于 2024-08-19 21:11:44 修改

阅读量1.5k

点赞数 41

文章标签： css 前端

于 2024-08-19 20:08:51 首次发布

本文链接：https://blog.csdn.net/qq_43527058/article/details/141279476

版权

一、CSS三大特性

层叠性：同一个样式写两遍，则哪个样式距离结构近就设置哪个。

继承性：子标签会继承父标签的某些样式，如文本的颜色和字号（和文字相关的一些属性text- , line- ，font-）

行高的继承性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font: 14px/1.5;
        }
        div {
            /* 子元素继承了父元素的body的行高1.5 */
            /* 这个1.5就是当前元素文字大小14的1.5倍 */
            font-size: 14px;
        }

        p {
            /* 子元素继承了父元素的body的行高1.5 */
            font-size: 12px;
        }

        /* li虽然没有手动指定文字大小但是会继承父类元素 */
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
    </div>
    <p>你好</p>
    <ul>
        <li>你好</li>
    </ul>
</body>

在继承性当中，链接的样式不会继承父类的样式，这是因为浏览器默认给链接指定了一个样式。a {.....} 。

注意：body行高1.5这样的写法最大的优势就是里面的子元素可以根据自己的文字大小自动调整行高。

优先级：同时给一个标签用多种选择器设置了样式，会有优先级。

注意：1、如果想让某一个选择器的优先级最高则在后面写上！important。2、继承的权重是0 ，如果该元素没有直接选中，不管父元素的权重有多高，子元素的权重都是0.（重要！！）因此再单独给子元素写了个样式，则该样式的权重比继承的大。所以我们看标签到底执行哪个样式，就先看这个标签有没有直接被选出来。

权重叠加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 复合选择器权重叠加问题 */
        /* ul li权重 ： 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: pink
        }
        /* li的权重： 0,0,0,1 */
        li {
            color: aqua;
        }
        /* .nav li 的权重： 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: red;
        }
        /* 所以最终样式应该是红色 */
    </style>
</head>

<body>
    <ul class="nav">
        <li>猪蹄子</li>
        <li>猪蹄子</li>
        <li>猪蹄子</li>
    </ul>
</body>

</html>

二、盒子模型

页面布局要学习三大核心：盒子模型，浮动和定位

1.1看透网页的布局的本质

网页布局过程：

1、先准备好相关的网页元素，网页元素基本都是盒子。

2、利用CSS设置好盒子样式，摆放到相应的位置。

3、往盒子里面装内容。

网页布局核心的本质：就是利用CSS摆盒子。

1.2 盒子模型的组成

包括：边框、内边距、外边距、内容

1.3边框（border）

通过border可以设置边框的粗细、样式、颜色。

div {
            width: 300px;
            height: 300px;
            border-width: 3px;
            border-style: solid; //dashed虚线
            border-color: aqua;
        }

边框的复合写法

        div {
            width: 300px;
            height: 300px;
            /* border-width: 3px;
            border-style: solid;
            border-color: aqua; */
            /* 复合写法没有先后顺序 */
            border: 1px solid red;
        }

边框的四条边也可以分别设置颜色：border-top、border-right、border-left、border-bottom

        div {
            width: 300px;
            height: 300px;
            /* 利用层叠性，实现边框的三边是红色，上边是蓝色 */
            /* 注意下面两条语句的顺序一定不能颠倒 */
            border: 1px solid red;
            border-bottom: 1px solid blue;
            
        }

1.4 边框复合

border-collapse

1.5 边框会影响盒子的实际大小

解决办法：量尺寸的时候去掉边框来量尺寸。

1.6 内边距（padding）

设置内容与边框的距离

分别设置写法：padding-left、padding-right、padding-top、padding-bottom
复合写法：

注意：第四个写法是采取顺时针方向的赋值。

当我们给盒子指定padding值之后，增大了盒子大小。解决方法：让weight和height的大小减去padding*2。

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

案例

1、新浪导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a {
            display: inline-block;
            /* 注意这里的width不设置，用padding挤开就行 */
            height: 41px;
            font-weight: 400;
            text-decoration: none;
            text-align: center;
            color: #4c4c4c;
            padding: 0px 20px;
        }

        a:hover {
            color: #ff8500;
        }

        .nav {
            background-color: antiquewhite;
            border-top: 3px solid orange;
            border-bottom: 1px solid #ededf0;
            padding: 2px 5px;
            line-height: 41px;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">设置为首页</a>
        <a href="#">手机客户端</a>
        <a href="#">搜索栏</a>

    </div>
</body>

</html>

1.7 外边距（margin）

该属性的简写方式和内边距一样。

外边距可以让块级盒子水平居中显示，但是必须满足两个条件：

盒子必须指定了宽度
盒子的左右外边距都设置为auto。margin：0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内快元素水平居中给其父元素添加text-aligh: center即可。

1.8 外边距合并

1.9 清除内外边距

网页某些元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局之前，首先要清除下网页元素的内外边距。（这也是在后续开发中写CSS的第一句代码）

 * {
        padding: 0;
       margin: 0;
    }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内元素就可以了。

二、PS基本操作

综合案例---产品模块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #e7e7e7;
        }

        .box {
            width: 298px;
            height: 415px;
            margin: 20px auto;
            background-color: white;
        }

        .box img {
            margin-left: 2px;

        }

        .review {
            margin: 10px 20px;
            font-size: 16px;
            color: #7f7777;
        }

        .comment {
            margin: 40px 20px 0px 20px;
            font-size: 12px;
            color: #413d3d;
        }

        .comment h4 {
            display: inline-block;
            font-size: 15px;
            /* 这里没有单位 */
            font-weight: 400;
        }

        .comment em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }

        .comment span {
            font-weight: 700;
            color: orange;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/img.png" class="img">
        <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        <div class="comment">来自112345的评价
            <h4>Redmi AirDots真无线蓝...</h4>
            <em>|</em>
            <span class="price">99.9元</span>
        </div>
    </div>
</body>

</html>

2、

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }

        .box {
            height: 130px;
            width: 299px;
            border: 2px solid #ebe4e0;
            margin: 50px auto;
        }

        .box .title {
            height: 40px;
            line-height: 40px;
            border-bottom: 2px dotted #ebe4e0;
            padding-left: 10px;
        }

        .box ul {
            padding-left: 20px;
            margin-top: 10px;
            font-size: 14px;
        }

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

        .box ul li a {
            text-decoration: none;
            color: #6a6968;
        }

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

<body>
    <div class="box">
        <div class="title">品优购快报</div>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒</a></li>
            <li><a href="#">【特惠】母亲节，最低5折</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
        </ul>
    </div>
</body>

</html>