CSS选择器的权重
优先级:
行内样式 >ID选择器 > 类选择器 > 元素选择器 > 通用选择器
权重的计算为相加比大小
CSS边框
边框样式
border-style
属性指定了要显示什么样的边框
值:
dotted:定义一个点状的边框
dashed:定义一个虚线边框
solid:定义一个实线边框
double:定义一个双倍的边框
none:定义无边框
hidden:定义一个隐藏的边框
border-style: hidden>
border-style: solid>
border-style: none
table {
border-collapse: collapse; 让表格线细一些
}
控制单独一条的边框线,可以在border-style
中间添加一个表示方位的词
如:
border-right-style:
border-style
有简写方法,有四种写法:
第一种写法:四个值,分别代表上边、右边、下边、左边的边框样式,从顶部开始按照顺时针方向来设置值
第二种写法:三个值,分别代表上边、左右边、下边的边框样式
第三种写法:两个值,分别表示上下边、左右边的边框样式
第四种写法:一个值,表示四个边框的样式
边框宽度
border-width
属性用于设置四个边框的宽度
以 px、em等为单位
或者:
thin、medium、thick————薄、中、厚
边框宽度一样有简写方法,与上面一样
边框颜色
border-color
属性用于设置四个边框的颜色
值为:颜色名称、十六进制颜色值、RGB颜色值
也可以通过transparent
来设置透明
边框颜色一样有简写方法,与上面一样
和字体 font 属性一样,边框也可以使用速记属性。
如:boder: 5px solid red
border-style
必须要有
单独边简写一样
如: border-top
CSS列表
应用list-style-type
属性可以设置不同的列表项标记
值有:
circle 空心圆点
disc 实心圆点
square 小方点
decimal 数字
upper-roman 大写罗马字母
lower-alpha 小写字母none 去掉列表标记
列表属性也可以简写:
list-style
被用来在一个声明中设置所有的列表属性
例如:
list-style: square inside url(./purple.gif);
按照list-style-type---list-style-position---list-style-image 顺序书写
如果有值缺省,就按照默认值
list-style-image
属性指定了一个图像作为列表项的标记
属性值为: url()
list-style-image: url(背景图片路径);
list-style-position
属性来实现标记的位置
值为:
outside
表示标记在列表项之外
inside
表示标记在列表项内部
还可以改变颜色来修饰列表
padding
和margin
属性,给元素添加内外边距
* {
padding: 0;
margin: 0;
用来消除元素默认的内外边距
}
CSS背景属性
给背景添加图片
可以通过background-image
属性实现
值为: url()
添加图片之后,会以平铺的方式展示
如果不想这样,需要使用一个新的背景属性background-repeat
取值为:no-repeat
如果要调整图片位置,需要用background-position
有两个值:
第一个值表示在水平方向上的对齐方式
left
、center
、rigt
第二个值表示在垂直方向上的对齐方式top
、center
、bottom
放上文字之后,背景图片会随着滚动,如果想到文字滚动,背景不动
需要使用background-attachment
属性
用来声明容器里的背景图片与内容的依附方式
fixed :图片固定
scroll:同时滚动
修改背景颜色一般用background-color
有时候颜色深,可以让背景变透明一些实现颜色变浅
background-color:rgba()
值为0-1之间的数字,0为完全透明,1为完全不透明
比如background-color:rgba(0,0,0,0.5) 表示黑色半透明
可以使用background
来指定所有的背景属性,可以把body
的全部背景属性
合并在background
属性里
如:
background:rgba(0,255,0,0.1) url(./xxxx.png) no-repeat right bottom fixed;
CSS精灵图
通过background-position
调节位置
值为:110px 45px 这种
背景滚动视觉差
使用
background-attachment:
fixed; 样式
实现了背景的固定
background-size: cover;
会使背景铺满整个容器
所以可以这样实现
.box1 {
background-color: red;
background-repeat: no-repeat;
background-image: url(./01.png);
background-size: cover;
background-attachment: fixed;
最后一步是让图片固定,让下面的额图片上来
如果没有这一步,无法实现视觉差效果
}
这样代码太乱,可以直接简写
.box1 {
background: fixed no-repeat url(./03.png) 0px 0px/cover;
}
其中,background-size: cover;
在简写中
在它的前面必须添加背景图片位置,即使位置不调整,也需要添加 0px 0px这一对值
0px 0px/cover
斜杠前是background-position
的属性
CSS轮廓
CSS轮廓属性有:
outline-style:轮廓样式
outline-color:轮廓颜色
outline-width:轮廓宽度
outline-offset:轮廓偏移
outline:轮廓简写
首先是outline-style
值有:
dotted - 定义一个点状轮廓
dashed - 定义一个虚线轮廓
solid - 定义一个实线轮廓
double - 定义一个双线轮廓
none - 表示无轮廓
hidden - 定义一个隐藏的轮廓
outline-width
轮廓线宽度属性
值有:
thin:一般为 1 px
medium:一般为 3 px
thick :一般为 5 px
一个特定的尺寸 : 以 px、em 为单位
轮廓是在元素的边框之外绘制的,并且可能与其他内容重叠
它不是元素尺寸的一部分,元素的总宽度和高度不受轮廓宽度的影响
outline-color
轮廓线颜色属性
值为:颜色名称,十六进制,rgb
outline
简写:
outline: thin double red;
其中outline-style必须设置
ouline-offset
用来设置轮廓和元素之间的空隙
CSS边距和margin塌陷
用来在元素周围创造空间,也就是控制元素边框外的距离
也就是margin
属性,控制外边距
属性
值有:
auto:浏览器自动计算的边距
length :以 px、pt(绝对单位,磅,1磅=0.376毫米)、cm 等为单位指定边距
% : 以父元素宽度的百分比来指定边距
length
和%
可以取负值,表示减少外边距的空间大小
为了简化代码,可以在一个margin属性中指定所有的边距属性
margin: 10px 20px 30px 40px;
表示从margin-top开始按顺时针方向的四个值
margin: 10px 20px 30px;
表示上面边距为10px,左右边距为20px,下边距为30px 的三个值
margin: 10px 20px;
表示上下边距为10px,左右边距为20px 的两个值
margin: 10px;
表示上下左右边距均为10px
与border
很相似
margin: auto;
使元素在其父元素内或其容器内水平居中
该元素会占用指定的宽度,剩余的空间将在左右边距之间平分
在两个容器的邻接处,有时会出现边距塌陷的问题,也称之为 margin 塌陷
一般发生在相邻块元素垂直边距,和嵌套块元素垂直边距邻接的时候
比如这个元素的顶部边距和这个元素的底部边距,会被折叠成一个单一的边距
这个边距等于两个边距中最大的那个
这种情况不会发生在左右边距上,只会发生在顶部和底部的边距上
除了相邻块元素外,嵌套块元素垂直边距也会塌陷
两个嵌套关系的块元素,有时父元素的上边距会与子元素的上边距,也会发生合并,合并后的边距也为两者中的较大的值
CSS填充和宽高
CSS填充属性用于在一个元素的内容周围产生空间
也就是边框内到内容外,之间的距离
也就是padding
属性,设置内填充
所有的padding
值为:
length : 以 px、pt、cm 等为单位指定填充
%: 以父元素宽度的百分比来指定填充
length
和%
可以取负值,表示减少外边距的空间大小
简写同CSS边距(margin)
一样
如果一个元素有指定的宽度,那么加在该元素上的填充
就会加到该元素的总宽度上
高度和宽度属性不包括margin
、border
和padding
区域
只是用来定义元素的内容尺寸
值有:
auto:浏览器会计算出高度和宽度
length : 以 px、pt、cm 等为单位定义高度和宽度
% : 以父元素宽度的百分比来定义高度和宽度
initial : 将高度和宽度设置为默认值,实际上就是 auto 了。
width 和height 属性是不包含内填充、边框和外边距的
CSS盒模型
标准盒模型
CSS 盒模型本质上是一个包裹每个 HTML 元素的盒子
包含margin
、border
、padding
和content
四个部分
浏览器就是通过盒模型来计算元素在网页中占据的空间大小的
content 表示盒子的内容,包含文本、图像等
Padding 表示填充内容周围的一个区域,它是透明的
Border 表示围绕填充和内容的边框
Margin 表示边框以外的区域,它是透明的
计算盒子的宽度和高度,有两个公式;
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边 + 右边 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填 + 上边 + 下边 + 上边距 + 下边距
当应用 CSS 设置一个元素的width
和height
属性时,只是设置了元素内容区域的宽度和高度,要计算一个元素的完整尺寸,必须要加上填充、边框和边距
怪异盒模型
给元素声明box-sizing
属性
取值为border-box
这个元素就按照怪异盒模型来呈现大小了
所以怪异盒模型的公式为:
盒子的宽度 = CSS样式设置的 width 值 + 左边距 + 右边距
盒子的高度 = CSS样式设置的 height 值 + 左边距 + 右边距
box-sizing
属性还有一个值content-box
就是用来触发元素的标准盒模型,这也是元素盒模型的默认值
如果没有给元素设置box-sizing
属性,容器的大小就会按照标准盒模型来计算
CSS布局之显示属性
display
是控制布局最重要的 CSS 属性
它指定了一个元素是否显示以及如何显示
每个 HTML 元素都有一个默认的显示值元素类型不同,默认的显示值也不同
大多数元素的默认显示值是
block:元素显示为块级元素
inline:元素显示为行内元素
none: 元素显示隐藏元素
span
元素和a
元素宽度为链接文本的长度
none
会使盒子隐藏,并且占据的控件也消失
样式visibility: hidden
也会隐藏一个元素,但是该元素仍将占用它隐藏前相同的空间
也可以通过visibility: visible
样式来重新显示盒子
这在应用JavaScript 动态控制元素显示和隐藏时非常有用
CSS布局之元素类型
行内元素
行内元素不能设置宽高样式
行内元素可以设置边框线样式
行内元素可以设置内填充样式
行内元素可以设置左右方向的外边距样式
块元素
给块元素设置宽高、边框线、内填充、外边距样式,都是有效的
块元素虽然可以设置盒模型的全部样式
但是每个块元素会独占一行
如果想让块元素在一列显示
display: inline-block;
样式可以满足我们的愿望
它具备inline
和block
两种显示类型的特点
既可以给元素设置宽高,又可以让它们在一行上显示
这里需要声明:
设置一个元素的display
属性只能改变该元素的显示方式
而不能真正的改变html
元素的类型
比如,一个具有display: inline;
的块元素
还是不允许在它的内部有其他块元素。
嵌套规则
规则一:块元素可以包含行内元素或某些块元素,但行内元素却不能包含块元素,它只能包含其他的行内元素。
规则二:块元素不能放在p元素里面。
规则三:有几个特殊的块级元素只能包含行内元素,不能再包含块元素,这几个特殊的元素是:h1、h2、h3、h4、h5、h6、p、dt。
规则四:块级元素一般与块级元素并列、行内元素一般与行内元素并列。
CSS布局之溢出处理
通过CSS的溢出样式也能实现iframe
功能
CSS 的overflow
属性
指定了当一个元素的内容太大,无法容纳在指定区域时,是否要裁剪内容或添加滚动条
值有:
visible: 默认。溢出的内容没有被剪掉,内容会在元素的框外呈现
hidden: 溢出的内容被剪切,其余的内容将不可见
scroll : 溢出的内容被剪掉了,并且增加了一个滚动条来查看其余的内容
auto: 类似于 scroll,但它只在必要时才添加滚动条
如果只希望某一个方向有滚动条,可以采用overflow-x
和overflow-y
两个样式属性
它们指定的是否只在水平方向(x)或垂直方向(y)上滚动
white-space: nowrap;
让文本在一行上显示,并且溢出的部分隐藏
给 h1 再添加一个text-overflow: ellipsis;
溢出部分变成了省略号
CSS布局之浮动基础
容器浮动以后会脱离标准文档流,相当于飘起来了,不占据原来的位置
浮动样式的属性名为float
值有:
left : 左侧浮动
right : 右侧浮动
none : 不浮动
浮动只能让容器在当前所在行左侧或右侧排列
实现多个容器横向排列,只需要给所有的容器添加浮动样式即可
CSS布局之浮动清理
在三个浮动元素的外层,再包裹一个父元素
这样这个父元素和后面的元素就不存在浮动关系了
对于普通元素来讲,子元素的大小是可以将父元素撑开的
但对于容器里的浮动元素,它们是不占据空间的,也就不能将父元素撑开了
给父元素设置一个边框,会只显示上边框,给父元素设置一个高度,就能完整显示了
如果不想手动设置这个高度,有两种常见的解决方法,来清除浮动的影响:
第一种,为了使父元素的高度保持正常,我们给父元素增加一个样式
overflow:auto
,含义是:对于超出边界的元素,父元素可以做自动的调整,这样一来父元素的高度就变得正常了第二种使用clear样式属性,
clear
这个样式叫做清除浮动
,当我们不希望当前元素受到前面浮动元素影响的时候,就给当前元素增加 clear 这个样式,谁不希望受到影响谁就增加 clear 样式
clear 属性常见的值有三个:
分别是left
、right
、both
当 clear 的值为 left 的时候,表示当前元素不受到左浮动的影响
当 right 表示当前元素不受到右浮动的影响。
当 both 表示当前元素既不受到左浮动影响也不受到右浮动影响。
CSS布局之定位
position
属性指定了一个元素定位方式
它有五个不同的类型值:
static:静态定位
relative: 相对定位
fixed: 固定定位
absolute: 绝对定位
sticky: 粘性定位
给元素设置了position
属性后
再使用 top、bottom、left 和 right 属性
对元素进行定位
.box {
position: sticky;
top: 100px;
bottom: 10px;
left: 20px;
right: 5px;
}
相对定位
relative
position: relative 相对样式需要配合left、top、right、bottom这些定位属性才能生效。
relative 相对的是容器自身的屏幕坐标 0,0 点。
容器位置发生位移后,原来占据的空间依然保留。
默认会覆盖没有定位的容器。
.box2 {
background-color: skyblue;
/* 相对定位 */
position: relative;
left: 50px;
top: 50px;
}
绝对定位
绝对定位的元素会脱离文档流。
绝对定位的参照点为,有定位设置的离他最近的祖先元素的 0,0 点坐标。
绝对定位的容器默认会覆盖没有定位的容器
绝对定位参照父元素和body定位
.box2 {
/* 绝对定位 */
position: absolute;
left: 50px;
top: 50px;
}
在这里
absolute 绝对的是容器自身的屏幕坐标 0,0 点。
可以改变其0,0点位置
.container {
display: inline-block;
margin-top: 100px;
margin-left: 100px;
position: relative; #这里设置一个positon
}
static为静态定位,
设置position:static 无法改变坐标
固定定位
直接参照千古图文吧
懒得做笔记了
CSS布局之定位的堆叠顺序
z-index
属性:
表示谁压着谁。数值大的压盖住数值小的。
特性:
(1)属性值大的位于上层,属性值小的位于下层。
(2)z-index值没有单位,就是一个正整数。默认的z-index值是0。
(3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。
(4)只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用。
(5)从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。
容器的堆叠顺序的计算,是先比较同级容器的。子容器是不会超出父容器的堆叠顺序的。