近来对html学习的浅谈和认识实践

最新推荐文章于 2021-10-11 10:38:39 发布

Zzzzc0217

最新推荐文章于 2021-10-11 10:38:39 发布

阅读量300

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/Zzzzc0217/article/details/103974767

版权

我自身目前学习到的知识和认识

首先，通过看视频和看菜鸟教程，我开始接触到了html的一些基本框架，一些结构，固定语法等等，一些基础标签，css的语法，id选择器，class选择器。html呢，就相当于人的框架，css就是人的衣服，通过css给人打扮的漂漂亮亮的。还有js，我还没学，以后再更新。

一、学习float（浮动）所用的例子和遇到的问题

1. 什么是浮动？
答： CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
2. 设置浮动了以后会有什么效果和影响呢？
答：当给元素设置浮动时，元素就会脱离常规文档流。浮动导致元素已不在普通流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框包不住浮动元素，即所谓的“高度塌陷”。

下面我会举出一个例子，并把我所知道的解决方案列举出来

Example（例子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type ="text/css">
body{
    margin:0;
}
 .one{
     background-color: black;
 }
.two{
    background-color: blue;
    width: 80px;
    height: 80px;
}
.three{
    background-color: blueviolet;
    width:80px;
    height: 80px;
}
    </style>
>
    <div class="one">
        <div class="two"></div>
            <div class="three"></div>
            </div>
</body>
</html>

此时显示出来的结果是在这里插入图片描述
one是父元素，two和three是子元素，此时我并没有给父元素设置高度，也没有给子元素设置浮动。下面，我设置浮动给子元素。

.two{
    background-color: blue;
    width: 80px;
    height: 80px;
    float: left;
}
.three{
    background-color: blueviolet;
    width:80px;
    height: 80px;
    float: left;

结果为父元素坍塌了
在这里插入图片描述

父元素坍塌以后改如何补救呢？

以下有六种方法：

1.最简单的就是给父元素增加高度，但这个的前提是要知道子元素的高度且已经确定
在这里插入图片描述这样就恢复正常了
优势：极其简单
弊端：必须要知道父元素高度是多少

2. 设置父元素浮动

 .one{
     background-color: black;
   width: 100%;
   float: left;

这样也可得第一种方法一样的效果
优势：简单，代码量少，没有结构和语义化问题
弊端：对后续元素会有影响

3. 为父元素设置overflow属性（取值可为hidden或auto）

 .one{
     background-color: black;
     overflow:hidden;

优势：简单，代码量少
弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏

4. 使用伪元素清除浮动（万能清除法）

.one:after{
content:"";//为伪元素添加空的内容
display:block;//将伪元素转化为块级元素
clear:both;//清除两侧的浮动

优势：不破坏文档结构，没有副作用
弊端：代码量多

5. 在浮动元素后面加入空的div标签，空div标签里使用clear：both

    <div class="one">
        <div class="two"></div>
            <div class="three"></div><div style="clear: both;"></div>
            </div>

优势：代码量少容易掌握简单易懂
弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护

6. 触发BFC机制
这个我不懂，感兴趣的可以去百度学习学习，待我学业有成我会补回。

注：以上优势弊端都是其他从其他大神里面摘录下来，这些方法也是我百度后归纳，自己敲过确认可以的方法。

二、position定位的使用

position的属性值

static：默认值。没有定位，元素出现在正常的流中（静态定位的元素不会受到 top, bottom, left, right影响。）
absolute：absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< h t m l >。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。（移动相对定位元素，但它原本所占的空间不会改变。）
fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
relative ：相对定位元素的定位是相对其正常位置。
sticky：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

现在我将做一个左图右字的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
body{
    margin: 0
}

</style>
<body>
   <img src="123.jpg" style="float:left; width:500px ;height: 500px;">
   <div>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       </div>
</body>
</html>

此时我得到的效果是在这里插入图片描述现在我通过position定位，将文字的图片都放在一个比较中间的位置，视觉会更好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
body{
    margin: 0
}
div{
    position: relative;
    left: 650px;
    top:300px;
}
img{
    position: relative;
    left: 500px;
    top: 200px;
}
</style>
<body>
   <img src="123.jpg" style="float:left; width:500px ;height: 500px;">
   <div>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       <p>小姐姐好美</p>
       </div>
</body>
</html>

通过定位文字和图片，我成功的美化了，如图：
在这里插入图片描述

以上就是我最近学的部分知识！！

Zzzzc0217

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
近来对html学习的浅谈和认识实践

我自身目前学习到的知识和认识首先，通过看视频和看菜鸟教程，我开始接触到了html的一些基本框架，一些结构，固定语法等等，一些基础标签，css的语法，id选择器，class选择器。html呢，就相当于人的框架，css就是人的衣服，通过css给人打扮的漂漂亮亮的。还有js，我还没学，以后再更新。学习float（浮动）所用的例子和遇到的问题什么是浮动？答： CSS 的 Float（浮动），会使...
复制链接

扫一扫