2020 年 3月 4 日随笔档案 - bobo2404

全屏布局

摘要：全屏布局就是指html页面铺满整个浏览器窗口，并且没有滚动条，而且还可以跟随浏览器的大小变化而变化 <header></header> <div class="content"> <div class="left"></div> <div class="right"></div> </div> <f 阅读全文

posted @ 2020-03-04 23:34 bobo2404 阅读(138) 评论(0) 推荐(0)

css3的多列布局

摘要： columns属性 columns属性是一个简写属性 column-count属性:定义列的数量 column-width属性:定义列的宽度 column-count属性用于设置列的数量或者允许的最大列数 auto:默认值，用于表示列的数量由其他css属性决定 number:必须是正整数，用于表示定阅读全文

posted @ 2020-03-04 22:20 bobo2404 阅读(311) 评论(0) 推荐(0)

等高布局

摘要：等高布局就是一行被划分成若干列，每一列的高度是相同的值实现方式 <div class="parent"> <div class="left">left</div> <div class="right">rkerjerje erjerkerjekrjerlf ererejrjerjerje</div 阅读全文

posted @ 2020-03-04 21:48 bobo2404 阅读(126) 评论(0) 推荐(0)

等分布局

摘要：等分布局就是指一行被分为若干列，每一列的宽度是相同的值实现方式一： float属性实现等分布局 <div class="parent"> <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div 阅读全文

posted @ 2020-03-04 18:08 bobo2404 阅读(137) 评论(0) 推荐(0)

三列布局

摘要：三列布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果实现方式：float + margin float + overflow display属性的table相关值使用下面是其中的一种方法 <div class="left"></div> <div cla 阅读全文

posted @ 2020-03-04 16:25 bobo2404 阅读(417) 评论(0) 推荐(0)

两列布局

摘要：两列布局：一般情况下是指定宽与自适应布局，两列中左边是确定的宽度，右列是自动填满剩余所有空间的一种布局效果 <div class="left">左：定宽</div> <div class="right">右：自适应</div> 方案一：float + margin .left,.right{ hei 阅读全文

posted @ 2020-03-04 15:28 bobo2404 阅读(233) 评论(0) 推荐(0)

多列布局概述

摘要：多列布局：就是几个元素呈现水平方式排列的效果分类：两列布局三列布局圣杯布局和双飞翼布局等分布局：每行宽度一样等高布局 css3多列布局阅读全文

posted @ 2020-03-04 11:08 bobo2404 阅读(271) 评论(0) 推荐(0)

居中布局（水平+垂直）

摘要： <div class="parent"> <div class="child"></div> </div> 方案一：table + margin实现水平居中，table-cell + vertical-align实现垂直居中 .parent{ width:1000px; height:500px; 阅读全文

posted @ 2020-03-04 11:01 bobo2404 阅读(143) 评论(0) 推荐(0)

垂直居中布局

摘要：垂直居中布局：就是指当前元素在父级元素容器中，垂直方向是居中显示的 <div class="parent"> <div class="child">垂直居中</div> </div> 方案一：table-cell + vertical-align属性配合使用 .parent{ width:200px 阅读全文

posted @ 2020-03-04 10:45 bobo2404 阅读(155) 评论(0) 推荐(0)

水平居中布局

摘要：什么是布局 html页面的整体结构或骨架，类似于传统的报纸或杂志中的排版布局不是某个技术内容，而是一种设计思想居中布局的分类：水平居中布局，垂直居中布局，居中布局（水平 + 垂直）什么是水平居中布局指当前元素在父级元素容器中，水平方向是居中显示的解决方案 <div class="pare 阅读全文

posted @ 2020-03-04 10:21 bobo2404 阅读(152) 评论(0) 推荐(0)

导航

2020年3月4日