微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

分组和嵌套 

分组选择器

分享图片

——————>  

分享图片

嵌套选择器

能适用于选择器内部的选择器的样式

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

 

 

 

 

尺寸

控制高宽 

增加行间距

 

 

 

 

 

Display显示与Visiblity可见性

display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏

 

隐藏元素

分享图片

  • 块元素是一个元素,占用了全部宽度,在前后都是换行符【如<p> <h1> <div>】
  • 内联元素只需要必要的宽度,不强制换行【如<a> <span>】

 

内敛元素和块元素的相互转换

li {display:inline;}  //变为内敛
span {display:block;}   //变为块

分享图片

 

 内敛和块的特性

visibility属性

 

 

 

position定位

 

sticky粘性定位效果

分享图片

——————> 

分享图片

重叠的元素————z-index指定堆叠顺序

分享图片

定位属性

 

注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。

提示: 当使用 position 来对齐元素时,通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是 <div class="container">)设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明

 

 

 

overflow

控制内容溢出元素框时显示的方式

添加滚动条

分享图片

 

元素溢出元素框【显示在外面】

 

 float浮动

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

 

分享图片

彼此相邻的浮动

分享图片

——————>   

分享图片

 

 清除浮动

clear 属性指定元素两侧不能出现浮动元素

 

分享图片

分享图片

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。