学习CSS的第三天

被头皮屑逼疯的秃头少女

于 2023-04-16 11:10:57 发布

阅读量90

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_71408630/article/details/130179231

版权

文章目录

前言

了解CSS的第三天，进行了盒子模型、圆角边框、盒子阴影、文字阴影等内容的学习。

一、盒子模型

网页布局的本质：利用CSS摆盒子。
盒子的组成：边框、外边距、内边距、实际内容。

1.1 边框border

基本语法

border：border-color || border-width || border-style; （无前后顺序要求）

属性及说明

属性	说明
边框颜色border-color	边框颜色
边框宽度（粗细）border-width	定义边框粗细，单位是px
边框样式border-style	边框样式

表格细线边框border-collapse

（1）功能：控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

（2）基本语法

border-collapse：collapse；

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

解决方案

（1）测量盒子大小的时候不量边框
（2）如果测量的时候包含了边框，则需要width/height减去边框宽度

代码展示

<!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>
        table {
            height: 100px;
            width: 200px;
        }

        table,
        th,
        td {
            border: 2px solid red;
            /* 把相邻的边框合并到一起 */
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>001</td>
            <td>小王</td>
            <td>21</td>
        </tr>

    </table>
</body>

</html>

1.2 内边距padding

功能：实现内容与边框有一定的距离。
基本语法

padding：length；

复合属性

值的个数	代码实现	说明
一个值	padding：10px；	所有内边距是都10px
两个值	padding：10px 20px；	上下内边距为10px，左右内边距为20px
三个值	padding：10px 20px 30px；	上内边距为10px，左、右内边距为20px，下内边距为30px
四个值	padding：10px 20px 30px 40px；	上内边距为10px，右内边距为20px，下内边距为30px，左内边距为40px

内边距会影响盒子的实际大小

原因

解决方法

添加内边距后，边框和内容有了距离

（1）如果保证盒子和效果图保持一致，则让width/height减去多出来的内边距大小即可。

（2）如果盒子本身没有指定width/height属性。

代码展示

案例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>
        .style {
            height: 41px;
            border-top: 3px #ff8500 solid;
            border-bottom: 1px #edeef0 solid;
            height: 41px;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        a {
            height: 35px;
            display: inline-block;
            text-decoration: none;
            color: #4c4c4c;
        }

        a:hover {
            background-color: darkcyan;
        }
    </style>
</head>

<body>
    <div class="style">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </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>简约版小米侧边栏</title>
    <style>
        /* 1.将a转换成块级元素，并设置相关样式。 */
        a {
            width: 230px;
            height: 40px;
            /* text-indent: 2em; */
            padding-left: 20px;
            text-decoration: none;
            color: white;
            background-color: black;
            display: block;
            /* 若想实现文字垂直居中，可使用行高=盒子高度，即 */
            line-height: 40px;
        }
        /* 2.设置鼠标经过时的样式 */
        a:hover {
            background-color: coral;
        }
    </style>

</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿搭</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>1

1.3 外边距margin

功能：用于设置外边距，即控制盒子与盒子间的距离。
基本语法

margin：length；

复合属性（同内边距padding一致）

值的个数	代码实现	说明
一个值	margin：10px；	所有外边距是都10px
两个值	margin：10px 20px；	上下外边距为10px，左右外边距为20px
三个值	margin：10px 20px 30px；	上外边距为10px，左、右外边距为20px，下外边距为30px
四个值	margin：10px 20px 30px 40px；	上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px

典型应用

典型应用
使块级盒子水平居中	行内元素和行内块元素水平居中
盒子必须指定了宽度（width），盒子左右的外边距都设置为auto。如margin：0 auto；	给其父元素添加text-align：center；

1.4 外边距合并

出现原因：使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
嵌套块元素垂直外边距的塌陷

原因

解决方案

对于两个嵌套关系（父子关系）的块元素，父元素有上边距，子元素也有上边距。

（1）可以为父元素定义上边距；

（2）可以为父元素定义上内边距；

（3）可以为父元素添加overflow：hidden。

1.5 消除内外边距

出现原因：网页元素很多都有默认的内外边距，而且不同的浏览器，默认的值不一致。
基本语法

* {

padding:0;

margin:0;

}

1.6 综合案例

案例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: #ccc;
        }

        .box {
            height: 500px;
            width: 400px;
            background-color: rgb(215, 168, 152);
            margin: 100px auto;
        }

        .review {
            height: 70px;
            font-size: 14px;
            margin-top: 20px;
            padding: 0 20px;
        }

        .appraise {
            margin-top: 20px;
            padding: 0 20px;
            font-size: 12px;
            color: #ccc;
        }

        .info {
            font-size: 14px;
            margin-top: 10px;
            padding: 0 20px;
        }

        .box img {
            width: 100%;
        }

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

        .info em {
            font-style: normal;
        }

        .info span {
            color: coral;
        }
    </style>
</head>

<body>

    <div class="box">
        <div>
            <img src="image.png" alt="">
        </div>
        <div class="review">
            快递牛，整体不错蓝牙可以秒连，红米给力
        </div>
        <div class="appraise">
            来自12324562的评价
        </div>
        <div class="info">
            <h4>Redmi AirDots真无线蓝牙...</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>品优购快报</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 198px;
            width: 298px;
            border: 1px solid black;
            margin: 100px auto;
        }

        .box h3 {
            border-bottom: 1px dashed black;
            height: 30px;
            padding-left: 10px;
            line-height: 30px;
        }


        li {
            color: #ccc;
            height: 20px;
            list-style: none;
            line-height: 20px;
        }

        .box ul {
            margin-top: 15px;
        }

        .box ul li {
            margin: 10px;
            padding-left: 10px;
        }

        .box ul li a {
            color: dimgray;
            text-decoration: none;
        }

        .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="#">【特惠】113131</a></li>
            <li><a href="#">【特惠】4949626323</a></li>
        </ul>
    </div>
