今天学到了什么?
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;
}
B.跨越行的表格
关键字:rowspan="3";表示跨越3行
C.跨越列的表格
关键字:colspan="3";表示跨越3列
D有间隙的表格
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定位
绝对定位的元素的位置相对于最近的相对定位的父元素,如果没有已定位的父元素,那么它的位置相对于:
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
例子:搜索框
***当子元素没有设置宽度,如果设置了绝对定位,它不会继承父元素的宽度