CSS3学习记录三

CSS3学习记录三

 

display与浮动

display

display:block

显示为块元素

display:inline

显示为行元素

display:inline-block

显示为行内块元素

display:none;

不显示

浮动

float:righ

向右浮动

float:lift

向左浮动

clear:

clear 属性规定元素的哪一侧不允许其他浮动元素

left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

父级边框塌陷

1.增加父级元素高度

2.增加一个空div标签,清除浮动

 <div class="clear"></div>
 .clear{
     clear:both;
     margin:0;
     padding:0;
 }

3.overflow

在父级元素中增加一个overflow: hidden;

4.父类添加一个伪类,after(推荐使用)

 #father:after{
     content="";
     display: block;
     clear: both;
 }

 

---

定位

 

相对定位

position:relative;(生成相对定位的元素，相对于其正常位置进行定位,原来位置保留)

top:10px;(偏离到距离原来的顶部10px)

bottom:-10px;(偏离到距离原来的底部10px)

left:20px;(偏离到距离原来的左侧20px)

right:-20px;(偏离到距离原来的右侧20px)

绝对定位

position:absolute;(生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位,原来位置不保留)

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

固定定位

position:fixed;(生成固定定位的元素，相对于浏览器窗口进行定位)

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

 

 

---

z-index

 

z-index: 2;

z-index 属性指定一个元素的堆叠顺序

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

opacity:0.5;改变盖层透明度

 

---

以上内容学习自【狂神说Java】CSS3最新教程快速入门通俗易懂

2020-5-20