当前位置：首页 > news >正文

html 常用css样式及排布问题

news 2025/6/25 12:28:19

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>

结果：