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
