CSS的使用

一、隐藏

1、文本隐藏

/*文本隐藏*/
.text-hidden{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*文本隐藏,悬浮显示*/
.text-hidden:hover{
    width: auto!important;
}

二、浮动样式

1、显示、隐藏浮动div

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
		.bb{
			display: none;
		}
       /*  当aa触发hover后,跟在aa后面的bb的样式被触发*/
		.aa:hover + .bb{
			display: inline;
		}
		.bb:hover{
			display: inline;
		}
	style>
head>
<body>
	<div class="aa">
		aa
	div>
	<div class="bb">
		bb
	div>
body>
html>

2、清除浮动

/*解决浮动,用在最后*/
.clearBoth {
    clear: both;
    height: 0px;
    width: 0px;
}

3、浮动填充

最后一个DIV填满剩余的部分

<div style="border:1px solid red; overflow:hidden;zoom:1;"> 
     <div style = 'float:left; background:yellow;' >yellowdiv> 
     <div style = 'float:left; background:green;' >greendiv> 
     <div style = 'float:left; background:blue;' >bluediv> 
     <div style = 'float:left; background:gold;' >golddiv> 
     <div style = 'background:red; _float:left;' >
          <div style = "_width:100%;" >reddiv >
     div >
div>

参考:https://blog.csdn.net/weixin_30273501/article/details/95275928

三、旋转

transform:rotate(90deg);  //顺时针旋转90度
transform:rotate(-90deg);  //逆时针旋转90度

四、字体

1、css中如何引入第三方字体

https://jingyan.baidu.com/article/eae078276667611fed548562.html

五、css美化radio

https://c.runoob.com/codedemo/3373

六、边框、阴影

1、用css给div的border设置阴影

这是单边有阴影效果的!阴影不再是实影投影,阴影清晰复度向外扩散,更具阴影的效果的!

box-shadow: -2px 0 3px -1px green, //左边阴影制
box-shadow: 0 -2px 3px -1px blue, //顶部阴影
box-shadow: 0 2px 3px -1px red, //底部阴影
box-shadow: 2px 0 3px -1px yellow; //右边阴影

3px 为阴影扩展半径

不难看出box-shadow: 第1像素 第2像素 第3像素 第4像素 颜色;

第1像素 的正负值确定阴影的左右zhidao;

第2像素的正负值确定阴影的上下;

七、选择器

你可能感兴趣的:(css,前端)