2020年3月4日

摘要: 全屏布局就是指html页面铺满整个浏览器窗口,并且没有滚动条,而且还可以跟随浏览器的大小变化而变化 <header></header> <div class="content"> <div class="left"></div> <div class="right"></div> </div> <f 阅读全文
posted @ 2020-03-04 23:34 bobo2404 阅读(126) 评论(0) 推荐(0) 编辑
 
摘要: columns属性 columns属性是一个简写属性 column-count属性:定义列的数量 column-width属性:定义列的宽度 column-count属性用于设置列的数量或者允许的最大列数 auto:默认值,用于表示列的数量由其他css属性决定 number:必须是正整数,用于表示定 阅读全文
posted @ 2020-03-04 22:20 bobo2404 阅读(278) 评论(0) 推荐(0) 编辑
 
摘要: 等高布局就是一行被划分成若干列,每一列的高度是相同的值 实现方式 <div class="parent"> <div class="left">left</div> <div class="right">rkerjerje erjerkerjekrjerlf ererejrjerjerje</div 阅读全文
posted @ 2020-03-04 21:48 bobo2404 阅读(116) 评论(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 阅读(131) 评论(0) 推荐(0) 编辑
 
摘要: 三列布局一般情况下是指三列中左边两列是确定的宽度,右边一列是自动填满剩余所有空间的一种布局效果 实现方式:float + margin float + overflow display属性的table相关值使用 下面是其中的一种方法 <div class="left"></div> <div cla 阅读全文
posted @ 2020-03-04 16:25 bobo2404 阅读(380) 评论(0) 推荐(0) 编辑
 
摘要: 两列布局:一般情况下是指定宽与自适应布局,两列中左边是确定的宽度,右列是自动填满剩余所有空间的一种布局效果 <div class="left">左:定宽</div> <div class="right">右:自适应</div> 方案一:float + margin .left,.right{ hei 阅读全文
posted @ 2020-03-04 15:28 bobo2404 阅读(199) 评论(0) 推荐(0) 编辑
 
摘要: 多列布局:就是几个元素呈现水平方式排列的效果 分类: 两列布局 三列布局 圣杯布局和双飞翼布局 等分布局:每行宽度一样 等高布局 css3多列布局 阅读全文
posted @ 2020-03-04 11:08 bobo2404 阅读(251) 评论(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 阅读(132) 评论(0) 推荐(0) 编辑
 
摘要: 垂直居中布局:就是指当前元素在父级元素容器中,垂直方向是居中显示的 <div class="parent"> <div class="child">垂直居中</div> </div> 方案一:table-cell + vertical-align属性配合使用 .parent{ width:200px 阅读全文
posted @ 2020-03-04 10:45 bobo2404 阅读(129) 评论(0) 推荐(0) 编辑
 
摘要: 什么是布局 html页面的整体结构或骨架,类似于传统的报纸或杂志中的排版 布局不是某个技术内容,而是一种设计思想 居中布局的分类: 水平居中布局,垂直居中布局,居中布局(水平 + 垂直) 什么是水平居中布局 指当前元素在父级元素容器中,水平方向是居中显示的 解决方案 <div class="pare 阅读全文
posted @ 2020-03-04 10:21 bobo2404 阅读(132) 评论(0) 推荐(0) 编辑