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

你可能感兴趣的:(day03)