CSS复习
文章目录
CSS 基础认知
- CSS 叫 层叠样式表， 用来 给html页面修改样式。 可以让页面更美观
语法：
- 三种样式表的对比：
CSS 基本选择器
基本选择器我们主要讲解： 标签选择器、类选择器、id选择器、通配符选择器
标签选择器
语法是： 标签名 { 样式属性；}
结构是：
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
样式的写法：
p {
/* 文字颜色 */
color: red;
/* 文字大小 */
font-size: 20px;
}
注意： 标签选择器是选择当前页面里面的所有一类标签，比如选择页面中所有的段落标签，不是选其中一个。
类选择器
样式点的定义， 结构类(class)调用
css样式:
.red {
color: red;
}
html结构：
<span class="red">大牌5折购</span>
<span>开学季</span>
<span>放学季</span>
<span>休学季</span>
<span>开学季</span>
注意：
1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
id选择器
使用方法跟类非常的相似。 样式 #定义， 结构 id调用
css:
#last {
color: blue;
}
html:
<div>我是div</div>
<div>我是div</div>
<div id="last">我是div</div>
和类选择器的区别：（使用次数上）
- 类选择器相当于人的名字， 可以重复， 可以多次使用。
- ID选择器相当于人的身份证，不阔以重复使用， 只能使用一次。 唯一的。
注意： 以后开发中，我们写样式，首先考虑用类选择器。
通配符选择器
作用：选中所有的标签
CSS：
* {
color: red;
}
html:
<body>
<div>我是div</div>
<p>我是段落</p>
<h2>标题</h2>
</body>
注意：
特殊情况下才使用，不要迷恋他
字体和文本样式
文字大小 font-size
/* 文字大小 */
font-size: 18px;
注意：文字大小前往不要忘记加单位。
文字加粗 font-weight
有两组设置：
字体不加粗:
font-weight: normal;
font-weight: 400;
字体加粗：
font-weight: bold;
font-weight: 700;
注意： 我们更提倡使用 数字来表示， 注意不要跟单位哦~~~~
让span 加粗的写法:
span {
font-weight: 700;
}
让标题不加粗的写法:
h2 {
font-weight: 400;
}
文字不倾斜 font-style
让em或者i标签里面的文字不倾斜的写法：
em {
font-style: normal;
}
字体连写 font
- 语法规范，必须按照swsf的写法，不能颠倒
font: 字体样式 字体加粗 字体大小 字体
- 字体大小和什么字体是不能省略的. font-size 和font-family 是不能省略的。否则连写失效。
首行缩进 text-indent
可以实现文本的缩进效果
p {
/* text-indent: 20px; */
text-indent: 2em;
/* 1em 就是当前一个文字的大小 单位 相对单位 */
}
文本修饰 text-decoration
div {
/* 下划线 */
/* text-decoration: underline; */
/* 上划线 */
/* text-decoration: overline; */
/* 删除线 （贯穿线） */
/* text-decoration: line-through; */
}
/* 鼠标经过a的时候 */
a:hover {
color: orange;
/* 显示下划线 */
text-decoration: underline;
}
<div> 折扣 </div>
<a href="#"> 小米 </a>
水平对齐 text-align
.box {
width: 400px;
height: 400px;
background-color: pink;
/* 可以让div盒子里面的内容水平居中 */
text-align: center;
/* 让div盒子在浏览器水平居中 */
margin: 0 auto;
}
注意：
/* 可以让div盒子里面的内容水平居中 /
text-align: center;
/ 让div盒子在浏览器水平居中 */
margin: 0 auto;
行高 line-height
- 如果行高等于盒子的高度，则里面的单行文字会垂直居中
- 如果行高大于盒子的高度，则里面的单行文字会垂直偏下
- 如果行高小于盒子的高度，则里面的单行文字会垂直偏上
/* 行高等于高度，则可以让单行文字垂直居中 */
line-height: 400px;
font: 16px/28px '黑体';
给body 添加 1.5倍行高 是什么意思呢?
让body 里面所有的子元素有个默认行高。 比如 body { line-height: 1.5 }
子元素 文字大小的 1.5倍 比如当前div 的字体大小是 16 那么当前元素默认的行高就是： 1.5 * 16 = 24 px
body这样写的好处是什么呢？
文字大的，那我们的行高就大， 文字小的，那么行高就小， 目的是阅读文字比较舒服。
Chrome 调试工具
非常好用。 帮助我们测试的。
场景1：
如果出现了黄色感叹号，并且被划掉了，则这句代码一定有错误。
单词拼写错误。
场景2：
最大的可能是 类名拼写错误。
选择器进阶
作用: 找标签
后代选择器
- 作用: 选择所有的后代标签, 儿子, 孙子,重孙子…
- 选择器语法：选择器1 选择器2 { css }
- 写法: 用空格
.header a {
font-size: 14px;
color: #333;
}
html:
<div class="header">
<a href="#">导航栏</a>
<a href="#">导航栏</a>
<a href="#">导航栏</a>
<a href="#">导航栏</a>
<a href="#">导航栏</a>
</div>
子代选择器
- 作用: 选择亲儿子标签， 亲儿子选择器
- 选择器语法：选择器1 > 选择器2 { css }
- 写法: >
/* 子代选择器，只选亲儿子 */
.box>span {
color: red;
}
html:
<div class="box">
<span>儿子</span>
<span>儿子</span>
<span>儿子</span>
<span>儿子</span>
<p>
<span>孙子</span>
<span>孙子</span>
<span>孙子</span>
<span>孙子</span>
</p>
</div>
注意： 特殊情况下使用，当我们后面使用的时候在复习，当前只需要认出这是子代选择器即可。
并集选择器
-
作用: 选中多组标签设置相同的样式
-
选择器语法：选择器1 ， 选择器2 { css }
-
写法: 逗号
-
em, i { font-style: normal; }
交集选择器
-
作用: 既选中是某个标签又选中对应的类
-
选择器语法：选择器1选择器2 { css }
-
写法: 连着写 div.box
/* 交集选择器 既是又是 */ p.one { color: red; }<div class="one">我是div</div> <p class="one">我是段落</p> <p class="one">我也是</p> <p>我也是段落</p>
伪类选择器
- 作用: 鼠标悬停状态
- 选择器语法：选择器 :hover { css }
- 写法 :hover
属性选择器
属性选择器： 根据元素的属性来选择器元素
比如：把禁用按钮鼠标样式改为禁用
/* 必须是button这类元素 同时这个button必须带有disabled属性 */
button[disabled] {
cursor: not-allowed;
}
html
<button>+</button>
<button disabled>-</button>
权重： 类、伪类、属性选择器 都是 10 所以上面这个 写法是 11 button[disabled]
可以根据属性值来选择 不同的元素
input[type=submit] {
color: red;
}
这样只选择提交按钮
html
<input type="reset" value="重置">
<input type="submit" value="提交">
结构伪类选择器
结构伪类选择器介绍：
1. 是因为他根据html的结构来选择标签的，比如选择 第1个，比如选择第5个，比如选择 2.4.6个等等。
2. 因为是 ： 冒号 所以是 伪类。
好处：
- 选择方便了，可以省去了很多的 类选择器， 这个是CSS3新增的选择器。
常见结构伪类选择器
注意：
类选择器、属性选择器、伪类选择器，权重为 10
比如css：
/* 第一个孩子，并且是小li */
ul li:first-child {
background-color: red;
}
/* 最后一个孩子，并且是小li */
ul li:last-child {
background-color: red;
}
/* 选择第2个孩子 选第几个孩子，n 就是 几 */
ul li:nth-child(5) {
background-color: red;
}
html:
<ul>
<li>第1个小li</li>
<li>第2个小li</li>
<li>第3个小li</li>
<li>第4个小li</li>
<li>第5个小li</li>
<li>第6个小li</li>
<li>第7个小li</li>
<li>第8个小li</li>
</ul>
效果：
nth-child(n)
-
n 可以是数字， 数字是几，就选择第几个孩子。
ul li:nth-child(6) { } 选择第6个孩子 -
n 还可以是 关键字 比如 odd even
/* 关键词 even 偶数 odd 奇数*/
ul li:nth-child(even) {
background-color: skyblue;
}
ul li:nth-child(odd) {
background-color: pink;
}
注意：
- nth-child(1) === first-child {}
- nth-child(8) === last-child {}
- nth-child 不能完全替代 first和 last-child 因为很多情况下，我们不知道有多少个孩子。
- n 还可以是 公式。
- n 是从 0开始 012345…
- 2n 是 偶数
- 2n + 1 是 奇数
- -n+3 选择前面3个
- n+3 从第3个（包含第三个）往后面选
/* 3. 公式 n 默认从 0开始 0123456*/
/* ul li:nth-child(2n) {
background-color: pink;
} */
/* ul li:nth-child(-n+3) {
background-color: pink;
} */
ul li:nth-child(n+3) {
background-color: pink;
}
伪元素
::before
- 他是一个盒子，是用css创建出来的。
- 他是一个行内元素，直接设置宽高无效。
- 他是一个孩子。 .box::before{} 这个 before伪元素是box 的一个子元素（孩子）
- 他是放到box盒子内容的最前面。
::after
- 他是一个盒子，是用css创建出来的。
- 他是一个行内元素，直接设置宽高无效。
- 他是一个孩子。 .box::after{} 这个 after伪元素是box 的一个子元素（孩子）
- 他是放到box盒子内容的最后面。
/* 伪元素 before .... 之前 */
.box::before {
/* 必须要写的属性 content */
content: '我是';
background-color: purple;
width: 100px;
height: 100px;
}
/* 伪元素 after .... 之后 */
.box::after {
/* 必须要写的属性 content */
content: '你呢？';
background-color: skyblue;
width: 100px;
height: 100px;
}
before 和 after 必须有 content 属性
before 在内容的前面，after 在内容的后面
before 和 after 创建一个元素，但是属于行内元素。
因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
伪元素和标签选择器一样，权重为 1
背景
背景色
-
background-color (bgc)
-
半透明盒子的写法：
.box { width: 200px; height: 200px; /* background-color: pink; */ /* transparent 透明的 默认的 */ /* background-color: transparent; */ /* 半透明的写法 */ background-color: rgba(0, 0, 0, .1); /* alpha 的取值范围是 0~1 */ }
背景图
-
background-image: url() (bgi)
-
/* 背景不要忘了加 url */ background-image: url(./images/logo-mi2.png);注意： 语法格式，一定要写 url （）
背景图平铺 background-repeat
-
background-repeat (bgr)
/* 背景不平铺 */ background-repeat: no-repeat; /* background-repeat: repeat-x; */ /* background-repeat: repeat-y; */
背景位置
-
background-position (bgp)
-
可以使用方位名词
- 默认的是左上角对齐
- 如果只写一个值，则另外一个值是默认是 center
- 方位名词两个值没有顺序， left center 和 center left 等价的。
/* 背景位置 */ /* background-position: 0 0; x y */ /* 方位名词 left right center */ /* top 上 center 中 bottom */ /* background-position: left center; */ background-position: center left; /* background-position: right bottom; */ /* background-position: center center; */ /* 如果只写一个值，则另外一个值默认是 center */ /* background-position: left; */ /* background-position: top; */ /* background-position: center; */ -
可以写精确单位
注意：
- 如果跟的是精确的单位，则第一个值一定是 x， 第二个值一定是 y 。
- 也可以一个跟的精确单位，一个跟方位名词，但是也是有顺序的。
/* 2. 可以利用精确单位 */ /* background-position: x坐标 y坐标; */ /* background-position: 10px 20px; */ /* background-position: 20px 10px; */ /* 距离左侧是 40px ，垂直是 居中对齐 */ background-position: 40px center;
-
背景复合属性
-
background: 背景色 背景图 背景图平铺 背景图位置;
注意：
- 他们是没有顺序的，但是我们提倡按照这个顺序写。背景色 背景图 背景图平铺 背景图位置
- 他们中间用 空格 隔开
background: rgba(255, 0, 255, .1) url(./images/11.png) no-repeat 400px center;
插入图片和背景图片
什么时候时候插入图片，什么时候使用背景图片。
-
插入图片
比如广告图片，比如产品类（手机、平板等等）的图片这些都用插入图片。 因为经常更换，img 更换方便
-
背景图片
超大的背景图片，作为背景显示 比如 1920宽， 超小的装饰类的图片，都可以使用背景。
logo 经常使用背景来做。
-
移动位置
插入图片只能通过内外边距，或者定位来移动。
但是，背景图片非常灵活，通过 background-position 来移动
显示模式
根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素
块元素 （block）
-
特点
- 独占一行
- 设置宽高生效
- 宽度默认是父级的100%
-
转换写法 : display: block
div { width: 300px; height: 100px; background-color: pink; /* display 显示 */ /* block 块 */ text-align: center; /* 可以让块级元素水平居中 */ margin: 0 auto; }
比如： h、p、div、 ul 等等
行内元素（inline）
-
特点
- 一行显示多个
- 设置宽高不生效
- 尺寸和内容一样大
-
转换写法 : display: inline;
比如： span、a、em 、strong等等
行内块（inline-block）
- 特点
- 一行显示多个
- 设置宽高生效
- 转换写法: display: inline-block
- 代表 input、 textarea 、 img 、 td 等等
【注】
- 块级元素里面可以放任何的元素。
- p 里面一定不能放div ， 我们 p h 这些 文字类的标签里面尽量不要放块级元素。
- 行内元素里面只能放行内元素。
- a 可以放任何元素。 但是吐血建议，转换为块级元素。
- 但是a里面不能再嵌套a标签
CSS 三大特性
了解三大特性可以让我们对CSS 特点有更好的了解。 可以解决很多的疑惑问题。
三大特性分别是：
- 继承性
- 层叠性
- 优先级
继承性
继承性： 子元素继承父元素的一些样式。
注意： 不是所有的样式都继承，比如宽度和高度就不继承，继承的是一些 文字类的样式。比如：
特殊情况：
- 链接 有默认的 蓝色。 相当于 浏览器默认 加了一句话 a { color: blue;}
- 其实继承了颜色，但是被浏览器默认样式给覆盖了。
- h标题系列有默认的文字大小，继承会失效。
层叠性
同一级别： 冲突遵循的原则： 就近原则。 远亲不如近邻。
div {
color: red;
color: blue;
}
div {
color: skyblue;
font-size: 12px;
}
如果样式冲突，则会覆盖，后面覆盖前面。
如果样式不冲突，则叠加，同时加上相关样式。
长江后浪推前浪，前浪死在沙滩上
优先级
选择器公式:
继承 < 通配符 < 标签选择器 < 类选择器 < id 选择器 < 行内样式表 < important (重要的)
- 继承的权重是 0 ，写样式已经写到执行的标签上去。
各个选择器的权重：
- 标签选择器： 0,0,0,1 简单记忆 1
- 类选择器 : 0,0,1,0 简单记忆 10
- id选择器 : 0,1,0,0 简单记忆就是 100
- 行内样式表: 1,0,0,0 简单记忆就是 1000
- 复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002
- 不会有进位的情况，比如 0,0,0, 10
- 如果选择器权重相同，则执行就近原则（层叠）
权重叠加计算
权重计算题解题步骤：
- 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
- 通过权重计算公式，判断谁权重最高
注意点：
实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
（操作）调试工具查错流程
盒子模型
边框
边框有三部分组成：
边框的连写方式：
/* border: 粗细 样式 颜色 */
/* border: 1px solid red; */
border: 1px solid red;
可以只给一个方向的边框：
left 左 right 右 top 上 bottom 下
border-left: 1px solid red; 左边框
border-right: 1px solid red; 右边框
border-top: 1px solid red; 上边框
border-bottom: 1px solid red; 下边框
input {
width: 520px;
height: 58px;
font-size: 25px;
/* 取消文本框默认的边框 */
border: 0;
/* 取消文本框默认的轮廓线 */
outline: 0;
border-bottom: 1px solid #e7e7e7;
background: url(./img/fdj.png) no-repeat left center;
}
input:hover {
border-bottom: 1px solid #ff6700;
}
<input type="text" placeholder="搜一搜">
padding 内边距
内边距是控制： 内容和边框之间的距离
比如：
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 内边距 padding*/
/* 只写一个值， 上下左右都是 10px */
/* padding: 10px; */
/* padding 两个值 上下 是 10 左右是 20 */
/* padding: 10px 20px; */
/* 上是 10 左右是 20 下是 30 */
/* padding: 10px 20px 30px; */
/* 上 10 右 20 下 30 左 40 */
/* padding: 10px 20px 30px 40px; */
}
如果只改动一侧的内边距
左内边距 padding-left: 20px;
右内边距 padding-right: 20px;
注意：
盒子的实际大小 = content（内容） + padding （内边距） + margin （外边距）
调整盒子大小：
- 手动内减模式 ： 手动更改 width / height 的大小
- 自动内减模式： box-sizing: border-box
案例：新浪导航案例
<style>
* {
margin: 0;
padding: 0;
}
.nav {
height: 40px;
background-color: rgb(255, 255, 255);
border: 0;
border-top: 4px solid rgb(255, 133, 0);
border-bottom: 1px solid rgb(237, 238, 240);
}
.nav a {
display: block;
float: left;
height: 40px;
padding: 0 15px;
color: rgb(76, 76, 76);
text-decoration: none;
font-size: 16px;
text-align: center;
line-height: 40px;
}
.nav a:hover {
color: #fe8400;
background-color: #edeef0;
}
</style>
<div class="nav">
<a href="javascript:;">新浪导航</a>
<a href="javascript:;">新浪导</a>
<a href="javascript:;">新浪</a>
<a href="javascript:;">新浪导航</a>
</div>
margin 外边距
- 让一个块级的盒子水平居中方法：
- 必须是块级盒子，有宽度
- 让盒子左右的外边距改为auto 即可。
- margin: 0 auto;
- 清除浏览器元素默认的内外边距
* {
margin: 0;
padding: 0;
}
这样可以让浏览器默认的风格统一。
外边距折叠
外边距合并现象只发生在 垂直 的盒子 外边距。
-
上下的兄弟盒子。
-
块级元素，上下两个盒子同时指定上下外边距，则会出现外边距合并的问题，以最大的那个外边距为准。
-
比如：
-
.box1, .box2 { width: 200px; height: 200px; background-color: pink; } .box1 { margin-bottom: 100px; } .box2 { margin-top: 50px; } -
最后的结果是： 两个盒子的上下间距是 100px。
-
解决方案是避免，只给其中的一个盒子外边距拉开距离即可。
-
-
上下的嵌套关系盒子（父子）- 塌陷
- 如果给子盒子一个margin-top 则会把父盒子一起带下来，我们称为塌陷现象。
- 解决方案：
- 给父元素 加 padding-top 或者 border-top 可以解决
- 给父元素 加 overflow：hidden
- 给子元素转换为行内块元素
- 给子元素加 浮动 、定位
- 其实，可以直接给父元素加 padding-top: 100px;
注意：
- 行内元素 我们只能给左右的内外边距，不要给上下的内外边距。
- 如果非得要给，请转换为块级元素或者行内块元素。
/* 3. 公式 n 默认从 0开始 0123456*/
/* ul li:nth-child(2n) {
background-color: pink;
} */
/* ul li:nth-child(-n+3) {
background-color: pink;
} */
ul li:nth-child(n+3) {
background-color: pink;
}
标准流
网页布局： 需要 标准流 + 浮动 + 定位
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动
我们为啥需要浮动？
我们想把多个块级元素放到同一行上。 打破标准流的限制。
浮动原来做图文混排效果，现在主要用来做网页布局的。
浮动语法
只有左浮动和右浮动。
float: left;
float: right;
浮动特点
1.浮动元素会脱标，在标准流中不占位置
2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
注意点：
浮动的元素不能通过text-align:center或者margin:0 auto
清除浮动
原因： 在父级元素没有给定高度是，主要靠子级元素来撑开标准流的父级元素，如果子级元素设置了浮动，就不再是标准流，也就不占位置，那父级元素就无法被撑开，这样就会影响到下面网页的布局
解决方法：
1、给父级元素设置高度
2、额外标签法
在父级元素内容的最后添加一个块级元素，属性设置为clear:both
3、单伪元素清除法 ——用伪元素替代了额外标签
.clearfix::after {
content: '';
display: block;
clear: both;
/*补充代码,在网页中看到伪元素*/
height: 0;
visibility: hidden;
}
4、双伪元素清除法
.clearfix::before,
.clearfix::after {
content: '';
display: block;
}
.clearfix::after {
clear: both;
}
5、给父元素设置overflow : hidden
直接给父元素设置 overflow : hidden，但是多出来的部分会被切掉
定位
相对定位——relative
语法
position: relative;
top: 100px;
left: 100px;
特点
-
相对于自己原来的位置移动的
-
不脱标。 保留位置的。
-
加了相对定位的盒子通过 top left 移动距离 和 普通的盒子使用margin移动位置有什么区别？
- 普通的margin 移动距离会影响下面盒子，把其他盒子挤走。
- 而相对定位的盒子通过top 移动，则不会影响其余的盒子。
绝对定位——absolute
语法
/*1. 绝对定位 */
position: absolute;
/* 2. 偏移 */
top: 10px;
left: 10px;
特点
- 以最近一级带有定位的父级为准来移动距离。（static除外）
- 脱标。完全不占位置。
- 绝对定位的使用场景： 可以盖住任何盒子。
绝对定位和浮动（脱标）的注意点：
- 如果盒子本身没有宽度， 加了浮动和绝对定位，则宽度改为内容的宽度。经常加 100%。
- 任何元素添加了浮动和绝对定位（固定定位），则不需要模式转换，就可以直接给宽度和高度。
绝对定位的盒子水平垂直居中
-
走父盒子宽度/高度的一半 left : 50%; top: 50%;
-
往左/ 往上 走小盒子（自己盒子） 宽度 / 高度的一半 margin-left： xxxpx； margin-top: xxxpx;
/* float: left; */ position: absolute; /* 走父盒子宽度和盖度的一半 */ left: 50%; top: 50%; /* 往左侧走自己（小盒子）宽度和高度的一半 */ margin-left: -100px; margin-top: -15px; width: 200px; height: 30px; background-color: purple;
固定定位——fixed
语法
position: fixed;
bottom: 0;
right: 0;
width: 50px;
height: 200px;
background-color: pink;
特点
- 以浏览器的可视区来移动距离的
- 脱标的。完全不占位置
粘性定位——sticky
目标：保留原有位置 + 根据情况固定在屏幕上
特点：
1、不脱标，按照标准流布局
2、当屏幕滚动到某一个位置后，会固定在屏幕上
3、至少要指定一个边偏移属性
圆角边框
语法
border-radius: 50px;
注意:
-
后面的值是半径
-
让正方形变为圆的算法： 宽或者高度的一半 或者 border-radius: 50%;
/* 让正方形变为圆的算法： 宽或者高度的一半 */ /* border-radius: 100px; */ /* border-radius: 50%; */ -
胶囊的做法：
border-radius: 25px;必须是像素，宽度或者高度的一半，较小值的那个。
圆角边框多个值的写法
border-radius: 左上角 右上角 右下角 左下角； 顺时针
.box {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 10px; */
/* 后面的值是半径 */
/* 让正方形变为圆的算法： 宽或者高度的一半 */
/* border-radius: 50%; */
/* border-radius: 10px 20px 30px 40px; */
border-radius: 0 50%;
}
.box2 {
width: 300px;
height: 50px;
border: 1px solid purple;
/* border-radius: 50%; */
border-radius: 25px;
}
.box3 {
width: 50px;
height: 300px;
border: 1px solid purple;
/* border-radius: 50%; */
border-radius: 25px;
}
定位叠放次序
z-index: 1;
注意点：
- 数字越大，层级约靠上。
- 只有定位的元素才有这个属性。
- 数字后面不跟单位。 font-weight: 400;
- 数字是整数。 可以是 负数 可以是 0 可以是正数 比如 1.2.3.4
- 默认值是 auto 。 就是跟父级一样大。
更改定位元素的层级
1、标准流、浮动、定位元素之间的层级关系是什么样？
标准流 < 浮动 < 定位 不同定位元素之间的层级关系是什么样？
2、相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
3、通过什么属性可以修改定位元素的层级？
z-index：数字；
上标和下标标签
上标标签
a<sup>2</sup>
下标标签
b<sub>2</sub>
生成之后的效果：
垂直对齐——vertical-align
属性名：vertical-align
属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
图片底部有空白缝隙问题
原因： 图片和文字的基线对齐所有有缝隙
解决方案：
-
让图片和文字的底线对齐就可以了。
img { vertical-align: middle; } -
让图片转换为块级元素也可以。
img { /* vertical-align: middle; */ display: block; }
vertical-align可以解决的问题
- 文本框和表单按钮无法对齐问题
- input和img无法对齐问题
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
- 使用line-height让img标签垂直居中问题
注意点：
学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
光标类型——cursor
属性名：cursor
常见的鼠标样式
禁用按钮——disabled
添加 一个属性 disabled
<button disabled class="not">-</button>
css 可以把鼠标设置为禁用样式
.not {
cursor: not-allowed;
}
溢出 overflow
.box {
/* 溢出 隐藏 我们的文字 */
/* overflow: hidden; */
/* scroll 滚动条 无论是否超出都显示滚动条 */
/* overflow: scroll; */
/* auto 如果超出就显示滚动条，不超出不显示 */
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid red;
}
显示与隐藏
display 显示
显示： display: block;
隐藏： display：none;
不能做过渡效果~~~~
visibility 显示
显示： visibility: visible;
隐藏： visibility: hidden;
/* display 显示 */
/* 隐藏元素，但是还在html页面中 不占位置 */
/* display: none; */
/* 显示元素 */
/* display: block; */
/* 占位置，保留位置，也是隐藏元素 */
/* visibility: hidden; */
/* visibility: visible; */
区别：
- display 隐藏元素但是不占有位置。
- visibility 隐藏元素，但是保留位置
- 实际开发中，我们看到的元素显示于隐藏是用的 display
盒子半透明 opacity
让盒子半透明，同时让里面的文字、图片等内容一起半透明。
.box2 {
width: 300px;
height: 300px;
background-color: #000;
opacity: 0.3; /* 让盒子半透明，里面的内容都会半透明 */
background-color: rgb(0, 0, 0, 0.3) /*背景半透明，盒子里的字不透明*/
}
注意: opacity的取值范围是 0~1 之间
过渡——transition
就是让样式从一个状态慢慢的变化到另外一个状态，这个过程我们称为过渡。
语法
transition: 属性 时间;
属性： 可以写单个属性， 开发中，我们经常写 all
时间： 一定要加 单位 s 比如 1s 就是1秒 0.3s
谁做过渡给谁加~~~~ transition : all .3s;
display加不了过渡效果，opacity可以
文本框获得焦点
input:focus {
width: 200px;
}
focus 焦点 光标
鼠标 定到 表单里面才会触发的 样式
细线表格——border-collapse
完整css代码
table {
width: 600px;
height: 200px;
margin: 100px auto;
/* 合并相邻的边框 但是只限于表格里面使用 给表格添加哦~~~ */
border-collapse: collapse;
text-align: center;
}
table,
th,
td {
border: 1px solid pink;
}
CSS 三角
.box {
position: relative;
width: 200px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
.box::before {
position: absolute;
top: -50px;
left: 70px;
content: '';
width: 0;
height: 0;
border: 25px solid transparent;
border-bottom-color: pink;
}
显示：
css 边框三角形
.box {
position: relative;
width: 200px;
height: 300px;
/* background-color: pink; */
margin: 100px auto;
border: 1px solid pink;
}
.box::before,
.box::after {
position: absolute;
top: -50px;
left: 70px;
content: '';
width: 0;
height: 0;
border: 25px solid transparent;
border-bottom-color: pink;
}
.box::after {
border-bottom-color: #fff;
top: -49px;
}
css压线效果
.box {
position: relative;
width: 800px;
height: 0;
border-bottom: 3px solid #000;
margin: 100px auto;
}
.box h3 {
position: absolute;
left: 50%;
top: -45px;
margin-left: -100px;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
/* 核心代码 */
background-color: #fff;
}
链接伪类选择器
有4个状态
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: #f40;
}
a:active {
color: green;
}
但是实际开发，我们这样写就够了~~~~
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #f40;
}
CSS 精灵图
场景：
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：
减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
- 8张小图片分别发送→ 发送8次
- 合成一张精灵图发送 → 发送1次
总结： 精灵图可以减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用方法
给盒子添加背景图片。
利用 background-position：x y; 来移动背景图片的位置。
基本精灵图的坐标都是负值。
案例
-
拼出自己的名字
精灵图：
效果图：
css：
<style>
span {
display: inline-block;
background: url(./images/abcd.jpg) no-repeat;
}
span:nth-child(1) {
width: 96px;
height: 111px;
background-position: -494px -276px;
}
span:nth-child(2) {
width: 63px;
height: 107px;
background-position: -324px -141px;
}
span:nth-child(3) {
width: 113px;
height: 113px;
background-position: -253px -274px;
}
span:nth-child(4) {
width: 108px;
height: 112px;
background-position: -492px -140px;
}
</style>
1318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
