三门峡市住房的城乡建设局网站,建设品牌网站公司,手机软件推荐,榕江网站建设文章目录 rem、em、vh、px各自代表的含义#xff1f;盒模型poison 定位属性flex属性让元素水平垂直居中页面适配的方法有哪些 rem、em、vh、px各自代表的含义#xff1f;
px#xff1a;绝对单位#xff0c;页面按精确像素展示 em#xff1a;相对单位#xff0c;基准点为… 文章目录 rem、em、vh、px各自代表的含义盒模型poison 定位属性flex属性让元素水平垂直居中页面适配的方法有哪些 rem、em、vh、px各自代表的含义
px绝对单位页面按精确像素展示 em相对单位基准点为父节点字体的大小如果自身定义了font-size按自身来计算整个页面内1em不是一个固定的值 rem相对单位可理解为root em, 相对根节点html的字体大小来计算 vh、vw主要用于页面视口大小布局在页面布局上更加方便简单
盒模型
盒模型由内而外分别是widthheight(html元素)padding(内边距);border(边框)margin(外边距)。 盒模型分为 怪异盒模型IE盒模型 使用属性
box-sizing:border-box;//怪异盒模型
//width height html border padding标准盒模型
box-sizing:context-box;//标准盒模型
//width height width height 弹性盒模型flex
display:flex;poison 定位属性
相对定位 (position:relative;) 相较于原来的位置。相对定位会保留原来的位置【不脱离文档流】。
绝对定位 (position:absolute;) 不保留原来的位置【脱离文档流】。绝对定位若父级没有设置相对定位则默认会以浏览器为基准变化若父级设置了相对定位则以父级为基准变化。
固定定位 (position:fixed;) 会一直固定在某个不位置不随滚动条滚动而改变。【脱离文档流】
粘性定位 (position:sticky;) 会随着滚动条滚动【脱离文档流】
flex属性
flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
flex-grow 定义元素的的放大比例
默认为0即使存在剩余空间也不会被放大
所有元素flex-grow都为1等分所有空间自动放大
当某个元素flex-grow为n占的空间是flex-grow为1的n倍我们通常将flex:1用作自适应布局即flex:1 flex-grow:1
flex-shrink 定义元素的缩小比例
默认为1即 如果空间不足该元素将缩小
所有元素的flex-shrink都为1当空间不足时缩小的比例相同
flex-shrink为0空间不足时该元素不会缩小
当某个元素flex-grow为n空间不足时缩小的比例是flex-shrink为1的n倍。flex-basis 定义在分配多余空间之前元素占的主轴空间main size浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值。
默认值为auto即元素原本大小
设置后元素将占据固定空间。如flex-basis:100px;让元素水平垂直居中
1、定位 margin 给父级设置相对定位。给子级设置绝对定位并且给子级的top bottom left right 都设置为0margin设置为auto。
2、定位 margin负值 给父级设置相对定位。给子级设置绝对定位并且给子级的top bottom 设置为50%margin-left设置为子元素width的一半margin-top设置为子元素height的一半。
以上两种方法都需要固定宽高以下是几种不需要固定宽高的方法 3、定位 transform 给父级设置相对定位。给子级设置绝对定位并且给子级的top bottom 设置为50%transform设置为translate(-50%-50%)。
4、table布局 给父级设置display:table-cell;vertical-align:midlle;text-align:center;给子级设置display:inline-block;这样可以使所有为行内块元素的子级都可以水平垂直居中
5、flex布局 给父级设置display:flex;align-items:center;justify-content:center;
6、grid布局 给父级设置display:grid;align-items:center;justify-content:center;
页面适配的方法有哪些
1、根据不同根据不同的分辨率加载不同的CSS样式文件
// 分辨率大于等于1680大部分为1920的范围情况下调用此css
if(window.screen.width 1680){document.write(link relstylesheet hrefcss/index_1920.css);
}2、媒体查询
/* 大屏幕 */
media (min-width:1200px) {.container:{width:1000px;}
}
