20220315_CSS学习04

最新推荐文章于 2024-06-15 09:59:21 发布

苏轼嘟嘟改了名

最新推荐文章于 2024-06-15 09:59:21 发布

阅读量330

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qq_33316697/article/details/123464226

版权

一、Chrome调试工具

二、盒子模型

CSS中规定每个盒子分别由：内容区域、内边距区域、边框区域、外边距区域构成

1.内容的宽度和高度

作用：利用width和height属性默认设置是盒子 内容区域 的大小。

属性：width/height

常见取值：数字+px

2.边框

（1）属性名：border

（2）属性值：单个取值的连写，取值之间以空格隔开

粗细、线条样式、颜色不分先后顺序

例：border:10px solid red；

solid——实线线段 dashed——虚线线段点线——dotted

快捷键：bd+tab

（3）单方向设置：

场景：只给盒子的某个方向单独设置边框

属性名：border—方位名词

属性值：连写的取值

（4）盒子尺寸= width/height + 边框线

border会撑大盒子尺寸

3.内边距

padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距

padding 最多取四个值，取一个值时代表添加了四个方向的内边距。

（1）padding后面取4个值时：上、右、下、左

例：padding：10px 20px 40px 80px

显示结果：

（2）padding1后面取3个值时：上、左右、下

例：padding: 10px 40px 80px

显示结果：

（3）padding后面取2个值时：上下、左右

例：padding: 10px 40px；

显示结果：

（4）padding后面取1个值时：上下左右

例：padding:10px;

显示结果：

（5）关于盒子实际大小的计算公式：

需求：盒子尺寸300*300，背景粉色，边框10px实现黑色，上下左右20px的内边距：

计算公式：

宽度 = 需求宽度-2*边框宽度-左右内边距宽度

高度 = 需求高度-2*边框宽度-上下内边距宽度

能够撑大盒子的有boder和padding

（6）CSS3盒模型（自动内减）

给盒子设置属性：box-sizing：border-box；

4.外边距

同内边距的使用，属性名为margin：50px；

5.清楚默认的内外边距

margin:0;

padding:0;

三、练习案例

1.新浪导航

（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>
        .box{
            height: 40px;
            background-color: #fff;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        .box a{
            padding: 0 16px;;
            height: 40px;
            background-color: #fff;
            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>

（2）显示结果：

（3）盒子的写法总结：

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

2.网页新闻列表

（1）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>

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

       .box{
           width: 500px;
           height: 400px;
           background-color: #ffffff;
           border: 1px solid #cccccc;
           margin: 50px auto;
           padding: 42px 30px 0;           
       }

       .box h2{
           border-bottom: 1px solid #cccccc;
           font-size: 30px;
           padding: 9px 0;
       }

       .box ul{
           list-style: none;
       }

       .box li{
           height: 50px;
           border-bottom: 1px dashed #cccccc;
           padding-left: 25px;
           line-height: 50px;
       }

       .box a{
           text-decoration: none;
           color: #666;
           font-size: 18px;
       }
    </style>
</head>
<body>
    <div class="box">
        <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>

（2）显示结果