HTML+CSS复习：三-优快云博客

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128504865

本文详细介绍了CSS中的盒子模型、外边距特性、溢出属性、元素显示类型和定位技术，包括静态定位、绝对定位、相对定位和固定定位。还讲解了如何实现元素的水平垂直居中、锚点的使用、精灵图的概念以及宽高自适应的实现方法。内容涵盖网页设计和开发的基础知识，对理解CSS布局和交互设计有极大帮助。

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

HTML+CSS复习

三十一、盒子模型-外边距特性
三十二、PS基础知识
三十三、溢出属性
三十四、元素显示类型
三十五、定位
- <1>.标签
- <2>.定位控制元素水平垂直居中
三十六、锚点
三十七、精灵图
三十八、宽高自适应
四十、三角形案例

三十一、盒子模型-外边距特性

    <style>
        /* 1.兄弟关系，两个盒子垂直外边距与水平外边距问题：
        垂直方向，外边距取最大值.
        水平方向，外边距会进行合并处理.
        2.父子关系，给子加外边距，但作用于父身上了,怎么解决? */
        .box1{
            width: 500px;
            height: 500px;
            background-color: red;
            /* padding-top: 200px; */
            /* border: 1px solid transparent; */
            /* 边框透明 */
            /* float: left; */
            overflow: hidden;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 100px;
            /* float: left; */

        }
        /*
            1.子margin- top===>父的padding-top,注意高度计算.
            2.给父盒子设置边框
            3.加浮动
            4.overflow: hidden;
         */
    </style>
</head>
<body>
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

三十二、PS基础知识

ps====图片处理软件(美工来做图，前端来测量吸取颜色切图)

拿到设计稿之后:使用ps打开
    1、图片上面右键=====打开方式ps
    2、ps里 文件=>打开
图片放大和缩小
    ctrl++
    ctrl+-
alt+滚动
图片的移动
    按住空格，鼠标变为小手，拖动图片

如何调整出来标尺
    ctrl+r
    作用:拖动参考线方便测量
    视图里面找到标尺，把对勾勾选上
测量图片大小
    使用矩形选框工具(左侧竖着第二个)
    如何查看数据大小(窗口-----信息面板====wh)
    如何修改测量单位:
    在标尺上面右键取修改单位====像素
    ctrl+d===取消选区

    选完后，想调整大小，可以右键->变换选区

吸取颜色
    使用吸管工具 I
    吸取颜色完成后，点击左下角的背景色，会右弹窗，在弹窗里面右#十六进
    制的颜色值可以让你复制
截图
    1、使用快捷键截图===每次只能截取个
    使用选框工具框选尼亚截取的区域
    ctrl+c=======ctrl+n=======回车======ctrl
    +V=======ctrl+s
    回车======回车

切片工具(裁剪工具进行切换)
    使用切片工具框选你要留住的区域，点击文件，存储为web所用格式，
    弹窗里面点击存储，
    弹窗======格式:仅限图像，切片:所有用户切片

三十三、溢出属性

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

1.空余空间
white-space: normal/nowrap/pre/ pre-wrap /pre-line /inherit
该属性用来设置如何处理元素内的空白;
normal:默认值，空白会被浏览器忽略,
nowrap:文本不会换行，文本会在同- -行.上继续，直到遇到<br/ >标签为止; 

当单行文本溢出显示省略号需要同时设置以下声明:
1、容器宽度: width: 200px;
2、强制文本在一行内显示:white-space: nowrap;
3、溢出内容为隐藏: overflow: hidden;
4、溢出文本显示省略号: text-overflow: ellipsis;

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* overflow: visible; 显示溢出*/
            /* overflow: hidden;  溢出隐藏，文本裁切*/
            /* overflow: scroll;  滚动条*/
            /* overflow: auto;    超则有滚动条，不超则没有*/
            /* overflow: inherit; 继承父元素的效果*/
        }
        .box1{
            overflow-x: auto;
            overflow-y: hidden;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 
            nowrap:不换行
            pre:显示回车，空格，不换行
            pre-wrap:显示空格，回车，换行
            pre-line:显示回车，不显示空格，换行
             */

             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             /* 半省略号方法 */
        }
    </style>
</head>
<body>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dignissimos accusantium, vero amet quia libero quos animi autem, id optio aperiam explicabo excepturi minus voluptate magnam, deleniti sapiente nobis veritatis?</div>
    </div>
</body>

三十四、元素显示类型

1.块元素(block element)
A)块状元素在网页中就是以块的形式显示，所谓
块状就是元素显示为矩形区域；
B)默认情况下，块状元素都会占据- -行;默认情:
况下，块状元素会按顺序自.上而下排列；
C)块状元素都可以定义自己的宽度和高度；
D)块状元素一 般都作为其他元素的容器，它可以
容纳其它内联元素和其它块状元素。我们可以把这
种容器比喻为一个盒子。
例如: div p ul li ol li dl dt dd h1-h6等

块元素：
display:block;
display:list-item;
p标签放文本可以，不能放块元素

