day04
2017-07-16 本文已影响0人
613桑
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定位
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>:
都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
6.定位（父相子绝）
父级相对定位
子级绝对定位
7.搜索框
<input type="text" placeholder="搜索">
边框圆角：
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定位
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>:
都通过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.搜索框
<input type="text" placeholder="搜索">
边框圆角：
border-radius
