HTML/CSS
文章平均质量分 59
啦啦啦小骑士
此人并不懒,但还是什么都没有写,嘿嘿
展开
-
BFC规范及其作用
1. BFC的概念 BFC称作块级格式化上下文,它是页面上的局部稳态容器,内部元素的一切情况都不会影响外部的元素,同理,外部情况也不会影响内部结构。 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。 2. 从一个现象引出BFC 现有一个父元素嵌套两个子元素,如下: <div class="box"> <div class="d1"></div原创 2021-12-18 17:12:51 · 363 阅读 · 0 评论 -
CSS全屏布局的解决方案
全屏布局指所有元素布满整个窗口,当浏览器窗口大小改变时自动进行伸缩,不会产生页面滚动条。 HTML模板如下: <header></header> <div class="content"> <div class="left"></div> <div class="right"></div> </div&...原创 2019-11-17 21:33:29 · 384 阅读 · 0 评论 -
CSS多列布局的解决方案
一、两列布局 HTML模板如下: <div class="left"></div> <div class="right"></div> 1. 单float + margin 组合 .left { width: 300px; height: 300px; float: left; } .right { height: 300px; mar...原创 2019-11-17 16:15:25 · 575 阅读 · 0 评论 -
CSS居中布局的解决方案
一、水平居中布局 1.text-align属性 .parent { text-align: center; } .child { display: inline-block; } text-align仅对文本内容有效,此处因为将div.child设置为了行内块级元素,所以该盒子能够被居中。 优点:IE浏览器兼容较好 缺点:子元素的所有文本都会被居中(解决方法:在子元素中重新定义text-a...原创 2019-11-14 15:22:41 · 221 阅读 · 0 评论