一.基础概念
- CSS:Cascading Style Sheets(层叠样式表)
- 控制网页的样式和布局,实现结构与样式的分离。
二.CSS引入方式 (形式:名:值;)
1.行内样式(不推荐)
- 写在标签的style的属性中
- 语法:
<h1 style="color : red; font-size: 50px;">标题</h1>
- 不推荐大量使用:样式太多时,结构与样式混在一起,不便于维护;且不能复用。
2.内部样式
- 写在style标签中(可写在页面任何位置,但通常约定写在head标签中)
- 语法:
<head>
......
<style>
h1{
color:green;
font-size:40px;
}
</style>
</head>
<body>
<h1>Life is too colorful , you need 前端</h1>
</body>
- 样式可以复用,代码结构清晰,未实现结构与样式完全分离。
3.外部样式(最推荐)
- 写在单独的.css文件中(需要通过link标签在html文件中引入)
- 语法:
1.新建扩展名为.css文件,写入CSS代码
h1{
background-color:green;
font-size:40px;
}
2.在html文件中引入.css文件
<link rel="stylesheet" href="./xxx.css">
- <link>标签写在<head>标签中
herf:引入的文档来自哪里
rel:说明引入的文件与当前文件之间的关系
- 样式可以分离,实现了结构与样式的完全分离。
4.样式表优先级
- 优先级规则:行内样式 > 内部样式 = 外部样式
内部样式、外部样式优先级相同,后者覆盖前者
同一个样式表中,后者覆盖前者
分类 | 作用范围 |
---|---|
行内样式 | 当前标签 |
内部样式 | 当前页面 |
外部样式 | 多个页面 |
三.CSS基本选择器
1.通配选择器
- 作用:可以选中所有的HTML元素
- 语法:
* {
属性名: 属性值;
}
- 清除样式时,帮助较大。
2.元素选择器
- 作用:为页面中某种元素统一设置样式
- 语法:
标签名 {
属性名: 属性值;
}
- 无法实现差异化设置。
3.类选择器(使用频率高)
- 作用:根据元素的class值来选中某些元素
- 语法:
<head>
......
<style>
.类名 {
属性名: 属性值;
}
</style>
</head>
<body>
......
<h1 class="类名">来日方长</h1>
......
</body>
- 类名自定义,要求:不使用纯数字、不使用中文、尽量使用英文与数字的组合,若由多个单词组成,使用 - 连接。
- 一个元素不能写多个class属性。
错误示例:
<h1 class="speak" class="answer">hello world</h1>
- 一个元素的class属性可以写多个值,用空格隔开。
<h1 class="speak answer">hello world</h1>
4.ID选择器
- 作用:根据元素的id属性值精准的选中某个元素
- 语法:
<head>
......
<style>
#id值 {
属性名: 属性值;
}
</style>
</head>
<body>
......
<h1 id="nbnb">来日方长</h1>
......
</body>
- id属性值:由字母、数字、_ 、- 组成,最好由字母开头,不要包含空格,区分大小写。
- 一个元素只能有一个id属性,多个元素的id属性值不能相同。
- 一个元素可以同时拥有id和class属性。
四.CSS复合选择器
1.交集选择器
- 作用:选中同时符合多个条件的元素
- 语法:
选择器1选择器2选择器3...选择器n {
属性名: 属性值;
}
- 有标签名,标签名必须写在前面
- 不能出现两个元素选择器
- 常用:元素选择器+类选择器
2.并集选择器
- 作用:选中多个选择器对应的元素(分组选择器)
- 语法:
选择器1,
选择器2,
选择器3,
...
选择器n {
属性名: 属性值;
}
- 通常用于集体声明,可缩小样式表体积。
3.HTML元素间的关系
- 父元素:直接包裹某个元素的元素
- 子元素:被父元素直接包含的元素
- 祖先元素:父亲的父亲...,一直往外找,都是祖先
- 后代元素:儿子的儿子...,一直往里找,都是后代
- 兄弟元素:具有相同父元素的元素
4.后代选择器
- 作用:选中指定元素中符合要求的后代元素
- 语法:
选择器1 选择器2 选择器3 ... 选择器n {
属性名: 属性值;
}
/*先写祖先 再写后代*/
- 举例:
/*选中ul中的所有li*/
ul li {
color: red;
}
/*选中ul中的所有li中的a*/
ul li a {
color: green;
}
/*选中类名为sub元素中的所有li*/
.sub li {
color: orange;
}
/*选中类名为sub元素中的所有类名为obj的li*/
.sub li .obj{
color: blue;
}
- 结构要符合HTML嵌套要求,例如:不能p中写h1~h6。
5.子代选择器
- 作用:选中指定元素中,符合要求的子元素(先写夫,再写子)
- 语法:
选择器1>选择器2>选择器3>......选择器n{
属性名: 属性值;
}
- 子代选择器最终选择的是子代,子就是指儿子。
6.兄弟选择器
(1)相邻兄弟选择器
- 作用:选中指定元素后,符合条件的相邻兄弟元素(仅向下相邻)
- 语法:
选择器1+选择器2 {
属性名: 属性值;
}
(3)通用兄弟选择器
- 作用:选中指定元素后,符合条件的所有兄弟元素(仅向下所有)
- 语法:
选择器1~选择器2{
属性名: 属性值;
}
7.属性选择器
- 作用:选中属性值符合一定要求的元素
- 语法:
- [属性名] 选中具有某个属性的元素
- [属性名="值"] 选中包含某个属性的元素,且属性值等于指定值
- [属性名^="值"] 选中包含某个属性,且属性值以指定值开头的元素
- [属性名$="值"] 选中包含某个属性,且属性值以指定值结尾的元素
- [属性名*="值"] 选中包含某个属性,且属性值包含指定值的元素
/*第一种写法:选中具有title属性的元素*/
[title]{
color: red;
}
/*第二种写法:选中具有title属性的元素,且属性值为xxx的元素*/
[title="xxx"]{
color: red;
}
/*第三种写法:选中具有title属性的元素,且属性值以a开头的元素*/
[title^="a"]{
color: red;
}
/*第四种写法:选中具有title属性的元素,且属性值以y开头的元素*/
[title$="a"]{
color: red;
}
/*第五种写法:选中具有title属性的元素,且属性值中包含字母a的元素*/
[title*="a"]{
color: red;
}
8.伪类选择器
(1)作用
选中特殊状态的元素
(2)动态伪类
- :link 超链接未被访问的状态
- :visited 超链接访问过的状态
- :hover 鼠标悬停在元素上的状态
- :active 元素激活的状态(激活:按下鼠标不松开)
- :focus 获取焦点的元素(表单类元素才能使用)
<style>
/*选中的是没有访问过的a元素*/
a:link{
color: brown;
}
/*选中的是访问过的a元素*/
a:visited{
color: blue;
}
/*选中的是鼠标悬浮状态的元素*/
a:hover{
color: coral;
}
/*选中的是激活状态的a元素*/
a:active{
color: darkcyan;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
</body>
(3)结构伪类
- :first-child 所有兄弟元素中的第1个元素
- :last-child 所有兄弟元素中的倒数第1个
- :nth-child(an+b) 所有兄弟元素的从n=0开始代入得到的第an+b的元素 (前5个:-n+5)
(偶数2n/even 奇数2n+1/odd) (0或不写:什么都选不中) (n:选中所有子元素)
- :nth-last-child(n) 所有兄弟元素中的倒数第n个
- :nth-first-of-type(n) 所有同类型兄弟元素中的正数第n个
- :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
- :only-child 选中没有兄弟的元素
- :only-of-type 选择没有同类型兄弟的元素
- :root 根元素
- :empty 内容为空元素(空格也算内容)
(4)否定伪类
- 作用:排除满足括号中条件的元素
- 语法: :not(选择器)
div>p:not(.类名){
属性名: 属性值;
}
div>p:not(title^="xx"){
属性名: 属性值;
}
div>p:not(:first-child){
属性名: 属性值;
}
(5)UI伪类
- :checked 被选中的复选框或单选按钮
- :enable 可用的表单元素(没有disabled属性)
- :disabled 不可用的表单元素(有disabled属性)
<head>
<style>
input:checked{
width:80px;
height:80px;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
(6)目标伪类
- 作用:选中锚点指定的元素
- 语法: :target
div:target{
background-color:green;
}
(7)语言伪类
- 作用:根据指定的语言选择元素(本质是看lang属性的值)
- 语法: :lang()
<head>
<style>
div:lang(en){
属性名: 属性值;
}
div:lang(zh-CN){
属性名: 属性值;
}
</style>
</head>
<body>
<div>你好</div>
<div lang="en">hello</div>
</body>
9.伪元素选择器
- 伪元素不是元素,是元素中的一些特殊位置
- 作用:选中元素中的一些特殊位置
- 语法:
- ::first-letter 选中元素中的第一个文字
- ::first-line 选中元素中的第一行文字
- ::selection 选中被鼠标选中的内容
- ::placeholder 选中输入框的提示文字
- ::before 在元素最开始的位置,创建一个子元素(必须用content属性指定内容)
- ::after 在元素最后的位置,创建一个子元素(必须用content属性指定内容)
<head>
<style>
/*选中的是div中的第一个文字*/
div:first-letter{
color: aqua;
font-size: 40px;
}
/*选中的是div中的第一行文字*/
div:first-line{
color: blue;
}
/*选中的是div中被鼠标选择的文字*/
div::selection{
background-color: darkkhaki;
color:darkred
}
/*选中的是input元素中的提示文字*/
input::placeholder{
color: aquamarine;
}
/*选中的是p元素最开始的位置,随后创建一个子元素*/
p::before{
content:"¥"
}
/*选中的是p元素最开始的位置,随后创建一个子元素*/
p::after{
content:".00"
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam rem eos facilis ex sint aspernatur veniam illo. Laudantium, ex, recusandae ea dolor laborum facilis eaque non aliquid, quaerat magni quis.</div>
<br>
<input type="text" placeholder="请输入用户名">
<p>199</p>
<p>299</p>
<p>399</p>
<p>499</p>
</body>
10.选择器优先级
- 通过不同的选择器,选中相同的元素,并为相同的样式名设置不同的值是,会发生样式冲突
- 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
- 格式:(a,b,c) 比较权重 从左到右依次比较大小,前位胜出后,后面不再比较
a:ID选择器的个数
b:类、伪类、属性选择器的个数
c:元素、伪元素选择器的个数
- !important; 优先级最高!比行内样式还高!
.seek{
color: red; !important;
font-size: 40px;
}
五.CSS三大特性
1.层叠性
- 发生样式冲突时根据一定的规则(选择器优先级),进行样式的层叠(覆盖)。
- 比较权重时无法决定优先,此时按照顺序。
2.继承性
- 元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
- 规则:优先继承离得近的。
- 常见的可继承属性:text-?? font-?? line-?? color ......
- 参照MDN网站,可查询属性是否可以被继承。
- background-color不能被继承
3.优先级
- !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式
- 计算权重需注意:并集选择器的每一个部分时分开算的
六.颜色表示
1.颜色名
red green blue yellow ......
2.rgb与rgba
- 红绿蓝三原色,每项取值范围0~255,也可使用百分比表示
- 红色rgb(255,0,0),绿色rgb(0,255,0),蓝色rgb(0,0,255), 黑色rgb(0,0,0),白色rgb(255,255,255)
- 若三种颜色值相同,呈现的是灰色,值越大,灰色越浅
- 获取颜色:取色器
- rgba:a表示透明度,rgb(x,x,x,x)
3.十六进制表示法——HEX与HEXA
- #开头,将数字转换成十六进制表示(0~9+a~f),最小值00,最大值ff
- 红色#ff0000(#f00),绿色#00ff00(#0f0),蓝色#0000ff(#00f),黑色#000000(#000),白色#ffffff(#fff)
- 如果每种颜色的两位都是相同的,可简写成三位
- HEXA:A表示透明度(IE浏览器不支持HEXA)
4.HSL与HSLA(用的不多)
- hsl(色相,饱和度,亮度);
- 色相:0~360度,表示:xdeg(度)或x
- 饱和度:0%~100%(或小数形式)(0%全灰,100%没有灰)
- 亮度:0%~100%(或小数形式)(0%黑色,100%白色)
- HSLA:A表示透明度,hsl(色相,饱和度,亮度,透明度);
七.常见字体属性
1.字体大小
- 语法:
div{
font-size: 40px;
}
-
通常给body设置font-size属性,这样body的其他元素就都可以继承了。
-
借助控制台看样式F12
2.字体族
- 语法:
div{
font-family:"微软雅黑";
}
div{
font-family:"微软雅黑","华文彩云","华文琥珀";
}
/*按照顺序对应,如果设备在没有前面这个字体,继续向后对应*/
/*类型要相同,全是衬线,或全是非衬线*/
div{
font-family:"Microsoft YaHei";
}
div{
font-family:"Microsoft YaHei","STCaiyun","STHupo",sans-serif;
}
-
设置多个字体时通常在最后写上serif(衬线字体)或sans-serif(非衬线字体)
-
windows系统中默认字体是微软雅黑。
3.字体风格
- 语法:
div{
font-size: normal; /*正常 默认值*/
}
div{
font-size: italic; /*倾斜,使用字体自带的斜体效果(推荐使用)*/
}
div{
font-size: oblique; /*倾斜,强制倾斜产生的斜体效果*/
}
4.字体粗细
- 语法:
div{
font-weight: lighter; /*细*/
}
div{
font-weight: normal; /*正常*/
}
div{
font-weight: bold; /*粗*/
}
div{
font-weight: bolder; /*很粗,多数字体不支持*/
}
div{
font-weight: 100; /*数字表示:范围100~1000,无单位*/
} /*100~300等同于lighter,400~500等同于normal,600及以上等同于bold*/
5.字体复合属性(更推荐)
- 语法:font,把字体样式合并成一个属性
- 编写规则:
- 字体大小、字体族必须都写上:字体族放倒数第一位,字体大小倒数第二位
- 各个属性之间用空格隔开
- 示例:
div{
font: bold italic 100px "STCaiyun","STHupo",sans-serif;
}
6.iconfont字体图标
iconfont是阿里旗下的一套图标库,可下载项目图标,并在项目中使用。
原理:将很多 icon 做成字体库,通过样式或者字体对应的字符集来显示这个 icon
使用:
-
新建项目,添加图标,点击添加入库,点击右上角购物车图标添加刚才使用的项目
-
引入:将字体库下载到本地,将iconfont.css引入到项目中
-
Unicode方式
@font-face {
font-family: 'iconfont'; /*Project id 4437639*/
src: url('//at.alicdn.com/t/c/font_4437639_40vegiywx36.woff2?t=17083216910009') format('woff2'),
url('//at.alicdn.com/t/c/font_4437639_40vegiywx36.woff?t=17083216910009') format('woff'),
url('//at.alicdn.com/t/c/font_4437639_40vegiywx36.ttf?t=17083216910009') format('truetype');
}
<link rel="stylesheet" href="./iconfont/iconfont.css">
<body>
<i class="iconfont"></i>
</body>
特点:兼容性最好,支持ie6+及所有现代浏览器;按字体的方式去动态调整图标大小,颜色等;
不支持多色图标,只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
-
Font class方式--解决unicode书写不直观,语意不明确的问题
同Unicode一样,在图标上复制对应的代码即可
<link rel="stylesheet" href="./iconfont/iconfont.css">
<body>
<i class="iconfont icon-dingwei1"></i>
</body>
特点:兼容性好,支持IE8+及所有现代浏览器;相比于Unicode语意明确,书写更直观;替换图标时,使用class定义图标,只需要修改class里面的Unicode引用;不支持多色图标。
-
Symbol方式
直接在图标上复制对应的代码即可
<script src="./iconfont/iconfont.js"></script>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dingwei1"></use>
</svg>
</body>
特点:支持多色图标,不再受单色限制;支持通过 font-size, color 来调整样式;兼容性较差,支持 IE9+及现代浏览器;浏览器渲染 SVG 的性能一般,不如 png。
7.SVG图标
使用:
1.新建项目,添加图标,点击添加入库,点击右上角购物车图标添加刚才使用的项目
2.引入:引入到html里
3.获取该svg的path的TotalLength:
-
在控制台元素页找到path并点击
-
打开控制台输入$0.getTotalLength()获取当前元素的长度,如果结果是小数点就加1
- 获取svg,给它添加css动画
.a{
stroke:black; //边的颜色
stroke-width: 10; //边的宽度
stroke-dashoffset: 3339; //获取的长度值
stroke-dasharray: 3339; //二者数值一样
}
- 如果元素自带填充就fill设为none,如果没有stroke就给它加一个stroke,看情况进行调整
4.定义一个动画,直接复制
@keyframes stroke{
to{
stroke-dashoffset: 0;
}
}
5.添加动画
.a{
stroke:black;
stroke-width: 10;
stroke-dashoffset: 3339;
stroke-dasharray: 3339;
animation: stroke 1s infinite;
}
- 通过描边修改svg粗细
- 给svg里的path加一个stroke(描边颜色)和stroke-width(描边粗细)即可
<svg t="..." class="icon" ...>
<path ..." fill="black" p-id="10093" stroke="black" stroke-width="30"></path>
</svg>
八.常用文本属性
1.文本颜色
第六部分颜色表示已作出介绍
2.文本间距
- 语法:属性值为像素px,正值增大间距,负值缩小间距。
div{
letter-spacing: 20px; /*字母间距,对英文字母和汉字都起作用*/
}
div{
word-spacing: 20px; /*仅对单词间的间距起作用,通过空格识别词*/
}
3.文本修饰
- 语法:
div{
text-decoration: none; /*没有线*/
}
div{
text-decoration: overline; /*上划线*/
}
div{
text-decoration: line-through; /*线从中间穿过,即删除线*/
}
div{
text-decoration: underline; /*下划线*/
}
div{
text-decoration: underline wavy rgb(255,0,0); /*下划红色波浪线*/
}
/*wavy波浪线,dotted点线,dashed虚线,double双实线*/
/*三者没有顺序限制,但最好顺序为:线的位置 线的样式 线的颜色,中间加空格*/
<ins>测试1</ins> /*下划线*/
<del>测试2</del> /*删除线*/
4.文本缩进
- 语法:
div{
font-size: 40px;
text-indent: 80px; /*80=40*2,首行缩进两格*/
}
5.文本对齐-水平
- 语法:
div{
text-align: left; /*左对齐(默认值)*/
}
div{
text-align: center; /*居中对齐*/
}
div{
text-align: right; /*右对齐*/
}
6.font-size
- 由于字体设计原因,文字最终呈现的大小并不一定与font-size的值一致。
- 通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下一些。
7.行高
- 属性名:line-height
- 语法:
div{
line-height: 40px; /*写法1:值为像素*/
}
div{
line-height: normal; /*写法2:值为normal*/
}
div{
line-height: 1.5; /*常用 写法3:值为数值:字体像素倍数*/
}
div{
line-height: 150%; /*写法4:值为百分比*/
}
-
行高过小:文字重叠,行高最小值是0,不能为负数。
-
line-height可继承,且为了能更好呈现文字,最好写数值。
-
line-height和height的关系:
-
设置了height,高度就是height的值
-
没有设置height,高度=line-height*行数
-
应用场景:
-
调整多行文字的间距
-
单行文字的垂直居中
div{
font-size: 40px;
background-color: red;
height: 300px;
line-height: 300px;
}
8.文本对齐-垂直
- 顶部:无需任何属性,默认顶部对齐
- 居中:单行文字——让height = line-height即可;多行文字——定位
- 底部:单行文字——让line-height = (height*2) - font-size - x(x根据字体族动态决定); 更好的方法——定位
9.vertical
- 作用:指定同一行元素之间,或表格单元格内文字的垂直对齐方式。
- 语法:不能控制块元素
.cls{
font-size: 40px;
color: red;
vertical-align: top; /*顶部*/
}
.cls{
font-size: 40px;
color: red;
vertical-align: middle; /*使元素的中部与父元素的基线加上父元素字母x的一半对齐*/
}
.cls{
font-size: 40px;
color: red;
vertical-align: baseline; /*默认,使元素的基线与父元素的基线对齐*/
}
.cls{
font-size: 40px;
color: red;
vertical-align: bottom; /*底部*/
}
九.常用属性
1.列表相关属性
- 可以作用在 ul、ol、li 元素上
CSS属性名 | 功能 | 属性值 |
---|---|---|
list-style-type | 设置列表符号 | none:不显示前面的标识(常用) square:实心方块 disc:圆形 decimal:数字 lower-roman:小写罗马字 upper-roman:大写罗马字 lower-alpha:小写字母 upper-alpha:大写字母 |
list-style-position | 设置列表符号的位置 | inside:在 li 的里面 outside:在 li 的外面 |
list-style-image | 自定义列表符号 | url(图片地址) |
list-style | 复合属性 | 没有数量、顺序的要求 |
2.表格相关属性
(1)边框相关属性(其他元素也能用)
CSS属性名 | 功能 | 属性值 |
---|---|---|
border-width | 边框宽度 | CSS中可用的长度值 |
border-color | 边框颜色 | CSS中可用的颜色值 |
border-style | 边框风格 | none:默认值 solid:实线 dashed:虚线 dotted:点线 double:双实线 |
border | 边框复合属性 | 没有数量、顺序的要求 |
(2)表格独有属性
CSS属性名 | 功能 | 属性值 |
---|---|---|
table-layout | 设置列宽度 | auto:自动,列宽根据内容计算(默认值) fixed:固定列宽,平均分 |
border-spacing | 单元格间距 | CSS中可用的长度值 生效的前提:单元格边框不能合并 |
border-collapse | 合并单元格边框 | collapse:合并 separate:不合并(默认值) |
empty-cells | 隐藏没有内容的单元格 | show:显示,默认 hide:隐藏 生效的前提:单元格不能合并 |
caption-side | 设置表格标题位置 | top:上面(默认值) bottom:在表格下面 |
3.背景相关属性
CSS属性值 | 功能 | 属性值 |
---|---|---|
background-color | 设置背景颜色 | 符合CSS中颜色规范的值 默认背景颜色是transparent |
background-image | 设置背景图片 | url(图片地址) |
background-repeat | 设置背景重复方式 | repeat:重复,铺满整个元素,默认值 repeat-x:只在水平方向重复 repeat-y:只在垂直方向重复 no-repeat:不重复 |
background-position | 设置背景图位置 | 通过关键字设置: 写两个值,用空格隔开 水平:left、center、right 垂直:top、center、bottom 如果只写一个值,另一个方向的值取center 如果只写一个center,则水平垂直都是center 通过长度指定坐标位置: 以元素左上角为坐标原点,设置图片左上角的位置,分别是x坐标、y坐标。 只写一个值,会被当作x坐标,y坐标取center |
background | 复合属性 | 没有数量、顺序要求 |
4.鼠标相关属性
CSS属性名 | 功能 | 属性值 |
---|---|---|
cursor | 设置鼠标光标的格式 | pointer:小手 move:移动图标 text:文字选择器 crosshair:十字架 wait:等待 help:帮助 自定义鼠标图标: url(鼠标图片地址),上述属性值 |
十.CSS盒子模型
1.常用长度单位
- px:像素
- em:相对元素font-size的倍数
- rem:相对根字体大小,html标签就是根
- %:相对父元素计算
- 注意:CSS中设置长度必须加单位,否则样式无效
2.元素的显示模式
(1)块元素 block(块级元素)
- 在页面中独占一行,不会与任何元素共用一行,从上到下排列
- 默认宽度:撑满父元素
- 默认高度:由内容撑开
- 可以通过CSS设置宽高
- 显示模式:
- 主体结构标签:<html> <body>
- 排版标签:<h1>~<h6> <hr> <p> <pre> <div>
- 列表标签:<ul> <ol> <li> <dl> <dt> <dd>
- 表格相关标签:<table> <tbody> <thead> <troof> <tr> <caption>
- <form> <option>
(2)行内元素 inline(内嵌元素)
- 在页面中不独占一行,一行中不能容纳下的行内元素会在下一行从左到右排列
- 默认宽度:由内容撑开
- 默认高度:由内容撑开
- 无法通过CSS设置宽高
- 显示模式:
- 文本标签:<br> <em> <strong> <sup> <del> <ins> <span>
- <a> <label>
(3)行内块元素 inline-block(内联块元素)
- 在页面中不独占一行,一行中不能容纳下的行内元素会在下一行从左到右排列
- 默认宽度:由内容撑开
- 默认高度:由内容撑开
- 可以通过CSS设置宽高
- 显示模式:
- 图片:<img>
- 单元格:<td> <th>
- 表单控件:<input> <textarea> <select> <button>
- 框架标签:<iframe>
3.修改元素的显示模式
- 通过CSS中的display属性可以修改元素的默认显示模式
属性名 | 值 | 描述 |
---|---|---|
display | none | 元素会被隐藏 |
block | 元素将作为块级元素显示 | |
inline | 元素将作为行内元素显示 | |
inline-block | 元素将作为行内块元素显示 |
4.组成部分
- margin(外边距):盒子与外界的距离
- border(边框):盒子的边界
- padding(内边距):紧贴内容的补白区域
- content(内容):元素中的文本或后代元素都是它的内容
- 盒子大小 = content + 左右padding + 左右border
- margin不会影响盒子大小,但会影响盒子位置。
- 默认宽度:
总宽度 = 父的content - 自身的左右margin
内容区的宽度 = 父的content - 自身的左右border - 自身的左右padding
(1)内容区-content
CSS属性名 | 功能 | 属性值 |
---|---|---|
width | 设置内容区域宽度 | 长度 |
max-width | 设置内容区域的最大宽度 | 长度 |
min-width | 设置内容区域的最小宽度 | 长度 |
height | 设置内容区域高度 | 长度 |
max-height | 设置内容区域最大高度 | 长度 |
min-height | 设置内容区域最小高度 | 长度 |
(2)内边距-padding
CSS属性名 | 功能 | 属性值 |
---|---|---|
padding-top | 上内边距 | 长度 |
padding-right | 右内边距 | 长度 |
padding-bottom | 下内边距 | 长度 |
padding-left | 左内边距 | 长度 |
padding | 复合属性 | 长度,可以设置1~4个值 |
- padding复合属性的使用规则
- padding: 10px; 上下左右内边距都是10px
- padding: 10px 20px; 上下10px,左右20px
- padding: 10px 20px 30px; 上10px,左右20px,下30px
- padding: 10px 20px 30px 40px; 上10px,右20px,下30px,左40px(顺时针)
- padding的值不能为负数
- 行内元素的左右内边距是没问题的,上下内边距不能完美设置
- 块级元素、行内块元素,四个方向内边距都可以完美设置
(3)边框-border
CSS属性名 | 功能 | 属性值 |
---|---|---|
border-style | 边框线风格 复合了四个方向的边框风格 | none:默认值 solid:实线 dashed:虚线 dotted:点线 double:双实线 |
border-width | 边框线宽度 复合了四个方向的边框宽度 | 长度,默认3px |
border-color | 边框线颜色 复合了四个方向的边框颜色 | 颜色,默认黑色 |
border | 复合属性 | 没有顺序和数量要求 |
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color | 分别设置各个方向的边框 | 同上 |
(4)外边距-margin
CSS属性值 | 功能 | 属性值 |
---|---|---|
margin-left | 左外边距 | css中的长度值 |
margin-right | 外右边距 | css中的长度值 |
margin-top | 上外边距 | css中的长度值 |
margin-bottom | 下外边距 | css中的长度值 |
margin | 复合属性,可写1~4个值,规律如padding | css中的长度值 |
(1)注意事项:
- 子元素的margin是参考父元素的content计算的(父亲的content中承载着子元素)
- 上margin、左margin:影响自己的位置;
- 下margin、右margin:影响后面兄弟元素的位置;
- 块级元素、行内块元素,均可以完美地设置四个方向的margin;
- 行内元素,左右margin可以完美设置,上下margin设置无效
- margin的值可以是负值
- 块级元素左右margin都设置成auto,则在其父元素内水平方向居中;
- 块级元素若上下margin都设置auto,不会在其父元素内垂直方向居中;
(2)塌陷问题:
- 第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin会作用在父元素上
- 解决margin塌陷:
- 给父元素设置不为0的padding
- 给父元素设置宽度不为0的border
- 给父元素设置css样式overflow:hidden
(3)合并问题
- 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加
- 解决margin合并:
无需解决,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了
5.处理内容溢出
CSS属性名 | 功能 | 属性值 |
---|---|---|
overflow | 溢出内容的处理方式 | visible:显示,默认值 hidden:隐藏(常用) scroll:显示滚动条,不论内容是否溢出 auto:自动显示滚动条,内容不溢出不显示(常用) |
overflow-x | 水平方向溢出内容的处理方式 | 同overflow |
overflow-y | 垂直方向溢出内容的处理方式 | 同overflow |
-
overflow-x、overflow-y不能一个是hidden,一个是visible,是实验性属性,不建议使用
6.隐藏元素的两种方式
(1)visibility属性
默认值是show,将属性值设置为hidden,隐藏元素
元素看不见了,但还占有原来的位置(元素大小依然保持)
(2)display属性
设置display:none,隐藏元素
彻底的隐藏,看不见也不占用任何位置,没有大小宽高
7.样式的继承
有些样式会继承,元素如果本身设置了某个样式,就使用本身设置的样式;
但如果本身没有设置某个样式,会从父元素开始一级一级继承(优先继承离得近的祖先元素)
- 会继承的CSS属性
字体属性、文本属性(除了vertical-align)、文字颜色等
- 不会继承的CSS属性
边框、背景、内边框、外边距、宽高、溢出方式等
- 能继承的属性都是不影响布局的,即和盒子模型没关系
8.默认样式
优先级:元素的默认样式 > 继承的样式
所以如果要重置元素的默认样式,选择器一定要直接选择到该元素
- <a>:下划线、字体颜色、鼠标小手
- <h1>~<h6>:文字加粗、文字大小、上下外边距
- <p>:上下外边距
- <ul> <ol>:左内边距
- <body>:8px外边距(四个方向)
9.布局小技巧
- 行内元素、行内块元素,可以被父元素当作文本处理,即可以像处理文本对齐一样,去处理行内、行内块元素在父元素中的对齐。如:text-align、line-height、text-indent
- 如何让子元素在父亲中水平居中
- 子元素为块元素:给父元素加上 margin: 0 auto;
- 子元素为行内元素、行内块元素:给父元素加上 text-align: center;
- 如何让子元素在父亲中垂直居中
- 子元素为块元素:给子元素加上 margin:-top,值为(父元素content - 子元素盒子总高)/ 2
- 子元素为行内元素、行内块元素:让父元素的height = lint-height,每个子元素都加上:vertical-align:middle; 若想绝对垂直居中,父元素font-size设置为0
- 元素之间的空白问题
产生原因:行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符
解决方案:
- 去掉换行和空格(不推荐)
- 给父元素设置font-size: 0,再给需要显示文字的元素,单独设置字体大小(推荐)
- 行内块的幽灵空白问题
产生原因:行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的
解决方案:
- 给行内块设置vertical,值不为baseline即可,设置为middle、bottom、top均可
- 若父元素中只有一张图片,设置图片为display: block
- 给父元素设置font-size: 0,如果该行内块内部还有文本,则需单独设置font-size
十一.浮动
主流的页面布局方式之一
语法:float: left; float: right;
1.元素浮动后的特点
- 脱离文档流
- 不管浮动前是什么元素,浮动后默认宽与默认高都是被内容撑开(尽可能小),而且可以设置宽高
- 不会独占一行,可以与其他元素共用一行
- 不会margin合并,也不会margin塌陷,能够完美地设置四个方向的margin和padding
- 不会像行内块一样被当作文本处理(没有行内块的空白问题)
2.浮动后的影响
- 对兄弟元素的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面:对前面的兄弟无影响
- 对父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然舒服浮动的元素
3.解决浮动产生的影响(清除浮动)
- 给父元素指定高度
- 给父元素也设置浮动,带来其他影响
- 给父元素设置overflow: hidden
- 在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置clear: both;
- 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与上一个相同(推荐使用)
.parent::after{
content: " ";
display: block;
clear:both;
}
- 布局原则:设置浮动时,兄弟元素要么全部浮动,要么全部不浮动
- clear: left; 清除所有左浮动效果
- clear: right; 清除所有右浮动效果
十二.定位
1.相对定位
(1)设置相对定位
-
给元素设置position:relative即可实现相对定位
-
使用 left、right、top、bottom四个属性调整位置,属性值可为负值
.box{
position:relative;
left:100px;
}
(2)相对定位的参考点
相对自己原来的位置
(3)相对定位的特点
- 不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
- 默认规则:定位的元素会盖在普通元素之上;都发生定位的两个元素,后写的元素会盖在先写的元素之上。
- left不能和right一起设置,top和bottom不能一起设置。若同时设置,right、bottom失效。
- 相对定位的元素,也能继续浮动,但不推荐这样做。
- 相对行为的元素,也能通过margin调整位置,但不推荐这样做。
注意:绝大多数情况下,相对定位,会与绝对定位配合使用。
2.绝对定位
(1)设置绝对定位
-
给元素设置position:absolute即可实现相对定位
-
使用 left、right、top、bottom四个属性调整位置,属性值可为负值
(2)绝对定位的参考点
参考它的包含块
包含块:
- 对于没有脱离文档流的元素:包含块就是父元素。
- 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位,那包含块就是整个页面)。
(3)绝对定位的特点
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left不能和right一起设置,top和bottom不能一起设置。若同时设置,right、bottom失效。
- 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
- 绝对定位的元素,也能通过margin调整位置,但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。
定位元素:默认宽、高都被内容所撑开,且能自由设置宽高。
3.固定定位
(1)设置为固定定位
- 给元素设置 position:fixed 即可实现固定定位。
- 使用left、right、top、bottom 四个属性调整位置。
(2)固定定位的参考点
参考它的视口
视口:对于PC浏览器来说,视口就是我们看网页的那扇“窗户”。
(3)固定定位的特点
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left不能和right一起设置,top和bottom不能一起设置。若同时设置,right、bottom失效。
- 固定定位、浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
- 固定定位的元素,也能通过margin调整位置,但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
4.粘性定位
(1)设置粘性定位
- 给元素设置 position:sticky 即可实现固定定位。
- 使用left、right、top、bottom 四个属性调整位置,最常用的是top 值。
.first{
position: sticky;
top: 10px;
}
(2)粘性定位的参考点
离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。
(3)粘性定位的特点
- 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。最常用的值是top值。
- 粘性定位和浮动可以同时设置,但不推荐这样做。
- 固定定位的元素,也能通过margin调整位置,但不推荐这样做。
- 粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。
5.定位的层级
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
- 如果位置发生重叠,默认情况是:后面的元素 会显示在前面元素之上。
- 可以通过 css 属性 z-index调整元素的显示层级。
- z-index 的属性值是数字,没有单位,值越大显示层级越高。
- 只有定位的元素设置 z-index才有效。
- 如果z-index值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级。
6.定位的特殊应用
- 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高。
- 发生相对定位后,元素依然是之前的显示模式。
- 以下所说的特殊应用,只针对绝对定位和固定定位的元素,不包括相对定位的元素。
(1)让定位元素的宽充满包含块
- 块宽想与包含块一致,可以给定位元素同时设置left 和right为e。
- 高度想与包含块一致,top 和 bottom设置为0。
(2)让定位元素在包含块中居中
/*方案一*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*方案二*/
left: 550%;
top: 50;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
/*注意:该定位的元素必须设置宽高*/
十三.动画
1.transform
属性名 | 功能 | 属性值 |
---|---|---|
transform | 水平方向平移apx | translate(apx); |
水平方向平移xpx 垂直方向平移ypx | translate(xpx,ypx); translate(a%,b%) (参照自身宽高) | |
旋转a度(正数顺时针旋转,负数逆时针旋转) | rotate(adeg) 默认以元素中心为原点旋转 修改旋转原点: transform-origin: center; transform-origin: top left; transform-origin: 50px 50px; transform-origin: bottom right 60px; | |
实现缩放效果 | scale(x); 宽和高都缩放到x倍数 | |
scale(x,y); 宽缩放到x倍数,高缩放到y倍数 | ||
默认元素中心点为缩放基点 修改缩放基点: transform-origin: center; transform-origin: top left; transform-origin: 50px 50px; transform-origin: bottom right 60px; | ||
倾斜 | skew(adeg);倾斜a度 | |
skew(xdeg,ydeg); 水平倾斜x度,垂直倾斜y度 | ||
默认元素中心点为倾斜基点 修改倾斜基点: transform-origin: center; transform-origin: top left; transform-origin: 50px 50px; transform-origin: bottom right 60px; | ||
实现多种效果 | matrix(a,b,c,d,e,f); a d:缩放 b c:倾斜或斜切 e f:平移 |
2.transition
语法:transition: property duration timing-function delay;
property:需要过渡的属性
duration:过渡的时长
delay:开始延迟时间
timing-function:缓动函数
- 贝塞尔缓动函数
函数 | 变化趋势 | 实际函数 |
---|---|---|
ease | 缓慢开始,陡然加速,再逐渐减速至结束 | cubic-bezier(0.25,0.1,0.25,1.0) |
ease-in | 缓慢开始,再逐渐加速至结束,最终突然停止 | cubic-bezier(0.42,0.0,1.0,1.0) |
ease-out | 突然开始,再逐渐减速至结束 | cubic-bezier(0.0,0.0,0.58,1.0) |
ease-in-out | 缓慢开始,然后加速,再减速至结束 | cubic-bezier(0.42,0.0,0.58,1.0) |
- 线性缓动函数
- linear 从开始到结束都是固定的速度,实际函数是linear(0,1)
- linear(0,0.25,1) 开始较慢的速度均匀变化,后面速度突然变快
- 阶跃缓动函数
steps(<number-of-steps>, <direction>);
3.animation & keyframes
@keyframes name {
keyframe-selector {
css-styles;
}
...
}
/*
name:关键帧列表的名字
keyframe-selector:关键帧选择器
css-styles:关键帧的样式
*/
animation(将关键帧列表和元素关联起来,可指定动画的一些行为和细节):
<name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state> <keyframes-name>
infinite 无限循环
方向: normal、reverse反向执行、alternate交替执行、alternate-reverse
- 动画前后样式应用的规则 fill-mode
- none:默认值,在动画开始前和开始后,关键帧列表中定义的样式对元素没任何影响
- forwards :动画结束后会让元素保留动画最后一帧的样式
- backwards:在动画开始之前会让元素使用动画第一帧的样式
- both:同时拥有forwards和backwards的特点
- 动画播放的状态play-state——控制动画是暂停还是播放
- paused 暂停状态
- running 播放状态
从暂停——播放,动画会从暂停的位置继续播放,可用于技能优化
十四.响应式设计
1.媒体查询
根据指定的条件,针对不同的媒体类型(screen print)定义不同的 CSS 样式,让使用不同设备的用户都能得到最佳的体验。
实现
- 直接在CSS文件中使用
@media screen and (max-width: 960px){
body{
background-color:#black
}
}
@media screen and (max-width: 320px) {
/*0~320*/
body {
background: pink;
}
}
@media screen and (min-width: 376px) and (max-width: 425px) {
/*376~425*/
body {
background: yellow;
}
}
@media screen and (min-width: 769px) {
/*769~+∞*/
body {
background: green;
}
}
-
使用@import导入
@import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
@import 'index02.css' screen and (max-width:720px)
-
在link标签中使用
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
2.视口设置——设置meta标签
让视口(网页的可视区域)的宽度等于设备的宽度,并禁止用户对页面的缩放
视口就是网页可见区域的尺寸,设置视口时只设置宽度就行,具体高度由网页内容自动撑开。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- initial-sacle:初始缩放比例
- maximum-scale:表示允许用户缩放的最大比例, 0~10.0;
- minimum-scale:表示允许用户缩放到最小比例, 0~10.0;
- user-scalable:表示用户是否可以手动缩放,“yes”表示允许缩放,“no”表示禁止缩放。
十五.优化与性能
1.CSS 文件的合并和压缩
(1)合并(mini-css-extract-plugin)
yarn add -D mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css
// 装载器配置
module:{
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'css-loader'] // css顺序是从右到左,从下到上
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] // less顺序是从右到左,从下到上
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader'] // sass顺序是从右到左,从下到上
},
]
},
// mini-css-extract-plugin
plugins: [
new MiniCssExtractPlugin({ // 抽取css放在公共文件夹
filename: 'index.css' // 合并css的公共文件
})
]
(2)压缩
- optimize-css-assets-webpack-plugin
yarn add -D optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css
// 压缩css
optimization: {
minimizer: [new OptimizeCssAssetsWebpackPlugin]
},
- css-minimizer-webpack-plugin(推荐使用)
yarn add -D css-minimizer-webpack-plugin
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin") // 最新压缩css
plugins: [
// css-minimizer-webpack-plugin
new CssMinimizerWebpackPlugin() // 压缩css
]
2.使用外部样式表以便浏览器缓存样式
- 外部样式表可以解决多页面重复问题。
- 有助于浏览器缓存,从而提高页面响应速度。
- 有利于代码分离(html和css),有利于代码阅读和维护。
3.避免使用过多的嵌套和复杂的选择器
会导致更高的计算成本,需要权衡代码的简洁性和可读性。
十六.预处理器
1.功能
- 嵌套:允许在样式规则中嵌套其他样式规则,反映层级与约束关系。
- 变量和计算:引入变量,可用于存储颜色、尺寸等信息,同时支持数学运算,减少代码重复。
- Extend和Mixin:代码片段的复用,Extend用于共享样式规则,Mixin用于在样式表中进行样式复用并可进行传参操作。
- 循环:支持在样式表中使用循环结构,适用于生成复杂但有规律的样式。
- Import:模块化,允许在样式表中导入其他样式文件,有助于提高可维护性和代码复用。
2.Sass
支持的数据类型:数字、、字符串、颜色、布尔值、空值、列表、映射
语法:
- 普通变量声明:直接用$,$变量名:变量值;
- 默认变量再后面添加 !default
- 在局部变量后添加 !global,局部变量作用域为全局变量
- 插值:
$key:margin;
$value:1;
$number:11px;
box${value}{
${key}:$number;
${key}:auto;
}
/*运行结果*/
box1{
margin:11px;
margin:auto;
}
- 作用域:.sass文件中,先取值,在定义新变量之前,使用之前的值,定义新变量之后会只用更改的值,即作用域有顺序
- map-同属性多档值:
//语法
map-get($外层变量名,内层变量名)
//举例
$font:{
s: 12px,
m: 14px,
l: 16px
};
.m1 {
font-size: map-get($font,s);//获得变量s
}
-
@mixin多个属性形成组合
//语法
@include 变量组合名;
//举例1:不带参数
@mixin n {//定义一个属性组合n
color: red;
font-size: map-get($font,l);
border: 1px solid skyblue;
}
.n1 {
@include n;//引入属性组合
border-radius: 2px;
}
//举例2:带参数
@mixin n($color) {//定义一个属性组合n
color: $color;
font-size: map-get($font,l);
border: 1px solid skyblue;
}
.n1 {
@include n(green);//引入属性组合,传参数
border-radius: 2px;
}
-
嵌套:{ }
-
伪类选择器:
//语法:
&:伪类选择器{
属性名:属性值;
}
//举例
&:hover {
background-color:tomato;
}
- 伪元素选择器:
//语法:
&::伪元素选择器{
属性名:属性值;
}
//举例
&::after {
content: ""
}
- 运算:.sass文件中,不同的单位不能进行计算,默认/是分割,而在.less中/是除号
- 函数:sass和less有的函数可以通用,但有的不可以。
round()取整,precentage()小数点换成百分数,可以自定义函数,用function定义
- 媒体查询@media
//语法:
@media screen and (max-width:500px) { xxx }
//举例:窗口宽度<=600px时,选择器的背景颜色改变
@media screen and (max-width:600px) {
background-color: yellow;
}
3.Less
- 变量:@变量名:变量值
- 嵌套:{ }
- 伪类选择器:
//语法:
&:伪类选择器{
属性名:属性值;
}
//举例
&:hover {
background-color:tomato;
}
- 伪元素选择器
//语法:
&::伪元素选择器{
属性名:属性值;
}
//举例
&::after {
content: ""
}
- 媒体查询@media
//语法:
@media screen and (max-width:500px) { xxx }
//举例:窗口宽度<=600px时,选择器的背景颜色改变
@media screen and (max-width:600px) {
background-color: yellow;
}
- 在html文件中引入生成的style.css文件
十七.布局
1.版心
- 在PC端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页的版心。
- 版心的宽度一般是960~1200px之间。
- 版心可以是一个,也可以是多个。
2.常用类名
位置 | |
---|---|
顶部导航条 | topbar |
页头 | header、page-header |
导航 | nav、navigator、navbar |
搜索框 | search、search-box |
横幅、广告、宣传图 | banner |
主要内容 | content、main |
侧边框 | aside、sidebar |
页脚 | footer、page-footer |
3.重置默认样式
很多元素都有默认样式,如:
<p>:默认上下margin
<h1>~<h6>:默认上下margin,且字体加粗
<body>:默认8px外边距
超链接:默认文字颜色和下划线
<ul>:默认左padding
(1)使用全局选择器
* {
margin: 0;
padding: 0;
......
}
- 在简单案例可以应用,实际开发中不会使用
(2)reset.css
选择到具有默认样式的元素,清空其默认的样式
(3)Normalize.css
- 官网地址:https://necolas.github.io/normalize.css/
- 相对于reset.css:
- 保护了有价值的默认样式,不是完全去掉。
- 为大部分HTML元素提供一般化的样式。
- 新增对HTML5元素的设置。
- 对并集选择器的使用比较谨慎,有效避免调试工具杂乱。
4.Flexbox布局
- 为盒子模型提供最大灵活性,任何一个容器都可以指定为flex布局
-
原理:通过给父盒子添加flex属性来控制盒子的位置和排列方式 - 父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效
- 采用Flex布局的元素成为Flex容器,它的所有子元素自动成为容器成员,成为Flex项目
- 子容器可以横向排列也可纵向排列
- 父项常见属性
属性名 | 功能 | 属性值 |
---|---|---|
flex-direction | 设置主轴(行、x轴)方向 | row:默认值从左到右 row-reverse:从右到左 column:从上到下 column-reverse:从下到上 |
justify-content | 设置主轴上的子元素排列方式(使用前确定主轴是哪个) | flex-start:默认值从头部开始,若主轴是x轴,则从左到右 flex-end:从尾部开始排列 center:在主轴居中对齐(若主轴是x轴则水平居中) space-around:平分剩余空间 space-between:先两边贴,再平分剩余空间 |
flex-wrap | 设置子元素是否换行 | nowrap:默认不换行,如果装不开会缩小子元素的宽度 wrap:换行 |
align-content | 设置侧轴(列、y轴)上的子元素排列方式(多行) | flex-start:默认值,在侧轴的头部开始排列 flex-end:从侧轴的尾部开始排列 center:在侧轴中间显示 space-around:子项在侧轴平分剩余空间 space-between:子项在侧轴先分布在两头,再平分剩余空间 stretch:拉伸 |
align-items | 设置侧轴上的子元素排列方式(单行) | flex-start:默认值,从上到下 flex-end:从下到上 center:挤在一起居中(垂直居中) stretch:拉伸 |
flex-flow | 复合属性,相当于同时设置了direction和wrap | flex-flow: row wrap; |
- 默认主轴方向:x轴方向,水平向右
- 默认侧轴方向:y轴方向,垂直向下
- 子项常见属性
属性名 | 功能 | 属性值 |
---|---|---|
flex | 定义子项目分配剩余空间,表示占多少份数 | <number> |
align-self | 控制子项自己在侧轴上的排列方式,允许单个项目与其他项目有不一样的对齐方式 | auto:默认值,表示继承父元素的align-itens属性,如果没有父元素,则等同于stretch flex-start:从上到下 flex-end:从下到上 center:挤在一起居中(垂直居中) stretch:拉伸 |
order | 定义项目的排列顺序 | 数值越小,排列越靠前,默认为0 |
5.Gird布局
- 同时控制行和列的排布和对齐方式
- 开启grid布局
.cls {
display: grid;
}
属性名 | 功能 | 属性值 |
---|---|---|
grid-template-columns | 指定每列宽度可以是固定宽度,也可用fr指定浮动宽度 | xfr yfr zfr |
column-gap | 设置列间距 | xpx |
row-gap | 设置行间距 | xpx |
gap | 统一设置行列间距 | xpx ypx |
grid-template-areas | 指定对应区域格式 | "header header header" "sidebar content content" "footer footer footer" |
grid-area | 指定对应区域格式 | header:header头部 content:main内容 sidebar:aside侧边栏 footer:footer底部 |
align-items | 子元素垂直方向对齐 | flex-start:默认值,从上到下 flex-end:从下到上 center:挤在一起居中(垂直居中) stretch:拉伸 |
justify-content | 子元素、轨道水平方向对齐 | flex-start:默认值从头部开始,若主轴是x轴,则从左到右 flex-end:从尾部开始排列 center:在主轴居中对齐(若主轴是x轴则水平居中) space-around:平分剩余空间 space-between:先两边贴,再平分剩余空间 |
align-content | 轨道垂直方向对齐 | flex-start:默认值,在侧轴的头部开始排列 flex-end:从侧轴的尾部开始排列 center:在侧轴中间显示 space-around:子项在侧轴平分剩余空间 space-between:子项在侧轴先分布在两头,再平分剩余空间 stretch:拉伸 |
6.网页制作页面布局整体思路
- 确定页面版心
- 分析页面中的模块,以及每个行模块中的列模块——页面布局第一准则
- 一行中的列模块经常浮动布局,先确定每个列的大小后确定列的位置——页面布局第二准则
- 制作HTML结构——遵循先有结构后有样式的原则