CSS布局精要-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47896523/article/details/128775634

圆角边框

border-radius:length;
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>
        .header {
            width: 300px;
            height: 200px;
            background-color: pink;
            /* border-radius: 150px; */
            /* 参数值可以为数值或百分比的形式； */
            /* border-radius: 50%; */
            /* 50%就是指宽度和高度的一半,正方形的原图案设置后为圆 */
            /* 如果想做圆角矩形的图案，就设置border-radius为高度的一半 */
            border-radius: 100px;
            margin-bottom: 50px;
        }

        .radius {
            /* 该属性为简写属性，可以跟四个值，分别是左上角、右上角、右下角、左下角 */
            width: 200px;
            height: 200px;
            border-radius: 10px 20px 30px 40px;
            /* 也可用border-top-left-radius表示左上角，顺序不能颠倒 */
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="radius"></div>
</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>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); */
            /* 分别代表的数据是水平阴影的位置、垂直阴影的位置(前面两个必须写)、模糊距离、阴影的尺寸(之前的都允许负)、阴影的颜色 外阴影(内阴影)，将外部阴影(outset)改为内部阴影(inset);默认的是外阴影，但是不可以写这个单词，否则会导致阴影失效；盒子阴影不占用空间，不会影响其他盒子排列*/
        }

        /* 原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }
    </style>

</head>

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

</html>

文字阴影

属性有水平阴影的位置、垂直阴影的位置、模糊的距离、阴影的颜色

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>浮动布局练习3</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html>

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

为什么清除浮动？

父盒子并不一定要有高度，根据子盒子的数量，从而确定父盒子的高度

由于父级盒子不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动的本质就是清除浮动元素造成的影响；只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

额外标签法：在最后浮动元素末尾添加一个空的标签，例如<div style="clear:both"></div>；

<!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>
        /* 清除浮动的第四种方式 */
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        /* 清除浮动的第三种方式：伪元素清除浮动 */
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            /* 清除浮动的第二种方式：给父级添加overflow属性，将其属性值设置为hidden/auto/scroll */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            /* 当两个子元素浮动后，不占用空间，所以父元素的高度就变为0 */
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        /* 清除浮动的第一种方式 */
        /* .clear {
            clear: both;
        } */
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <!-- 第一种方式：这个新增的盒子要求必须是块级元素而不能是行内元素 -->
        <!-- <div class="clear"></div> -->
    </div>
    <div class="footer"></div>
</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>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }

        .box .four {
            margin-right: 0;
        }

        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="four">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>