1.标签划分
行内元素：
span b strong i em a video audio img input button label select textarea small big
特征：不会独占一行，宽高为内容的宽高，所有元素排排坐
注意点：行内元素不能够设置宽高；
转化：display:inline-block; – 转为行内块
display:block; – 转为块级元素
span–没有任何意义，只有和css结合使用的时候才发挥最大作用，主要用于细节的修饰
a–超链接
语法：<a href="你要去的路径"></a>
4种状态：:link -- 未访问的链接
:visited -- 已访问的链接
:hover -- 鼠标移入 --- 十分重要，经常用
:active -- 激活样式
img–图片标签
语法：<img src="图片路径" alt="图片加载失败提示" width="200">
alt：图片加载失败提示
title：鼠标移入图片的提示文字
注意：图片的宽高只设置1个即可，另一个会等比缩放
audio–定义音频
语法：<audio src="音频路径" controls>您的浏览器不支持音频标签呢</audio>
可选属性：muted -- 静音 autoplay -- 自动播放 loop -- 循环播放
video–定义视频
语法：<video src="视频路径" controls>您的浏览器不支持视频标签呢</video>
可选属性：muted -- 静音 autoplay -- 自动播放 loop -- 循环播放 width -- 宽度 height -- 高度
poster -- 海报
块级元素：
h1 h2 h3 h4 h5 h6 div p ul li ol li dl dt dd header nav main section article aside footer table form
特征：独占一行，宽度默认100%
转化：display:inline-block; – 转为行内块
display:inline; – 转为行内元素
div–没有任何意义，主要用来建框布局使用，经常配合id、class来使用；
无序列表–ul
<ul> -- 定义列表的范围
<li></li> -- 定义列表的每一项
</ul>
有序列表–ol
<ol>
<li></li>
</ol>
定义列表–dl
<dl>
<dt>定义列表的标题</dt>
<dd>定义列表的项</dd>
</dl>
路径：
相对路径:
同级：./ 上一级：../ 下一级：/目录名
2.css相关
语法：
选择器{
属性名1: 属性值1;
属性名2: 属性值2;
}
三种引入方式：
内链式(行内)：<div style=""></div>
内部式：写在<head>标签内，通过一对<style></style>标签来开启
外链式：①新建后缀为.css的文件；②通过link标签进行引入
选择器相关：
基本选择器：
*{通用选择器}
p{标签选择器}
.类名{类选择器} -- 类名是可以重复定义的，项目中经常会定义一些公用的类名
#id名{id选择器} -- id具有唯一性，多用于操作js
E1,E2,E3{分组选择器}
层次选择器：
E1 E2{后代选择器}
E1>E2{子选择器}
伪类选择器：
:first-child -- 选中第一个子元素
:last-child -- 选中最后一个子元素
:nth-child(n) -- 选中指定的子元素 -- 2n(偶数) 2n+1(奇数) 3n(3的倍数)
字体相关：
字体属性：
font-family -- 字体样式
font-size -- 字体大小
font-weight -- 字体粗细
color -- 字体颜色
文本相关：
文本修饰线
text-decoration:none | underline | line-through; -- 主要用于去掉a标签的默认下划线
文本水平对齐
text-align:left(默认) | center(居中) | right(右对齐);
文本垂直居中
height:40px;
line-height:40px; -- 高度和行高一致，可以实现，单独写行高也可以实现
文本垂直对齐
vertical-align:top(顶对齐) | middle(居中对齐) | bottom(底对齐);
注意点：1.不能实现文本的垂直居中，通常用于解决图片的3像素问题及个别行内元素对齐的方式;
2.属性值除了可以写方位词，还可以写具体的像素值;
文本缩进
text-indent:2em; -- 缩进2个中文字的大小
文本溢出
单行处理
white-space:nowrap; -- 不换行
overflow:hidden; -- 超出隐藏
text-overflow:ellipsis; -- 显示省略号
多行处理
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /*超出要显示的行号*/
-webkit-box-orient: vertical;
overflow: hidden;
文本阴影
text-shadow:10px 10px 10px red;
水平 垂直 模糊度 颜色
盒子阴影
语法:box-shadow:10px 10px 10px 10px red;
水平 垂直 模糊度 宽度 颜色
圆角边框:
border-radius:10px; -- 4个角
border-radius:10px 20px; -- 左上右下 右上左下
border-radius:10px 20px 30px; -- 左上 右上左下 右下
border-radius:10px 20px 30px 40px; -- 左上 右上 右下 左下
过渡动画:
语法:transition:all 3s;
动画3步骤:1.初始值;2.目标值;3.谁要动,动画添在谁身上;
css排错技巧：
1.控制台没有看到选择器
如果是外部样式（外链式），检查<link>标签是否正确，检查引入css文件路径是否正确
检查选择器是否正确
检查选择器的上一行是否正确结束，可能少 } 或者少 ;
检查选择器单词是否与html中类名或ID一致，检查 class是否拼写正确
2.控制台有选择器
检查属性名，是否拼写正确
检查属性值，是否拼写正确
检查选择器优先级，是否被其它样式覆盖
检查是否有浮动、定位等脱离文本流的样式影响
背景相关：
background-color:red; -- 设置背景颜色
background-image:url(); -- 设置背景图
background-repeat:no-repeat | repeat(默认) | repeat-y | repeat-x; -- 背景图是否平铺
background-position:left top; -- 背景图定位(注意：只给一个值，那么默认垂直方向是center)
background-size:200px 200px | 100% 100% | cover | contain; -- 背景图大小(css3新增的)
复合属性写法：
background:color image repeat position;
多背景：
background-image:url1(),url2(),...;
.....背景多个的写法都是以(,)来间隔
多背景的复合写法：
background:url1() no-repeat left top/200px 200px,url1() no-repeat left top/200px 200px,...;
盒模型相关：
尺寸-width/height
width:200px | 100%;
height:200px;
min-height:100px; -- 不足100也是100;
max-height:200px; -- 最大高度只能是200;
边框-border
border:1px solid red; -- 设置4条边
border-bottom:1px solid red; -- 可以单独的对4个方位进行设置
内边距-padding
理解：边框和内容之间的间距
语法：padding:10px; -- 一个值代表4个方位都设置;
padding:10px 20px; -- 2个值第一个代表上下、第二个代表左右;
padding:10px 20px 30px; -- 3个值，第一个代表上、第二个代表左右、第三代表下;
padding:10px 20px 30px 40px; -- 4个值，上-右-下-左，顺时针方向;
padding-left:10px; -- 也可以单独设置4个方位;
外边距-margin
理解：边框和边框之间的间距
语法：margin:10px;
margin:10px 20px; -- 2个值第一个代表上下、第二个代表左右;
margin:10px 20px 30px; -- 3个值，第一个代表上、第二个代表左右、第三代表下;
margin:10px 20px 30px 40px; -- 4个值，上-右-下-左，顺时针方向;
margin-left:10px; -- 也可以单独设置4个方位;
如何实现块元素水平居中：margin:0 auto;
怪异盒子&标准盒子
怪异盒子：盒子的总宽度=你设置的宽度;
标准盒子：盒子的总宽度 = width+border+padding;
标准转怪异：box-sizing:border-box;
3.浮动相关
超出处理
overflow:auto; -- 根据情况来自动处理是否显示滚动条
overflow:hidden; -- 超出隐藏
overflow-y:scroll; -- 在y轴显示滚动条
浮动
语法：float:left | right;
作用：主要用于排版布局;
注意：要清除浮动奥！！！不然会造成父元素的塌陷
清除浮动
方式一：给父元素固定高度;
方式二：在父元素身上添加overflow:hidden;
方式三：在浮动元素的最后添加空div;
方式四：利用伪元素,把该类名添加在浮动元素的父元素身上 --- 推荐使用
.cf::after{
content:"";
display:block;
clear:both;
}
4.表格-table
基础表格：
<table>
<tr>
<td></td>
</tr>
</table>
结构化表格：
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
表格的合并：
方法：先写一个完整的表格，然后再来进行合并;
技巧：
跨行合并：假如你要合并1、2、3行的第1列，那么通常在最小行的第1列上设置rowspan="3",然后删掉其他行的第一列;
跨列合并：假如你要合并第2行的第3、4、5列，那么通常在最小列上设置colspan="3",然后删除其他列;
表格的边框合并:border-collapse:collapse;
固定表格的宽度,单元格进行均分:table-layout:fixed;
5.表单-form
作用:用于采集网页中的数据;
组成:表单标签 表单域 表单按钮
表单标签
语法:
<form action="提交的路径" method="提交的方式">
提交方式:get post,如果不写method,默认提交方式为get
</form>
表单域
<input type="text"> -- 文本框
<input type="password">-- 密码框
<input type="radio"> -- 单选框
<input type="checkbox">-- 复选框
<input type="file"> -- 文件上传
<input type="hidden"> -- 隐藏域
<select> -- 下拉框
<option></option>
</select>
<textarea></textarea> -- 文本域
<label><input type="text"></label> -- 作用:扩大可选范围,提升用户体验,老年防手抖
去掉默认外轮廓:outline:none |0;
表单按钮
提交按钮:
<input type="submit" value="登录">
<button type="submit">提交按钮</button>
<input type="image" src="图片路径">
普通按钮:
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
重置按钮:
<input type="reset" value="重置">
<button type="reset">重置</button>
--------------------------------------------
小结:工作中使用按钮的场景,推荐大家使用<button></button>,更具有语义化
两个重要的属性
name:是向后台提交数据的桥梁,你没有name属性,就不能往后台提交数据;
注意:单选框和复选框的name属性必须保持一致奥;
value:你要提交的值;
注意:单选框和复选框必须要有value属性;
select可以不写value属性
其他相关属性
placeholder -- 文本框的默认提示文字
maxlength -- 最大可输入的字符长度
disabled -- 禁用 -- 禁止读取,禁止修改,禁止提交
readonly -- 只读 -- 可以读取,禁止修改,可以提交
selected -- 下拉框的默认选中
checked -- 单、复选框的默认选中状态
6.伪元素
::before -- 在内容之前添加 -- 行内元素
::after -- 在内容之后添加 -- 行内元素
::placeholder -- 修改输入框的默认提示文字
7.继承&优先级
继承:子元素继承父元素的样式;
优先级: !important > 行内样式 > id > class > 标签
无穷大 1000 100 10 1
目的:当样式被覆盖时,想办法来提升优先级
8.定位-position
语法:position:relative | absolute | fixed;
是否会脱离文档流:
relative -- 否
absolute -- 是,会"原地升仙"
fixed -- 是,会"原地升仙"
是否随着滚动条滚动:
relative -- 是
absolute -- 是
fixed -- 否
相对于谁来进行定位:
relative -- 相对于自身原本的位置进行定位
absolute -- 情况1:最近的父元素有定位,那么参照父元素;情况2:最近的父元素都没有定位,参照浏览器边缘定位;
fixed -- 参照浏览器边缘定位
定位技巧:
子绝父"相" -- 理解:子元素要是绝对定位,父元素可以是3种定位中的任何一种;
层次:
z-index:9; -- 注意:1.数值不加单位;2.层次高的覆盖层次低的;3.层次设置必须结合定位来进行使用;
9.盒子阴影
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
