day03
2018-06-23 本文已影响0人
克马
今天学到什么
1.文本修饰
text-align:left|center|right `文本对齐的方向`
text-transform: lowercase(小写); uppercase大写 capitalize 首字母大写 `文本转换`
(下划线 中间穿 上划线 默认无)
text-decoration:underline|line-through|overline|none `文本修饰`
font-size： 14px; `字体大小`
font-style ：normal|italic (默认|斜体) `字体样式`
font-weight ：bold|lighter （加粗|默认） (100-900 依次加深)`字体权重`
2.链接
a:link{
color: #eee;
}
已访问
a:visited{
color:red;
}
移动到
a:hover{
color:palegreen;
}
点击时
a:active{
color: blue;
}
3.列表样式
list-style:none `去掉列表样式`
小圆点 正方形 空心圆
list-style-type:disc|square|circle `列表样式`
list-style-image:url() `列表样式图片`
4.边框样式
简写：
border:width(宽度) style(solid) color(颜色)
eg:border:1px solid red;
border-top:1px solid blue;(只显示顶部边框) 同理、、、
5.表格
`边框折叠`：
border-collapse:collapse (重点)
`跨行`
rowspan="?" 跨几行
`跨列`
colsapn="?" 跨几列
`有间隔的表格`
.gap{
height:20px;
}
<tr class="gap"></tr>
`行与行之间 设置个高度`
6.轮廓
input{
outline: none;
}
<input type="text">
`设置轮廓 none 点击输入框不会突出显示`
7.透明度
.child{
width:100px;
height: 100px;
background: red;
opacity: 0.2`; 0-1 (1不透)
}
.parent{
width:200px;
height: 200px;
background:yellowgreen;
}
<div class="parent">
<div class="child"></div>
</div>
8.样式继承
发生在块元素之间
``` width :子元素不设置width 它会继承父元素的width
height:如果父元素没有设置height 它会得到子元素的高度
9.css盒子模型
box-sizing:content-box(默认)| border-box
盒子模型
box-sizing:border-box
设置border边框 padding填充 它的width height不会发生改变
10.浮动 float
-
10.1浮动
为了让元素并排显示
子元素float 父元素没有了高度（前提未设置父元素高度）
-
10.2 清除浮动
(1):
给父级加overflow:hidden;
(2):
给下面的兄弟元素给clear:both;
(3):
用伪元素,给父级内容生成
.row:before{
display:table;
content:“”
}
.row:after{
display:table;
content:””
clear:both;
}
11.导航
*{margin: 0;padding: 0;}
ul{
list-style: none;
}
.nav{
overflow: hidden;
line-height: 60px;
background-color: pink;
}
li{
float: left;width: 100px;text-align: center;
}
a{
text-decoration: none;color: #eee;display: block;
}
a:hover{
background-color: yellowgreen;
}
<div class="nav">
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">电脑</a></li>
</ul>
</div>
12.定位 position
```position:absolute | relative
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
Absolute定位
绝对定位的元素的位置相对于最近的相对定位的父元素，
如果没有已定位的父元素，那么它的位置相对于<html>:
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
13.实现元素的垂直水平居中
父元素设置parent{position:relative;}
子元素设置
child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
14.定位
position: fixed; （固定）
15.z-index
```功能：设置元素的堆叠顺序 设置了相对定位的元素的堆叠
z-index:? ?数值越大就显示在最上方
