day03

今天学到了什么？

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绝对定位的元素
例子:搜索框
***当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度