分类: CSS
CSS盒模型
1. 盒模型定义及分类
当你对一个文档进行布局(laying out)时候, 浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子, CSS会决定这些盒子的大小, 位置, ……
圣杯与双飞翼布局
圣杯布局
<div class="container">
<div class="middle">中间内容</div>
<div class="left">左侧区域</div>
<div class="right">右侧区……
CSS选择器及权重
1. 选择器有哪些
选择器示例说明通配选择器* {}与任何元素都匹配标签选择器h1 {}选择<h1>标签ID选择器#idName {}选择id为idName的元素类选择器.clas……
CSS水平垂直居中布局
1.position设为absolute+margin
position取值脱离标准流定位元素绝对定位元素定位参照对象static否否否没有relative否是否元素自己原来的位置absolute是是……
flex布局
1.基础概念:
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"……
BFC的含义及作用
1.BFC是什么
BFC 的全程为块格式化上下文(Block Formatting Context),在 MDN 定义如下:
块格式化上下文(Block Formatting Context,BFC) 是……
两栏布局与圣杯布局
float+margin-left方案
.wrapper-float {
overflow: hidden; // 清除浮动
}
.wrapper-float .left {
float: left;
}
.wrapper-float .right {
……