软开寒假1.1

csdn_nevermore

已于 2023-01-01 22:59:15 修改

阅读量99

点赞数

文章标签：前端 html css

于 2023-01-01 16:37:04 首次发布

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128481046

版权

文章详细阐述了CSS中的外边距特性，包括兄弟和父子关系下的问题及解决方案，如使用overflow属性处理溢出内容，以及如何显示省略号。还介绍了元素的显示类型，如块元素、行内元素和行内块元素的转换，并详细讨论了定位机制，包括相对、绝对和固定定位。此外，文章还涉及浮动、Z-index、窗口自适应以及各种布局技巧，如两栏和三栏布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外边距特性

特性问题
1：兄弟关系，两个盒子垂直外边距与水平外边距问题
2。·父子关系，给子加外边距，但作用于父身上了，怎么解决？

解决：
1。子margin-top===>父的padding-top，注意高度计算
2。给父盒子设置边框
3.overflow：hidden
4,。加浮动

溢出属性

溢出属性（容器的）
说明：
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit
visible:默认值，溢出内容会显示在元素之外：
hidden：溢出内容隐藏；
scroll：滚动，溢出内容以滚动方式显示；
auto：如果有溢出会添加滚动条，没有溢出正常显示；
inherit：规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出;
overflow-y:Y轴溢出

在这里插入图片描述
nowrap：不换行
pre：显示空格，回车，不换行
pre-wrap：显示空格，回车换行
pre-line：显示回车,不显示空格，换行

省略号显示

省略号显示
说明：
text-overflow:clip/ellipsis;
clip：默认值，不显示省略号号(…);
ellipsis：显示省略标记；
当单行文本溢出显示省略号需要同时设置以下声明：
容器宽度：1.width：200px;
2.强制文本在一行内显示：white-space：nowrap;
3.溢出内容为隐藏：overflow：hidden;
4.溢出文本显示省略号：text-overflow：ellipsis;

div{white-space:nowrap;overflow:hidden；text-overflow:ellipsis;}

元素显示类型-块元素-行内元素-行内块元素

在这里插入图片描述
注：P标签里面只可以放文本，不可以放块级元素如div

padding左右支持，上下不支持
注：行内元素只可以设置左右间距，不可以设置上下边距

元素类型的互相转化：

将元素转为inlineblock实现导航栏的效果

如何实现如下图的菜单效果？
在这里插入图片描述
将其一开始

display：none

最后

.box:hover ul{display:block}

二级菜单

