day04

1.今天学到了

1.css样式的继承

继承:是子元素对父元素的继承

width和height
width
//如果子元素不设置宽度，默认情况下继承父元素的宽度
height
//如果父元素不设置高度，默认情况下父元素继承子元素的高度

2.css可以继承的属性

//文本相关属性:
color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
//字体相关属性:
font-family,font-style,font-size,font-weight,line-height
//列表相关属性:
list-style
//表格相关属性:
border-collapse
//其他属性:
cursor,visibility

3.css盒子模型

//使边框和填充不影响盒子的大小
:box-sizing:border-box

当设置box-sizing:border-box;
//设置padding,和border,它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
//当设置padding和border时宽度会发生改变

总宽度=width+border+padding

3.浮动float
目的:为了让元素并排显示

4.如何清除浮动

1)给下面的兄弟元素给

clear:both;

2）给父级加

overflow:hidden;

3）用伪元素,给父级内容生成

.row:before{
 display:table; 
 content:””     
}
.row:after{
 display:table;
 content:””
 clear:both;
}

5.定位:position

position:absolute | relative

Relative 定位
相对定位元素的定位是相对其正常位置。

postion:relative

Absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于:
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素

6.定位（父相子绝）
父级相对定位
子级绝对定位
7.搜索框

边框圆角：

border-radius

2.我熟悉了

1.css样式的继承

width和height
width
//如果子元素不设置宽度，默认情况下继承父元素的宽度
height
//如果父元素不设置高度，默认情况下父元素继承子元素的高度

2.css可以继承的属性

//字体相关属性:
font-family,font-style,font-size,font-weight,line-height

//表格相关属性:
border-collapse

//列表相关属性:
list-style

css盒子模型

//使边框和填充不影响盒子的大小
:box-sizing:border-box

当设置box-sizing:border-box;
//设置padding,和border,它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
//当设置padding和border时宽度会发生改变

总宽度=width+border+padding

3.浮动float
目的:为了让元素并排显示
4.如何清除浮动
1)给下面的兄弟元素给

clear:both;

2）给父级加

overflow:hidden;

5.定位:position

position:absolute | relative

Relative 定位
相对定位元素的定位是相对其正常位置。

postion:relative

Absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于:
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
6.定位（父相子绝）
父级相对定位
子级绝对定位

3.今天不懂的

2.css可以继承的属性

//文本相关属性:
color,text-align,text-decoration,text-transform,text-indent

4.如何清除浮动
3）用伪元素,给父级内容生成

.row:before{
 display:table; 
 content:””     
}
.row:after{
 display:table;
 content:””
 clear:both;
}

7.搜索框

边框圆角：

border-radius