CSS基础知识（二）

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个	可以设置和宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行可以放多个	可以设置宽度和高度	它本身内容的宽度

5.元素显示模式转换

（1）概念

一个模式的元素需要另外一种模式的特性，通过相应语法进行元素显示模式的转换。

（2）语法

转换为块元素：display:block

转化为行内元素：display:inline

转化为行内块元素：display:inline-block

二、CSS的背景

1.背景颜色

（1）语法

background-color:颜色值；

（2）注意

①一般情况下元素背景颜色默认值时transparent（透明），我们也可以手动指定背景颜色为透明色。

②颜色值

•16进制颜色代码

语法：#RRGGBB

例：<font color="#ff0000">红色</font>

•10进制RGB码

语法：RGB（RRR，GGG，BBB）

例：<font color="rgb(255,000,000)">红色</font>

•直接用颜色的英文名称

例：<font color="red">红色</font>

2.背景图片

（1）语法

background-image : none | url()

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

3.背景平铺

（1）语法

Background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值	作用
repeat	背景图像在纵向和横向上平铺(默认的)
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

4.背景图片位置

（1）语法

background-position : 参数

（2）参数

①参数是方位名词

•如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致

•如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

②参数是精确单位

•如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标

•如果只指定了一个数值，那么该数值一定是x坐标，另一个默认垂直居中

③参数是混合单位

•如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

5.背景图像固定（背景附着）

（1）语法

background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

6.背景复合写法

（1）语法

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

7.背景色半透明

background: rgba(0, 0, 0, 0.3);

•最后一个参数是alpha透明度，取值范围在0~1之间

•我们习惯吧0.3的0省略掉，写为background: rgba(0, 0, 0, .3)

•背景半透明是指盒子背景半透明，盒子内容不受影响

•CSS3新增属性，是IE9+版本浏览器才支持的

8.总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
背景简写	书写更简单	背景颜色背景图片地址背景平铺背景滚动背景位置
背景颜色半透明	背景颜色半透明	background: rgba(0, 0, 0, 0.3); 后面必须是4个值

三、CSS三大特性

1.层叠性

（1）原则

①样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

②样式不冲突，不会层叠

2.继承性

CSS可继承的属性有：字体系列属性（font、font-family、font-style等），文本系列属性（text-indent、text-align等），表格布局属性（caption-side、border-collapse等）等等。

3.优先级

（1）选择器权重

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important 重要的	∞无穷大

（2）注意

①权重是有4组数字组成，但是不会有进位

②可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推

③等级判断从左向右，如果某一位数值相同，则判断下一位数值

④可以记为通配符和继承权重为0，标签选择器为1，类选择器为10，id选择器100，行内样式表为1000，！important无穷大

⑤继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

四、盒子模型

1.边框

（1）语法

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

（2）简写语法

border: 1px solid red; //没有顺序

（3）边框分开写

border-top：属性

2.合并边框

（1）语法

border-collapse: collapse;

表示相邻边框合并在一起

3.内边距

（1）语法

padding-left： 30px

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

（2）简写属性

值的个数	表达意思
padding: 5px	1个值，代表上下左右都有5像素内边距
padding: 5px 10px	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding: 5px 10px 20px 30px	4个值，上是5像素，右10像素，下20像素，左30像素顺时针

（3）影响

①内容和边框有了距离，添加了内边距

②padding影响了盒子实际大小。假如盒子已经指定了高度和宽度，此时再指定内边框，会撑大盒子。

（4）解决方案

①如要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可

②假如子类自己没有设置高度和宽度，而是继承了父类的高度和宽度，那么内边距不会撑大子类盒子的大小

4.外边距

（1）语法

margin-left： 30px

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

简写属性与内边距一致

（2）应用

外边距可以让块级盒子水平居中，但是必须满足两个条件

①盒子必须指定了宽度（width）

②盒子左右的外边距都设置为auto

③常见写法

•margin-left: auto; margin-right: auto

•margin: auto

•margin: 0 auto

（3）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

①可以为父元素定义上边框

②可以为父元素定义上内边距

③可以为父元素添加overflow:hidden

五、清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {

padding: 0; /*清除内边距*/

margin: 0; /*清除外边距*/

}

注意：行内元素是为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

Culaccinoooo

关注

28
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识（二）

目录一、CSS的元素显示模式1.块元素2.行内元素3.行内块元素4.总结5.元素显示模式转换二、CSS的背景1.背景颜色2.背景图片3.背景平铺4.背景图片位置5.背景图像固定（背景附着）6.背景复合写法7.背景色半透明8.总结三、CSS三大特性1.层叠性2.继承性3.优先级四、盒子模型1.边框2.合并边框3.内边距4.外边距五、清除内外边距一、CSS的元素显示模式1.块元素（1）常见块..
复制链接

扫一扫