学习总结（一）-CSDN博客

本文链接：https://blog.csdn.net/m0_61666271/article/details/122379038

学习总结（一）

文章目录

学习总结（一）

本周学习总结

本周学习了HTML CSS 相关知识

HTML主要学习内容

1.什么是HTML
2.标题、段落、文本格式化等文本元素
3.路径书写
4.图片、多媒体元素
5.列表元素
6.容器元素
认识：是一门超文本标记语言是网页的骨架非常重要

CSS主要学习内容

选择器

简单选择器
－标签选择器
－类选择器
－id选择器
－类选择器

复合选择器
－子孙
－后代
－并集
－伪类

样式
层叠和继承
盒模型
常规流
浮动
定位

relative：相对定位
absolute：绝对定位
fixed：固定定位

认识：CSS为HTML提供了一种样式描述，定义了其中元素的显示方式　相当于给网页加入皮囊

重点梳理

块级元素的居中问题

利用margin：0 auto 实现块级元素水平居中
特别注意
需要设置宽度才可以实现居中
利用text-align：center；实现块级元素内部的行内水平居中
**设置 line-height等于height实现块级元素内部的行内垂直居中 **
代码如下

 div
        {
        	background-color: aqua;
            height: 200px;
            width: 500px;
            margin: 0 auto;
            line-height: 200px;
            text-align: center;
        }`

效果

嵌套块元素外边距合并导致的塌陷

对于两个嵌套元素（父子元素）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

例子：

 .father
        {
            background-color: #008c8c;
            width: 400px;
            height: 400px;
            margin-top: 40px;
        }
        .son
        {
            background-color: aqua;
            width: 200px;
            height: 200px;
            margin-top: 20px;
        }

效果

如何处理
1.为父元素定义上边框

 .father
        {
            background-color: #008c8c;
            width: 400px;
            height: 400px;
            margin-top: 40px;
            border: 1px solid;
        }

2.为父元素定义内边距

 .father
        {
            background-color: #008c8c;
            width: 400px;
            height: 400px;
            margin-top: 40px;
            padding: 1px;
        }

3.为父元素添加overflow：hidden

   .father
        {
            background-color: #008c8c;
            width: 400px;
            height: 400px;
            margin-top: 40px;
            overflow: hidden;
        }

效果

清除浮动

为什么要清除浮动
产生了高度塌缩
如图（一个标准盒子和两个浮动盒子）

根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子。
清除浮动目的
清楚浮动以后，父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了。
清除浮动方法
1.额外标签法（隔墙法）
在最后一个浮动元素后添加

<div class="clear"></div>

设置样式

 .clear
        {
            clear: both;
        }

2.为父级添加overflow：hidden；

.father
        {
            width: 800px;
            border: 1px solid rgb(0, 0, 0);
            margin: 0 auto;
            overflow: hidden;
        
        }

3.父级after伪元素

.clearfix::after
        {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix
        {
            /* IE6、7 专用  */
            *zoom :1;
        }

4.父级双伪元素

.clearfix::before,
.clearfix::after
        {
            content: "";
            display: table;
        }
        .clearfix::after{
            clear: both;
        }
        .clearfix
        {
            /* IE6、7 专用  */
            *zoom :1;
        }

效果如下