A.今天学到什么
1.文本修饰
1.1文本样式
/*设置文本对齐的方向，默认为left*/
text-align: center;
/* 文本修饰 */
/*下划线*/
text-decoration: underline;
/* line-through 穿过 */
/* overline 上划线 */
/* a标签自带下划线 不需要下划线 none */
/* 全部小写 */
text-transform: lowercase;
/* 全部小写 */
text-transform: uppercase;
/* 首字母小写 capitalize */
1.2文本字体
/* 可以设置多个字体为后备 如果没有这种字体会自动选择其他字体 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* 一般默认字体为14px */
font-size: 14px;
/* 默认样式 normal */
font-style: normal;
/* 字体权重 范围100-900*/
font-weight: bold;/* light*/
/* 字体 */
2.链接
a:link{
/* 正常，未访问过的链接 */
color: #333;
}
a:visited{
/* 用户已访问过的链接 */
color:yellow;
}
a:hover{
/* 当用户鼠标放在链接上时 */
color: blue;
}
a:active{
/* 链接被点击的那一刻 */
color: red;
}
/* 若单独设置几个链接，必须遵守如下规则： */
/* a:hover 必须跟在 a:link 和 a:visited后面 */
/* a:active 必须跟在 a:hover后面 */
3.列表样式
/* 去掉列表样式 list-style:none; */
/* 列表样式 list-style-type:circle|square|disc*/
/* 列表样式图片 list-style-image:url("xxx") */
ul{
list-style-type:disc;
}
4.边框样式
div{
width: 100px;
height: 100px;
border: 10px solid #333;
}
5.表格
5.1表格样式
table{
text-align: center;
line-height: 30px;
width: 500px;
/* 边框折叠 */
border-collapse: collapse;
}
table,th,td{
border: 1px solid #333;
}
5.2跨越行的表格
table{
border-collapse: collapse;
text-align:center;
line-height: 50px;
width: 800px;
}
table,th,td{
border: 1px solid #333;
}
5.3跨越列的表格
table{
border-collapse: collapse;
text-align:center;
line-height: 50px;
width: 800px;
}
table,th,td{
border: 1px solid #333;
}
5.4有间隔的表格
table{
border-collapse: collapse;
text-align:center;
line-height: 50px;
width: 800px;
}
table,th,td{
border: 1px solid #333;
}
.gap{
height: 20px;
}
6.轮廓
div{
width: 100px;
height: 100px;
background:skyblue;
/* 边框不改变原来的大小 */
outline: 10px solid #333;
}
input{
margin-top: 50px;
/* 鼠标放上去 框不点亮 */
outline: none;
}
7.透明度
.child{
width: 100px;
height: 100px;
background-color: blue;
opacity: 0.5;
}
.parent{
width: 200px;
height: 200px;
background: red;
}
8.继承
8.1样式继承
/* div{
子元素不设置宽度会继承父元素的宽度
只发生在块元素之间
background: red;
height: 40;
} */
.child{
/* 如果父元素不设置高度 会得到子元素的高度 */
width: 20px;
height: 30px;
background: yellow;
}
.parent {
width: 40px;
background: red;
}
8.2文本继承
body{
color: red;
font-size: red;
cursor: pointer;
}
ul{
list-style: none;
}
8.3继承顺序
/* 优先级别 .parent>a > a > parent */
<div class="parent">
<a href="">手机</a>
<a href="">平板</a>
<a href="">电脑</a>
</div>
9.盒子模型
border-sizing:content-box|border-box
当盒子模型的 boxsizing 设置为 boder-box时
设计border padding 它的宽高不会改变
10.浮动
10.1浮动显示
.parent{
width: 400px;
height: 200px;
background: red;
}
.child{
width: 150px;
height: 150px;
background: yellow;
float: left;
}
.two{
/* 清除浮动 让下面的不收上面的浮动影响 */
/* clear: both; */
width: 150px;
height: 150px;
background: green;
float: left;
}
10.2浮动继承
/* 子元素浮动让父元素有高度
1.给父元素overflow :hidden
2.给另一个子元素设置 clear:both*/
.parent{
width: 300px;
background: red;
/* overflow: hidden; */
}
.child{
width: 100px;
height: 50px;
background: yellow;
float: left;
}
/* .one{
clear: both;
} */
.parent:after{
content: "";
display: table;
clear: both;
}
11.定位
11.1定位用法
.parent{
/* 相对定位：就是元素在页面上正常的位置 */
width: 200px;
height: 200px;
background: red;
position: relative;
left: 100px;
top: 100px;
}
.child{
/* 绝对定位:移动的位置是相对于最近给了相对定位的父元素的 */
/* 相对定位和绝对定位是成对出现的 父元素给相对定位 子元素给绝对定位 */
width: 100px;
height: 100px;
background: green;
position: absolute;
right: 0;
}
11.2定位实现垂直水平居中
.parent{
width: 300px;
height: 300px;
background: red;
position: relative;
}
.child{
width: 80px;
height: 80px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
11.3盒子手机水平居中
html,body{
width: 100%;
height: 100%;
}
img{
width: 618px;
height: 128px;
position: absolute;
/* left: 50%;
top: 50%;
margin-left: -309px;
margin-top: -64px; */
/* left: 0; */
/* right: 0; */
top: 0;
bottom: 0;
margin: auto;
}
12.搜索框
.search{
position: relative;
width: 250px;
height: 40px;
}
.btn{
position: absolute;
width: 23px;
height: 22px;
background: url("images/icon4.png");
border: none;
top:0;
right: 10px;
bottom: 0;
margin: auto;
}
.search>input{
width: 250px;
height: 40px;
background: #eee;
border:none;
outline: none;
border-radius: 30px;
padding-left: 20px;
box-sizing: border-box;
}
<div class="search">
<input type="text" placeholder="搜索">
<button class="btn"></button>
</div>
13.悬停
.one{
position: fixed;
background:red;
width: 100px;
height: 100px;
right: 0;
bottom: 100px;
}
14.z-index
<!-- z-index
功能:设置元素的堆叠顺序，设置了绝对定位的元素 -->
<div class="parent">
<div class="one">
</div>
<div class="two">
</div>
</div>
