CSS学习笔记——关于布局

1、居中:
1)div在div中垂直居中:
eg1:设置父div:
display: inline-flex;//或者flex
align-items: center; //垂直居中 

2)div在div中垂直水平居中:
eg1:设置父div:
display: inline-flex;//或者flex
align-items: center; //垂直居中
justify-content: center;//水平 

eg2:
A、设置父div:
display: inline-flex;//或者flex
align-items: center; //垂直居中
B、设置子div:
margin:0 auto;//上下为0  左右自动

3) 在无法更改父div元素的情况下,在父元素中新建div为新的父元素
A、新的父元素:
width:100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;  

2、position
默认是static(元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明))。
当设置子div的position为absolute时,注意是否要相对于父元素,是否要设置父元素的position为relative。
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

3、盒模型
只要在文档首部加了doctype申明,即使用了标准盒模型,而不加,则会由浏览器自己决定,比如,ie 浏览器中显示“ie盒子模型”,在 ff 浏览器中显示“标准 w3c 盒子模型”
box-sizing:content-box;//标准盒模型
box-sizing:border-box;//怪异盒模型 将border和padding划归到width范围内,可以理解为是IE的怪异盒模型。
//border-box 是css3属性,ie8以下不兼容弄,需要在使用属性时添加前缀

在布局计算百分比时,增加border、padding会麻烦,
而且设置width为100%后,再设置border、padding会出现滚动条,
因为超出了范围。所以有时使用怪异盒模型更加方便好用:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

4、弹性 
lex: 1; === flex: 1 1 0; 
flex: 1; !== flex: 1 1 auto;
1)flex-grow 定义项目的放大比例,默认为0(如果存在剩余空间,也不放大)
2)flex-shrink 定义了项目的缩小比例,默认为1(如果空间不足,将该项目缩小)
3)flex-basis 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小

flex:1;
A、项目自动充满剩余空间(均匀放大)。如果一行有剩余的情况下,希望项目能够均匀放大,撑满水平方向,我们应该给所有项目设置flex:1,注意这是是给所有项目都设置。
B、指定项目放大。如果一行有剩余的情况下,我们可以任意指定某个项目放大撑满剩余空间,只要给指定项目设置 flex: 1 即可。

flex-direction:row;//默认,成行 反转:row-reverse
flex-direction:column;//成列 反转:column-reverse

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值