软开寒假1.1

文章详细阐述了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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值