定位和布局
定位和布局
定位和布局:
※视觉格式化模型
1.视觉格式化模型(visual formatting model):CSS的一种机制,它规定了页面中的多个盒子如何布局。
2.视觉格式化模型是一套非常复杂的机制,包含错综复杂的CSS规范。
※视口
1.视口( viewport ):可视窗口,通常指浏览器的可视区域
2.视口的尺寸仅受到浏览器可视窗口大小的影响,和内容无关
3.当网页内容的尺寸超过视口尺寸时,浏览器会出现滚动条
※包含块
l 包含块(containing block):每一个元素都有一个包含块,它是指元
通常情况下,元素的包含块是它父元素的内容盒(contentbox
根元素(html)的包含块:初始化包含块(initial containing block)
l 视觉格式模型要求,所有元素必须防止在它的包含块中
l 元素在包含块中的尺寸和位置,只要受到两个因素的影响
- 元素的盒模型
- 元素的定位系统
※定位体系概述
视觉格式化模型规定,定位体系一共有三种:
常规流(normal flow)
浮动(float)
绝对定位(absolute positioned)
任何一个元素,必须属于其中一种定位体系
不同的定位体系中,元素在包含块中的尺寸和位置会有一些变化
※定位体系判定
position 绝对定位 默认值 static
float 浮动 默认值 none
默认情况下,元素为常规流定位
※盒模型和定位体系
- 定位体系影响盒子模型 是因为 影响auto值得计算
※盒模型中的尺寸 - %
- 尺寸是包含块的百分比
margin、padding、width的百分比:是包含块宽度的百分比
height的百分比
- 若包含块的高度与内容多少无关,则相对于包含块的高度
- 若包含块的高度与内容多少有关,则设置无效
※盒模型中的尺寸 - auto
- 尺寸受到定位体系影响
- 按照不同定位体系的规则计算
※常规流
- 常规流,又叫普通流、文档流、普通文档流
- 常规流是最常见的而定位体系,所有元素默认状态下都是常规流定位
盒模型中的auto值
水平方向
常规流盒子水平方向上的尺寸,必须等于包含块的宽度,如果不行,则强行将marginright设置为auto
常规流下:
- 盒子在包含块中水平居中:定宽,左右margin为auto
- 盒子左右伸出包含块:宽度auto,左右margin为负
垂直方向
- margin为auto:0px
- height为auto:适应内容的盖度
盒子位置
- 盒子在包含块垂直方向上依次摆放
- 一次摆放:按照HTML元素的书写顺序从上到下摆放
- 盒子在包含块中占据的尺寸时整个盒子的尺寸
- 垂直方向上,若两个外边距相邻,则进行合并(折叠)
- 垂直方向:水平方向上的外边距不会合并
- 外边距相邻:两个外边距之间没有border、padding和content
- 合并:均为正数取最大,均为负数取最小,一正一负则相加
弹性布局
一个盒子,如果将其display属性设置为 flex ,该盒子变为弹性盒(弹性容器),该盒子的
所有子元素,自动变为弹性项目。弹性盒本身按照自身的定位体系排列,弹性布局影响的仅
仅是弹性盒中的弹性项目
属性
flex-direction :更改主轴方向
row 行 默认值
row-reverse 反向 主轴从右向左
column 列 按主轴从上往下排列
column-reverse 按主轴从下往上
justify-content :更改主轴对其方式
flex-start 默认值 主轴起点一次排列
flex-end 主轴终点对齐
center 主轴中线对齐
space-between 左右项目靠边,中间平均分布
space-around 所有项目平均分布
align-items: 更改侧轴对齐方式
stretch 默认值 拉伸
flex-start 侧轴起点对齐
flex-end 侧轴终点对齐
flex-center 侧轴中线对齐
flex-wrap
wrap (换行)
nowrap (不换行)
align-content
规则:弹性项目宽度自动时,表示适应内容的宽度和高度。margin为自动时,会吸收
弹性容器的剩余空间。
项目属性
order 更改弹性项目的排列顺序,顺序为从小到大进行排列
flex-shrink 更改弹性项目的压缩比例
1 默认
0 不压缩
flex-grow 更改弹性项目的增长比例
0 默认 不增长
flex-basis 弹性项目在压缩或增长前的基础宽度,若不设置,默认值为auto,表示
与width属性值相同
速写 flex:grow shrink basis; 同时设置增长、压缩、基础值
水平居中方式
1. 文字水平居中,设置文字所在元素的 text-aline:center;
2. 常规流块盒水平居中,定宽,左右m argin 为 auto
3. 将该盒子的父元素设置为弹性盒,同时设置 justify-content: center;
4. 设置父元素为弹性盒,将需要居中的元素的左右 margin 设置为 auto 。
垂直居中
1. 文字在元素中垂直居中,设置行高为元素高度
2. 盒子在包含块中垂直居中,设置父元素为弹性盒,其侧轴对齐方式为居中 align-items:
center
3. 设置父元素为弹性盒,将需要居中的元素上下 margin 设置为 auto 。
水平居中(包含块中居中)
1. 定宽,左右margin为auto。(常规流块盒、弹性项目[不用定宽])
2. 弹性盒设置justify-content: center,让弹性项目在主轴上居中。(普遍适应)
3. 父元素设置text-align: center,让其内部的行盒、块盒居中。
4. 绝对定位元素,left:0; right:0; 定宽;左右margin: auto。
5. margin-left:50%; transform:translateX( -50%)。[margin,padding相对于包含块宽度的百分
比] 【终极方案】
垂直居中
1. 单行文本垂直居中,设置父元素的line-height为包含块高度。
2. 弹性盒设置align-items:center,让弹性项目在侧轴上居中。
3. 绝对定位元素,top:0;bottom:0;定高;上下margin:auto
4. 绝对定位元素,top:50%;transform:translateY(-50%)。【终极方
案】
绝对定位元素水平垂直居中
left:50%;top:50%;transform:translate( -50%,-50%);
行盒和块盒的区别
1. 行盒不可设置宽高,垂直方向上所有尺寸不占用空间,但水平方向上的margin、border、
padding可以。块盒所有尺寸有效。
2. 行盒会在合适位置被截断,而块盒不行。
3. 行盒只有常规流(浮动和绝对定位会强行将之转换为块盒),排列时,与其他行盒首尾相
接。块盒有多种定位体系,每种定位体系按照自身规则排列。
4. 行盒之间和行盒内部会空白折叠。块盒不会。
伪类选择器:
1. :hover,鼠标悬浮时的效果
2. :active,a/button元素激活(按钮)时的效果
3. :link,a元素未访问过的样式
4. :visited,a元素访问过的样式
5. :checked,单元或多选被选中的样式
6. :focus,表单元素聚焦的样式
7. :firstchild,第一个子元素
8. :lastchild,最后一个子元素
9. :nthchild(2),第二个子元素;
10. :nthchild(2n)/:nthchild(even),第偶数个子元素;
11. :nthchild(odd),第奇数个子元素
伪元素选择器
1. ::before,在内部生成一个子元素,作为第一个子元素,然后选中它
2. ::after,在内部生成一子元素,作为最后一个子元素,然后选中它
3. :selection,选中被框选的文字
后缀\0:IE5~IE7
前缀*:IE5~IE7
前缀
_
:IE5~IE6
设置color属性,让非IE浏览器为绿色,IE5~IE6为红色,IE7为棕色,IE8~IE11为黑色
color:green;
color\0:black;
*
color:brown;
_
color:red;
height的百分比相对于包含块的高度,其有效的前提条件是:包含块的高度是可计算的
给html设置100%,是视口的高度。
CSS框架
bootstrap
理念:移动端优先,响应式,栅格系统(960布局)
960布局:主区域宽度为960像素,将区域内部划分为12列,每列之间间隔10像素,每
列宽度60像素Layui