html 常用css样式及排布问题

news2024/9/22 19:29:25

1.常用样式

    <style>
        .cy{
            width: 20%;
            height: 50px;
            font-size: 30px;
            border: #20c997 solid 3px;
            float: left;
            color: #00cc00;
            font-family: 黑体;
            font-weight: bold;
            padding: 10px;
            margin: 10px;
        }
    </style>

①宽度（长）

②高度（宽）

③字体大小

④边框（顺序随意，可以指定颜色，样式，边框宽度）

样式包含：

dotted：点线边框
dashed：虚线边框
solid ：实线边框
double：双边框

inset：3D凹边框
outset：3D凸边框
groove
ridge

⑤浮动（即强制横向排版，会强制改变某一区域的大小）

⑥颜色

⑦字体样式

⑧字体粗细

⑨边框内间距

⑩边框外间距

2.浮动属性float（浮动元素独立于非浮动元素之外，但会影响非浮动元素排列）

    <style>
        .i{
            float: left;
            width: 300px;
            height: 200px;
            border: #1e7e34 1px solid;
        }
        .i2{
            width: 300px;
            height: 200px;
            border: #1e7e34 1px solid;

        }
    </style>

<body>
<img src="../../../1.gif" style="width: 30%">
<div class="i">不许动</div>
<div class="i">动</div>

</body>

即使先写的是img，但i样式中有浮动属性，后面两个块级标签应用了这个属性，因此会向左浮动

当我们再添加一个非浮动元素时发现，非浮动元素只对齐与非浮动元素，与浮动元素有重合部分。（图片和“好耶”是非浮动元素）

<body>
<img src="../../../1.gif" style="width: 30%">
<div class="i">不许动</div>
<div class="i">动</div>
<div class="i2">好耶</div>

</body>

当我们需要对齐时，需要清除浮动属性，即利用clear属性。

<body>
<img src="../../../1.gif" style="width: 30%">
<div class="i">不许动</div>
<div class="i">动</div>
<div class="i2" style="clear: both">好耶</div>

</body>

结果：