1.单元格
单元格合并
1)合并原则:
**只有同一个结构的标签中的单元格才能合并,不能跨结构合并(不能跨thead、tbody、tfoot)
2)
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 单元格个数合并 | 跨行合并,将多行的单元格垂直合并 |
clospan | 单元格个数合并 | 跨列合并,将多列的单元格水平合并 |
2.语义化标签
html5中新增加的标签,显示特点和div一致,但是比div多了不同的语义
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
3.字体样式
font 的样式连写 style weight size family ,省略可以省略前两个
1)粗细 font-weight normal正常 bold加粗
2)倾斜 font-style notmal正常 italic倾斜 100-900的数字也可以
3)字体 font-family 多个字体引号包裹逗号分割,从左往右按顺序查找有那个字体显示那个字体,如果都不支持会默认显示字体系列的默认字体
4.文本样式
1)文本缩进 text-indent
- 取值:
- 数字px
- 数字em (1em=当前标签1个字的大小)
2)文本居中 text-align
- 取值:
- left 左对齐
- center 居中
- right 右对齐
- 可以居中的标签(属性需要给父元素)
- 文本
- span \a\input\img
3)文本修饰 text-decoration
- 取值
- underline 下划线
- line-through 删除线
- ovreline 上划线
- none 无装饰线
- 开发中常用 text-decoration:none清除a标签的下划线
4)水平居中 margin:0 auto
- 如果需要让div、p、h(大盒子)水平居中,直接给当前元素本身设置即可
- margin:0 auto 一般针对固定宽度的盒子,如果大盒子没有设置宽度,此时会默认沾满父元素的宽度
5)行高 line-height
- 取值
- 数字px
- 倍数(当前font-size的倍数)
- 让单行文本垂直居中可以设置line-height:文字父元素的高度
- 网页精准布局是会设置1可以取消上下间距
- 行高和font同时书写时,需要写在font下面 因为font连接写size和line-height同一个位置
5.选择器
1)复合选择器
后代选择器(中间有空格):选择器1 选择器2{ }
子代选择器(中间大于号):选择器1>选择器2{ }
2)并集选择器 逗号分割
选择器1, 选择器2{ }
3)交集选择器 紧挨着
选择器1选择器2{ }
4)Emmet语法
5)hover伪类选择器
- 作用:选中鼠标悬停在元素上的状态,设置样式
- 语法:选择器:hover{css}
- 注意:选中的是元素的状态
6.背景
1)背景平铺 background-repeat
属性
取值 | 效果 |
---|---|
repeat | 默认值 水平和垂直都平铺 |
no-repeat | 不平铺 |
repeat-x | x轴平铺 |
repeat-y | y轴平铺 |
2)背景位置 background-position:水平位置 垂直位置
3)属性连写
background: color image repeat position
7. 元素显示模式
1)块级元素
- 属性:dispaly:block
- 特点
- 独占一行(父级的一行)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置高度
- 代表标签:div、p、h、ul、li …
2)行内元素
- 属性:dispaly:inline
- 特点
- 一行可以显示多个
- 宽高由内容撑开
- 不能设置高度
- 代表标签:a、span、b、i…
3)行内块元素
- 属性:dispaly:inline-block
- 特点
- 一行可以显示多个
- 可以设置高度
- 代表标签:input、textarea、button、select…
4)元素显示模式转换
属性 | 效果 |
---|---|
dispaly:block | 转换成块级元素 |
dispaly:inline-block | 转换成行内块元素 |
dispaly:inline | 转换成行内元素 |
8. css特性
- ul 列表设置 list-style:none属性 ,去除列表的小圆点
- body设置统一的font-size,统一不用浏览器默认文字大小
9.盒子模型
1)介绍
- 概念:
1.页面中的每个标签都可以看做一个盒子,通过盒子的视角更方便的布局。
2. 浏览器进行渲染的时候会将网页中的元素看做一个个的矩形区域,我们称之为盒子 - 盒子模型:
CSS规定每个盒子由 内容区(content) 内边距区域(padding) 边框区域(border) 外边距(margin) 构成
2)内容区
- 通过width和height设置内容区的宽高
3)边框
- 作用:设置粗细、样式、颜色,设置边框的会影响盒子大小
- 边框单方向
border-top border-bottom border-left border-right - 连写
border: width style color
4)内边距(padding)
设置内边距会影响盒子大小
5)盒子实际大小计算(手动)
6)盒子实际大小计算(自动内减 CSS3盒子模型)
属性名:box-sizing
属性值:border-box
浏览器会自动计算多余大小,自动在内容中减去
7) 外边距的单方向打的使用
8)清除内外边距
*{
margin:0;
padding:0;
}
9)外边距合并现象
10)外边距折叠现象-塌陷现象
- overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏。
- overflow:hidden超出部分隐藏。
- overflow:hidden清除浮动。
- overflow:hidden解决外边距塌陷。
11)行内元素的 margin和padding的无效情况
- 水平方向的margin和padding布局中有效
- 垂直方向的margin和padding布局中无效
12)不会撑大盒子的情况(块元素)
- 如果子盒子没有设置宽度,此时默认是父盒子的宽度,此时给子盒子设置左右的padding或者border不会撑大盒子
10. CSS布局
1)结构伪类选择器
- 作用:根据元素在HTML中的结构关系查找元素
- 优势:减少对HTML中类的依赖,有利于保持代码整洁
- 场景:常用于查找某父级选择器中的子元素
2)伪元素
- 一般页面中的非主体内容可以使用伪元素
- 区别
- 元素 HTML设置的标签
- 伪元素 由CSS模拟出得标签效果
- 种类
伪元素 | 作用 |
---|---|
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
- 注意
- 必须设置content属性才能生效
- 伪元素默认是行内元素,如果需要宽高转换为块元素
3)标准流
- 又称文档流,是浏览器在渲染和显示网页内容时默认采用的一种排版规则,规定了应该以何种方式排列元素
- 常见的标准流排版规则:
- 块级元素:从上往下,垂直布局,独占一行
- 行内元素或行内块元素:从左往右,水平布局,空间不够自动折行
4)浮动 float
- 图文环绕、网页布局
属性 | 作用 |
---|---|
left | 靠左浮动 |
right | 靠右浮动 |
- 浮动元素会脱离标准流,在标准流中不占位置
- 浮动元素比标准流高半个级别,可以覆盖标准流中得元素
- 浮动找浮动,下一个浮动会在上一个浮动元素的后面左右浮动
- 浮动元素会受到上面边界元素的影响
- 浮动元素特殊效果
- 一行可以显示多个
- 可以设置宽高
- 注意:
- 浮动的元素不能通过text-aligin:center或者margin:0 auto设置元素本身水平居中
5)清除浮动
- 浮动的介绍
- 清除浮动带来的影响,如:如果子元素浮动了,此时子元素不撑开标准流的块级父元素;因为子元素浮动后脱标了不占位置
- 目的:需要父元素有高度,从而不影响其他网页元素的布局
- 方法
- 1.直接设置父元素的高度
- 优点:简单粗暴
- 缺点:有些布局中不能固定父元素的高度,如新闻列表
- 2.额外标签
- 在父元素内容的最后添加一个块级元素,给添加的块级元素设置clear:both
- 缺点:会在页面中添加额外 的标签,网页变得复杂
- 3.单伪元素清除法
- 1.直接设置父元素的高度
/* 普通 */
.clear::after{
content: "";
display: block;
clear: both;
}
/* 优化 */
.clear::after{
content: "";
display: block;
clear: both;
/*隐藏 伪元素在网页中看不到*/
height: 0;
visibility: hidden;
}
- 4.双伪元素清除法(项目中,直接给标签加类即可清除浮动)
也可以解决margin的塌陷
.clearfix::before,.clearfix::after{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
-
5 overflow:hidden
父元素添加属性和属性值 -
6 创建BFC盒子
6)定位
- 网页的常见布局
- 2 基本使用
- 介绍:
1.1 可以解决盒子与盒子之间的层叠问题, 定位之后的元素层级最高,可以层叠在其他盒子上面
1.2 可以让盒子始终固定在屏幕中 - 基本使用
-
3 静态定位 position:static;
- 介绍:静态定位是默认值,
- 注意:静态定位就 是标准流,不能通过方位属性进行移动
-
4 相对定位 position:relative;
- 相对于自己之前的位置进行移动
- 特点:
- 需要配合方位属性实现移动
- 相对于自己原来的位置进行移动
- 在页面中占据位置 没有脱标
-
5 绝对定位 position:absolute;
- 拼爹型定位,相对于非静态定位的父元素进行定位移动
- 特点
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 页面中不占位置已经脱标
- 相对定位的对象
- 祖先元素中没有定位 相对于浏览器进行移动
- 祖先元素中有定位,相对于最近的有定位的祖先元素进行移动
-
6 子绝父相
- 让子元素相对于父元素进行自由的移动
- 含义:
- 子元素:绝对定位
- 父元素:相对定位
- 好处:父元素是相对定位,对网页布局影响小
-
7 子绝父绝
- 在使用子绝父相的时候,如果父元素已经绝对定位了,那么子元素也是用绝对定位即可。因为父元素已经定位好了,此时去修改可能会影响父级布局
-
8 子绝父相水平居中
- 步骤:
1)布局子绝父相
2)子盒子往右移动父盒子的一半, left:50%
3)再让子盒子往左移动自己的一半
(1)方法一:margin-left :负的子盒子宽度一半,缺点子盒子宽度变化时需要手动修改
(2)方法二:transform:translateX(-50%)
- 步骤:
-
9 子绝父相垂直居中
- 步骤:
1)布局子绝父相
2)子盒子往右移动父盒子的一半, left:50%
3)子盒子往下移动父盒子的一半 top:50%
3)再让子盒子往左往上各移动50%
transfrom:translate(-50%, -50%)
- 步骤:
-
10 固定定位
- 相对于浏览器进行定位
- position:fixed
- 特点
1)需要配合方位属性实现移动
2)相对于浏览器可视区域进行移动
3)不占据页面位置 已经脱标
-
11 元素的层级
- 不同布局方式元素的层级关系
标准流 < 浮动 < 定位 - 不同定位之间的层级关系
相对、绝对、固定默认层级相同
HTML写在下面的元素层级更高
- 不同布局方式元素的层级关系
-
12 更改定位元素的层级
z-index:数字
数字越大层级越高7)装饰
- 1 垂直对其方式(vertical-aligin)
-
基线:在浏览器中文字元素排版中存在对齐的基线(baseline)
-
解决行内、行内块元素垂直对其问题,当图片和文字在一行中显示时,底部是不对齐的
-
可以解决的问题
1)文本框和表单按钮无法对齐问题
2)input和img无法对齐的问题
3)div中的文本框,文本框无法贴顶
4)div不设置高度,由img撑开,此时的img标签下面会有
5)使用line-height让img标签垂直居中问题。图片和文字一样都可以使用line-height 垂直居中,但是图片默认的对其方式是底部和文字的基线对其的,需要设置vertical-aligin:middle可以垂直居中
注意:
1)行内块元素优先使用浮动完成效果
2)vertical-align:middle这个属性必须和line-height一起使用,就是说它的什么top、middle、bottom这三个属性值都是相对于line-height的,分别的含义是,行高上,行高居中,行高底。
而且还要注意的是vertical-align这个属性是加在子元素上的,并不是加在父元素上的。而且这个子元素必须是行内块元素才有效。
-
- 1 垂直对其方式(vertical-aligin)
<!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>
</head>
<style>
.main{
width: 500px;
height: 500px;
line-height: 500px;
background-color: rebeccapurple;
}
.sun{
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div class="main">
<div class="sun">
</div>
哈哈哈
</div>
</body>
</html>
-
2 光标类型(cursor):鼠标在元素上的样式
-
3 边框圆角 (border-radius)
-
4 overflow 溢出部分显示效果
-
5元素本身隐藏
- 6 元素透明(opacity)
8) 选择器扩展
- 连接伪类选择器
css绘制三角形
-
焦点伪类选择器
-
属性选择器
9)背景图处理
10 )过渡
11)文字阴影(text-shadow)
12)盒子阴影(box-shadow)
11 问题总结
1)行内块元素去除缝隙
给行内块元素的父级设置font-size:0px 在单独给子元素设置字体大小