java第二十五天---CSS（相较于有道云笔记的改进之处）

本文链接：https://blog.csdn.net/weixin_41847891/article/details/87738306

1visibility与display

	<!-- display:block/none/inline //显示为块  隐藏  显示为行

visibility:visible//显示元素
visibility:hidden//隐藏元素 隐藏之后 ，该元素占的位置还在
display: none; 这个隐藏之后，元素所占的位置也没有了

-->
	<div id="" style="width: 200px;height: 200px;background:greenyellow;">
		
	</div>
	
	<div id="" style="width: 200px;height: 200px;background: red;margin-top: 40px;display: none;">
		
	</div>

2 浮动与清除浮动

<!-- float:left; 层的浮动，可以让层一字排开 -->
		<div id="" style="width: 200px;height: 200px;background:greenyellow;float:left;">

		</div>

		<div id="" style="width: 200px;height: 200px;background: red;float:left;">

		</div>

		
		<!-- 清除上面的浮动，不影响下面的层 
		clear:  both; left right 清除浮动
		-->
			<div id="" style="clear:both;">
				
			</div>
		<div id="" style="width: 200px;height: 200px;background:pink;">
		
		</div>

3 边框属性

<!-- border: 1px black solid; 设置边框 值1 边框粗细 值2 边框颜色 值三 边框线条样式 -->
		<div id="" style="width: 200px;height: 200px;border: 10px black dotted;">
			
		</div>
		
		<div id="" style="width: 200px;height: 200px;border-width:2px;border-style:solid ;border-color:red ;border-bottom-color: yellow;">
			
		</div>
	
		<img src="img/c1.jpg" style="width:200px ;height: 200px;margin-top: 50px;border: 2px aqua solid;">
	</body>
</html>

4 层的层叠顺序

<!-- z-index: 3 
		当几个层发送了重叠后 可以用 z-index 来调整叠放顺序，谁的数值最大，谁就在最上面
	
	-->
		<div id="" style="width: 200px;height: 200px;background: red;position: absolute;top:20px;left: 30px;z-index: 3;">
	
		</div>
		
		<div id="" style="width: 200px;height: 200px;background:yellow;position: absolute;top: 50px;left:50px;z-index: 2;">
		
		</div>
		<div id="" style="width: 200px;height: 200px;background:greenyellow;position: absolute;z-index: 1;">
		
		</div>

5 行标签与块标签的转换

<h1 style="display:inline">这是一个块标签</h1><font size="" color="">这是一个行标签</font>

			因为<h1></h1>是一个块标签，但是因为加了display:inline 就变成了一个行标签
		
		<font size="" color="" style="display: block;">这是一个行标签222222</font>------asdfasdfsadf
	</body>
</html>
			因为该标签是个行标签，加了display：block 就变成了一个块标签

块标签占据一行，后面不允许有其他标签，
行标签后面可以加其他标签
<!-- 块标签：默认会占据一行的宽度 div p <h1></h1>  ul 我CSS设置块标签距离 上下左右的间距是起作用的 -->
			<!-- 行标签:默认不会占据一样的位置 a font b s  设置左右间距起作用，设置上下间距不起作用-->

6 行标签与块标签

<!-- div 是一个纯洁的块标签（不带任何样式，无宽无高无背景）
		span 是一个纯洁的行标签 不带任何样式 -->
			<div id="" style="width: 200px;height: 200px;background:yellow;margin-top: 50px;margin-left: 100px;">
		</div>
		<span style="font-size: 50px;margin-top: 100px;margin-left: 100px;display: block;">这是一个纯洁的行标签</span>
	
	</body>
</html>

7 一些标签含义

border-radius:5px ;   //边框加圆角
				text-align: center;   //使边框里的文字左右居中
				line-height:55px ;    //使边框里的文字上下居中
				letter-spacing: 8px;  //字符间距
				box-shadow: 5px 5px 5px gray;  //左右上下有阴影，为灰色
			}
			.bt:hover{
			    box-shadow: 10px 10px 10px gray;//当鼠标放在该边框之后，阴影变大为10px，
				width: 141px;			 //当鼠标放在该边框之后，宽变大为141px
				height: 56px;			同理
			}

8 绝对定位与相对定位

<!--我们页面的元素，默认摆放的位置，都是采用相对定位
		元素默认采用的是相对定位
		当然第一个元素会跑到页面的起始位置（左上角），后面的元素采用的是相对定位，就会参照上一个元素的位置
		但是有时，我们还会采用绝对定位，所谓的绝对定位，就是元素，会参照起始位置，而不去参照我的上一个元素
		-->
		<!-- 设置元素的定位方式 
		position: 定位方式
		absolute;绝对定位
		relative;相对定位
		采用绝对定位后：我们设置元素距离原点上下左右的位置 top left right bottom
		-->
		<button type="button" style="position:absolute;top: 10px;left: 10px;">一个按钮</button>
		<button type="button" style="position:absolute;top: 20px;left: 30px;">一个按钮</button>
		<button type="button" style="position: absolute;top: 50px;left: 50px;">一个按钮</button>

9 超出内容部分怎样处理

<!-- overflow:scroll 加上滚动条/visible默认值，展示出来/hidden 超出的部分隐藏掉/auto 自动判断是否加滚动条  //超出内容是否包裹
		 内容超出层的宽高，的处理办法
		 
		 -->
		
		<div id="" style="height: 50px;width: 100px;background-color:yellow ;overflow:scroll">
			asdfasdfasdfsadfds
			asdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfa
			sdfasdfsadfdsasdfasdfasd
			
			fsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfds
		
			fsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfds
			fsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfds
			asdfasdfasdfsadfds
			
			
		</div>

10 CSS背景属性

background-color:red ; 设置背景颜色
	background-image: url(img/c1.jpg); 设置背景图片
	background-size: 100% 800px; 设置背景图片的宽高尺寸
	-->
	<body style="background-color:red ;background-image: url(img/c1.jpg);background-size: 100% 800px;">
		
			<div id="" style="width: 300px;height: 300px;background:red ;background-image: url(img/c.jpg);background-size: 100% 100%;">
				
			</div>
	</body>
</html>