css3学习笔记

一、布局相关样式

用float属性或position属性进行页面布局，两个div元素是各自独立的，如果在第一个div中加入内容会使两个元素的底部不能对齐。

1、多栏布局：注意浏览器的兼容性

column-count 设置栏数。

column-width 单独设每一栏的宽度而不设定元素的宽度。

column-gap 设置多栏之间的间隔距离。

column-rule在栏与栏之间增加一条间隔线，设定间隔线的颜 色、宽度等。

2、盒布局：

Content(内容) - 盒子的内容，显示文本和图像。

container里面使用box属性

#container{display：-moz-box;}

#left-sidebar左侧边栏{}

#content内容{}

#right-sidebar右侧边栏{}

#left-sidebar，#contents，#right-sidebar{

-moz-box-sizing:border-box;

}

3、盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

4、区别：多栏布局各栏宽度必须相等，多栏布局适合于使用在显示文章内容时，不适合用于安排整个网页中由各元素组成的网页结构。

5、弹性盒子

自适应窗口的弹性盒子布局：内容不一样时，内容多的会占有很大的地方。

改变元素的显示顺序，box-ordinary-group。注意浏览器的兼容性。

改变元素排列方向，box-orient，直接在container内修改，vertical垂直方向，horizontal水平

元素宽度与高度的自适应性：使用盒布局元素的宽度与高度有自适应性。

使用弹性盒子布局来消除空白，在中间的一个div子元素的样式代码中加入box-flex属性，也可以多个元素设置，注意效果

兼容性注意，指定水平方向与垂直方向的对齐方式：box-pack、box-align

二、Media Queries

1、根据浏览器窗口的大小来选择使用不同的方式

2、在iPhone中的显示<meta name="viewport" content="width=600px"/>

3、media queries媒体查询

@media screen and （min-width：px） and （max-width：px）{}

可以指定的值，all所有设备，screen电脑显示器，print打印用纸或者打印预览视图，handheld便携设备，tv电视机类型的设备，speech语音和音频合成器，braille盲人用点字法触觉回馈设备，embossed盲人打印机，projection各种投影设备，tty

另外，width，height，device-width，device-height，oriention，aspect-ratio，device-aspect-radio，color，color-index，monochrome，resolution，scan，grid

三、css中的其他样式

1、颜色设定，以及透明度的设定

rgba（red，green，blue，alpha）

hsl（hub,saturation，亮度，alpha）

alpha可以单独针对元素的背景色和文字颜色等来指定透明度

2、opacity设定透明度

指定整个元素的透明度

3、指定颜色值为transparent

会将背景、文字、或边框等的颜色设定为完全透明，相当于alpha值为0

4、轮廓相关样式

outline：outline-color 、outline-style 、outline-width、outline-offset该整数值表示向外偏离多少像素

resize属性：通过拖动的方式来修改元素的尺寸，none不能修改、both可修宽高、horizontal可修宽、vertical可修高、inherit继承父元素的resize属性值

取消对元素的样式指定：initial属性值，直接加在标签的后面，但是，无法取消样式设定的特例，例如，标题，并不是等于将该元素的样式设定直接删除后的结果。

四、网页结构

先能做出基本框架、每个部分添加内容

1、header结构

2、aside

3、section

4、footer