今天学到了什么？
1.有关文本的设置
A.设置文本对齐的方向
分别是：向左，居中，向右对齐；
text-align:left|center|right
B.文本修饰
分别是：向下，穿越文字，向上，去掉下划线；
text-decoration:underline|line-through|overline|none
C.文本转换
分别是：:lowercase文本所有单词每个字母小写；
:uppercase文本所有单词每个字母大写；
:capitalize文本所有单词每个字母第一个大写；
text-transform:lowercase|uppercase|capitalize
D.文本缩进和快捷生成一段话
text-indent: 50px;每段文本开头缩进50；
快捷键： Lorem+Tab
2.有关字体的设置
A 字体样式
font-style:normal|italic */
font-family:
font-size:
B 设置字体的权重
font-weight,取数值100~900 或bold|lighter;
font-weight:bold|lighter;
3.链接框中设置光标的效果
a:link{
color:#333;
}
a:visited{
color:yellow;
}
a:hover{
color:blue;
}
a:active{
color:red;
}
4.列表样式的设置
A去掉列表样式
list-style:none
B 列表样式
list-style-type:disc|square|circle
disc:为默认的实现圆；
square：为实体的正方形；
circle：为空心圆；
C列表样式图片
list-style-image:url(xxxx)
列表样式为图片url
5.设置边框
边框的简写 /* border:width style color */
只显示上或左，右边的边框 border-top|left|right|:1px solid #333;
6.表格
A设置表格
边框折叠:border-collapse:collapse
table{
width:500px;
text-align: center;
line-height: 50px;
border-collapse: collapse;
}
table,th,td{
border:1px solid #333;
}
<body>
<table>
<thead>
<tr>
<th>手机</th><th>商城</th>
</tr>
</thead>
<tbody>
<tr><td>苹果</td><td>京东</td></tr>
<tr><td>小米</td><td>天猫</td></tr>
<tr><td>华为</td><td>苏宁</td></tr>
</tbody>
</table>
</body>
B.跨越行的表格
关键字：rowspan="3";表示跨越3行
<style>
table{
border-collapse: collapse;
width:800px;
line-height: 50px;
text-align: center;
}
table,th,td{
border:1px solid #333;
}
</style>
<table>
<tbody>
<tr><th rowspan="3">商城</th> <td>手机</td> <td>电池</td></tr>
<tr><td>衣服</td><td>鞋子</td></tr>
<tr><td>电风扇</td><td>话筒</td></tr>
</tbody>
</table>
C.跨越列的表格
关键字：colspan="3"；表示跨越3列
<style>
table,th,td{
border:1px solid #333;
width:500px;
line-height: 60px;
}
table{
border-collapse: collapse;
}
</style>
<table>
<tr><th colspan="3">商城</th></tr>
<tr><td>手机</td><td>电脑</td><td>相机</td></tr>
<tr><td>服装</td><td>电风扇</td><td>杯子</td></tr>
</table>
D有间隙的表格
<style>
table,th,td{
border:1px solid #333;
width:500px;
line-height: 60px;
}
table{
border-collapse: collapse;
}
.gap{
height:20px;
}
</style>
<table>
<tr><th colspan="3">商城</th></tr>
<tr class="gap"></tr>
<tr><td>手机</td><td>电脑</td><td>相机</td></tr>
<tr class="gap"></tr>
<tr><td>服装</td><td>电风扇</td><td>杯子</td></tr>
</table>
7.轮廓
给元素加上一个轮廓，元素本身大小没发生变化
关键字:outline
1.outline:10px solid red;
2.outline: none;
8.透明度和样式的继承
1.关键字：opacity
2.如果父元素没有height，子元素有，则父元素会默认添加子元素的的height
9.css盒子模型
1.当盒子模型设置为：box-sizing:border-box
设置border,padding它的width,height不会发生改变
2.box-sizing:content-box;(默认设置)
设置border,padding它的width,height会发生改变
10.浮动
关键字：flot
flot:left
flot:right
11.清除浮动
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
(3)用伪元素,给父级内容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
12.定位
position:absolute | relative
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
Absolute定位
绝对定位的元素的位置相对于最近的相对定位的父元素，如果没有已定位的父元素，那么它的位置相对于<html>:
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
例子:搜索框
***当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
网友评论