公共样式:边框,浮动与清除浮动,圆角边框


发布时间:2020-03-17 21:12    作者: 晖哥哥   已过去:1 年,7 月   阅读总量:747 已被赞:0


公共样式

边框

使用边框通用定义类来快速设置元素的边框和边框半径,适用于图像、按钮或任何其他元素。

边框margin:5px 边距 borde边框粗细,display:inline-block;行内块 就是让元素成为一个正方形块状,且是水平对齐的。

<style>

span{display:inline-block;width:75px;height:75px;margin:5px;border:1px solid;background:#F5F5F5;}

</style>

 

<span></span>

<hr>

<!-- 添加边框属性,显示指定边框。 -->

<span class="border"></span> #四面都有灰色边框(有边框实际看不到,无边框是黑线)

<span class="border-top"></span> #上面有边框,

<span class="border-right"></span>#右边有边框

<span class="border-bottom"></span>#下面有边框

<span class="border-left"></span>#左边有边框

<hr>

<!-- 在一个空间上定义边框-删除或显示特定边框定义方法。 -->

<span class="border-0"></span> #清除4面边框

<span class="border-top-0"></span> #清除上边框

<span class="border-right-0"></span>#右

<span class="border-bottom-0"></span> #下

<span class="border-left-0"></span>#左

<hr>

<!-- 使用我们的主题颜色类方法,定义边框颜色。 -->

<span class="border border-secondary"></span>

<span class="border border-success"></span>

<span class="border border-danger"></span>

<span class="border border-warning"></span>

<span class="border border-info"></span>

<span class="border border-light"></span>

<span class="border border-dark"></span>

<span class="border border-white"></span>

<hr>

 

圆角边框 (边框4角削圆一点点,可以再img上使用)

使用.rounded元素可以轻松的定义四个圆角的孤度及显示效果。

<style>

img{width:75px;height:75px;margin:5px;}

</style>

 

<img src="images/sm.jpg" alt="">

<img src="images/sm.jpg" alt="" class="rounded"> #四角都削

<img src="images/sm.jpg" alt="" class="rounded-top"> #上

<img src="images/sm.jpg" alt="" class="rounded-right">

<img src="images/sm.jpg" alt="" class="rounded-bottom">#下

<img src="images/sm.jpg" alt="" class="rounded-left">

<img src="images/sm.jpg" alt="" class="rounded-circle">#变成一个圆形,加上宽度就成椭圆

<img src="images/sm.jpg" alt="" class="rounded-pill" style="width:140px;"> #胶囊药的样子,图片必须是长方形才有效果,所以这里设了个宽度。

<img src="images/sm.jpg" alt="" class="rounded-0" style="border-radius:5px;">

#border-radius:5px 5个像素的角圆角 rounded-0 就是清除圆角像素

 

要控制削圆角的幅度,rounded-10" style="border-radius:10px"

要这样配合做使用才有效果!

浮动属性&清动浮动

使用class样式来切换float效果.float{-sm/md/lg/xl}-left/right/none

float类样式是通过添加 .clearfix 到父元素上来达达到清除目标可设置断点,none 不浮

<div class="border border-danger clearfix">

#border 添加边框

<div class="float-left">left</div>

<div class="float-right">right</div>

</div>

点赞

0




登陆后方可评论