CSS样式学习记录-CSDN博客

本文链接：https://blog.csdn.net/m0_54256047/article/details/127512784

前言

记录做项目时遇到的不会的或者忘记的css样式代码

一、白色用代码怎么表示？

 background:#ffffff;

二、圆角边框效果

  border-radius: 8px;

三、文字样式

文本的加粗、斜体、下标、上标删除线

<body>
	<b>加粗</b><br />
	<i>斜体</i><br />
	X<sub>下标</sub><br />
	X<sup>上标</sup><br />
	<del>删除线</del><br />
	<s>删除线</s><br />
	<br />
</body>

四、float浮动

1.在不设置宽高的情况下，让父类可以变成子类的高度

/*在不设置宽高的情况下，让父类可以变成子类的高度*/
overflow: hidden;

2.设置为行内元素

display: inline

3.设置为行内块元素：有宽高且不会独占一行

display: inline-block

4.作为表格单元格

display: table-cell

5.隐藏元素且不占具物理位置

display: none;
visibility: visible;/*显示*/
visibility:hidden /*隐藏元素且占具物理位置 */

6.设置元素透明度

opacity: 0.1;

7.清除两边的浮动:抵消其他元素浮动对当前元素浮动的影响

clear: both;

8.设置为块级元素

display: block;

五、跨行属性

<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>

六、 justify-content 属性

在弹性盒对象的 <div> 元素中的各项周围留有空白：

#tit{
	          display: flex;
	          width: 100%;
	         justify-content: space-around;
	          align-items: center;
}



<div id="tit">
			<img src="img/logo.jpg" />
			<span>登录&nbsp;&nbsp;注册</span>
		</div>