目录
一.css简介
CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,是一种用来表现HTML或XML等文件式样的计算机语言,是一种标准的样式表语言,用于描述网页的表示,即布局和格式。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
二.基本语法
h1{
color:red;
background-color:lightblue;
text-align: center;
}
CSS规则 = 选择器 + 声明块
1. 选择器
选择器:选中元素
1. ID选择器:选中的是对应id值的元素
2. 元素选择器
3. 类选择器
2. 声明块
出现在大括号中,声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式。
3. CSS代码书写位置
1. 内部样式表,书写在style元素中
2. 内联样式表,元素样式表,直接书写在元素的style属性中
3. 外部样式表,将样式书写到独立的css文件中。
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存,从而提高页面响应速度
3). 有利于代码分离(HTML和CSS),更容易阅读和维护
三.常见样式说明
1. color
元素内部的文字颜色
预设值:定义好的单词
三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达,色值。
2. background-color
元素背景颜色
3. font-size
元素内部文字的尺寸大小
1)px:像素,绝对单位,简单的理解为文字的高度占多少个像素
2)em:相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号。
> user agent,UA,用户代理(浏览器)
4. font-weight
文字粗细程度,可以取值数字,可以取值为预设值
> strong,默认加粗。
5. font-family
文字类型
必须用户计算机中存在的字体才会有效。
使用多个字体,以匹配不同环境
sans-serif,非衬线字体
6. font-style
字体样式,通常用它设置斜体
> i元素,em元素,默认样式,是倾斜字体; 实际使用中,通常用它表示一个图标(icon)
7. text-decoration
文本修饰,给文本加线。
> a元素
> del元素:错误的内容
> s元素:过期的内容
8. text-indent 首行文本缩进
9. line-height
每行文本的高度,该值越大,每行文本的距离越大。设置行高为容器的高度,可以让单行文本垂直居中,行高可以设置为纯数字,表示相对于当前元素的字体大小
10. width 宽度
11. height 高度
12. letter-space 文字间隙
13. text-align 元素内部文字的水平排列方式
四.层叠
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
1. 比较重要性
重要性从高到底:
2. 比较特殊性
看选择器,总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(x x x x)
1. 千位:如果是内联样式,记1,否则记0
2. 百位:等于选择器中所有id选择器的数量
3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量
3. 比较源次序
代码书写靠后的胜出
五.盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
1.盒子类型
1. 行盒,display等于inline的元素
2. 块盒,display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
2. 盒子的组成部分
无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:
1. 内容 content
width、height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的**内容盒 content-box**
2. 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding: 简写属性
padding: 上 右 下 左
填充区+内容区 = **填充盒 padding-box**
3. 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式:border-style
边框宽度:border-width
边框颜色:border-color
边框+填充区+内容区 = **边框盒 border-box**
4. 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
六.浮动
1. 应用场景
1. 文字环绕
2. 横向排列
2. 浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠上靠左
- right:右浮动,元素靠上靠右
默认值为none
1. 当一个元素浮动后,元素必定为块盒(更改display属性为block)
2. 浮动元素的包含块,和常规流一样,为父元素的内容盒
3. 盒子尺寸
1. 宽度为auto时,适应内容宽度
2. 高度为auto时,与常规流一致,适应内容的高度
3. margin为auto,为0.
4. 边框、内边距、百分比设置与常规流一样
4.盒子排列
1. 左浮动的盒子靠上靠左排列
2. 右浮动的盒子考上靠右排列
3. 浮动盒子在包含块中排列时,会避开常规流块盒
4. 常规流块盒在排列时,无视浮动盒子
5. 行盒在排列时,会避开浮动盒子
6. 外边距合并不会发生
> 如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒。
5.高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
清除浮动,涉及css属性:clear
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
七.常规流
1.常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列,包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。
绝大部分情况下:盒子的包含块,为其父元素的内容盒
2.块盒
1. 每个块盒的总宽度,必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto,默认值0
auto:将剩余空间吸收掉
width吸收能力强于margin,若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收,在常规流中,块盒在其包含快中居中,可以定宽、然后左右margin设置为auto。
2. 每个块盒垂直方向上的auto值
height:auto, 适应内容的高度
margin:auto, 表示0
3. 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度。
高度的百分比:
1). 包含块的高度是否取决于子元素的高度,设置百分比无效
2). 包含块的高度不取决于子元素的高度,百分比相对于父元素高度
4. 上下外边距的合并,两个常规流块盒,上下外边距相邻,会进行合并。两个外边距取最大值。
八.定位
1.position属性
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素。定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:
1. 文档流中的元素摆放时,会忽略脱离了文档流的元素
2. 文档流中元素计算自动高度时,会忽略脱离了文档流的元素
2. 相对定位
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移。可以通过四个CSS属性对设置其位置:
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响。
3.绝对定位
1. 宽高为auto,适应内容
2. 包含块变化:找祖先中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为整个网页(初始化包含块)
4.固定定位
其他情况和绝对定位完全一样包含块不同:固定为视口(浏览器的可视窗口)
5. 定位下的居中
某个方向居中:
1. 定宽(高)
2. 将左右(上下)距离设置为0
3. 将左右(上下)margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
6. 多个定位元素重叠时
堆叠上下文,设置z-index,通常情况下,该值越大,越靠近用户,只有定位元素设置z-index有效,z-index可以是负数,如果是负数,则遇到常规流、浮动元素,则会被其覆盖
7.补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并