CSS学习(二)

CSS的元素显示模式

块元素

特点

1. 独占一行
2. 高度、宽度、内外边距可控
3. 默认宽度是父级宽度的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

注

• 文字类的元素内不能使用块级元素
• <p>主要用于存放文字，里面不能放块级元素（同理于)

行内元素

特点

1. 一行可以相邻显示，显示多个
2. 直接设置高、宽无效
3. 默认宽度为文字宽度
4. 只能容纳文本或其他行内元素

注：

• 连接里面不能再放连接
• 连接里面可以放块级元素，但最好转换为块级模式

行内块元素

特点

1. 和相邻行内元素在一行，但之间会有空隙
2. 默认宽度为本身内容宽度
3. 行高等可以控制

元素显示模式转换

转换为块级元素

display:block;

转换为行级元素

display:inline;

转换为行内块元素

display:inline-block;

CSS背景

背景

属性	作用	值
background-color	颜色	色彩值
background-image	图片	url
background-repeat	是否平铺	repeat/no-repeat/repeat-x/y
background-position	位置	length/position 分别是x y坐标
background-attachment	是否附着	scroll / fixed
背景简写	书写简单	颜色 图片地址 平铺 滚动 位置
背景色半透明	背景色半透明	background:rgba(0,0,0,0.3)

CSS三大特性

层叠性

样式冲突，以最近的样式执行

继承性

子标签惠继承父标签的某些样式

优先级

选择器	优先级
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
重要的	无穷

CSS盒子模型

边框

语法

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细想，xx px
border-style	边框样式
border-color	边框颜色

简写

border: xxpx solid red;(没有顺序)

边框分开写法：

border-top:xxpx solid red;

表格的细线边框

合并相邻边框

border-collapse: collapse;

(边框会改变盒子大小)

内边距

属性	作用
padding-top	上边距
padding-left	左边距
padding-right	右边距
padding-bottom	下边距

外边距

属性	作用
margin-top	上边距
margin-left	左边距
margim-right	右边距
margin-bottom	下边距

利用margin水平居中

1、必须指定盒子宽度

2、左右边距为auto

注：外边距合并问题