display和浮动

最新推荐文章于 2022-12-15 23:05:31 发布

XY最右

最新推荐文章于 2022-12-15 23:05:31 发布

阅读量279

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/XYzuiyou/article/details/116563916

版权

我们应该知道行元素和块元素吧

在这里插入图片描述

左边是我们打开的浏览器网站的布局，右边是我们自己写的布局

就会发现浏览器网站的布局有些可以在一起

而我们的网站布局，一个布局只能在一行

那是因为我们书写的标签里面有些是块级元素，有些是行内元素

但是disaply是可以将块级元素转化成行内元素，

将行内元素转换成块级元素

块级元素:独占一行

h1~h5    p   div   ul  li

行内元素:不独占一行

span  a  img  strong...

行内元素可以包在块句元素里面，但是块句元素无法包在行内元素里面

但是display可以做到

我们在IDEA中输入

<head>
    <meta charset="UTF-8">
    <title>Title</title>

<style>
  div{

    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  span{

    width: 100px;
    height: 100px;
    border: 1px solid red;
  }

</style>

</head>
<body>

<div>div这是块句元素</div>
<span>span这是行内元素</span>

</body>

然后我们浏览器打开一下

在这里插入图片描述

就会发现div是块句元素，独占一行

span是行内元素，只占文字的长度大小，跟border 设置的值，丝毫无关

display

display有3个值 block inline-block inline 还有一个none

block 块元素

我们给span加入display:bolck；

看一下

在这里插入图片描述

就会发现span变成了块元素

inline 行内元素

在这里插入图片描述

我们给div加入display:inline就会发现div变成了行内元素

，但是它依旧独占一行

inline-block 既是行内元素也是块元素

我们给div 和span标签加入

display:inline-block

在这里插入图片描述

就会发现这2个标签，在是块元素的状态下时，有跟行内元素一样，在一行

none

我们在span标签里面加入

display:none;

在这里插入图片描述

就会发现span元素没掉了

所以none 是无的意思

浮动

我们在IDEA里面增加3张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="father">
    <div class="layer01"><img src="image/1.jpeg" alt=""/></div>
    <div class="layer02"><img src="image/2.jpeg" alt=""/></div>
    <div class="layer03"><img src="image/3.jpeg" alt=""/></div>
</div>

</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid red;
}
.layer01{
    border: 1px dashed red;
}
.layer02{
    border: 1px dashed red;
}
.layer03{
    border: 1px dashed red;
}

到浏览器打开一下

在这里插入图片描述

每个图片都是块元素，

我们给他们加上display:inline-block

使他们变成行内元素，又是块元素

在这里插入图片描述

就会发现这3张图片变成一行了

我们图片一

添加一个float:left；

在这里插入图片描述

就会发现图片1往左边浮过去了

浮起来了，盖住那个红色的框框线了

在这里插入图片描述

我们给图片2添加一个

float:right；

浏览器打开一下

就会发现图片2向右边浮过去了

并且也是盖住了红色框线

我们给第三张图片也添加float效果

在这里插入图片描述

就会发现，我们的页面边框的红色线在最上面，图片确实在最下面

在这里插入图片描述

我们把页面缩小，

却会发现，这3张图片的位置又发生了更改

它们自动重新排版了

我们不想让他们自动排版，却又想让他们是块元素，又有浮动效果，

这时候我们可以使用clear:both；

clear

.layer01 {
    border: 1px dashed red;
    display: inline-block;
float: left;
    clear: both;
}
.layer02{
    border: 1px dashed red;
    display: inline-block;
    float: right;
    clear: both;
}
.layer03{
    border: 1px dashed red;
    display: inline-block;
    float: left;
    clear: both;
}

clear:both;

是清除浮动效果的意思

保持浮动的方向，但是没有浮动效果

在这里插入图片描述

设置好clear之后

我们不管是放大缩小，图片的位置都不会再被重新排列

解决父级页面边框塌陷问题

[]:

https://blog.csdn.net/XYzuiyou/article/details/116563889

XY最右

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
display和浮动

我们应该知道行元素和块元素吧左边是我们打开的浏览器网站的布局，右边是我们自己写的布局就会发现浏览器网站的布局有些可以在一起而我们的网站布局，一个布局只能在一行那是因为我们书写的标签里面有些是块级元素，有些是行内元素但是disaply是可以将块级元素转化成行内元素，将行内元素转换成块级元素块级元素:独占一行h1~h5 p div ul li 行内元素:不独占一行span a img strong...行内元素可以包在块句元素里面，但是块句元素无法包在行内元
复制链接

扫一扫