CSS的含义
- 描述
- HTML:网页结构的表达
- CSS:网页样式的修饰
- JS:网页样式的互动
CSS:层叠样式表
- 作用:
- 修饰页面的标签
- 例如:颜色,大小,间距
- 对页面的元素进行定位和布局
- 修饰页面的标签
- 含义:所谓层叠,可以将网页想象成一层一层的结构,层次高的样式会覆盖层次低的样式,我们的CSS可以为每一层设置不同的样式。处于文档的最底层被称为文档流。元素默认都在文档流中放置。
CSS引入方式
-
行内(内联)样式:样式写在标签内的style中
范围:当前标签,不复用
<p style='color:red'> qqq </p>
-
内部样式表:样式写在head中的style标签中
范围:当前页面
<style> p{ color:red; } </style>
-
外部样式表:将css编写至外部的css文件中,然后通过link标签引入外部的css样式。(结构和表现分离,有助于后期维护)
范围:引入的页面
<!-- 外部css文件 --> p{ color:red; } <!-- html文件调用 --> <link rel='stylesheet' href='./css.css' type='text/css'> <!-- stylesheet:定义一个外部加载的样式表 -->
CSS语法
-
语法:
选择器 + 声明块
选择器:通过选择器可以找到页面需要修饰的元素
声明块:
由{} + 样式
样式:样式名 : 样式值;
-
CSS注释:
/*
注释
*/
## 选择器
元素选择器
-
通过元素选择器可以选中页面中所有的元素
-
语法:
元素{
样式名称 : 值:
}
p{
color:red;
}
id选择器
-
通过元素的id属性可以选中唯一的元素
-
语法:
#id值{
样式名称 : 值:
}
#zhi{
color:red;
}
······
<p id='zhi'>1</p>
class(类)选择器
-
通过元素的class属性可以选中一组元素
-
语法:
.class值{
样式名称 : 值:
}
.zhi{
color:red;
}
.c2{
background-color:pink;
}
......
<p class='zhi'>1</p>
<p class='zhi'>2</p>
<p class='zhi c2'>3</p>
选择器分组(并集选择器)
-
使用选择器分组可以同时选择多个选择器
-
语法:
选择器1,选择器2,······选择器n{
样式名称 : 值:
}
#p1,.p2,p{
background-color:pink;
}
通配符选择器
-
选中页面中所有元素
-
语法:
*{
样式名称 : 值:
}
*{
margin:0;
border:0;
}
并集选择器
-
选中同时符合多个条件的元素
-
语法:
选择器1选择器2······选择器n{
样式名称 : 值:
}
div.d1{
font-size:40px;
}
长度单位
- 像素:px
- 百分比:%
- em
-
像素
- 屏幕中每个发光的小点称为像素
- 显示越清晰,像素越小,凡之像素越大
- 我们平时css样式设置的像素称为css像素,屏幕本身称为物理像素。
- 默认物理像素和css像素1:1显示
-
百分比 %
设置百分比是以父元素的样式来计算
使用百分比能够同比例变化,父元素变化,子元素也变化
创建自适应页面时常常使用
-
em
em和%比类似,相对于当前字体的大小来计算
1em = 1个font-size的值
使用em时,当字体大小发生改变,则em也随之改变
如果设置的样式和字体相关,就可以使用em单位
颜色单位
- 颜色的设置
- 颜色单词
- RGB读法
- 在CSS中可以直接使用颜色单词表示不同的颜色
- 例如:red、blue、green、pink
- 使用RGB表示法
- 通过RGB三种颜色的配法,配出不同的颜色。
- rgb(red=值,green=值,blue=值)
- 值:0255,%(最终也会转化为0255)
- rgba(red=值,green=值,blue=值,透明度)
- 使用16进制表示法:
- #FF0000(原理与RGB表示法类似)
*{
color:rgb(155,0,12)
color:rgba(155,0,12,0.3)
color:#FF0000
}
字体样式
- 字体颜色
- 字体系类
- 字体分类
- serif:衬线字体(体现在文字由毛笔细边的效果)
- sans-serif:非衬线字体
- monospace:等宽字体
- cursive:草书字体
- fantasy:虚幻字体
- 字体粗细
- font-weight:(weight 重量)
- bold:加粗
- bolder:更粗的字体
- lighter:定义更细的字体
- 也可以设置100~900的值(浏览器中没有那么多级别的字体,所以需要达到效果,差别大才有效果)
- font-weight:(weight 重量)
- 字体风格
- 设置小型大写字母:font-variant :
- 可选值:
- normal 正常显示,默认值
- small-caps 文本以大写较小的方式显示
- 可选值:
- 设置小型大写字母:font-variant :
设置字体颜色
color:red
设置字体大小
font-size:50px
设置字体
font-family:宋体 微软雅黑;
设置字体风格
font-style:normal/italic/oblique(正常/斜体/倾斜)
设置字体粗细
font-weight:bold
文本以大写较小的方式显示
font-variant:small-caps;
字体设置的简写
font:font-style,font-weight,font-size/line-height,font-family
font:20px '华为云彩';
简写时:font-size和font-family都必须写
文本样式
text-transform:设置文本内容的大小写
- 可选值:
- none:默认效果
- capitalize:单词首字母大写
- uppercase:所有单词大写
- lowercase:所有单词小写
text-decoration:设置文本的修饰
- 可选值:
- none
- underline:下划线
- overline:上划线
- line-through:删除线
letter-spacing:设置字符之间的间距,多用于中文
word-spacing:设置单词之间的间距,多用于英文
text-align:文本对齐方式
- 可选值:
- left 左(默认)
- right 右
- center
- justify 两端对齐
text-indent:设置首行缩进
text-align-last: justify; 文本在标签内平均分布
- 正值:向右移动
- 负值:向左移动
行高
- css没有直接提供行间距的样式
- 可以间接的通过行高来设置行间距,行高越大,行间距越大
- 行间距使用line-height设置行高来体现
- 网页中的文本内容实际上有看不见的一行一行的线,在字体偏下位置,线与线之间的距离称为行高
- 文字会默认在行高中的垂直方向显示
- 行间距 = 行高 - 字体大小
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t4pSaNZl-1628080676253)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1626685143643.png)]
font-size:20px;
line-height:10px;
/* 也可以设置百分比,相对于文字大小进行计算 */
line-height:100%;
/* 也可以设置倍数,相对于文字大小进行计算 */
line-height:1.5;
font:30px(字体大小)/50px(行高) '微软雅黑';
垂直方向居中
- line-height : 父元素高度
- 对于单行文本,可以将文本高度设置为与父元素高度相同
- 设置行高,且父元素高度相同
- vertical-align:middle
- vertical-align:垂直方向对齐方式
文本阴影
text-shadow:设置文本阴影
- 语法:
- text-shadow : 阴影颜色 , X轴偏移量 , Y轴偏移量 , 阴影的模糊半径;
- X为正:阴影右移
- Y为正:阴影下移
伪类样式
-
专门表示元素的一种特殊状态
-
比如:访问过的链接、获取/失去焦点的状态
:link{} 未访问的链接
:visited{} 已访问
:hover{} 鼠标悬浮停留
:active{} 选中的链接
a:hover{
text-decoration:none;
color:red;
}
列表样式
- list-style-type:;
- 可选值:
- none
- disc:默认,实心圆
- circle:空心圆
- 可选值:
- list-style-image:url();------将图片设置为列表项的标记
- list-style-position:设置列表项放置的位置
- 可选值
- outeside:列表项放置在文本之外(默认值)
- inside:列表项放置在文本之内
- 可选值
li{
height:30px;
line-height:30px;
/* 去掉实心点*/
list-style-type:none;
/* 添加图片 */
list-style-image:url('./');
/* 设置边框 */
border:;
/* 设置列表项放置的位置 */
list-style-position:inside;
/* 简写属性 */
list-style:none inside url('./');
}
list:列表
position:位置
背景样式
- 背景颜色 (在元素的最底层)
- background-color:颜色;
- 背景图片
- background-image:url(‘./’)
- 如果背景图大于元素,则显示图片的左上角
- 如果背景图片和元素一样大,则图片全部显示
- 如果背景图片比元素小,则图片默认平铺
- 图片平铺
- background-repeat:;
- 值:
- repeat------平铺
- no-repeat------不平铺
- repeat-x------x轴平铺
- repeat-y------y轴平铺
- 值:
- background-repeat:;
- 设置背景图片位置
- 使用两个关键字(如果只设置一个值,则第二个值默认center):
- top、left、right、bottom、center
- 使用单位值
- background-position:x y;
- x:水平偏移量
- y:垂直偏移量
- 使用百分比
- background-position:x% y%;
- 根据当前元素的高设置百分比
- 默认在元素的左上角
- 使用两个关键字(如果只设置一个值,则第二个值默认center):
- 设置背景图片大小
- background-size:;
- 值:
- auto
- length:设置宽高
- per:百分比
- cover:整个背景放大,填充整个元素
- contain:保持图片比例,将图片放大。
- 值:
- background-size:;
- 设置背景图片是否随滚动条一起滚动
- background-attachment:;
- fixed------图片不随滚动条移动
- scroll------图片随滚动条移动
/* 背景颜色 */
background-color:颜色;
/* 背景图片 */
background-image:url('./')
/* 设置背景重复效果 */
background-repeat:repate;
background-repeat:no-repate;
background-repeat:repate-x;
background-repeat:repate-y;
/* 设置背景图片位置 */
background-position:left center;
background-position:10px 10px;
background-position:10% 10%;
/* 设置背景图片大小 */
background-size:auto;
background-size:100px 200px;
background-size:50% 50%;
/* 设置背景图片是否随滚动条一起滚动 */
background-attachment:fixed;
/* 简写 */
background:;
线性渐变
/* 设计背景的线性渐变 */
background:linear-gradient(to top,orange,blue);
background-image:linear-gradient(to bottom,orange,blue,yello)
background-image:linear-gradient(270deg,orange,blue,yello)
子元素和后代选择器
在HTML中元素之间存在层次关系
元素之间的关系:
- 子父关系(特殊的祖先元素)
- 兄弟关系
- 祖先元素
/* 后代选择器 */
作用:指定元素的所有后代元素
语法:祖先元素 +空格+ 后代元素
body p{
/*注意选择器是否有空格,如果有则为后代选择器,如果没有就是交集选择器*/
}
/* 子元素选择器 */
语法:父元素 > 子元素
body > p{
}
伪类选择器
a:link{
}
a:visited{
/*由于用户的隐私问题visitide只能设置颜色*/
}
a:hover{
}
a:active{
}
/*hover和active可以为其他元素设置*/
p:hover{
}
p:active{
}
input:focus{
/*:focus 获取焦点伪类*/
}
前缀:
-ms:IE浏览器
-moz:firfox浏览器
-webkit:Googlr浏览器
p::selection{
/* 选中伪元素 */
}
伪元素选择器
伪元素表示的是标签的内容
伪类表示的是标签的状态
p::first-letter{
/* 表示元素的第一个字符,仅适用于块级元素 */
}
P::first-line{
/* 表示元素的首行,仅适用于块级元素 */
}
p::before{
/* ::before 表示在元素的最前面
content 表示添加的内容
*/
content:'a'
}
p::after{
/* 表示在元素的最后 */
}
属性选择器
语法:
- [属性名称]:选取含有该属性名称的选择器
- [属性名=‘属性值’]:选取含有指定属性值的元素
- [属性名^=‘属性值’]:选取含有指定值开头的样式
- [属性名$=‘属性值’]:选取含有指定值结尾的样式
- [属性名*=‘属性值’]:选取含有指定值的样式
p[title]{
}
p[title='abc']{
}
p[title^='a']{
/* 选取含有指定属性值开头的元素 */
}
p[title$='c']{
/* 选取含有指定值结尾的元素 */
}
p[title*='b']{
/* 选取含有指定值的元素 */
}
子元素伪类选择器
查找顺序:
1. 位置(先)→类型(后)
- 先找第一个元素→再进行元素匹配
:first-child------选取第一个子元素
:last-child------选取最后一个子元素
:nth-child(n)------选取第n个子元素(n从1开始)
:first-of-type------同一层级兄弟元素中其类型的第一个元素。
:last-of-type------同一层级兄弟元素中其类型的第一个元素。
p:first-child{
/* 先找到所有层级的第一个子元素,再判断这些子元素的类型是否符合 */
}
body>p:last-child{
/* 先找到body所在层级的最后一个子元素,再判断这些子元素的类型是否符合 */
}
兄弟元素选择器
/* 后一个兄弟选择器 */
span + p{
/* 选择span后一个同一层级p元素 */
}
/* 兄弟选择器 */
span~p{
/* 选择span后的所有同一层级p元素 */
}
否定伪类选择器
可以从已经选择的元素中剔除某些元素
语法:
选择器 : not(选择器){
}
p:not(.p1){
}
样式的继承
- 祖先元素的样式,后代元素都有可能继承
- 不是所有的样式都可以被继承
- 背景
- 边框
- 定位
盒子模型
- 页面中的任何元素都可以认为是一个四边形的盒子,称为盒子模型
- 如何摆放盒子的位置被称为布局
-
盒子模型的构成
内容:content 内边距:padding 边框:border 外边距:margin
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DrQhcKWC-1628080676255)(C:\Users\lenovo\Desktop\图片\盒子.png)]
-
content、padding、border影响可视区域大小(盒子的可见区域 = 内容区+内边距+边框)
-
margin改变盒子的位置
盒子边框
width、height设置盒子内容区域的大小
-
分别设置边框样式,需要三个同时设置才有效果:
- border-width:边框宽度
- border-color:边框颜色
- border-style:边框样式
-
border-radius:圆角
-
设置边框的宽度、颜色
-
四个值:(上右下左,顺时针)
-
border-width:10px,20px,30px,40px; border-color:red,black,pink,yellow;
-
三个值(上、左右、下)
-
两个值(上下、左右)
-
一个值
-
css也提供了四个不同的取值方向
-
top、right、bottom、left
-
border-top-width:20px; border-top-color:pink;
-
-
-
边框样式
- 值
- none
- solid 实线
- dotted 点状线
- dashed 虚线
- 值
/* 简写,三个属性没有顺序 */
F:2px,solid,red;
边框合并
border-collapse: collapse;
盒子的内边距
- 内边距影响可见框的大小,元素的背景延伸到内边距
- 盒子的可见区域大小由内容区域、内边距、边框共同决定
- 可见区域大小
1. 可见宽:border-left-weight+padding-left+内容+padding-right+border-right-weight
2. 可见高:border-top-weight+padding-top+内容+padding-bottom+border-bottom-weight
- padding的设置方法和border一样
padding:10px,20px,30px,40px;
padding-left:100px;
- 如果存在子元素,子元素设置为百分比,则根据父元素的width和height进行计算,padding和border不计入当中。
盒子外边距
- 外边距:盒子之间的距离
- 不影响盒子本身的大小,但会影响盒子的位置
- 盒子的默认位置为元素的左上角
- 设置margin-top、margin-left:移动盒子的位置
- 设置margin-left和margin-bottom会改变兄弟元素的位置
- 外边距可以为负
- margin可以设置auto
/* margin-left或margin-right设置auto可任意获得水平最大值 */
/* 如果水平方向同时设置margin,则在父元素中水平居中 */
margin-left:auto;
margin-right:auto;
/* 垂直方向设置margin,则默认值为0px */
- 外边距也有四个方向的值,设置方式与border-width相同
margin:10px,20px,30px,40px;
- 设置外边距的margin-top为负值,会出现覆盖上方元素的情况,但依然是盒子模型
外边距的重叠和传递
- 垂直外边距:在页面中相邻的垂直方向的外边距会发生重叠现象
- 外边距重叠会使用相邻兄弟元素外边距的最大值
- 外边距重叠的条件:
- 相邻
- 垂直方向
- 解决方法:两个元素之间添加内容,使元素垂直方向不相邻
.box1{
width:200px;
height:200px;
background-color:red;
margin-bottom:200px;
}
.box2{
width:200px;
height:200px;
background-color:pink;
margin-top:200px;
margin-bottom:200px;
}
.box3{
width:200px;
height:200px;
background-color:pink;
margin-top:100px;
}
- 外边距传递:如果子元素的垂直外边距和父元素相邻,就会发生外边距传递。子元素设置的外边距传递给父元素。
- 传递条件:相邻、垂直
- 解决方法:
- 在父元素中设置文本内容(缺点:间隔的文本占用父元素的内容区域)
- 为父元素设置边框、内边距(缺点:增大了可是区域,且设置内边距会影响content(内容区))
浏览器的默认样式
- 每个元素在浏览器中都有默认的margin和padding大多数情况下我们需要自己设置,所以我们会清除默认的间距
/* 清除默认间距 */
*{
margin:0;
padding:0;
}
display属性
设置元素的类型
/*
display:
inline 行内元素(宽高失效、内容大小即为元素大小)
block 块元素(可设置宽高,独占一行)
none 元素不显示,并且位置不占用(visiblity:hidden; 隐藏元素但位置占用)
inline-block 行内块(行内元素,但可以设置宽高)
隐藏元素,但位置保留--visibility: hidden;
*/
overflow属性
- 默认子元素存在与父元素中,如果子元素大小超过父元素,则默认在父元素外显示
- 超出部分怎么显示用overflow
/*
overflow:
hidden 溢出部分隐藏
scroll 溢出部分使用滚动条显示
visible 显示(默认)
auto 溢出部分使用滚动条显示(只有溢出时才显示滚动条)
*/
内联盒子
- 内联元素设置高宽不起作用
- 内联元素设置水平内边距、边框、外边距,起作用,而且影响布局
- 内联元素设置垂直内边距、边框,起作用,但不影响布局
- 设置上下外边距不起作用
/*水平内边距起作用,而且影响布局*/
span1{
padding-right:10px;
}
span2{
padding-left:10px;
}
/*设置左右边框,起作用,影响布局*/
span1{
border-right-width:10px;
}
span2{
border-left-width:10px;
}
/*水平外边距,起作用,但不影响布局*/
span1{
margin-right:100px;
}
span2{
margin-left:100px;
}
box-size属性
设置盒子模型的内边距和边框是否绘制在边框之外。
box-sizing:
border-box(怪异盒模型,width包含padding和border)
content-box(标准盒模型,内边距和边框绘制在宽高之外)
- 怪异盒子模型可视区域的宽:width(width包含padding和border)
- 怪异盒子模型可视区域的高:height(height包含padding和border)
选择器优先级(面试)
- 当使用不同的选择器选中同一个元素,并设置相同的样式时,这样就产生样式冲突。最终选则那种样式,根据选择器的优先级决定,优先级(权重)高的起作用
- 当包含多个选择器时需要将多个选择器的优先级相加
- 权重累加不能超过上一层级的权重(例如:类的权重最大值为99)
- 如果选择器权重相同,按顺序执行(谁在后面,执行谁)
- 并集选择器,各个选择器优先级单独计算,不进行累加
/*
!important 优先级:无穷大
内联样式,优先级:1000
id选择器,优先级:100
类和伪类选择器,优先级:10
元素选择器,优先级:1
通配符选择器,优先级:0
继承,没有优先级。
*/
/*
交集选择器,优先级:选择器1+选择器2
并集选择器,优先级:选择器之间单独计算
*/
/*
根据继承的原理,子元素会继承父元素的一些属性
*/
文档流
常见的有:p h1~h6 div ul ol li
特点:
- 独占一行
- 宽度、高度、内外边距
- 宽度默认是父元素的100%
- 是一个容器盒子,里面可以放块元素和行内元素
- 注:
- 文字类的元素不允许使用块级元素
- 例如:
代码书写:
<p>
<div>
</div>
</p>
实际浏览器生成:
<p></p>
<div></div>
<p></p>
- 如果width或height设置为auto,在添加padding或border,则可视区域不变,内容区域减少
- 如果width或height设置为100%,在添加padding或border,则可视区域变大,内容区域不变
- 如果不设置宽高,则宽高的默认值为auto
行内元素
常见的有:a img strong
特点:
- 相邻的在同一行显示,一行可以放多个
- 宽、高设置无效
- 默认宽度就是本身内容的宽度
- 行内元素只能容纳行内元素或文本元素
- 注意:a里面可以放块级元素,但最好转化为块级模式
浮动
向左/向右浮动
float:
left 元素向左浮动
right
none 不浮动
块元素
- 使float属性为非none,让元素脱离文档流
2. 当元素脱离文档流,紧跟着下面的元素会向上浮动
- 元素浮动后,会向左/右浮动,直到遇到父元素或其他浮动元素元素的边框,停靠在该位置
- 如果浮动元素上面有未浮动的块元素,则浮动不会超过块元素
- 块元素浮动后,宽度不再默认占整行,宽度为设置的值
- 如果浮动元素在一行放不下,则自动换行
- 浮动元素不会超过兄弟元素,最多并排
- 当父元素脱离文档流,其宽高都由子元素撑开
内联样式
- 内联元素脱离文档流后就会变成块级元素,w和h就会起作用
文字环绕
- 浮动元素不会覆盖文本内容,文本内容会自动环绕在元素的周围。(占半个文档流)
- 经常使用浮动,制作文本环绕的效果
基本布局
通过浮动布局页面
高度坍塌
原因:父元素高度由子元素撑开,子元素浮动后脱离文档流,导致父元素高度丢失。
后果:导致页面布局发生改变(混乱)
解决方法:
选择器::before
::after{
content:'';
display:table;
clear:both;
}
/*
高度坍塌+子元素外边距对父元素的影响
*/
其他解决方法:
-
给父元素设置高度(缺点:高度不能自适应)
-
在子元素下方添加div元素,并清除div元素的浮动解决高度坍塌问题(缺点:页面会添加多余的元素)
-
设置伪类:(推荐)
属性值::after{ content:''; display:block; clear:both; }
清除浮动
理解:清除浮动对当前元素的影响
原理:清除浮动后,浏览器会自动给元素添加一个上外边距,以使其位置不受其他元素影响。(开发者工具看不出来)
清除向左/右/左右浮动对当前元素的影响
clear:left/right/both
none(表示不清除浮动)
清除完浮动,元素退回原始的位置
清除两侧浮动,以最大值为主
定位
/*
- 将指定的元素放置到页面的任意位置
- 通过position 设置定位
*/
/*
position:
fixed 固定定位
relative 相对定位
absolute 据对定位
static 无定位(默认)
inhert 从父元素继承
*/
/*
相对定位(relative)
可以使用left top right bottom 四个熟悉设置元素的位置
left :表示相对于定位位置的左侧的偏移量
top : 表示相对于定位位置的上侧的偏移量
bommot :表示相对于定位位置的下侧的偏移量
right: 表示相对于定位位置的右侧的偏移量
通常使用两个偏移量就可以定位,一个水平位置,一个垂直位置进行定位
*/
/*
可以使用left top right bottom 四个熟悉设置元素的位置
left :表示相对于定位位置的左侧的偏移量
top : 表示相对于定位位置的上侧的偏移量
bottom :表示相对于定位位置的下侧的偏移量
right: 表示相对于定位位置的右侧的偏移量
通常使用两个偏移量就可以定位,一个水平位置,一个垂直位置进行定位
*/
/*
当开启元素的相对定位,而不设置偏移量,则元素不会发生任何移动
相对定位是相对于元素在文档流中的原来的位置设置定位`
相对定位的元素不会脱离文档流,原始的位置会被保留
相对定位的元素会提升一个层级
相对定位不会改变元素的状态,块和内联不会改变
*/
/*
绝对定位
绝对定位脱离文档流,提升半个层级(文本还在原来的层级)
开启绝对定位,如果偏移量不发生改变,则位置保持不变(left和top其实是有值的)
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位。如果都没有定位,则相对于页面的左上角进行定位。(设置谁,谁改变。垂直和水平相互不影响)
left和top不设置值与left=0/top=0不一样
*/
/*
绝对定位会改变元素的状态
块级元素会变成内联元素,高度由内容撑开
内联元素会变成块级元素
*/
/*
我们在开发中使用子元素绝对定位时,都会给父元素这只相对定位
*/
/*
固定定位
固定定位与绝对定位的大部分特征相同
相同点:
1.元素脱离文档流
2.不设置偏移量,默认位置保持不变
3.会提升元素层级
不同点:
1.参考点在浏览器(视口)的左上角
2.不会随滚动条移动
*/
元素的层级
如果元素都开启定位,则会开启层级
默认元素按照由上而下布局顺序,越往后层级越高
z-index:数值;(同级元素,值越大,层级越高)
没有开启定位的元素,z-index不起作用
父元素层级再高,也不会盖住子元素
透明度
opactiy:值;(值的范围:0~1)
兼容IE8及以下:
filter:alpha(opactiy:值)
/*
值:0~100
*/
BFC
在页面中的元素都有一个隐含的属性叫做Block Fomatting Context 简称:BFC
当开启BFC属性时,元素有以下特征
- 父元素的垂直外边距不会和子元素重叠(外边距重叠)
- 开启BFC的父元素不会被浮动元素覆盖
- 开启BFC的父元素可以包含浮动元素
BFC 解决父元素坍塌
如何开启BFC属性
- 方法一:设置元素浮动
- 开启方式:开启父元素浮动
- 作用:开启BFC的父元素可以包含浮动元素
- 缺点:父元素下的兄弟元素会上移,布局变化(不推荐)
- 方法二:设置固定定位和绝对定位
- 开启方式:设置元素绝对定位(固定定位)的方式开启
- 作用:开启BFC的父元素可以包含浮动元素
- 缺点:父元素下的兄弟元素会上移,布局变化(不推荐)
- 方法三:设置inline-block
- 开启方式:使用设置元素的inline-block方式开启
- 作用:开启BFC的父元素可以包含浮动元素
- 缺点:如果父元素没有设置宽度,则父元素宽度丢失,由子元素撑开(不遇见)
- 方法四:将元素的overflow设置为非visible的值
- 开启方式:将元素的overflow设置为非visible的值方式开启
- 作用:开启BFC的父元素可以包含浮动元素
- 缺点:较小,推荐
BFC解决外边距传递
解决兄弟元素外边距重叠
- 兄弟元素之间添加一个间隔(其他元素)
- 给任意元素添加父元素(如:div),并开启BFC(overflow:hidden;)
- 父元素的垂直外边距不会和子元素重叠
<div style='overflow:hidden;'>
<div class='box1' style='margin:10px;'></div>
</div>
<div class='box2'></div>
/*
解决box1与box2垂直外边距重叠
*/
解决父子元素外边距重叠
- BFC的父元素的垂直外边距不会和子元素重叠
- 打开父元素的BFC
浮动元素覆盖
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
/* 开启BFC,解决不被浮动元素覆盖问题 */
/* 开启BFC后,元素会排在浮动元素的后面 */
overflow: auto;
}
Emmet语法
提高编写HTML与CSS的速度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2La899f-1628080676256)(C:\Users\lenovo\Desktop\图片\1626145035146.png)]
问题解决
css怎么获得屏幕的高度?
答:通过vh / vw 我们可以获得当前屏幕的视窗宽度
inline-block 100%布局的坑?
答:
inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,这时你的100%布局就乱了
最简单的方法在父级元素加上font-size=0就能解决
还有一种就是手动把空格删掉不过排版就很难看
颜色透明?
rgba(red,green,blue,0)
transparent