HTML 学习记录（七）-CSDN博客

本文链接：https://blog.csdn.net/little_w98biubiu/article/details/124718187

盒子的尺寸：

默认情况下一个盒子的大小由内容区、内边距、边框共同决定。

box-sizing属性：用来设置盒子尺寸的计算方式（设置width和height的作用）。

可选值 content-box 默认值：wh用来设置内容区的大小

border-box wh用来设置整个盒子可见框的大小

outline轮廓：设置元素的轮廓线，用法与border一样，区别在于轮廓不会影响可见框的大小。

box-shadow阴影：用来设置阴影效果，不会影响页面布局。

格式：水平偏移量垂直偏移量阴影的模糊半径阴影颜色（一般用rgba来调整）

border-radius圆角: 四个方向的圆角的半径大小。

border-radius

四个值：左上右上右下左下

三个值：左上右上/左下右下

两个值：左上/右下右下/左上

一个值：相同

border可以指定一个值时体现出xy方向不同的大小 eg: border: 10px / 20px

四个方向：

border-top-left-redius

border-top-right-redius

border-bottom-left-redius

border-bottom-right-redius

指定两个值，一个负责x方向一个负责y方向的半径大小。eg: border-top-left-redius :10px 20px

将元素设置为圆形 border-radius: 50%;

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /* border: 10px red solid; */
            /* outline轮廓：用来设置元素的轮廓线，用法与border一样
                    区别在于轮廓不会影响可见框的大小 */
            outline: 10px rgb(241, 230, 230) solid;
            /* box-shadow阴影：用来设置阴影效果，不会影响页面布局
                    偏移量 偏移量 模糊半径 颜色*/
            box-shadow:10px 10px 50px rgba(0,0,0,.3);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* border-radius圆角: 四个方向的圆角的半径大小
                border-top-left-redius
                border-top-right-redius 
                border-bottom-left-redius 
                border-bottom-right-redius */
            /* 每个方向指定两个值，一个负责x方向一个负责y方向的半径大小
                如果是一个值则默认相等 */
            /* border-top-left-radius: 10px 10px; */
            border-radius: 20px;

            /* 将元素设置为圆形 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br><br><br>
    <div class="box2"></div>
</body>
</html>

float浮动: 使一个元素向其父元素左侧或者右侧移动，可以实现元素横向排列

可选值 none 默认值不浮动

left 左浮动

right 右浮动

浮动的特点：

1.浮动元素完全脱离文档流，不再占据文档流中的位置

2.设置浮动后元素会像父元素的左侧或者右侧移动

3.默认浮动元素不会从父元素中移出

4.浮动元素左右移动时，不会超过它前面的其他的浮动元素

5.如果浮动元素上面是一个没有浮动的块元素，则浮动元素无法上移

6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是跟他一样高

！！元素设置浮动以后，水平布局的等式改变（不需要强制成立了）！！

！！元素设置浮动以后，会完全从文档流中脱离出，不再占用文档流的位置，元素下面还在文档流中的元素会自动向上移动！！

    <style>
        /* float浮动: 使一个元素向其父元素左侧或者右侧移动
                可选值  none 默认值 不浮动
                        left 左浮动
                        right 右浮动
        */
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>

7.浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，所以我们可以利用浮动来设置文字环绕图片的效果。

<!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;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>光伏能源圈 今年以来,我国能源生产稳中有进,保障能力不断提升,有力支撑了我国经济平稳运行。 一季度,全国规模以上工业原煤、原油、天然气、电力产量分别同比增长10.3%、4.4%、6.6%和3.1%.</p>
</body>
</html>

8.元素设置浮动以后，将会从文档流中脱离，元素的一些特点也会发生变化

块元素：块元素不再独占页面一行

宽度和高度默认都被内容撑开

行内元素：会变成块元素，特点与块元素一样。

总之，脱离文档流以后，就不再需要分块和行内元素了

设计导航栏实例：

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

<head>
    <meta charset="UTF-8">
    <title>w3school 导航条</title>
    <link rel="stylesheet" href="../03_layout/CSS/rest.css">
    <style>
        /* 给谁浮动要看是谁导致的垂直排练 */
        .nav {
            width: 1210px;
            height: 48px;
            margin: 100px auto;
            background-color: #E8E7E3;
        }

        .nav li {
            float: left ;
            /* 设置垂直居中 */
            line-height: 48px;
        }

        .nav li:hover {
            background-color: #3F3F3F;
        }
        /* 给li还是给a设置大小有一个需要考虑的点：
            如果给li设置，那么a的大小是文字撑开，点击的范围需要十分精准才能激活超链接 */
        /* a是行内元素，不能设置宽高，所以转换为block */
        .nav a {
            display: block;
            height: 48px;
            color: #777777;
            font-size: 18px;
            /* 设置平均分配，可以通过F12进行实时调整 */
            padding: 0 39px;
        }

        .nav a:hover {
            color: #E8E7E3;
        }
    </style>
</head>

<body>
    <!-- 导航栏：
               1. ul li
               2. nav a -->
    <ul class="nav">
        <li><a href="">HTML/CSS</a></li>
        <li><a href="">Browser Sider</a></li>
        <li><a href="">Sever Sider </a></li>
        <li><a href="">Programming</a></li>
        <li><a href="">XML</a></li>
        <li><a href="">Web Building</a></li>
        <li><a href="">Reference</a></li>
    </ul>
</body>

</html>