CSS零碎知识点
1.浮动
浮动作用
用于网页布局,让垂直布局改变为水平布局
注意!!!当盒子已经浮动了就不能使用绝对定位,可以使用相对定位
浮动特点
- 浮动会脱离标准流,在标准流中不占位置
- 脱离后的浮动显示优先级比标准流高半个级别
- 浮动找浮动,几个元素同时浮动,后浮动的元素会在先浮动的元素的身后浮动
- 浮动受到元素边界的影响(div等块级元素独占一行)
- 浮动有特殊的显示效果,可以设置宽高,一行可以有多个浮动
- 浮动元素不能使用 text-align 和 margin:0 auto 来设置水平居中,但是浮动元素内容可以
浮动代码
#左浮动
.left {
float:left;
}
#右浮动
.right{
float:right;
}
清除浮动
目的:有时候子元素浮动了,便脱离了标准流,父元素不能再被子元素撑起来。
方法:
-
给父元素设置高度 (缺点:有些板块不允许设置父元素的高度)
.father { height: 400px; width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; }
-
额外标签法:在父元素最后添加一个块级元素并设置clear:both (缺点:增加了标签,让网页结构变得复杂)
.father { width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; } .clear { clear: both; }
-
2的优化,单伪元素方法:在父元素的伪元素中添加clear:both
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; } .clearfix::after { content: ''; display: block; clear: both; /* 补充代码:在网页中看不到伪元素 */ /* height: 0; visibility: hidden; */ } </style> </head> <body> <div class="father clearfix"> <div class="son"></div> </div> <div class="clearfix"></div> <div class="clearfix"></div> <div class="clearfix"></div> <div class="clearfix"></div> </body> </html>
-
双伪元素清除法:也可以解决margin塌陷 使用常规套路
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; background-color: pink; } .son { float: left; width: 100px; height: 400px; background-color: blue; } .clearfix::before, .clearfix::after { content: ''; display: table; } .clearfix::after { clear: both; } </style> </head> <body> <div class="father clearfix"> <div class="son"></div> </div> </body> </html>
-
给父元素设置overflow:hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; background-color: pink; overflow: hidden; } .son { float: left; width: 100px; height: 400px; background-color: blue; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
2.版心
版心作用
用于约束网页的主体内容,无论什么显示尺寸都能将网页主体内容呈现在中间
代码
.container {
width:1000px;
margin:0 auto;
}
3.index页面骨架
<!DOCTYPE html>
<!-- 选择语言:en zh-CN -->
<html lang="en">
<head>
<!-- 字符编码 万国码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页描述 -->
<meta name="description" content="xxxxxx">
<!-- 网页关键词 -->
<meta name="keywords" content="xxxxxxx">
<!-- icon图标 -->
<link rel="shortcut icon" href="./xtx/favicon.ico" type="image/x-icon">
<!-- 网页标题 -->
<title>Document</title>
<!-- CSS外联样式 -->
<link rel="stylesheet" href="./xtx/css/base.css">
</head>
<body>
</body>
</html>
4.选择器
后代选择器
用法:选择器1 选择器2 {CSS}
效果:选择器1中的后代(儿子、孙子…),满足选择器2的条件 都可以被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father p {
color: red;
}
</style>
</head>
<body>
<!-- 需求:只让小姐姐变红(不改变html结构) -->
<!-- 解决:在.father这个div的后代中找p标签即可 -->
<div class="father">
<p>小姐姐</p>
<div>
<p>小帅哥</p>
</div>
</div>
<p>小可爱</p>
</body>
</html>
Tips:小姐姐、小帅哥变红 ,小可爱不变
子代选择器
用法:选择器1 > 选择器2 {CSS}
效果:只选择选择器1中的子代,只能是儿子,符合选择器2的都被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father > p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>小可爱</p>
<div>
<p>小姐姐</p>
</div>
</div>
<p>大可爱</p>
</body>
</html>
Tips:小可爱变红
并集选择器
用法:选择器1,选择器2 {CSS}
效果:让多个选择器满足选中条件,同时修改多个元素。 选择器可以是基础选择器,也可以是复杂选择器,每行写一个选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,
p {
color: red;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我也是一个div</div>
<p>我是p标签</p>
<p>我也是p标签</p>
<h1 class="red">我是一个h1标签</h1>
<h2>我是一个h2标签</h2>
</body>
</html>
Tips:div 和 p 标签变红了
交集选择器
用法:选择器1选择器2 {CSS},如果有标签选择器,必须写在前面
效果:选中同时符合选择器1、2的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.red {
color: red;
}
</style>
</head>
<body>
<div class="red">小姐姐</div>
<p>小帅哥</p>
<p class="red">小可爱</p>
</body>
</html>
Tips:小可爱变红了
hover伪类选择器
用法:选择器::hover {CSS}
效果:当鼠标悬停在标签上时,显示伪类选择器中的CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box:hover {
width: 400px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<a href="#">我是一个a标签</a>
<div class="box"></div>
</body>
</html>
结构伪类选择器
精准选择第几个元素
用法:
/*子元素为E*/
E:first-child {CSS} /*匹配父元素中第一个子元素*/
E:last-child {CSS} /*匹配父元素中最后一个子元素*/
E:nth-child(n) {CSS}/*匹配父元素中第n个子元素*/
E:nth-last-child(n) {CSS}/*匹配父元素中倒数第n个子元素*/
/*
n为0,1,2,3,4......,9
奇数:2n-1,2n+1,odd
偶数:2n,even
前j个:-n+j
从第j个往后:n+j
*/
5.精灵图
作用:一张大图上集中了许多小图,向服务器发送数据时,不用多次发送小图片,只需要发送一次大图片就够了,减轻服务器负担
用法:
- 先创造一个盒子,盒子大小尺寸为图片的大小
- 量取小图片左上角的坐标(x,y)
- 将坐标取反
- 将图片放在盒子里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -264px;
float: left;
}
.two {
width: 24px;
height: 24px;
background: url('./images/taobao.png') 0px -484px;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
6.伪元素
作用:顾名思义,是伪元素,冒充标签效果,可在网页的非主体内容处添加伪元素
!!!默认是行内元素 不拥有宽高
用法:
父元素::before {CSS} 在父元素内容前面添加一个伪元素
父元素::after {CSS} 在父元素内容后面添加一个伪元素
必须加content才能生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: skyblue;
}
.father::before {
/* 必加的属性 */
content: '我是一个伪元素';
/* 转换显示方式 */
display: block;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father">
我是father内部的内容
</div>
</body>
</html>
缺点:不容易调试,审查元素无法发现
7.字体文本样式
字体大小 font-size 40px
字体粗细 font-weight 1.normal bold 2.数字 100~900
字体样式 font-style normal italic
字体系列 font-family
字体颜色 color
列表 list-style
8.盒子
margin塌陷
margin水平不会塌陷,垂直会塌陷。两个盒子中margin距离大的那个变成了两盒之间的距离,距离小的则缩在了距离大的里面
两个margin-top叠在了一起
解决方法:清除浮动中的双伪元素清除法
盒子构成
content
padding
border
margin
自动内减
在修改内部尺寸的同时,保持盒子大小不变
box-sizing:border-box
背景图片
background-size:
9.定位
静态定位
相对定位
当盒子已经浮动了就不能使用绝对定位,可以使用相对定位
绝对定位
相对于距离父元素的位置定位
当盒子已经浮动了就不能使用绝对定位,可以使用相对定位
特殊:
子绝父相
父绝子绝
10.元素显示模式
块级元素
display:block
代表:div p h dl dt dd ul li header footer nav form
特点:
- 一行只能有一个,独占一行显示
- 可以设置宽和高
- 默认高度被内容撑开,宽度与父元素宽度相同
行内元素
display:inline
代表:span a 伪元素
特点:
- 不能设置宽和高
- 高度和宽度都是被内容撑开的
- 一行可以有多个
行内块元素
11.对齐格式
垂直对齐
vertical-align:middle
文本:
line-height:当前高度
水平居中对齐
文本:text-align
margin:0 auto
操作技巧
快速生成框架
!+Tab
预览
Alt+B
同时选择多个相同元素
Ctrl+D
元素同时粘贴到多行
滚轮中键按住滚动