发表于: 2018-07-28 21:25:02
1 585
今天完成的事情:任务八第二个页面完成,关于z-index和叠加上下文的理解。
明天计划的事情:完成任务八
遇到的问题:布局不合理,浪费了很长时间。
收获:
层叠上下文是基于Z轴的一个环境,他有一个默认的层叠顺序:
同级元素中,后面的元素覆盖前面的元素,
父子元素中,子元素覆盖父元素。
在css上增加两个东西 position 增加一个css属性,但是这个定位不能是static ;z-index 增加一个z-index的属性,这个属性控制元素在Z轴上面的位置
一个元素想控制自身的z轴层叠顺序,这个元素不能含有子元素,且这个子元素的第一个父元素不能控制自身的z轴层叠顺序,即不能含有定位和z-index这两个css属性。
CSS * 选择器:
选择所有元素,并设置它们的背景色:
*
{
background-color:yellow;
}
选取 <div> 元素内部的所有元素:
div *
{
background-color:yellow;
}
媒体查询:
就是“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性),
比较常见的就是@media(min-width:768px)或者@media(max-width:1086px),对应的就是最小显示屏宽度是768px的设备,后面的就是最大宽度是1086px的设备。
当然这两个也可以一起用 添加一个and。变成@media(min-width:768px)and(max-width1086px)。对应就是屏幕尺寸在768px和1086px之间的设备当然也包裹768px和1086px
了解熟练运用了 bootstarp的栅格布局。
了解到col-xm-x,col-sm-x,col-ml-x,col-lg-x的作用
他们对应的是bootstarp自带的媒体查询断点。
超小屏幕手机 (<768px) 小屏幕(xm)
平板 (≥768px) 中等屏幕(sm)
桌面 (≥992px) 大屏幕(ml)
桌面 (≥1200px)(lg)中平分一行row的对应宽度。
评论