css浮动

作者: 邵毅超 | 来源:发表于2018-11-21 10:28 被阅读0次

浮动(关键字):float

分左浮动和有浮动,如果要水平居中的话,要给对应的div盒子设置“margin:0 auto”;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档流</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: forestgreen;
            float: left;
        }
        .box{
            width: 200px;
            height: 100px;
            margin: 0 auto;
            border-style: solid;
            border-radius:1px;
            border-color:orange;

        }

    </style>
</head>
<body>
<div class="box">
    <div class="box1">
        <p style="color: white;font:  bold 33px '幼圆';padding-left: 10px;line-height:100%;">网易</p>
    </div>
    <div class="box1">
        <p style="color: burlywood;font: bold 32px '华文彩云';line-height: 110%;">云课堂</p>
    </div>
</div>
</body>
</html>
image.png

相关文章

  • 一篇文章带你了解CSS clear both清除浮动

    一、前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要...

  • CSS浮动

    简介其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。这篇讲CSS浮动,在CSS中浮动主...

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • Test10

    引用文章: 那些年我们一起清除过的浮动 CSS浮动float详解 Clear Float CSS float浮动的...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

  • CSS盒子模型、定位、浮动

    CSS盒子模型概述 CSS内边距 CSS边框: CSS外边距 CSS定位: CSS浮动:

  • CSS clear both清除浮动

    原文地址:CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了...

  • CSS之float,文档流,position详解

    1 CSS浮动 1.1 浮动定义 float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素...

网友评论

    本文标题:css浮动

    本文链接:https://www.haomeiwen.com/subject/ejyqqqtx.html