案例：
在这里插入图片描述

 <style>
        * {
        list-style: none;
        }

        .box {
            width: 300px;
            margin: 0 auto;
        }

        .box .item {
            float: left;
            width: 120px;
            text-align: center;
            border: 2px solid blue;
            background-color: aqua;
            line-height: 40px;
        }

        .item:hover {
            background-color: aquamarine;
        }

        .item ul {
            display: none;
            background-color: white;
            color: black;
        }

        .item:hover ul {
            display: block;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li class="item">视频教程
            <ul>
                <li>全部视频教程</li>
            </ul>
            <ul>
                <li>HTML</li>
            </ul>
            <ul>
                <li>全部视频</li>
            </ul>
            <ul>
                <li>html</li>
            </ul>
        </li>
        <li class="item">认证考试
            <ul>
                <li>全部视频教程</li>
            </ul>
            <ul>
                <li>HTML</li>
            </ul>
        </li>
    </ul>
</body>

安利首页案例笔记

1.搜索框的最外圈一层boarder 在选中时的线叫做outline
参考代码：

outline：none

2.可以给最后一个图片加标签让他margin-right为0使他没有右边距
3.渐变色背景可以抓取1px最后当背景平铺

定位的属性与属性值

在这里插入图片描述
注：
static：静态（默认值）不支持top的设置
absolute：有父元素的会以父元素为定位而不是浏览器第一屏
sticky：吸顶，参考京东主页后来固定的导航栏
注：粘性定位需要声明位置如：top:0px；

定位案例笔记

1、opacity：数值
（透明度 0-1）

2、改margin会导致盒子原本的大小改变，可能会导致无法与预期相同在同一行显示
解决方法：改变父容器大小或者单独设置最后一个块的大小

三角形案例笔记

在这里插入图片描述

   <style>
        div{width: 100px;height: 100px;
        border-top: 20px solid red;
        border-left: 20px solid blue;
        border-right: 20px solid yellow;
        border-bottom: 20px solid green;}
    </style>

所以实现三角形的方法：
如红色，只要使宽度为0，最终会成为一个三角形
在这里插入图片描述
最后只需要使其他三个边框透明度为transparent

在这里插入图片描述
一个三角形由两条边框长度组成
例：

<style>
       
        .box {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-indent: 20px;
            background-color: aqua;
            color: white
        }

        span {
            width: 0;
            height: 0;
            display: inline-block;
            border: 5px solid transparent;
            border-top: 5px solid black;
            position: relative;
            top:2.5px;
        }
        .box:hover span{
            border: 5px solid transparent;
            border-bottom: 5px solid black;        
           top:-2.5px
        }
    </style>
</head>

<body>
    <div class="box">
        导航
        <span></span>
    </div>

定位的层级z-index

1.后来者居上
同为relative定位，后写的会覆盖掉前面的

解决方法

z-index：数值

z-index值越大，层级越大，越靠上显示

例子：
子容器想被父容器盖住只需要设置z-index：-1；

行内元素变为块元素方法

1.display:block；
2. absolute;
3. float:left;

定位控制元素水平垂直居中

position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;   (元素的自身的一半）

浮动与定位的区别

浮动：
在这里插入图片描述
定位：

浮动：半脱离
绝对定位:全脱离

锚点

锚点作用：页面不同区域的跳转使用a链接

<a href="#锚点名字"></a>
<div id="锚点名字"><div>

精灵图

在这里插入图片描述

注意要设置块的大小才可以使其显示的正常

宽高自适应

在这里插入图片描述
注：
如果设置为百分之百的宽度，并不会自适应
如：
设置margin-left，会撑开网页的滚动条
而自适应会自动调整增margin使得占满整个窗口
**min-height：**设置最小高度，防止在内容太少的时候撑不开div

方法1的缺点：
在这里插入图片描述

在这里插入图片描述
解决方法：
让ul（父盒子）相对定位，让li（子盒子）绝对定位，但是要设置宽度与高度（因为脱离文档流后宽度由内容决定）

3.万能清除浮动法：
在这里插入图片描述

<style>
/*伪元素*/
div::first-letter{
font-size:30px;
color:
red;}
</style>
</head>
<body>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque,
fugiat assumenda, quisquam exercitationem blanditiis illum minus id ipsum
quasi et debitis! Delectus, voluptatem eveniet! Accusamus quasi culpa ipsum
quo et.</div>
</body>
</html>

在这里插入图片描述
让一个元素不显示的方法：display:None（不占位的隐藏）或者visibility：hidden（占位隐藏）

窗口自适应(移动端非常重要）

html body{height:100%}

两栏布局

法1.使其中一个浮动
另一个通过margin-left或者right在覆盖位置不进行布局
在这里插入图片描述
法2：

1.通过使第一个块浮动
2.通过calc函数实现（减去第一个块的宽度）

三栏布局

1.通过浮动改margin
注意点：第三个块需要放在代码中间部分
在这里插入图片描述
否则的话

或者通过calc（）函数
案例：
在这里插入图片描述

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,body {
            height: 100%;
        }

        .top,.bottom {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }

        .middle {
            height: calc(100% - 100px);
            background:
                yellow;
        }
        .left,.right{width: 100px;height: 100px;background-color: red;float: left;}
        .center{width: calc(100% - 200px);height: 100%;background-color: aqua;float: left;}
    </style>
</head>

<body>
    <div Tclass="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"> </div>
        
    </div>
    <div class="bottom"></div>
</body>

</html>