标签：opacity background color 知识 边框 2022 div 大二 border
块元素有div p ul ol dl等标签
行内 span a em i b等标签
行内块 img input textarea等标签
表单
action提交地址
method提交方式
html超文本标记语言
css层叠样式表
设置css样式
1.行内
<div style="color: red;"></div>
2.外部引入
<link rel="stylesheet" type="text/css" href="css文件地址"/>
3.设置类名，id等XX选择器
<div class="cla" id="ids"></div>
.cla {}
#ids {}
background-color背景颜色
background-image:url(图片地址)背景图片
background-repeat:no-repeat背景图片是否平铺
background-attachment:fixed背景图像是否固定或者随着页面的其余部分滚动。
background-position背景的位置
background:#ffffff url('img_tree.png') no-repeat right top简写形式
颜色 图片路径 是否平铺 背景位置
注：设置背景要么单独设置，要么简写形式设置
文本对齐方式
text-align:center,left,right
当text-align设置为"justify"，
每一行被展开为宽度相等，左，右外边距是对齐
text-decoration: none;取消a标签默认下划线
overline设置上划线
line-through设置删除线
underline设置下划线
<a href="" style="text-decoration: line-through;">我是a标签</a><div style="text-decoration: line-through;">
我是div
</div>text-transform:uppercase转大写
lowercase转小写
<div style="text-transform: uppercase;">
Hello Word Jack
</div>text-indent: 10px;设置首行缩进
<div style="text-indent: 10px;">
你好你好你好你好
</div>font-size字体大小
font-style斜体
font-family字体样式
font-weight粗细
<div style="font-weight: bold;">
我是div
</div>a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
list-style:none取消列表默认样式
list-style: circle;列表的空心圆
square列表的正方形
upper-roman列表罗马数字
lower-alpha列表字母
decimal数字
<!-- 无序列表 -->
<ul style="list-style: none;">
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
</ul><!-- 有序列表 -->
<ol>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
</ol><!-- 自定义列表 -->
<dl>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
</dl>table表格
border边框
cellspacing 合并外边框
cellpadding合并内容到边框的距离
<tr>行
<th>标题，列，会加粗
<td>列合并单元格
rowspan合并行
colspan合并列
<table style="text-align: center;" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</table>盒子模型
box-sizing: border-box;转成IE盒子模型
box-sizing: content-box;转成标准盒子模型
1.标准盒子模型
<div style="width: 200px;height: 200px;
border: 5px solid red;
padding: 10px;">
12313213
</div>
<div style="width: 200px;height: 200px;
border: 5px solid pink;
">
12313213
</div>2.IE盒子模型|怪异盒子模型
<div style="width: 200px;height: 200px;
border: 5px solid orange;
box-sizing: content-box;
padding: 10px;
">
12313213
</div>边框
border-color 修改边框颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
border-width修改边框宽度
border-style修改边框线条样式
·none:没有边框,即忽略所有边框的宽度(默认值)
·solid:边框为单实线
·dashed:边框为虚线
·dotted:边框为点线
·double:边框为双实线
border-top修改边框某一边
<div style="width: 100px;height: 100px;
border: 5px solid red;
border-top: 10px dashed orange">
</div><!-- 轮廓 -->
<div style="width: 100px;height: 100px;
border: 5px solid red;
outline:10px dashed #000">
</div>margin:上 右 下 左;
margin:上 右左 下;
margin:上下 右左;
padding
<div style="width: 100px;height: 100px;
border: 5px solid red;
margin: 10px 50px 100px;">
</div>.box1,.box2,.box3 {
width: 100px;
height: 100px;
border: 1px solid red;
}
.boss {
background-color: pink;
}
<!-- 分组,嵌套 -->
<div class="box1 boss"></div>
<div class="box2"></div>
<div class="box3 boss"></div><div style="width: 100px;height: 100px;
border: 5px solid red;
min-height: 200px;
max-width: 500px;
line-height: 50px;">
我是div我是div我是div我是div我是div我是div我是div我是div
</div>display
display: none;隐藏，不占位置
visibility: hidden;隐藏，占位置
opacity: 0;透明度,0为隐藏，1显示
浏览器5大兼容性
-khtml-苹果浏览器
-webkit-opacity兼容谷歌浏览器
-o-opacity兼容Opera浏览器
-moz-opacity兼容火狐浏览器
-ms-兼容IE，普通样式属性
opacity在IE下值为0-100，下面的40指的是百分之40
{
opacity:0.4;
filter:alpha(opacity=40);
}transparent无色
<div style="width: 100px;height: 100px;
border: 5px solid red;
border: 5px solid transparent;"
>
</div>static默认值
relative相对定位，脱离文档流
fixed固定定位
absolute绝对定位,如果父级没有相对定位，
那么他的父级就是浏览器，脱离文档流,
如果父级没有相对或绝对定位会一直往上一级找，直到浏览器
找到父级有相对或绝对定位，根据父级定位
sticky粘性定位
<div style="position: relative;">
<div style="width: 100px;height: 100px;
border: 1px solid red;
margin: 100px;
top: 50px;left: 100px;
position: relative;">
1
<div style="width: 30px;height: 30px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;">
2
</div>
</div>
</div><!-- 固定定位 -->
<div style="width: 50px;height: 50px;
border: 1px solid orange;
border-radius: 50%;
position: fixed;
right: 0;
bottom: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
font-weight: 700;">↑</div><!-- overflow -->
overflow: hidden;溢出隐藏
visible默认值
scroll添加滚动条
auto只有内容超出会出现滚动条
overflow-x: hidden;隐藏横向滚动条
overflow-y: hidden;隐藏纵向滚动条
<div style="width: 50px;
height: 50px;border: 1px solid red;
overflow-y: hidden;">
我是div我是div我是div我是div
</div><div class="clearfix">
<div style="width: 100px;height: 100px;
background-color: #FF0000;float: left;">1</div>
<div style="width: 100px;height: 100px;
background-color: #FF0000;float: right;">2</div>
</div>
<p style="width: 300px;height: 300px;
background-color: deeppink;">我是一个p标签</p>水平居中
margin: 0 auto;
<!-- 垂直居中 -->
<div style="width: 500px;height: 500px;
border: 1px solid red;position: relative;">
<div class="box1" style="position: absolute;
top: 50%;left: 50%;
margin: -50px 0 0 -50px;"></div>
</div><!-- 浮动可以实现居中 -->
<div style="
width: 100px;height: 100px;
border: 1px solid red;float: left;
margin: 50% 0 0 50%;"></div>以上全是课上做的笔记
标签：opacity,background,color,知识,边框,2022,div,大二,border 来源： https://blog.csdn.net/TianChuanMb/article/details/123124942
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。