7.1学习笔记
1、column- count属性
在CSS3中可以通过，column-count属性 来进行多栏布局，这个属性的含义是将一个元素中的内容分成
多栏进行显示。
写法:
column-count:栏目数;
兼容性写法:
-webkit- column count:3:
-moz- column- count:3;
需要注意的是，在使用多栏布局的时候。要将元素的宽度设置咸多个栏目的总宽度
2、column- width属性:指定栏目的宽度来生成分栏。
兼容性写法: - webkit-column- width、-moz- column-width
- column- gap属性:指定栏目与栏目之间的距离
兼容性写法: - webkit- column- gap、-moz- column- gap
4、column-rule属性:栏目与栏目之间增加一条分割线
兼容性写法: -webkit- column-rule，- moz- column-rule
盒布局的基础知识
1、使用foat厦性和position属性时的缺点
在CSS3中，除了多栏布局之外，还可以使用盒布局来解决使用float属性和position属性时多栏底部不能对齐的缺点。
曾先来实现一个float属性布局的案例，并且找到缺点。
出
2.使用盒布局
在CSS3中，使用box属性来使用富布局，在火狐中要把box写成“-moz-box"的形式，在谷歌测览器中呢需要写成"-webkit- box"的形式。
综合上一个案例，将他修改成盒布局。
3.盒布局与多栏布局的区别
多栏布局的栏目宽度必须相等，指定栏目的宽度的时候也只能统一指定，栏目的宽度不可能全都一样， 所以多栏布局比较适合
在文字内容页面使用，并不适合整个网页编排时使用
1.使用自适应窗口的弹性盒布局
如何才能让DIV的宽度跟随測览曇窗口变化而变换呢?在CSS3中我们只要使用-个box flex属性，使得我们的盒布局变戚弹
性盘布局就可以了。
兼容性写法:
-webkit- box- flex (Safar浏览器、Chrome浏览器时前面加- webkit- )
-moz- box- flex (Firefox测览器时前面加-moz-)
2.改变元素的显示顺序
使用弹性盒布局的时候，可以通ifbox- ordinal-group属性来改变各个元素的显示顺序，在每个元素中加入
box- ordina-group属性，这个属性使用一个表示序号的正数属性值，浏览器在显示的时候根据序号从小到大来显示这些元素
兼容性写法:
-webkit- box- ordinal-group (Safani浏览器、Chrome浏览器时前面加-webkit- )
-moz-box- ordinal-group (Firefox测览器时前面加-moz-)
3.改变元素的摔列方向
在使用弹性盒布局的时候，可以通过box- orient来指定多个元素的排列方向。
值:
horizontal在水平行中从左向右摔列子元素.
vertical从上向下垂直排列子元素。
兼吝性写法:
-webkit- box- orient:vertical
(Safani浏览器、Chrome浏览器时前面加- webkit- )
-moz- box- orient:vertical (Firefox浏览器时前面加-moz-)
4.元素的宽度与高度自适应
在使用盒布局的时候。元素的宽度与高度具有自适应性。就是元素的宽度与高度可以根据排列方向的改变面改变。
5、使用弹性盒布局来消除空白
方法就是给子DIV中加入一个box- flex属性
6.对多个元素使用box- flex属性
让浏览器或者容器中的元素的总宽度或者是总高度都等于浏览器或者是容器的高度。
7.指定水平方向与穩直方向的对齐方式
使用盒布局的时候，可以使用box-pack属性及box- align属性来指定元素中的文字。图影响以及子元素的水平方向或者是垂直方向上的对齐方式。
-webkit-box- pack:值(Safani浏览器、Chrome浏览器时前面加- webkit- )
-moz- box- pack:值(Firefox浏览器时前面加-moz- )
-webkit -box- align:值(Safari测览器、Chrome浏览器时前面加- webkit- )
-moz-box- align:值(Firefpx测览器时前 面加-moz- )
属性值 box-pack属性值的含义 box-align属性值的含义
tar 左对齐，文字、图像或子元 顶部对齐，文字.图像或子元素被放置在元素最顶部
素被放置在元素最左边
center 中对齐，文字、图像或子元 中部对齐，文字、图像或子元素被放置在元素中部
素被放置在元素中部
end 右对齐，文字、图像或子元 底部对齐，文字、图像或子元素被放置在元素最底部
素被放置在元素最右边
start 顶部对齐，文字、图像或子 左对齐，文字、图像或子元素被放置在元素最左边
元素被放置在元素最顶部
center 中部对齐，文字、图像或子 中对齐，文字、图像或子元素被放置在元素最中部
元素被放置在元素最中部
end 底部对齐，文字，图像或子 右对齐，文字、图像或子元素被放置在元素最右边
元素被放置在元素最底部
Media Queries的使用方法:
Cmedia设备类型and (设备特征) {样式代玛]
在样式的代码开头必须妻写omedia.然后制定设备的类型(媒体类型)
可以指定的值与其所代表的设备类型
all 所有设备
screen 电脑显示器
print 打印用纸或者打印预览图
handheld 便携设备
tv 电视机类型设备
speech 语音和音频合成器
bralle 盲人用点字法触觉回馈设备
embossed 盲文打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端。
设备特性的书写方式与样式的书写方式呢很相似，分为两个部分，当中有冒号分隔，冒号前书.
写设备的某种特性，雷号后书写该特性的具体值。例如，需要指定浏览器的窗口宽度大于
400px时，我们可以这样书写(jin- width:400px),大部分设备特性的指定值接受min/max的
前细,用来表示大于等于或小于等于的退辑,以此来避免使用<和>这些字符。
13种设备的特性说明
特效 可指定的值 是否允使用min/max前缀 许特性说明
widtr 带单位的长度数值 允许 浏览器的窗口宽度
height 带单位的长度数值 允许 浏览器窗口的高度
device- width 带单位的长度数值 允许 设备屏幕的分辨值
device- height 带单位的长度数值 允许 设备屏幕分辨率的值
orientation 只能指定2个值 不允许 浏览器的方向是纵司还
padding或iandscape 是横向，当浏览器高
度值大于等于测览器的
宽度值的时候，这个特
性的portrait否则为
landscape
aspect- ratio 比例值 允许 浏览器窗口的纵横比，
比例值为浏览器窗口的
宽度值/高度值
device- aspect-rat 比例值 允许 屏慕分辨率的纵横比，比例 值为设备屏幕分辨率的宽度 值/高度值
color 整数值 允许 设备使用多少位的颜色
值，如果不是彩色设备
，该值为0
color- index 整数值 允许 色彩表中的色彩数
monochrome 整数值 允许 单色帧缓冲器中每像素的字 节数
resolution 分辨率值 允许 设备的分辨率
scan 只能指定两个 不允许 电视机类型设备的扫描方式
progressive或 progressive表示逐行扫
interlace 描，interlace表 示隔行扫描
grid 只能指定两个值 不允许 设备是基于栅格还是基于位 0或1 图。基于栅格时该值为1,
使用and关键字来指定某种设备类型的某种特性的值满足某个条件时所使用样式，比如以下
语句指定了，当设备窗口宽度小于640px时所使用的样式。
omedia screen and (max- width: 639px){
样式代码 }