A我今天学了什么
1.css盒子模型
1.1 box-sizing：border-box
当设置box-sizing：border-box；
padding和border宽度不会改变
box-sizing：content-box{默认清晰}
总宽度=width|+padding+border
例：{
padding：“15px”
box-sizing：border-box；
}
2.浮动Float（目的：为了让元素并排显示）
2.1如何清除浮动
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
(3)用伪元素,给a父级内容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
before（在什么之前）
after（在什么之后）
3.定位：position（父相子绝）
1.1Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
1.2absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素
，那么它的位置相对于<html>:都通过left,top,right,bottom移动
1.3
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
例子:搜索框
***当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
4.布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
5.实现元素的垂直水平居中
1.父元素设置parent{position:relative;}
2.子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
B我掌握了什么
1盒子模型
1.1 box-sizing：border-box
当设置box-sizing：border-box；
padding和border宽度不会改变
box-sizing：content-box{默认清晰}
总宽度=width|+padding+border
例：{
padding：“15px”
box-sizing：border-box；
}
2.浮动Float（目的：为了让元素并排显示）
2.1如何清除浮动
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
(3)用伪元素,给a父级内容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
before（在什么之前）
after（在什么之后）
3.定位：position（父相子决）
1.1Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
1.2absolute定位
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素
，那么它的位置相对于<html>:都通过left,top,right,bottom移动
1.3
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
例子:搜索框
***当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
4.布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
5.实现元素的垂直水平居中
1.父元素设置parent{position:relative;}
2.子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}
C我掌握不好的地方
1.全部掌握
网友评论