</body>

</html>

二、PS基本操作

基本操作	说明
文件→打开	可以打开我们要测量的图片
Ctrl+R	可以打开标尺，或者视图→标尺
右击标尺	把里面的单位改为像素
Ctrl+加号/减号	调整视图大小
按住空格键	鼠标可以变成小手，拖动PS视图
用选区拖动	可以测量大小
点击空白处/Ctrl+D	可以取消选区

三、圆角边框border-radius

功能：用于设置元素的外边框圆角。
原理：（椭）圆与边框的交集形成圆角效果。
基本语法

border-radius：length；

注意点

（1）参数值可以为数值或百分比的形式；

（2）如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写成为50%；

（3）如果是个矩形，设置为高度的一半就可以做；

（4）该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角，右下角，左下角；

（5）分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

代码展示

<!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>
        .circle {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius: 50%;
        }

        .tremble {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <div class="circle">
        我是圆形
    </div>
    <br />
    <div class="tremble">
        我是矩形
    </div>
</body>

</html>

四、盒子阴影box-shadow

基本语法

box-shadow：h-shadow v-shadow blur spread color inset;

属性及描述

属性	说明
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色。参阅css颜色值
inset	可选，将外部阴影（outset）改为内部阴影

注意点

（1）默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效；

（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>盒子阴影</title>
    <style>
        .shadow {
            width: 200px;
            height: 100px;
            margin: 50px auto;
            line-height: 100px;
            border: 1px solid black;
            box-shadow: 20px 20px 10px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div class="shadow">
        盒子阴影
    </div>
</body>

</html>

五、文字阴影text-shadow

基本语法

text-shadow：h-shadow v-shadow blur color;

属性及说明

属性	说明
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊的距离
color	可选，阴影的颜色。参阅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>文字阴影</title>
    <style>
        .shadow {
            width: 200px;
            height: 100px;
            font-size: 50px;
            text-shadow: 20px 20px 0 rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div class="shadow">
        文字阴影
    </div>
</body>

</html>