公共样式:position固顶(底)及定位(相对定位与绝对定位)


发布时间:2020-03-17 21:21    作者: Uncle Hui   已过去:4 月,2 周   阅读总量:183 已被赞:0


position固顶(底)及定位相对定位与绝对定位

通用属性

使用.position-static/relative/absolute/fixed/sticky样式,可以实现快速定位-虽然它们不包含响应式支持。

<div class="position-absolute">网战天下</div>

固定在()部

可以用.fixed-top/bottom将一个元素固定在可见区域的顶(底)部,从边到边的对齐,用户在使用固定在顶部时请确认效果带来的影响(如覆盖)-必要时增加额外的自定义CSS。

<style>

body{padding:50px 0;}

</style>

 

<div class="fixed-top">

<div class="container bg-danger" style="height:50px;">header</div>

</div>

 

<div class="container bg-light">

1<br>2<br>3<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>11<br>12<br>13<br>

</div>

 

<div class="fixed-bottom">

<div class="container bg-success" style="height:50px;">footer</div>

</div>

贴齐于top顶部

将一个元素轩于可见区域的顶部,从边到边-但只在你的浏览器窗口滚动才能激活它,该 .sticky-top 样式使用 position: sticky不能在所有浏览器中获得支持。

Microsoft Edge 和 IE11 呈现 position: sticky 使用的是 position: relative. 属性,因此我们将这个样式增加了 @supports 动态变量,限制在可支持的浏览器上运行。

<div class="container">

<h1>

网战天下

<small class="text-muted">www.web-666.com</small>

</h1>

 

<div class="bg-primary sticky-top" style="height:50px;">导航条</div>

 

<div>

1<br>2<br>3<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>11<br>12<br>13<br>

</div>

</div>

visibility显示或隐藏处理

使用通用样式的 visibility 元属,这不会改变元素的 display 值,并且有助于大部分使用者隐藏内容,但仍然保留在屏幕阅读器中。

根据需要选用 .visible  .invisible 两个Class样式。

aaa

<span class="invisible">bbb</span>

ccc

关闭图标

使用通用的close关闭图标来关闭 modals模态框提示或alert提示组件的内容。

<button type="button" class="close">×</button>

<!-- <a href="###" class="close">×</a> --> #a 标签页可以用

嵌入(embed)

创建响应式的视频、图像、幻灯片,并能在在任何设备上友好的扩展显示。

将这些规则应用到 <iframe><embed> <video> <object>  可以用在这4中标签上,当需要配合其它属性(如响应式)时,也可以加入 .embed-responsive-item 定义。

你不需要将 frameborder="0" 加入到你的 <iframe>中,因为我们已经为您覆盖处理了这个属性。

 .embed-responsive 实现同比例收缩,至于 .embed-responsive-item不是严格要求的-虽然我们鼓励使用它。

长宽比例处理.embed-responsive-21by9 / 16by9 / 4by3 / 1by1 显示的大小

<div class="embed-responsive embed-responsive-16by9">

<iframe src="https://www.taobao.com" class="embed-responsive-item"></iframe>

</div>

图像替换网站logo使用多

使用 .text-hide class样来隐藏一个元素的文字内容并替换成背景图片。

使用.text-hide class样式可以保持标签的亲和性及SEO优化需求,引入后,需要使用 background-image 属性来提供视觉展示,而不是文字内容(文字内容随即隐藏)。

<!-- <h1 class="text-hide">网战天下</h1> -->

<h1 class="text-hide" style="background-image:url('images/sm.jpg'); width:75px;height:75px;">网战天下</h1>

读屏器(方便视力障碍人士用)

支持视觉隐藏的内容、但保持可访问的辅助技术,如屏幕阅读器,可以使用.sr-only类风格。在需要向非视觉用户传达额外的视觉信息或提示(例如通过使用颜色表示的含义)的情况下,这通常很有用。

<p class="text-danger">

  <span class="sr-only">Danger: </span>

  This action is not reversible

</p>

通过 .sr-only可定义 屏幕阅读器支持的元素 .sr-only  .sr-only-focusable结合,可以防止被键盘激活后再次显示此地素(如通过键盘)。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

显示添加边框 border

flex弹性布局 在一个大的div里对下面的子div进行布局(上下左右,分散等等)

父级:

1.启用.d{-sm/md/lg/xl}-flex/inline-flex

2.方向.flex{-sm/md/lg/xl}- row /row-reverse / column/column-reverse

3.内容对齐与对准.justify-content{-sm/md/lg/xl}-start/center/end/between/around

4.对齐项目.align-items{-sm/md/lg/xl}-stretch/start/center/end/baseline

5. Wrap包裹.flex{-sm/md/lg/xl}-nowrap/wrap/wrap-reverse wrap里面div多了自动换行)

6.对齐内容.align-content{-sm/md/lg/xl}-stretch/start/center/end/around

子元素:

1.自对齐.align-self{-sm/md/lg/xl}-stretch/start/center/end/baseline

2.自相等.flex{-sm/md/lg/xl}-fill

3.等宽变幻.flex{-sm/md/lg/xl}-grow-0/1

 缩小能力.flex{-sm/md/lg/xl}-shrink-1/0

4.自浮动:水平:.mr-auto(水平浮动到右边).ml-auto (水平辅导到左边)

垂直:.mb-auto.mt-auto (可结合align-itemsflex-direction: column)

5. Order排序.order{-sm/md/lg/xl}-1至12(默认0,越小越靠前)

<style>

.myFlex{width:500px;height:500px;background:#00F;}

.myFlex>div{width:100px;background:#F00;}

</style>

 

<div class="myFlex d-flex flex-lg-row">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

点赞

0




登陆后方可评论