bjt_yy的博客

媒体查询语法：@media mediatype and|only|not (media feature){...}

让一个有宽高的盒子垂直居中

移动开发之rem适配通过使用媒体查询+rem实现不同尺寸屏幕的适配1.remrem是一个单位，参照于HTML根元素的字体大小，和em有点相似。<style> html{ /* 通过改变这个整体的值从而实现适应不同设备 使用媒体查询 */ font-size: 12px; } /* div基于html字体大小变化尺寸 */ div{ width: 20rem; height: 15rem; background-color: antiquewhite; }

flex布局1.flex布局写法通过学习，我理解到的flex布局就是一个弹性盒子，它只作用于flex容器的直接子项目（元素）。在需要使用弹性盒子布局几个元素的父容器设置display:flex;在给父容器设置display之后子元素会变成行内块元素，可以直接设置高度宽度。在移动端相关的项目上使用弹性盒子可以更好的自适应屏幕宽度。2.flex相关的一些属性对父容器/* flex-direction 设置弹性布局主轴的方向 包括：row(横向，默认值)，column(纵向) row

一些属性值的顺序1.元素边框border:1px solid red;border:粗细尺寸 线的样式 颜色；2.元素背景background:#f00 url(background.gif) 0 0 no-repeat fixed top;background:颜色 图片 位置 是否重复 是否固定 背景图片位置；3.font属性值4.list-style属性值5.元素外边距margin：1px 2px 3px 4px;margin:上 右 下 左；...

overflow和text-overflow的用法1.overflow规定了内容超出元素框时发生的事情。有五种属性值是：visible:默认值，内容不会被修剪，会超出元素框显示。hidden:内容会被修剪，超出元素框的部分会被隐藏。scroll:内容会被修剪，但浏览器会显示滚动条以查看其余内容。auto:如果内容被修剪，浏览器就会显示滚动条以查看其余内容。inherit:从父元素继承overflow的值。举例：1.overflow:hidden用在隐藏超出当前元素框的内容，例如<