-
align-items:设置每个flex在交叉轴上的默认对齐方式
align-content
查看全部 -
justify-content:center;
查看全部 -
子元素在父元素盒子中的排列方式
display:felx;
flex-direction:column;
flex-wrap:子元素在父元素盒子中是否换行wrap
flex-flow:row wrap;
在父元素中设置,子元素受之影响
是否换行 排列方向 简写
查看全部 -
内部样式表
外部样式表
在不同的情况下引入不同的css文件 miedia=""
查看全部 -
媒体查询其他引入方式
style 标签里面 @media
style标签上面 media=“ ”
查看全部 -
移动端device-width
web端width
div:nth-child(0)
查看全部 -
媒体查询:为不同尺寸的屏幕设置不同的css样式
@media screen and(min-device-width:200px)and(max-device-width:300px){
//css样式
}
查看全部 -
flex-basis
弹性盒伸缩基准值
子元素相对于父元素的基准值
设置此属性后 width失效
查看全部 -
align-items和align-content都是规定子元素在交叉轴上的默认对其方式
区别是align-items把多行的每一行当做一个整体去处理
align-content则是把多行统一当做一个整体去处理
查看全部 -
justify-content
作用:存在剩余空间时,设置为间距的方式
flex-start :默认值 从左到右 挨着行开头
flex-end:从右到左 挨着行的结尾
center:居中显示
space-between:平均分布在行上 两边不留间隔空间
space-round:平均分布在行上 两边各留一半的间隔空间
查看全部 -
媒体查询
写法:
@media screen and (mindw:) and (maxdw){ }
为不同尺寸的屏幕设定不同的css样式
查看全部 -
flex-flow
作用:flex-direction和flex-wrap属性的简写形式
语法:flex-row:<flex-direction> || <flex-wrap>
查看全部 -
flex-wrap
作用:子元素在父元素盒子中的是否换行(列)
查看全部 -
rem 弹性布局:一套方案,使不同尺寸、分辨率的视口,都能呈现出较好的效果!
查看全部 -
响应式布局
布局特点:确保一个页面在所有终端上,都能显示出令人满意的效果。
一套方案,处处运行
设计思路:使用%或rem作为单位,此处采用%为单位
查看全部
举报