CSS特性:
① 继承性
② 层叠性
③ 优先级
选择器
- 通用选择器(通配符):
*
(清除所有元素的margin和padding) - 元素选择器:
div{color:red}
(设置页面中某种元素的默认样式)
body{margin:0;padding:0}
清除body以及body内所有元素的内外边距
- id选择器:
#id
一般id选择器在项目中很少单独使用,一般作为子代选择器或后代选择器
- 类选择器:
.className
- 多类选择器:
class="t类名1 类名2 类名3 ....."
- 分类选择器:
class="类名1 类名2 类名3....."
①.类名1.类名2 { }
②元素名.类名 { }
- 群组选择器:
选择器1,选择器2,选择器3........ { }
将多个选择器放在一起,定义公共样式 - 后代选择器:
选择器1 选择器2 选择器3...... { }
通过元素的后代关系匹配元素 - 子代选择器:
选择器1>选择器2>选择器3>....
只能一级一级嵌套
子代选择器和后代选择器可以混写
- 伪类选择器:匹配元素不同状态的选择器
选择器:伪类{ }
- a标签的未点击状态:
a:link{ color:red;}
- a标签访问后的状态:
a:visited{color:yellow}
- 鼠标悬停时的状态:
a:hover{color:blue}
- 激活状态(鼠标按住不放):
a:active{color:purple}
以上四个伪类同时作用在同一个元素时,需要有严格的编写顺序:link ----> visited ----> hover ----> active- 匹配获取焦点的元素的状态:
:focus
选择器的权值问题
- 选择器默认自带权值,权值越高优先级越高
- 当一个选择器中含有多个选择器时,需要将所有的选择器权值进行相加,然后比较,权值大的优先显示
- 权值相同,就近原则
- 群组选择的权值,单独计算,不能相加
- 样式后面添加
!important
,直接获取最高优先级,内联样式不能添加!important
- 选择器权值的计算,不会超过自己的最大数量级
!important
>1000- 内联样式 =1000
- id选择器 =100
- class和伪类 =10
- 元素选择器 =1
- *通用选择器 =0
- 继承的样式 无权值
尺寸和边框
尺寸
width、height
max-width、min-width
:使用时不能定宽max-height、min-height
如果不写宽高,各个元素默认的宽高:
- 1.块级元素不写宽,默认宽度占满父容器宽度的100%
- 2.块级元素不写高,默认高度靠内容撑起来
- 3.行内元素设置宽高无效,它的宽高靠内容撑起
- 4.自带宽高属性的元素,设置宽高有效
img/table
取值:
px
:具体像素值
in
:1英寸=2.54cm
pt
:磅值 1pt = 1/72in ,多用于设置字体大小
cm
:厘米
mm
:毫米- 父元素的百分比
- 项目中为了做不同端的兼容,会使用相对单位
em
:以父元素的数值当做基本单位
rem
:以html的数值当做基本单位
溢出
overflow
:visible/hidden/auto/scroll
默认纵向溢出
overflow-x/overflow-y
:水平/垂直滚动条- 设置横向溢出:内部容器设置宽度 > 外部容器宽度
边框
border:border-width border-style(solid/dotted/dashed/double) border-color
border-width/border-style/border-color
也可单属性定义,边框只要写了style属性就会显示,不写style则边框溢出border-top/bottom/left/right
:边框的单边定义(可以用来做下拉三角)
颜色:
- 颜色的合法值:
- 颜色的英文单词
#rrggbb
:6位16进制数字#aabbcc -----> #abc
:#ff0000 -----> #f00rgb(r,g,b)
:十进制 r,g,b 0~255rgba(r,g,b,alpha)
:alpha 0~1hsl()
:饱和度、亮度transparent
:等同于rgba(0,0,0,0)
全透明- 最简方式:
border:style
- 单边单属性:
border-top-color:#fff
- 边框的倒角(圆角):
border-radius:2px/50%
单角设置:
border-top/bottom-left/right-radius:10px
左上角
- 边框的阴影:
box-shadow:h-shadow v-shadow blur spread color outset/inset;
h-shadow
:水平方向阴影
v-shadow
:竖直方向阴影
blur
:模糊度
spread
:阴影大小
color
:阴影颜色
outset/inset
:设置外部阴影和内部阴影
- 轮廓:
outline:width style color
去除轮廓/边框:
border/outline:none/0
框模型(盒子模型)【一种计算方式】
- 元素在页面上实际占地空间的一种计算方式
- 浏览器默认元素实际占地宽度:左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
- 占地高度:上外边距+上边框+上内边距+内容区域宽度+下内边距+下边框+下外边距
- 外边距:
margin
取值auto
,对上下外边距无效,自动计算块级元素的外边距,使块级元素水平居中(只对设置了宽度的块级元素有效)
外边距的特殊效果:
- 外边距的合并:两个垂直外边距相遇时,将合并成一个,值以大的为准
- 外边距溢出:在特殊情况下,为子元素设置上外边距会作用到父元素上。
- 特殊情况:
① 父元素没有上边框
② 子元素的内容区域的上边沿与父元素的内容区域的上边沿重合- 解决方案:
① 给父元素增加外边框(影响父元素的实际占地高度 )
② 给父元素增加上内边距(影响父元素的实际占地高度)
③ 在子元素之前添加一个空的table标签
- 关于块级元素、行内元素、行内块的总结:
①行内块的特点:
(1) 设置宽高无效,宽高会根据内容自动撑开
(2) 上下外边距无效,左右外边距有效
(3) 可以与其他行内元素和块级元素共用一行,一行放不下再拆行
②块级元素的特点:
(1) 设置宽高有效,如果不设置宽高,宽度是父级元素宽度的100%,高度靠内容撑开
(2) 4个方向外边距都有效,独占一行
③行内块元素
(1) 设置宽高有效,但是自带一个默认的宽高
(2) 4个外边距都有效,但是修改同一行一个行内块的垂直外边距,整行都会跟着一起发生位置变化
(3) 可以与其他行内块元素和行内元素共用一行- 自带外边距的元素:
① h1-h6/p/body/ol/ul/dl/pre
② 由于不同浏览器对默认的外边距解析可能会有差别,所以在写代码之前一般会把内外边距清空,即css reset
*{margin:0;padding:0;}
- 内边距:
padding
:改变padding,视觉上是改变了元素的大小,不会影响其他元素,只会改变当前元素自己实际占地尺寸。没有auto
取值 box-sizing
取值:
contebt-box
(默认值):浏览器按照盒子模型默认公式计算占地宽度border-box
:元素占地宽度=左外边距+width+右外边距
border-box
使用的时机:一个容器内,在一行显示多个元素,如果子元素的width使用%
定义,那么基本就要使用border-box
背景
background-color
background-img:url(1.url)
background-repeat:repeat/no-repeat/repeat-x/repeat-y
- 背景图片定位:
background-position:40px/50%/left/center/right(x轴) 100px/50%//top/center/bottom(y轴)
- 背景图的尺寸:
background-size:10px/50%/cover(覆盖,要求容器被全部填满,图片显示不全没关系)/contain(包含,让容器可以完整地包含整张图片,容器如果有空白区域没关系)
取值:两个是分别设置宽高,取一个值是设置宽,高自适应
- 背景图片的固定:
background-attachment:scroll(默认值,背景图会跟随页面滚动条滚动)/fixed(固定,背景图片会相对于页面位置固定,不会随着页面滚动条滚动,但是只会在原容器区域显示)
- 简写:
background:color image repeat attachment position
- 最简:
background:color/image
写CSS的思路
- 从上往下
- 从左往右
- 从外往里
找到目标元素写样式的步骤
- 尺寸、大体位置
- 边框、背景
- 文字相关
- 微调(margin/padding)
渐变(gradient)
- 渐变的主要因素:色标(一种颜色,和它出现的位置,一个渐变最少两个色标)
- 渐变的分类:线性渐变 / 径向渐变 / 重复渐变
- 线性渐变:
background-image:linear-gradient(方向,色标1,色标2,......)
- 方向(angle):
- 关键字:
to bottom / to top / to right / to left
- 角度值:
0deg(to top) / 90deg(to right) / 180deg(to bottom) / 270deg(to left)
- 色标(color-point):
- 只写颜色不写位置:一般用于只有两个色标的情况,对应开头和结尾
- 颜色+px 为单位的数字
- 颜色+%
- 径向渐变:
background-image:radial-gradient(半径 at 圆心,色标1,色标2....)
- 半径:px为单位的数字
- 圆心:
1. 以px为单位的数字 x y
2. x% y%
3. 关键字:x:left / center / right
y:top / center / bottom
- 色标:
1. 颜色+px 颜色的填充,与半径没有关系
2. 颜色+ % 这里的位置是半径的百分比
-
重复渐变:
1. 重复线性:background-image:repeating-linear-gradient(方向,色标1,色标2......)
2. 重复径向:background-image:repeating-radia-gradient(半径 at 圆心,色标1,色标2.....)
-
浏览器兼容问题(ie8.0以下不兼容)【阴影也需要做兼容】
1. 为了兼容低版本浏览器写的css代码,叫做css hack
2. 渐变属性,兼容低版本浏览器的写法:
① 添加前缀:chrome/safari:-webkit-、firefox:-moz-、IE:-ms-、opera:-o-
② 线性渐变的方向,发生了改变,不加to
(top / right / bottom / left
),写起点
文本格式化
-
字体属性:
1. 字体大小:font-size
2. 字体系列:font-family
:PC中字体库里有的字体,如果字体名称带空格,必须加" ",多个字体名称,使用 , 隔开
3. 字体加粗:font-weight:normal(400) / lighter(细的) / bold(加粗 700) / boldr(更粗) / 无单位并且是100整倍数的数值,最大值1000
4. 字体样式:font-style:italic(斜体) / normal
5. 小型大写字母:font-variant:small-caps
6. 简写:font:style variant weight size family
7. 最简写法:font:size family
-
文本属性:
1. 文本颜色:color
2. 文本对齐方式:text-align:left / center / right / justify(两端对齐)
3.
注意:
- 一个元素写了
text-align
属性,控制的是内部文本- 元素本身想要居中对齐,则设置
margin:0 auto
text-align
对是行内元素的子元素都生效- 子元素如果是块级元素,只会继承
text-align
,而块级元素本身不会居中
- 行高:
line-height
(以px为单位的数字)
特性:
- 如果行高的数值大于字体的大小,那么该行文本将在指定的行高内部,成垂直居中的方式显示
- 行高一般设置成与容器高度相同的值,确保文字在容器内垂直居中下显示。
- 如果文字发生折行,则不建议使用行高进行垂直居中
- 文本的线条修饰
text-decoration:none(默认)【a标签去除下划线】 / underline(下划线) / overline(上划线) / line-through(删除线)
- 首行缩进
text-indent
:以px为单位的数字 - 文本阴影
text-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊距离) color(阴影颜色)
表格
- 表格的常用样式:
1. table:尺寸、边框(设置table边框只设置最外一圈边框)、背景、字体、文本、内外边距
2. td / th:尺寸、边框、背景、文字、文本、内边距都会起作用,外边距无效,vertical-align(设置单元格内部文本对齐方式):top / bottom / middle(居中)
【对tr也生效】
3. table特殊的显示方式 :【行内元素、块级元素、行内块、table】
- table是一种特殊的表现方式:
单元格内容较多,尺寸较小,单元格大小以内容为准
单元格内容较少,尺寸较大,单元格大小以尺寸为准
table在浏览器的渲染方式:先加载到浏览器内存中,然后一次性画在页面上
-
表格的特有属性:
① 边框的合并和分离:border-collapse:separate(默认值,边框分离状态) / collapse(边框合并状态)
② 边框的边距:border-spacing:5px(x轴边距) 10pxsd(y轴边距)
(前提:边框处于分离状态)
③ 表格的标题:<caption></caption>
调整标题位置:
caption-side:top / bottom
④ 设置表格的显示规则:
table-layout:auto(默认,自动表格布局。td大小以内容和尺寸较大的为准) / fixed(固定表格布局。td大小以尺寸为准)
表格自动布局和固定布局的区别:
自动布局 固定布局 单元格大小会自动适应内容 单元格取决于设置的值 表格复杂时,加载速度较慢 任何情况下都是逐行渲染,渲染速度快 自动布局比较灵活 固定的表格布局不灵活 适用于不确定每一列大小,并且不复杂的表格 适用于明确知道每一列大小的表格
定位
- 定位分类:
1. 普通流定位(默认文档流)
2. 浮动定位
3. 相对定位
4. 绝对定位
5. 固定定位
普通流定位
① 每个元素在页面都有自己的空间
② 每个元素都是从父元素左上角开始渲染
③ 行内元素和行内块在同一行显示,从左往右,一行放不下就折行
④ 块级元素独占一行,从上往下排列
浮动定位
① 让块级元素横向显示的时候使用浮动定位
② `float: left / right / none(默认值) / inherit`
>- 浮动的特点:
> 1. 元素一旦浮动,该元素脱离文档流(不占页面空间)
> 2. 浮动元素会在当前行,靠左 / 右,停靠在父元素的边缘,或者是其他已浮动的元素的边缘
> 3. 父元素横向显示不下所有的浮动元素时,显示不下的部分会自动换行,换行默认去距离当前行最近的位置
> 4. 浮动解决多个块级元素横向在一行显示的问题
③ 浮动元素引发的特殊情况:
1. 浮动元素的占位问题:
当父元素一行显示不下所有浮动元素时,最后显示不下会换行,默认去离当前最近的一行。
但是,已浮动的元素会根据自己的浮动方向占据位置,导致被挤下去的元素,会躲开被占据的位置,在更下方显示。
2. 元素一旦浮动,如果元素没有定义宽度,元素的宽度靠内容撑开
3. 元素一旦脱离文档流,会变成块级元素,尺寸、垂直外边距都生效
4. 文本,行内元素,行内块元素,是不会被任何浮动元素压在下面的,而是会环绕着浮动元素进行显示
脱离文档流,意味着:
- 不占页面空间
- 后续元素上前补位
- 变成块级元素
-
清除浮动效果
1. 概念:前面的浮动元素脱离文档流,后面的元素会上前补位,设置了清除浮动后,就不需要上前补位
2.clear:left / right / both / none
-
高度坍塌
- 父元素如果不设置高度,高度默认是内部内容撑起来的。
如果内部所有元素都浮动了,那么父元素认为内部就没有内容了,所以高度为0 - 解决方案:
① 给父元素设置高度,弊端是很多时候不知道确切高度
② 给父元素设置浮动,弊端是父元素的兄弟元素会受到影响
③ 正确解决方案:
在最后一个子元素的后面追加一个块级元素,
给这个元素设置clear:both
,
那么这元素停留在文档流中,父元素的高可以找到它。
这个元素不会被前面的浮动元素覆盖。
这个元素不写宽高,没有内容,宽度默认是父级的100%,高度为0,不影响父级高度
- 父元素如果不设置高度,高度默认是内部内容撑起来的。
显示
显示方式:
- 决定元素在网页中的表现形式(块级、行内、行内块、table)
display
:
①block
:元素以块级的方式显示
②inline
:元素以行内的方式显示
③inline-block
:元素以行内块的方式显示
④table
:元素以table的方式显示
⑤none
:元素隐藏,脱离文档流,不占位置
显示效果
visibility
①visible
:默认值,可见
②hidden
:隐藏
visibility:hidden
和display:none
的区别:
display:none
脱离文档流,后续元素上前补位
visibility:hidden
不脱离文档流,虽然看不到,但是还占位置
透明度
opacity
:
取值:0-1,1是不透明,0是全透明
opacity
和rgba()
的区别:
opacity
:作用于元素,只要跟颜色相关的属性都会改变透明度
rgba()
:只会修改当前颜色的透明度
垂直对齐方式
vertical-align
:一般用于table(top / middle / bottom)
设置table中内容的对齐方式 ,和image(top / middle / bottom / baseline[基线,默认值])
设置图片和图片前后文字的垂直对齐方式,一般项目中通常会将所有图片与文字垂直对齐方式,更改为非基线对齐
光标
cursor
①default
:箭头
②pointer(小手)/crosshair(十字)/text(文本输入I)/wait(加载圈)/help(箭头带问号)
列表的属性
list-style-type:disc(默认) / none(去掉标识项) / circle(空心圆) / square(方块)
list-style-image:url(图片路径)
图片太大会加不进去list-style-position:outside(默认值,在内边距里) / inside
列表项的位置,ul默认自带上下外边距(16px),自带左右内边距(40px)- 简写:
list-style:type/url position
,最简:list-style:none
定位
- 分为相对定位、绝对定位、固定定位
- 属性
position
- 取值:
1.static
:固定定位
2.relative
:相对定位
3.absolute
:绝对定位
4.fixed
:固定定位 - 当一个元素设置了position属性,并且取值为
relative / absolute / fixed
其中一种时,这个元素被称为已定位元素,已定位元素解锁了4个偏移属性top / bottom / left / right
相对定位
position:relative
;配合偏移属性实现定位- 相对定位未脱离文档流
- 如果相对定位不写偏移属性,效果和不写定位是一样的,不影响任何布局,只是把这个元素变成了已定位元素
- 相对定位是相对自己原来的位置偏移某个距离
- 使用场合
1. 元素本身位置微调,类似margin
2. 一般作为绝对定位的祖先级元素
绝对定位
position:absolute
;配合偏移属性实现定位- 绝对定位脱离文档流
- 绝对定位元素,如果祖先元素没有已定位元素,那么就相对于body左上角进行偏移
- 绝对定位元素,会相对于离自己最近的、祖先级、已定位元素的左上角进行偏移
- 绝对定位由于脱离文档流,产生以下效果
1. 页面不占据空间,后续元素上前补位
2. 绝对定位的元素,会变成块级元素
3. 没有写宽度的元素,发生绝对定位后,靠内容撑开
固定定位
position:fixed
,配合偏移属性使用- 将元素固定在页面上某个位置,不会随着滚动条滚动,发生变化一直固定在页面的可视区域
- 特点:脱离文档流,位置始终相对body初始化
堆叠顺序
- 默认的堆叠顺序,html元素后写的堆叠顺序高
- 浮动和定位的堆叠顺序不是同一个体系,尽量避免在一起处理
- 手动调整堆叠:
z-index:100
,理论上最大值65536 - 堆叠顺序对父子级关系无效,子元素永远在父元素上
- 只有已定位元素可以设置堆叠顺序