11.21笔记

scd0208

已于 2023-11-23 20:21:21 修改

阅读量377

点赞数 6

文章标签：笔记

于 2023-11-22 22:46:51 首次发布

本文链接：https://blog.csdn.net/scd0208/article/details/134556052

版权

1.轮廓线

outline-style: none; 
outline-width: thic
outline-color: rgb(72, 0, 255);

用于修饰input的文本框

2. 浮动的文字环绕

 float: right;
 float: both；
<body>
<img="">

img浮动在文体外，文字环绕图片

3.浮动

一个元素浮动起来，会不在占有原来的位置（脱离文档流），同时发生浮动的盒子会在同一行进行排列。如果说多个元素同时给左浮动，元素就会从左到右在一行排列。

4.浮动造成的高度塌陷

<head>
<style> 
.banner {
            width: 1200px;
            background-color: pink;
            /*  */
            /* height: 300px; */
            /* overflow: hidden; */
        }

        .left {
            float: left;
            width: 500px;
            height: 300px;
            background-color: aquamarine;
        }

        .right {
            float: right;
            width: 400px;
            height: 300px;
            background-color: black;
        }

        p {
            /* clear: right; */
            clear: both;
        }
</style> 

</head>

<body>
    <div class="banner">
        <div class="left"></div>
        <div class="right"></div>
        <p>我是不想漂浮的文字</p>
    </div>
</body>

解决方法(1）height: 300px;

(2) overflow: hidden;（文本溢出）

(3）clear: right;

4.盒子模型

margin	外边框
padding	内边框
border	边框

边框后面+1：上下左右

边框后面+2：上下，左右

边框后面+3：上，左右，下

边框后面+4:顺时针

5.auto

自适应，只能使用在左右。

6.外边框塌陷

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1200px;
            height: 800px;
            background-color: pink;
            /* border: 1px solid black; */
            /* padding: 10px; */
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;

        }

        .son1 {
            background-color: aquamarine;
            margin-top: 200px;
        }

        .son2 {
            background-color: black;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        .son3 {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1 son"></div>
        <div class="son2 son"></div>
        <div class="son3 son"></div>
    </div>

</body>

</html>

解决方案（1）border: 1px solid black

（2）padding: 10px

(3)overflow: hidden;

7.部分元素存在默认内外边框

例如li

可以在开头

 * {
            padding: 0;
            margin: 0;
        }

scd0208

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