yfcms企业网站建设,网站服务器崩溃影响,广东省建设信息网三类人员,网页制作网站建设实战大全px 像素 pixel 的缩写#xff0c;即电子屏幕上的1个点#xff0c;以分辨率为 1024 * 768 的屏幕为例#xff0c;即水平方向上有 1024 个点#xff0c;垂直方向上有 768 个点#xff0c;则 width:1024px 即表示元素的宽度撑满整个屏幕。
随屏幕分辨率不同#xff0c;1px … px 像素 pixel 的缩写即电子屏幕上的1个点以分辨率为 1024 * 768 的屏幕为例即水平方向上有 1024 个点垂直方向上有 768 个点则 width:1024px 即表示元素的宽度撑满整个屏幕。
随屏幕分辨率不同1px 的大小也不同所以严格来说px 也是相对单位但不考虑屏幕分辨率时也可以把 px 当作绝对单位来看待。 % 百分比 通常百分比都是相对于父元素的 content box 计算所以父元素必须有显式的值若父元素 height 为 auto 则百分比值将完全失效
以下样式的百分比计算规则比较特殊需特别留意 width、height、font-size 的百分比相对于父元素“相同属性”的值计算 line-height 的百分比相对于父元素的 font-size 计算 vertical-align 的百分比相对当前元素的 line-height 计算 position:absolute 绝对定位元素相对于第一个position不为 static 的祖先元素的 padding box 计算 position:fixed 悬浮定位元素的宽度相对于 html 计算尺寸等同于浏览器可视窗口的大小
【实战】撑满整个屏幕
div classfullScreen stylebackground-color: greenyellow/divhtml,
body {height: 100%;/* 清除浏览器的默认样式 */margin: 0px;padding: 0px;
}
.fullScreen {height: 100%;
}解析
范例中 div 的高度 100% 会相对于父元素body的高度进行计算所以 body 必须设置 height: 100% 而 body 的父元素是 html 标签所以 html 也必须设置 height: 100%宽度无需设置因为 html , body , div 的都是 display:block 块级元素宽度都是自动撑满整个屏幕。浏览器默认会给 html , body 添加 margin 和 padding 不同浏览器的默认样式不一样此处需手动进行清除。
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056 em 相对于“当前元素”的字体大小来计算最终长度以“当前元素” 的字体大小为 16px 为例1em 16px2em 即 2*16 32px
最佳实践用于维护某模块内元素间固定的比例关系详见 https://blog.csdn.net/weixin_41192489/article/details/126118830
【实战】首行缩进两空格
templatediv stylebackground-color: greenyellowp很久很久以前/p/div
/templatestyle langscss scoped
p {text-indent: 2em;
}
/style【实战】限定中文内容宽度
article {max-width: 42em;
}rem 相对于根元素的字体大小计算长度以根元素 html 标签的 font-size 为 16px 为例2rem 即 2*16 32px。
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056 vw 相对于视口浏览器的可视区域宽度计算长度1vw 视口宽度的1%
100 vw 即水平方向撑满屏幕
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056 vh 相对于视口浏览器的可视区域高度计算长度1vh 视口高度的1%
100 vh 即垂直方向撑满屏幕
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056 vmin 相对于 vw 和 vh 中较小的计算长度如手机竖屏时1vmin 1vw ; 手机横屏时1vmin 1vh ; vmax 相对于 vw 和 vh 中较大的计算长度如手机竖屏时1vmax 1vh ; 手机横屏时1vmax 1vw ; ex 相对于字符 x 的高度计算长度
【实战】文字和图标垂直居中对齐
https://blog.csdn.net/weixin_41192489/article/details/115218875 ch 相对于字符 0 的宽度计算长度
【实战】手机号的输入框
将手机号输入框的宽度设为11ch同时让字体等宽一眼就能看出是否输入了11位的手机号码。
templatelabel forphone手机号/labelinput idphone classphone_input typetext /
/templatestyle langscss scoped
.phone_input {width: 11ch;/*等宽字体*/font-family: Courier New, Courier, monospace;
}
/style【实战】限定英文内容宽度
需配合等宽字体才精准。
article {max-width: 68ch;
}
/* 等宽字体 */
.font-mono {font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}
