HTML常用元素样式、定位学习与应用
程序员文章站
2022-03-13 12:51:54
...
1.常用样式
/*列表样式*/list-style-type: disc;/*小黑点样式*/list-style-position: inside;/*控制小黑点位置*/list-style-image: url();/*把小黑点替换成图片样式*/list-style: none;/*去掉小黑点*//*表格样式、字体样式*/border-collapse: collapse;/*折叠表格边框线*/text-align: center;/*文本放心水平居中*/font-weight: 600;/*加粗字体*/z-index: 999;/*层级控制样式*/
/*flex弹性盒子布局样式*/display: flex;/*将元素转为弹性盒子*/flex-direction: row;/*水平分布*/flex-direction: column;/*垂直分布*/flex-wrap: nowrap;/*不允许项目换行*/flex-wrap: wrap;/*允许项目换行*/flex-flow: row nowrap;/*简写：水平/垂直 是否允许换行*/place-content: start;/*靠起始边对齐（左边）*/place-content: end;/*靠终止边对齐（右边）*/place-content: center;/*居中对齐*//*水平方向，有剩余空间*/place-content: space-between;/*两端对齐*/place-content: space-around;/*分散对齐*/place-content: space-evenly;/*平均对齐*//*垂直方向*/place-items: start;/*靠着起始边对齐*/place-items: end;/*靠着终止边对齐*/place-items: center;/*居中对齐*//*项目属性*/flex-grow: 0;/*0为禁止放大，1为允许放大 */flex-shrink: 0;/*0为禁止缩小，1为允许缩小 */flex-basis: auto;/*项目宽度*/flex: 0 1 auto;/*是否允许放大 是否允许缩小 宽度*/flex: inherit;/*默认值*/flex: auto;/*响应式缩放*/flex: none;/*禁止放大缩小*/order: 3;/*控制项目的排列顺序，默认为0*/
/*grid布局样式*/display: grid;/*转为grid容器*/grid-template-columns: 10em 10em 10em;/*控制项目列宽，分别为几（3）列多（10em）宽*/grid-template-columns: repeat(3,10em);/*控制项目列宽，分别为几（3）列多（10em）宽*/grid-template-rows:10em 10em;/*控制项目行高，分别为几（3）行多（10em）高*/grid-template-rows: repeat(2,10em);/*控制项目行高，分别为几（3）行多（10em）高*//*fr计量单位，按比例划分，跟百分百类似*//*隐式单元格既未被分配的那部分单元格*/grid-auto-flow: row;/*隐式单元格中的排列方式，row水平，column列排列*/grid-auto-rows: 1fr;/*隐式单元格行高*//*控制项目空间的对齐方式*/place-items: start start;/*对齐样式：垂直方向 水平方向*//*start:靠上 靠左 ； end:靠下 靠右 ；center:居中*//*控制剩余空间的对齐方式*/place-content:start start;/*对齐样式：垂直方向 水平方向*//*start:靠上 靠左 ； end:靠下 靠右 ；center:居中*/place-content: space-between;/*两端对齐*/place-content: space-around;/*分散对齐*/place-content: space-evenly;/*平均对齐*//*控制项目的排列顺序*/grid-column-start: span 3;/*span 跨越几行几列*/grid-column-start: 1/3;/*起始1/结束4*/grid-column-start: 1/span 3;/*起始1/跨域3*/grid-column-start: 3;/*起始列*/grid-column-end: 3;/*结束列*/grid-row-start: 3;/*起始行*/grid-row-end: 3;/*结束行*//*grid-area: 行开始/列开始/行介绍/列结束;*/grid-area: 1/4/1/2;
表格样式应用实例
/*css*/<style>table{border-collapse: collapse;}table thead{background: rgb(204, 203, 203);}table caption{font-weight: 700;margin-bottom: 10px;}td,th{border: 1px solid #777;width: 5rem;text-align: center;}</style>/*html*/<table class="student"><caption>这是一个学生信息管理表</caption><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>出生年月</th><th>家庭住址</th><th>专业</th><th>班级</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td>男</td><td>2002/2/4</td><td>广州</td><td>商务英语</td><td>1021</td></tr><tr><td>2</td><td>张三</td><td>男</td><td>2002/2/4</td><td>广州</td><td>商务英语</td><td>1021</td></tr><tr><td>3</td><td>张三</td><td>男</td><td>2002/2/4</td><td>广州</td><td>商务英语</td><td>1021</td></tr><tr><td>4</td><td>张三</td><td>男</td><td>2002/2/4</td><td>广州</td><td>商务英语</td><td>1021</td></tr></tbody><tfoot><tr><td colspan="7">这是一个表尾</td></tr></tfoot></table>
2.元素定位
1.静态定位
—分为相对定位、绝对定位
—根据HTML文档书写顺序，由浏览器控制。
—当一个元素使用非static的定位属性，则这个元素转换为“定位元素”，受用户的控制，而非浏览器控制。
position: static;/*默认静态定位*/position: relative;/*相对定位，相对于元素的原始位置进行偏移*/position: absolute;/*决定定位，相对于离它最近的定位元素进行定位*/position: sticky;/*粘性定位*/position: fixed;/*固定定位*/
粘性定位与绝对定位应用：
<style>.new{height: 300px;overflow: scroll;border: 1px solid #777;}.Rednews{background: rgb(163, 6, 6);color: rgb(255, 255, 255);position: sticky;top: 0;}.homenews{background: rgb(170, 170, 170);color: rgb(19, 46, 167);position: sticky;top: 0;}.new a img{width: 5em;border-radius: 50%;position: fixed;right: 2em;top: 10em;z-index: 999;}</style><div class="new"><a href=""><img src="../03.jpg" alt=""></a><h3 class="Rednews">推荐新闻</h3><ul><li><a href="">*：加快建设世界重要人才中心和创新高地</a></li><li><a href="">向人民英雄敬献花篮仪式9月30日上午举行 *将出席</a></li><li><a href="">全面小康是全体人民的小康 | 全面小康是全面发展的小康</a></li><li><a href="">续写奥运精彩 全运会完美收官</a></li><li><a href="">弘扬伟大抗洪精神 凝聚中国力量</a></li><li><a href="">大湾区之声热评：祖国的坚强后盾是香港经济发展的最大底气</a></li><li><a href="">孟晚舟事件解决背后 外交部透露更多细节</a></li><li><a href="">外媒：美军驻伊拉克基地疑似起火 现场黑烟冲天</a></li><li><a href="">大湾区之声热评：祖国的坚强后盾是香港经济发展的最大底气</a></li><li><a href="">孟晚舟事件解决背后 外交部透露更多细节</a></li><li><a href="">外媒：美军驻伊拉克基地疑似起火 现场黑烟冲天</a></li></ul><h3 class="homenews">国内新闻</h3><ul><li><a href="">戏剧性一幕 波兰球员被铲倒后翻身掏出补给品吃</a></li><li><a href="">公司管理人员嘲笑中国口音 普华永道CEO道歉</a></li><li><a href="">河南醉汉闯进小学打校长反被打掉3颗牙 双双被刑拘</a></li><li><a href="">男子冒充民警到宾馆“检查” 把服务员带走后强奸</a></li><li><a href="">黑龙江一建设局出纳挪用贷款藏身寺庙16年 种菜打杂为生</a></li><li><a href="">“佛媛”之后再现“病媛”：精致的住院照 生病不忘化妆？</a></li><li><a href="">教授谈捐1亿奖励：我和家人花是浪费 和夫人商量做出决定</a></li><li><a href="">清华大学AI虚拟学生“华智冰”首次出镜 入学计算机系</a></li><li><a href="">大湾区之声热评：祖国的坚强后盾是香港经济发展的最大底气</a></li><li><a href="">孟晚舟事件解决背后 外交部透露更多细节</a></li><li><a href="">外媒：美军驻伊拉克基地疑似起火 现场黑烟冲天</a></li></ul></div>
粘性定位应用：
—实现标题随着滚动条移动，始终黏在顶部
绝对定位应用：
—实现右侧图片随着滚动条移动，始终固定在一个位置
登录案例：
—效果：点击登录按钮弹出登录输入框及遮罩，点击页面隐藏登录框，并且登录框固定在浏览器中间
—思路：
1.先写好登录基本样式、布局
2.使用position: relative;将模态框（包裹登录及遮罩的div）转为定位元素
3.使用position: fixed;元素将登录表单固定在浏览器中间，距离使用left、right、top进行控制
4.使用position: fixed;元素遮罩覆盖浏览器可视区域，距离使用left、right、top、bottom进行控制
5.使用display: none;隐藏模态框
6.使用js点击事件控制模态框的显隐
控制模态框显示：onclick=”document.querySelector(‘.biankuang’).style.display=’block’”
控制模态框隐藏：onclick=”document.querySelector(‘.biankuang’).style.display=’none’”
/*css*/<style>.mode{margin: 0;padding: 0;}.mode-top{background: silver;padding: 0.5em 0.5em;display: flex;}.mode-top button{margin-left:auto ;width: 4em;}.biankuang{position: relative;display: none;}.biankuang-biaodan{position: fixed;border: 1px solid rgb(250, 250, 250);display:grid;gap:1em;left: 20em;right: 20em;top: 10em;bottom: 20em;background: rgb(255, 255, 255);}.biankuang-zhezhao{background: rgba(119, 119, 119, 0.534);position: fixed;top: 0;left: 0;right: 0;bottom: 0;}</style>/*html*/<div class="mode"><div class="mode-top"><h3>登录</h3><button onclick="document.querySelector('.biankuang').style.display='block'">登录</button></div><div class="biankuang" onclick="document.querySelector('.biankuang').style.display='none'"><div class="biankuang-zhezhao"></div><div class="biankuang-biaodan"><form action="" ><input type="text" placeholder="请输入账号"><input type="text" placeholder="请输入密码"><button>登录</button></form></div></div></div>
grid圣杯布局及导航栏应用
/*css*/<style>body *{background: #777;}body{display: grid;gap: 0.5em;grid-template-columns: 10em 30em 10em;grid-template-rows: 3em minmax(600px,auto) 3em;place-content: center;}footer{grid-column-end: span 3;}header{grid-column-start: span 3;}.daohang{display: grid;grid-template-rows: repeat(1,2em);grid-template-columns: repeat(5,5em);place-content:center ;list-style: none;text-align: center;background: chartreuse;margin: 0;}.daohang,.daohang > li,.daohang > li a {background: black;color: #ffffff;place-items: center;}</style>/*html*/<header>页眉<ul class="daohang"><li><a href="">首页</a></li><li><a href="">关于我们</a></li><li><a href="">产品中心</a></li><li><a href="">在线留言</a></li><li><a href="">联系我们</a></li></ul></header><aside>左侧</aside><main>内容区</main><aside>右侧</aside><footer>页脚</footer>