CSS基础语法

一、显示模式

分为两种：块级元素和行内元素

1.1 特点

块级元素：独占一行，可以设置width和height并且生效， 如果不设置width，则默认宽度按浏览器宽度显示

行内：可以和其他行内元素在一行显示，宽高由内容撑起（使用margin和padding时垂直方向不生效）

1.2属性值

l block       —— 块级元素  （独占一行，具有宽高）

l Inline       ——  行内元素（可以和其他元素在同一行显示）

l inline-block ——  行内块（可以和其他元素在同一行显示，并且具有宽高）

1.3三种显示模式相互转换

l 转换成块：  display:block;

l 转换成行内元素：  display:inline;

l 转换成行内块：

l display:inline-block;

l float:left;

l position:absolute;

1.4行内元素有哪些

行内元素有  a , span ,img , input ， b , u , i , strong , em

注：其中img和input是行内块

二、background属性

background:背景色 背景图 平铺方式 背景图定位;

2.1各个属性写法

l 背景色    background-color（如果想单独使用背景色时，直接使用background就可以，因为background-color浏览器的识别不是很好）

l 背景图     background-image

l 平铺方式   background-repeat

l 背景图定位 background-positon

2.2 注意

background-position取值 是先左右（水平）方向，后上下（垂直）方向。

三、盒子模型

3.1 内边距padding

盒子的实际宽度 = padding + border + 实体化width；

盒子的占位宽度 = padding + border + 实体化width + margin；

 

 

3.2 外边距margin

3.2.1 两个盒子嵌套会发生外边距塌陷

l 给父级或子级别添加float：left属性

l 给父级添加overflow：hidden属性

出现环境

 <style>

.box1{width:100px;height:100px;background:pink;}

.box2{width:100px;height:100px;margin-top:20px;background:green;}

 </style>

 <div class="box1">

<div class="box2"></div>

 </div>

解决方法

1..box1{width:100px;height:100px;background:pink;border:1px solid #000;}

2.box1{width:100px;height:100px;background:pink;overflow:hidden;}

3.box1{width:100px;height:100px;background:pink;float:left;}

 

3.2.2 盒子水平居中margin:0 auto的条件

l 盒子必须有宽度width值

l 盒子必须是块级元素

l 必须是标准流下的盒子

 

 

3.3 行内元素对margin和padding的解析

行内标签设置的margin-top和margin-bottom，padding-top和padding-bottom都没有作用。

四、浮动

浮动是将元素变成行内块,并且半脱离标准流

4.1 注意

l 只要盒子有浮动，那么我们就给这个盒子的父级增加overflow:hidden来清除浮动（因为浮动后父级不能靠内容撑开，oververflow:hidden能强制检测处于半脱离的浮动流的元素）

l 由于浮动的元素没有行内元素、块级元素之分，所以不接受 display 进行行块转换

五、定位

5.1相对定位relative

5.2 绝对定位absolute

l 完全脱离标准流 ，不占位置（即便是父级使用oververflow:hidden也不能检测到该绝对定位元素的宽高尺寸，也就是父级照样不会被该绝对定位元素撑开）

l 绝对定位会把盒子变成行内块

 

5.3 盒子定位水平/垂直居中

   （在定位前提下） left:50%;  margin-left:盒子宽度的一半

                     top:50%;   magin-top:盒子高度的一半

 

 

 

六、精灵图

l background-position

 

 

 

七、补充

   切图 fw ps(ps切片工具 ps插件cutterman（需联网使用）)

   1、选择器权重

      命名多个类名

    

   2、兼容性

   

   3、import引入（了解）

1.语法：@import  url(‘css路径’);

2.步骤：

a. 新建单独的一个css后缀文件；

b. 在head标签里面嵌入style标签

c. 将@import url(‘css路径);写入style标签里面

注意：@import url(‘css路径); 最后这个分号不能省略

 

现在绝大部分的网站都采用种link方式，原因在于
@import先加载HTML，后加载CSS
link先加载CSS，后加载HTML

 

  4、严格嵌套

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素（W3C标准）

 

5、超出使用省略号（一行文本超出生效，多行文本存在超出不生效）

 

 

 

display:block/inline-block; （如果是行内元素，就要转换为块级；如果想使行内块有效果，就要给行内块加宽度）

overflow:hidden;

text-overflow:ellipsis;

white-space: nowrap;（强制文本不换行）

 

6、表单元素不继承body里面的文字属性，需要单独设置（表单元素的默认样式跟浏览器有关）

 

7、可能会用到的文本属性

1、letter-spacing:10px;   文字的间距

 

2、text-transform:

                   captilize（文本中的每个单词以大写字母开头）

                   uppercase（仅有大写字母）

 

 

 

3、word-break:break-all;（文本自动换行，末尾是单词的话会截断）