css文字竖直显示_CSS浮动

最新推荐文章于 2022-10-21 15:23:05 发布

weixin_39956353

最新推荐文章于 2022-10-21 15:23:05 发布

阅读量261

点赞数

文章标签： css文字竖直显示 css设置滚动条的位置 css隐藏滚动条但能滚动 div浮动窗口一侧浮动广告代码

在标准文档流中每一个块级元素，在水平方向会自动伸展，直到包含它的元素的边界，在竖直方向和其他块级元素依次排列。
要实现浮动需要在CSS中设置float属性，默认值为none，也就是标准文档流块级元素通常显示的情况。

float属性

当float属性设置为right时，元素就会向其父元素的右侧移动、当float元素设置为left时，元素则会向向其父元素的左侧移动、当float为none的时候元素不会浮动；
我们来试一下在float值不同的情况下的浮动情况：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    .father{
        width:300px;
        height:300px;
        border:1px solid #000;
        }
    .father div{
        width:100px;
        height:100px;
        }
    .son1{
        background-color:red;
        }
    .son2{
        background-color:pink;
        }
    .son3{
        background-color:blue;
        }
</style>
</head>
<body>
    <div class="father">
        <div class="son1">
        </div>
        <div class="son2">
        </div>
        <div class="son3">
        </div>
    </div>
</body>
</html>

我们在一个大的div容器father里面定义了三个小的div容器，分别是son1、son2、son3，如图所示，son1为红色、son2为粉色、son3为蓝色；

然后我们给son2加上一个float:right;，我们发现son2向右边浮动了，且son3移动到了son2的位置，是因为son2向右浮动脱离了标准文档流，想要解决这个问题我们需要用到清除浮动；

再试试给son3给加上float:right;，会有效果

其他的情况大家可以自己动手尝试一下，实践出真知~

清除浮动

我们知道当某些元素设置了浮动，在页面排版时会影响其他元素的位置，要解决这个问题我们需要使用到清除浮动，来消除浮动元素对其他元素的影响；

在css中一般使用clear元素来清除浮动，且可以规定元素哪一侧不允许其他浮动元素，属性值left表示在左侧不允许浮动元素、属性值right表示在右侧不允许浮动元素
、属性值both表示在左侧和右侧不允许浮动元素、属性值none表示允许浮动元素出现在两侧，默认值；
还用上面的例子，之前我们设置son2向右浮动时，son3的位置也改变了，现在我们来通过具体操作，看看clear元素的具体使用和使用效果吧

# 在son3中增加clear:both;
.son3{
        background-color:blue;
        clear:both;
        }

通过这个图片我们可以知道，给son3设置清除浮动后，son3就不会被son2影响了；

溢出处理

在网页中有时我们需要将内容放在一个固定大小的容器中，超出的部分隐藏起来，或者以带滚动条的窗口显示等，这些我们可以通过overflow属性来实现；
overflow的几个常用属性值：

visible：内容不会被修剪，会呈现在容器外面，也就是溢出，是默认的属性值；
-hidden：内容会被修剪，并且溢出部分不可见，也就是隐藏移除部分；
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容；
auto：如果内容被修剪，则浏览器会显示滚动条以便查看那其余内容；
我们通过代码操作来试一下，overflow的值不同时所呈现的效果；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    .father{
        width:250px;
        height:250px;
        border:2px solid #000;
        
        /*让box在father中垂直居中*/
        display:flex;
        justify-content:center;
        align-items:center;
        }
    .box{
        width:150px;
        height:150px;
        border:2px solid pink;
        }
    .title{
        text-align:center;
        }
</style>
</head>
<body>
    <div class="father">
        <div class="box">
            <p class="title">金陵酒肆留别</p>
            <p>风吹柳花满店香，吴姬压酒劝客尝。</p>
            <p>金陵子弟来相送，欲行不行各尽觞。</p>
            <p>请君试问东流水，别意与之谁短长？</p>   
        </div>
    </div>
</body>
</html>

当我们在.box选择器中设置overflow:visible;时，呈现效果和不设置overflow是一样的，都会有内容溢出；

我们再试一下当.box选择器中设置overflow:hidden;会是什么效果：

当.box选择器中设置overflow:scroll;

weixin_39956353

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css文字竖直显示_CSS浮动

在标准文档流中每一个块级元素，在水平方向会自动伸展，直到包含它的元素的边界，在竖直方向和其他块级元素依次排列。要实现浮动需要在CSS中设置float属性，默认值为none，也就是标准文档流块级元素通常显示的情况。float属性当float属性设置为right时，元素就会向其父元素的右侧移动、当float元素设置为left时，元素则会向向其父元素的左侧移动、当float为none的时候元素不会浮动；...
复制链接

扫一扫