day04

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.全部掌握

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,681评论 1 92
  • A今天学了什么 1.盒子模型 1.box-sizing:border-box 2.总宽度 3.居中 2.浮动(fl...
    相信自己_胡阅读 1,755评论 1 1
  • 1、css盒子模型 1.1:box-sizing:border-box 1.2实现元素居中 2、浮动float 3...
    陈梦晴阅读 2,144评论 0 0
  • 因缘而来 颜深颜浅 浓妆淡抹总相宜 欲言又止 犹抱琵琶半遮面 伫溪而立 相看两不烦 斗艳 绝代双娇 一见倾芯...
    乐膳好诗阅读 1,755评论 4 10
  • 读《参与感》的一些想法。书的作者:小米联合创始人黎万强。 先从书的封面说起。 亮眼的橙色,小米主打色,突出小米辨识...
    牧无文阅读 5,476评论 0 5