Css(Css3)基础笔记（一）

Css(层叠样式表)

本文多以图片为主，想看实体文字，可进入我的有道云笔记

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

语言特点:

1.丰富的样式定义

2.易于使用和修改

3.多页面应用

4.层叠

5.页面压缩

CSS相关概念

来自我的有道云笔记

css嵌入方式

来自我的有道云笔记

CSS的基本语法

来自我的有道云笔记

选择器

来自我的有道云笔记

color颜色属性

来自我的有道云笔记

background背景属性

来自我的有道云笔记

font字体属性

来自我的有道云笔记

文本属性

来自我的有道云笔记

border边框(边框)

来自我的有道云笔记

内补白padding

来自我的有道云笔记

外补白margin

来自我的有道云笔记

Position定位属性

来自我的有道云笔记 来自我的有道云笔记

列表属性

来自我的有道云笔记

表格属性

来自我的有道云笔记

display属性

来自我的有道云笔记

overflow属性

来自我的有道云笔记

float 浮动属性

来自我的有道云笔记

########################css3的样式############################

选择符

来自我的有道云笔记

用户界面的属性

来自我的有道云笔记

多层背景

来自我的有道云笔记 来自我的有道云笔记

新盒子模型

box-sizing:设置盒子模型的方式

    min-height:在元素内容没有达到最小高度之前 按照最小高度设置 超过则自适应高度

    max-height:在元素内容没有到达最大高度之前，自适应高度，超过则按照最大高度计算

    content-box： 

            padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Elementwidth=width+border+ padding )此属性表现为标准模式下的盒模型。

    border-box： 

            padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Elementwidth=width)此属性表现为怪异模式下的盒模型。

多栏column(不常用)

来自我的有道云笔记

来自我的有道云笔记 来自我的有道云笔记

transition过渡效果(重点)

来自我的有道云笔记

animation动画效果

来自我的有道云笔记

来自我的有道云笔记

媒体查询 Media(重点)

来自我的有道云笔记

标准头的设置(重点)

来自我的有道云笔记

布局模式(重点)

流式布局

优点:

对用户的界面更加友好  能够自适应用户的设置

页面的空白区域在所有的分辨率下面和浏览器下面都是相同的

如果是设计好的流式布局 还能够避免小分辨率下的水平滚动条

缺点:

设计师不是很好见到直观效果  如果产生一些小问题可能会被忽略

图片、视频或者其他设置了宽度的内容可能需要设定多个宽度以适应不同的分辨率

在不同的分辨率下  如果是大分辨率 内容会被拉长或者换行

flex 弹性布局(重点)

来自我的有道云笔记

新增单位(适合移动端的单位)(重点)

来自我的有道云笔记

兼容性问题:

来自我的有道云笔记