08透明 响应式 宽高自适应 清除浮动 伪元素

08透明 响应式 宽高自适应 清除浮动 伪元素

一、透明

透明分为颜色透明和元素透明

颜色透明

background:rgba(R,G,B,透明度)
	透明度是0-1，0代表完全透明，1代表完全不透明

给盒子设置了颜色透明不会使盒子里面的内容透明化，即使盒子的颜色透明设置为完全透明，盒子里面的内容也可见

元素透明

opacity:;
	属性值是0-1的数值，低版本不支持

filter:alpha(opacity= );
	属性值是0-100的数值，对低版本兼容

二、响应式

能够根据设备的屏幕大小、设备等不同实现不一样的效果，即写多套代码，当屏幕大小、设备等不同满足一定条件时会出现其中的一种效果以满足各种设备，但是工作量却加大了许多。

原理：利用媒体查询

关键字
	@media

三、宽度自适应

宽度不写

​ 块级元素默认独占一整行

使用百分比

​ 使用百分比，始终保持浏览器窗口大小的一定百分比

使用最大最小宽度

max-width:;
min-width:;

当浏览器大小大于最大宽度时，里面的内容不会再撑大

当浏览器大小小于最小宽度时，浏览器会出现左右移动的轮滑以保持内容不会小于最小宽度

四、高度自适应

高度不写

​ 如果高度不写，盒子的高度由内容决定，内容最高是多少，盒子就多高；但是，如果子元素浮动，子元素就会脱离文档流，导致父元素没有高度，所以需要清除浮动解决这个问题

使用百分比

​ 父元素没有设置高度，高度由内容决定，所以如果高度设置的是百分比，一定要确保父元素有高

html,body{
    height:100%;
}

使用最大最小高度

min-height:;
max-height:;
	在低版本中不兼容

min-height:;				max-height:;
height:auto !imporant;		height:auto !important;
_height:;					_height:;
	可以兼容低版本

五、清除浮动

清除浮动主要是为了防止设置了浮动的盒子脱离文档流，没有高度。

清除浮动有许多方法

方法一

给父元素设置
overflow:hidden;

方法二

给需要清除浮动的元素最后添加一个空的兄弟元素，并设置类名
<div class="clear"></div>

再对类名为clear的元素设置样式

.clear{
    clear:both;
}

方法三

给浮动元素的父级元素添加一个类名为claerfix，然后设置样式
.clearfix:after{
    display:block;
    content:"";
    clear:both;
    height:0;
}

推荐使用方法三

六、伪元素

在e元素的内容之前添加内容
e:before{
    content:"要添加的内容";
}

在e元素的内容之后添加内容
e:after{
    content:"要添加的内容";
}

伪类和伪元素的区别

概念上

伪类是一种临时状态，只有状态被触发的时候才会生效。：hover伪元素是一个假元素。虚拟的dom节点

表达上

伪类使用单冒号，伪类选择器使用双冒号。：after：：after都是伪元素，只是不同版本的不同写法。

其他伪元素

e::selection{
    color:;			设置被选中文字的颜色
    background:;	设置被选中文字的背景颜色
}

七、显示与隐藏的多种方式的区别

display:none;		不会占据原位置

visibility:hidden;	会占据原位置，不可以点击悬浮等

opacity:0;			会占据原位置，可以点击悬浮等