2.行内(内联)元素
A)内联元素的表现形式是始终以行内逐个进行显
示 横着排 ；
B)内联元素没有自己的形状，不能定义它的宽和
高，它显示的宽度、高度只能根据所包含内容的高
度和宽度来确定，它的最小内容单元也会呈现矩
形形状;
C)内联元素也会遵循盒模型基本规则，但是对于
margin和padding个别属性值不生效
例如:
a b em i span strong等

行内元素：
display:inline;
span行内元素只能设置边距的左右边距，不能设置上下边距

3.行内块元素
内联块状元素(inline-block) 就
是同时具备内联元素、块状元素
的特点
例如:
img input等

行内块元素:
display:line-block;

display:none;隐藏，没有样式

三十五、定位

<1>.标签

1.position: static;
A)当没有父元素或者父元素没有定位，参照物是浏览器

2.position: absolute;
绝对定位，脱离文档流，偏移位置：浏览器窗口的第一屏
B)有父元素且父元素有定位，父元素
可以间接让行内元素，变成块元素
此外：直接加CSS样式：display:block；和加浮动也可以

3.position: relative;
相对定位，不脱离文档流，偏移位置：自己的初始位置

子绝父相：子盒子设置绝对定位，父盒子设置相对定位

4.position: fixed;
固定定位，脱离文档流，偏移位置：浏览器的当前窗口

5.position: sticky;
粘性定位可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好

z-index:z-index属性是不带单位的，并且可以给负值，
没有设置z-index时,最后写的对象优先显示在上层设置后，
数值越大,层越靠上;
作用于父子盒子关系时，若想让子盒子在下，只需给子盒子设置负数即可，
如：z-index:-1;
作用于兄弟盒子关系时，跟相对定位一样，正常。

<2>.定位控制元素水平垂直居中

定位与浮动之间的区别：
float:半脱离，文字环绕
absolute:全脱离，不会出现文字环绕效果

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        .child{
            width: 60px;
            height: 60px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -30px;
        }
    </style>
</head>
<body>
    <div>
        <div class="child"></div>
    </div>
</body>

三十六、锚点

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

        }
        ul{
            list-style: none;
            position: fixed;
            right: 0;
            top: 100px;

        }

        li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
        }
        div{
            height: 600px;
            border: 1px solid #ccc;
        }
        /* 锚点作用:页面不同区域的跳转，使 用a链接。
                <a href="#锚点名字"></a>
                <div id="锚点名字"></div>

        */
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="#a">京东秒杀</a></li>
            <li><a href="#b">双11</a></li>
            <li><a href="#c">频道优选</a></li>
            <li><a href="#d">特色广场</a></li>
        </ul>
    </div>
    <div id="a">京东秒杀</div>
    <div id="b">双11</div>
    <div id="c">频道优选</div>
    <div id="d">特色广场</div>
</body>

三十七、精灵图

CSS Sprites的原理(图片整合技术) (CSS精灵)/雪碧图
将导航背景图片,按钮背景图片等有规则的合并成一张背景图，
即将多张图片合为一张整图, 然后用background-
position"来实现背景图片的定位技术。
优势：
1)通过图片整合来减少对服务器的请求次数，从而提高面的加载速度。
2)通过整合图片来减小图片的体积。

三十八、宽高自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,
这就是自适
(1)宽度自适应
元素宽度的默认值为auto
基本适用地方：导航栏，通栏布局
(2)高度自适应
元素高度的默认值{height:auto;}

浮动元素的高度自适应
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

方法1:给父元素添加声明overflow:hidden;(缺点:会隐藏溢出的元素)

方法2:在浮动元素下方添加空块元素并给该元素添加声明: clear:both;height:0;overflow:hidden;
(缺点:在结构里增加了空的标签,不利于代码可读性，且降低了浏览器的性能)

方法3:万能清除浮动法
选择符
after{content:" ";clear:both;display:block;height:0visibility:hidden:/overflow:hidden;}

三十九、二级菜单

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            margin: 0 auto;
        }
        ul{
            list-style: none;
        }
         .box>li{
            float: left;
            width: 148px;
            text-align: center;
            border: 1px solid blue;
            background-color: blue;
            color: #fff;
            line-height: 40px;
         }
         .box>li:hover{
            background-color: lightblue;
         }
         .box>li>ul{
            display: none;
            background-color: white;
            color: black;
         }
         .box>li:hover ul{
            display: block;
         }
         .box>li li :hover{
            color: blue;
         }
    </style>s
</head>
<body>
    <ul class="box">
        <li class="item">视频教程
            <ul>
                <li>全部视频教程</li>
                <li>HTML5视频教程</li>
                <li>JAVA视频教程</li>
                <li>python视频教程</li>
            </ul>
        </li>
        <li class="item">认证考试
            <ul>
                <li>pmp</li>
                <li>红帽</li>
            </ul>
        </li>
    </ul>
</body>

四十、三角形案例

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-indent: 20px;
            background-color: blue;
            color: fff;
        }

        span{
            width: 0;
            height: 0;
            display: inline-block;
            border: 5px solid transparent;
            border-top: 5px solid red;
            position: relative;
            top:2.5px;  

        }
        .box:hover span {
            border: 5px solid transparent;
            border-bottom: 5px solid red;
            top:-2.5px;

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