wordpress网站域名服务器,人人装修网,建立一个平台需要几部分,企业网站导航设计目录
一、HTML展示
1、HTML基础结构
2、认识元素属性
#xff08;1#xff09;元素属性理解
#xff08;2#xff09;实例
3、自结束标签和注释
#xff08;1#xff09;自结束标签
#xff08;2#xff09;注释
4、语义化标签
#xff08;1#xff09;语义…目录
一、HTML展示
1、HTML基础结构
2、认识元素属性
1元素属性理解
2实例
3、自结束标签和注释
1自结束标签
2注释
4、语义化标签
1语义化理解
2使用语义化的优点
二、HTML核心标签
1、超链接【a】标签和路径
1a标签用法
# 跳转
# 锚点
2a标签属性
# title 属性
# target 属性
3a标签相关路径
# 相对路径
# 绝对路径
2、图像【img】标签
1含义
2基本语法
3常用属性
# src 属性
# alt 属性
# title 属性
4图片来源
5点击图片跳转
3、表格【table】标签
1表格的基本结构
2HTML中表格的表示
3table标签基本语法
4table标签常用属性
4、列表【ul、ol】标签
1无序列表
# 含义
# 基本语法
# 相关属性
# 快捷键操作
2有序列表
# 含义
# 基本语法
# 相关属性
# 快捷键操作
3自定义列表
# 含义
# 基本语法
5、表单【form】标签
1表单作用
2表单语法
# 语法格式
# 表单属性 action属性 method属性 target属性
3表单控件
# 作用
# 语法
# 属性
# 控件基本类型 输入框 密码框 按钮类
6、区块标签和行内标签
1div元素
# 基本语法
# 理解
2span元素
# 基本语法
# 理解
3块级元素
# 含义
# 常用块级元素
4行内元素
# 含义
# 常用行内元素
7、实例
1需求案例
2实现
三、CSS基本规则
1、CSS基本规则
1CSS含义
2CSS作用
3CSS基础语法
# 选择器
# {}
2、CSS写法
1行内样式
# 含义
# 基本语法
# 优缺点
2内部样式
# 含义
# 基本语法
# 优缺点
3外部样式
# 含义
# 基本语法
# 优缺点
3、常见选择器
1元素/标签选择器
# 含义
# 语法格式
# 弊端
2类选择器
# 含义
# 语法格式
3id选择器
# 含义
# 语法格式
4通配符选择器
# 含义
# 基本语法
# 作用
# 弊端
5派生选择器
# 后代选择器
# 子代选择器
# 兄弟选择器
4、特殊选择器
1伪类选择器
# 匹配元素内部第一个子元素
# 匹配元素内部最后一个子元素
# 匹配元素内部第n个子元素
# 匹配元素内部奇数项
# 匹配元素内部偶数项
# 否定伪类
# 动态伪类
2伪元素选择器
# 设置第一个文本样式
# 设置第一行文本样式
# 设置选中文本样式
# 在开始位置设置文本样式
# 在结束位置设置文本样式
5、盒子模型
1盒子模型理解
# 盒子的内容(content)
# 盒子的内边距(padding)
# 盒子的边框(border)
# 盒子的外边距(margin)
2盒子怪异模型
# W3C标准的盒子模型标准盒模型 )
# IE标准的盒子模型怪异盒模型
3外边距折叠
# margin-top的解析(父子关系)
# margin的上下间距重叠问题(兄弟关系)
# margin的左右间距不重叠问题(兄弟关系)
6、CSS常用属性
1文本相关属性
# 字体大小
# 文本颜色
# 文本字体
# 文本加粗
# 文本倾斜
# 文本水平对齐
# 文本行间距行高
# 复合属性
# 文本修饰线
# 首行缩进
# 间距
2背景相关属性
# 背景颜色
# 背景图片
# 背景平铺
# 背景图片的位置
# 调整背景图片尺寸大小
# 背景图片的滚动和固定
# 背景的复合属性
# 精灵图
3列表相关属性
# 列表项类型
# 列表项图片
# 列表项位置
# 列表项复合属性
4边框属性
# 四个方向边框属性 边框复合属性 边框单一属性-粗细 边框单一属性-样式 边框单一属性-颜色
# 单一方向边框属性 上边框 右边框 下边框 左边框
5浮动属性
# 属性
# 属性取值
# 浮动特点
# 清除浮动
7、CSS的层叠与选择器优先级
1CSS语法对比
2权重
3CSS层叠性
8、常见可继承属性
1继承的理解
2默认设置继承的属性
9、实例
1判断文字颜色
2根据要求实现对应盒子效果
四、CSS布局定位
1、布局前置知识
1正常元素布局
# 块级元素
# 行内元素
2元素间相互影响
2、【float】布局
1使用
2特点
3清除浮动
# 原因-高度塌陷
# 操作
3、【flex】布局
1flex布局定义
# 触发弹性盒子的方式
# 触发弹性盒子的特点
# 弹性盒子概念
2父元素容器的属性
3子元素容器的属性
4、【position】定位
1定位理解
2定位种类
3定位属性
4定位配合
5定位分类
# 静态定位
# 相对定位
# 绝对定位
# 固定定位
# 粘性定位
6定位使用场景
5、三栏布局
1float实现
2position实现
3flex实现
6、水平垂直居中布局 1行内块元素
2块级元素
7、BFC
1定义
2特点
3开启
4作用 五、CSS3常用属性
1、CSS3边框
1圆角
# 属性分类
# 复合属性
# 单角属性
# 用法
# 应用
2盒阴影
# 属性
# 属性取值
2、CSS3渐变
1线性渐变
# to 方向词
# to 方向词1 方向词2
# 不跟方向词参数
# 沿着一个度数/角度进行渐变
# 线性渐变重复
2径向渐变
# 示例
# 径向渐变重复
3、CSS3文本效果
1文本阴影
# 语法
# 示例
2文本溢出
# 单行文本溢出
# 多行文本溢出
3文本换行
# 长文本换行
# 单词拆分换行
4、CSS3网格布局【grid】
1理解
2应用场景
3操作
4示例 一、HTML展示
1、HTML基础结构
1基础结构
也称之为基础骨架任何东西都会有对应的一个基础结构 基础结构是构成网页最基础最简单的代码。
2查看基础结构
浏览器中右键-检查基础代码如下 其中meta标签的理解
自结束标签可以提供该网页相关信息、元数据charsetutf-8中文的网页需要用到的声明编码否则会出现乱码namekeywords content静夜思,诗词提供网页的关键字关键字用【,】隔开nameDescription描述网页的信息
空格使用
nbsp; 注意HTML基础模板可以使用快捷键即【!】 2、认识元素属性
1元素属性理解 放在开始标签上 总是以名值对的形式出现的值是通过双引号或者单引号包裹 在元素中添加附加信息方便我们找到它 设置标签的内容展示
2实例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title元素的属性/titlestyle.front {color: aqua;}/style
/headbody!-- 链接的地址在 href 属性中指定 --a hrefhttps://www.baidu.com/百度一下/ap classfront前端/pp后端/pp测试/p
/body/html 3、自结束标签和注释
1自结束标签
目前常用的自结束标签有
meta
link
hr
img
input
2注释
注释的内容要简介明了在实际工作中当代码复杂程度大时便于解释说明代码含义注释一般为两种对代码的解释、暂时用不到的代码片段注释不能嵌套否则网页中会渲染出错 注释的快捷键Ctrl/ 4、语义化标签
1语义化理解
每个HTML元素都有其具体的含义
网页标题title网页内容标题h1~h6段落p强调strong头部元素header导航元素nav主要内容main
2使用语义化的优点
代码结构在页面没有css的情况下也能够呈现出很好的内容结构有利于SEO标签确定关键字的权重因此可以增加搜索相关权重使网站在搜索结果中排名靠前 二、HTML核心标签
1、超链接【a】标签和路径
1a标签用法
# 跳转
a href路径链接文本/a
# 锚点
a href#路径链接文本/a
2a标签属性
# title 属性
表示鼠标悬停上去之后的提示信息
a href“路径” title“鼠标悬停上去之后的提示信息”内容/a# target 属性
规定在何处打开文档
属性值1target“_self” —在当前窗口打开默认值属性值2target“_blank” —在新窗口打开
a hrefhttp://www.baidu.com target_self跳转到百度/a
a href10_标签7.html target_blank图片/a
a href#返回顶部/a3a标签相关路径
图片路径分为两种相对路径、绝对路径
# 相对路径
相对路径相对于文件和文件夹的关系去查找图片
同级目录当前图片和页面文件在同一目录中下级目录图片所在的文件夹和页面文件在同一目录中上级目录页面文件所在的文件夹和图片在同一目录中 ./ 代表当前⽬录 ../ 代表的上⼀级⽬录 # 绝对路径
绝对路径一个完整的地址从某一个盘符或者是从互联网地址开始
2、图像【img】标签
1含义
让页面中显示一张图片
2基本语法
img src“图片路径”3常用属性
# src 属性
调用图片的路径
img src“图片路径”
# alt 属性
当图片为破损文件/网速加载失败时图片加载失败显示的提示文本
img src“图片路径” alt“图片不显示之后的提示信息# title 属性
只要鼠标放在图片位置区域时提示的文本
img src“图片路径” title“鼠标悬停上去之后的提示信息”alt属性和title属性的区别面试题 相同点都是提示文本 不同点 1alt属性只有浏览器加载不成功的时候才显示且文本能选中占有位置 2title属性是鼠标放在上面的时候的提示文本不占位置 4图片来源
本地图片稳定线上图片图⽚容易丢失
Base64图片的优缺点
优点小图片占用内存小不请求服务器降低服务器资源与访问缺点大图片增⼤了数据库服务器的压力
5点击图片跳转
可以通过嵌套a标签来实现
例如
a hrefhttps://www.baidu.com/img src../img/baidu_logo.png altlogo图片加载失败 title百度一下点击地址/a
3、表格【table】标签
1表格的基本结构
表格由一行或者多行的单元格数据组成如下 2HTML中表格的表示
表格对应在html下的理解
tableHTML表格tr元素定义表格行th数据中的表头单元格td表示单元格
3table标签基本语法
table border1trth姓名/thth性别/thth年龄/th/trtrtd张三/tdtd男/tdtd18/td/trtrtd李四/tdtd女/tdtd18/td/tr
/table 注意若table标签不加属性则默认无边框 4table标签常用属性
table标签的常用属性有
border边框cellspacing规定单元格之间的空白cellpadding规定单元格边沿与其内容之间的空白colspan用于合并列rowspan用于合并行
示例写一个简单的表格并应用table标签的一些常用属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表格table标签/title
/head
bodytable border1 cellspacing5px cellpadding10pxtrth姓名/thth colspan2性别年龄/th!-- th年龄/th --/trtrtd张三/tdtd男/tdtd rowspan218/td/trtrtd李四/tdtd女/td!-- td18/td --/tr/table
/body
/html 4、列表【ul、ol】标签
1无序列表
# 含义
没有顺序的列表清单
# 基本语法
ulli文本/lili文本/lili文本/li
/ul# 相关属性
type“”type的属性值有disc、circle、square、none
type列表项的显示内容例如
!-- 列表前面是黑色实心方块 --
ul typesquare li文本/lili文本/lili文本/li
/uldisc黑色实心圆circle空心圆square黑色实心方块none取消列表项 注意实际开发的时候以上的属性几乎不会使用使用频率最多的是none目的是取消列表项其他对应的列表项需要使用背景图片完成方便调整位置 # 快捷键操作
可用快捷键ulli{文本}*3
2有序列表
# 含义
有顺序的列表清单
# 基本语法
olli文本/lili文本/lili文本/li
/ol# 相关属性
type属性用来修饰列表项
type1/A/a/I/i1根据数字计数
A/a根据大写/小写字母计数
I/i根据罗马大写/小写数字来计数start属性用来修改列表项的起始位置
start数值数值表示从第“数值”个位置开始计数例如
!-- 计数方式为“a、b、c、d...” 从第五个位置开始,即从e开始 --
ol typea start5li第一步骤/lili第二步骤/lili第二步骤/li
/ol# 快捷键操作
可用快捷键olli{文本}*3
3自定义列表
# 含义
主要应用于图文混排或者问答列表
# 基本语法
dldt图片/问题/dtdd文本/答案/dd
/dl例如
dldt问题哪里发货/dtdd回答北京发货/dd
/dl5、表单【form】标签
1表单作用
作用用来收集用户收入的所有的相关信息, 将输入的数据进行打包上传到服务器数据库里面
应用搜索栏、注册登录页面等场景
2表单语法
# 语法格式 form action提交跳转地址 method提交方法 target”打开方式”文本/其他表单控件输入框、密码框、单选、多选等等
/form# 表单属性 action属性
提交跳转地址点击按钮的时候配合form能实现跳转 method属性
规定以什么方式去提交信息
method“get”---------明文提交用户名、密码等都能在地址栏中看到安全性低method“post”-------密文提交用户名、密码等都不能在地址栏中看到安全性较高 target属性
点击按钮跳转后规定按什么方式打开窗口
target“_self” -------------在当前窗口打开默认值常用target“_blank” ----------在新窗口打开常用target“_top” -------------在顶部窗口打开target“_parent” ---------在父级框架打开
3表单控件
# 作用
实现表单中的输入框、密码框、下拉菜单、单选、多选等
# 语法 input type”类型” value”输入框中显示的值” placeholder输入框中显示的值# 属性
type属性用来描述各个控件的类型即【控件基本类型】value属性在输入框中展示一个文本描述起到提示文本的作用占位置placeholder属性在输入框中展示一个文本描述起到提示文本的作用不占位置该属性比较常用 注意 value属性给输入框一个文本描述但该种情况下会占位置因此不方便用户使用 H5中新增的属性“placeholder”用来提示文本信息不需要删除原来的提示信息相比较value属性而言起到了一个很好的提示作用 # 控件基本类型
序号含义语法书写注意1输入框input typetext标签属性type类型 value输入框中显示值2密码框input typepassword3按钮类提交按钮input typesubmit value值value修改按钮中的显示值重置按钮input typereset value值普通按钮input typebutton value值双标签buttonbutton文本/button 输入框
输入框也称为单行文本输入框文本不会折行显示能显示具体输入的信息
输入框input typetext placeholder请输入用户名密码框
密码框可以实现加密效果不同的浏览器显示的加密效果有可能不同
密码框input typepassword placeholder请输入密码按钮类
提交按钮配合form标签以及action实现提交跳转功能重置按钮配合form标签用来取消输入框前面输入的所有信息把原来的信息清空掉普通双标签按钮配合form标签以及action属性能完成跳转
!-- 提交按钮默认按钮文本为提交 --
input typesubmit
!-- 重置按钮默认按钮文本为重置 --
input typereset
!-- 普通按钮无默认按钮文本需要通过value属性去添加 --
input typebutton value普通按钮
!-- 普通双标签按钮 --
button普通按钮/button6、区块标签和行内标签
1div元素
# 基本语法
div文本/div# 理解
div 元素是块级元素它可⽤于组合其他 HTML 元素的容器div 元素没有特定的含义除此之外由于它属于块级元素浏览器会在其前后显示折⾏如果与 CSS ⼀同使⽤div 元素可⽤于对大的内容块设置样式属性div 元素的另⼀个常见⽤途是⽂档布局
2span元素
# 基本语法
span文本/span# 理解
span 元素是⾏内元素可⽤作⽂本的容器span 元素也没有特定的含义当与 CSS ⼀同使⽤时span 元素可⽤于为部分文本设置样式属性 3块级元素
# 含义
块级元素在浏览器显示时通常会以新行来开始和结束
# 常用块级元素
h1, p, ul, table,div
4行内元素
# 含义
行内元素在显示时通常不会以新⾏开始
# 常用行内元素
b, td, a, img,span
7、实例
1需求案例
完成如下图所示的一个表格案例图片可以随机选取点击图片时跳转到【百度一下】页面 2实现
解析我们可以使⽤table标签加上边框 a标签作为img标签的⽗元素在img标签加上title值形成悬浮窗口
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title实例/title
/head
bodytable border2trth狮子/thth老虎/th/trtrtda hrefhttps://www.baidu.com/img srchttps://img0.baidu.com/it/u711448043,3360793804fm253fmtautoapp120fJPEG?w500h750 alt title狮子/a/tdtda hrefhttps://www.baidu.com/img src https://img1.baidu.com/it/u256035052,307915737fm253fmtautoapp120fJPEG?w500h749 alt title老虎/a/td/tr/table
/body
/html 三、CSS基本规则
1、CSS基本规则
1CSS含义
CSSCascading Style Sheet层叠样式表
2CSS作用
对HTML页面结构的修饰
3CSS基础语法
选择器{属性属性值属性属性值属性属性值}# 选择器
查找页面元素的一种方式方法方法有很多
# {}
样式规则也称之为样式修饰规定选择器查找到的元素实现何种样式 注意CSS基本语法由两个部分组成为选择器和样式规则其中样式声明由属性和属性值组成 2、CSS写法
1行内样式
# 含义
把对应的CSS基本语法使用行内修饰的形式对页面的元素进行修饰
# 基本语法
div style属性:属性值;属性:属性值;/div# 优缺点
优点简单直观缺点代码冗余使结构变得混乱
2内部样式
# 含义
把对应的CSS修饰语句放在一个独立的style标签中style标签一般放在head标签里面
# 基本语法
headstyle选择器{样式规则}/style
/head# 优缺点
优点降低了行内修饰的冗余让页面的结构变得简洁样式可重用缺点并没有做到完全的结构样式行为的分离若代码量过大来回滚动页面比较麻烦且所有修饰都在head标签中会造成读取加载缓慢、头重脚轻的效果
3外部样式
# 含义
把对应的CSS的基础语法放在一个独立的.css为后缀名的文件中需要使用link标签进行关联
# 基本语法
外部引入样式有两种方法第一种是通过link引入第二种是导入
第一种
link hrefCSS文件的路径 relstylesheet typetext/css第二种
styleimport url(路径);
/style# 优缺点
优点做到了充分的结构样式行为的分离 注意 外部样式表通过link引入和通过import导入二者之间的区别 1、语法不一样 1前者link属于标签语法-link单标签进行引入的 2后者import属于CSS语法必须携带style标签 2、加载顺序的问题 1 link引入的文件结构和样式是同时加载显示的 2import引入的文件先加载结构后加载样式 3、使用dom(document object model文档对象模型 )控制样式时的差别 当使用javascript控制dom去改变样式的时候只能使用link标签因为import不是dom可以控制的 4、兼容性问题 1link兼容性比较高 2import兼容性比较低 3、常见选择器
1元素/标签选择器
# 含义
通过标签的名字查找页面的元素只要叫这个标签名字都会被匹配到实现对应的样式规则
# 语法格式
标签{属性:属性值;}
# 弊端
匹配的范围过于广泛 注意标签选择器匹配的是页面中叫对应标签名字的元素无论级别嵌套有多深都能被匹配到 2类选择器
# 含义
通过给元素起一个小名class在CSS中通过这个小名查找元素
# 语法格式
//类选择器
标签 class“Class名字”/div
.Class名字{属性:属性值;} //多类选择器
标签 class“Class名字1 Class名字2”/div
.Class名字1{属性:属性值;}
.Class名字2{属性:属性值;} //链接多个类选择器
标签 class“Class名字1 Class名字2”/div
.Class名字1.Class名字1{属性:属性值;} 注意.就是类的符号不能被省略 3id选择器
# 含义
给元素起一个id名字在CSS中通过id名字去查找页面中的元素
# 语法格式
标签 id“ID名字”/div #ID名字{ 属性属性值} #就是id的符号不能被省略 注意一个id选择器的属性值在html文档中只能出现一次避免写js获取id时出现混淆 扩展-命名选择器规范
见名如意使用小写字母开头不能以数字开头但是可以配合使用字母数字下划线不能使用汉字
4通配符选择器
# 含义
能匹配页面中所有的元素
# 基本语法
语法
*{属性属性值;
}//常用场景
*{margin:0;padding:0
}
# 作用
用来取消页面中元素自带的内边距和外边距
# 弊端
不优化使得一部分没有自带内边距和外边距的标签也取消了内边距和外边距
5派生选择器
# 后代选择器
除了能匹配符合条件的父元素之外还能匹配符合条件的子元素还能匹配符合条件的孙子辈分的元素
选择器1 选择器2{样式规则}
# 子代选择器
只能匹配符合条件的儿子辈分的元素 选择器1选择器2{样式规则}
# 兄弟选择器
匹配相邻的一个兄弟元素向后匹配
选择器1选择器2{样式规则}
4、特殊选择器
1伪类选择器
不改变任何DOM内容只是插入了一些修饰类的元素具体的分类有
# 匹配元素内部第一个子元素
选择器:first-child{}
# 匹配元素内部最后一个子元素
选择器:last-child{}
# 匹配元素内部第n个子元素
选择器:nth-child(n){}
# 匹配元素内部奇数项
选择器:nth-child(2n1){}
# 匹配元素内部偶数项
选择器:nth-child(2n){}
注意
【选择器:nth-child(参数){}】参数写法分为三种数字、倍数、字母
数字数值为几则代表第几个元素超出范围则无法匹配倍数如2n、2n-1/2n1、3n、4n、5n等字母odd----奇数even—偶数
# 否定伪类
可以定位不匹配该选择器的元素
选择器:not(){}/*示例*/
li:not(:nth-child(3)) {color: pink;
}
# 动态伪类
序号基本语法含义特殊解释1a:link{color:red;}未访问的链接状态必须给a 说明 1当这4个超链接伪类选择器联合使用时应注意他们的顺序正常顺序为a a:link a:visited a:hover a:active 2伪类简化代码可以把伪类选择器中相同的声明提出来放在a选择器中 2a:visited{color:green;}已访问的链接状态必须给a3a:hover{color:blue;}鼠标滑过的链接状态可以随便给4a:active{color:yellow;}鼠标摁下去时的状态必须给a 例如a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同只有鼠标滑过时会变化颜色
应用主要应用在超链接a标签上面四个使用的时候必须按照顺序进行书写实际情况下会把hover单独拿出来使用设置鼠标悬停的时候改变元素的样式
/*示例*/
style.green {width: 200px;height: 200px;background-color: green;}.purple{width: 100px;height: 100px;background-color: purple;}/* 当鼠标悬停在绿色盒子上面的时候改变绿色盒子的背景颜色 *//* .green:hover{background-color: orange;} *//* 当鼠标悬停在绿色盒子上面的时候改变的是里面子元素的背景元素 *//* .green:hover.purple{background-color: blue;} *//* 当鼠标移入到紫色盒子的时候改变的是自己本身的背景颜色 */.green.purple:hover{background-color: aqua;}
/stylebodydiv classgreendiv classpurple/div/div
/body2伪元素选择器
# 设置第一个文本样式
::first-letter{}
# 设置第一行文本样式
::first-line{}
# 设置选中文本样式
::selection{}
# 在开始位置设置文本样式
::before{}
# 在结束位置设置文本样式
::after{} 5、盒子模型
1盒子模型理解
任何一个元素都可以称之为盒子, 盒子就是容器在CSS⾥⾯所有的HTML元素都可以看成是⼀个盒⼦
盒子模型是CSS布局的基石它规定了网页元素如何显示以及元素间相互关系盒子模型由四个部分组成分别是content内容区域、padding内边距、border边框、margin外边距如图所示 # 盒子的内容(content)
内容区域指的是元素盛放文本或者是其他元素的区域可以理解成宽度高度可设置宽高的元素:div、p、ul、ol、dl、dt、dd、h1-h6等 注意行内元素不能实现宽度高度 # 盒子的内边距(padding)
序号属性描述说明1padding-top上内边距单一设置元素上边框与内容之间的距离2padding-right右内边距单一设置元素右边框与内容之间的距离3padding-bottom下内边距单一设置元素下边框与内容之间的距离4padding-left左内边距单一设置元素左边框与内容之间的距离5padding设置元素边框与内容之间的距离复合padding取值:v1-v4; 代表的是不同的方向
padding属性的属性取值
padding:v1;---------------实现了四个方向的内边距v1上右下左
padding:v1 v2;------------实现了四个方向的内边距v1上下v2左右
padding:v1 v2 v3;---------实现了四个方向的内边距v1上v2左右v3下
padding:v1 v2 v3 v4;------实现了四个方向的内边距v1上v2右v3下v4左规律当padding取值为四个值时可以记忆为上右下左注意事项
盒子变大了即内边距会撑开盒子大小占位置背景颜色会蔓延到内边距区域同背景颜色能蔓延到边框位置道理一致 注意 padding值是额外加在元素原有大小之上的如想保证元素大小不变需从元素宽或高上减掉后添加的padding属性值 # 盒子的边框(border)
边框属性在第六章【CSS常用属性】进行介绍这里不做多描述
border-left:3px solid #000 //左边距10px dotted dashed
border-top:3px solid #000 //上边距10px
border-right:3px solid #000 //右边距10px
border-bottom:3px solid #000 //下边距10px相对于父级元素的widthborder:3px solid #000 //等同于上面四行
# 盒子的外边距(margin)
margin代表的是外边距外边距是边框与边框元素与元素之间的距离
序号属性描述说明1margin-top上外边距单一设置元素上边框外边距的距离2margin-right右外边距单一设置元素右边框外边距的距离3margin-bottom下外边距单一设置元素下边框外边距的距离4margin-left左外边距单一设置元素左边框外边距的距离5margin设置元素边框与内容之间的距离复合margin取值:v1-v4; 代表的是不同的方向
margin属性的属性取值
margin:v1;---------------实现了四个方向的外边距v1上右下左
margin:v1 v2;------------实现了四个方向的外边距v1上下v2左右
margin:v1 v2 v3;---------实现了四个方向的外边距v1上v2左右v3下
margin:v1 v2 v3 v4;------实现了四个方向的外边距v1上v2右v3下v4左规律当margin取值为四个值时可以记忆为上右下左注意事项
背景颜色不会蔓延到外边距区域中盒子模型添加外边距时会撑开盒子占位 说明 【margin:0 auto;】可以实现一个有宽度的块元素盒子水平居中 2盒子怪异模型
# W3C标准的盒子模型标准盒模型 )
属性box-sizing
属性值content-box
标准盒子模型计算大小
实际宽度width2×padding2×border2×margin (左右)实际高度height2×padding2×border2×margin (上下)
# IE标准的盒子模型怪异盒模型
这里即css中设置的盒子宽高即为最真实的盒子宽高设置了多少就是多少若设置了内外边距、边框则内容会进行相应扣减
属性box-sizing
属性值border-box
怪异盒子模型计算大小
实际宽度CSS.width(内容padding)2×margin (左右)实际高度CSS.height(内容padding)2×margin (上下) 备注怪异盒子即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度 3外边距折叠
# margin-top的解析(父子关系)
现象
默认情况下在包含结构里面给子元素添加了margin-top之后父元素会跟着一起下来
解决办法1
给最近的父元素添加透明上边框【border-top:1px solid transparent;】使得外边距实现边框与边框之间的距离从而对于父元素移动给父元素或者是子元素添加浮动【float: left; 】只要添加浮动就会触发BFC机制会形成一个独立的区域这个区域不会受外界干扰也不会干扰到外界给父元素添加【overflow:hidden;】也会形成一个BFC区域给父元素添加定位【position:absolute/fixed;】也会形成一个BFC区域
解决方法2 不给子元素添加margin-top直接给父元素添加对应的padding-top;且需要给父元素的高度降低对应的padding取值因为padding会撑大盒子
# margin的上下间距重叠问题(兄弟关系)
现象
2个上下并列结构的时候如果给上面的盒子添加了margin-bottom同时给下面的盒子添加了margin-top此时应该解析的垂直间距是2者之和但是浏览器解析的时候会按照最大数值去解析
解决方法
给下面的盒子添加父元素且添加声明【overflow:hidden;】会形成一个BFC区域只给一个元素添加外边距即可
# margin的左右间距不重叠问题(兄弟关系)
现象
2个左右排列的盒子给左侧盒子添加margin-right 给右侧盒子添加margin-left两个盒子之间的距离不会出现间距重合
原因
因为浮动会触发BFC块级格式化上文
6、CSS常用属性
1文本相关属性
序号属性描述说明1font-size字体大小 单位可以使px pt em等12pt16px 1em16px 浏览器默认是16px设计图常用最小字号是12px 2color颜色 color:red; color:#ff0; color:rgb(255,0,0); 3font-family字体 当字体是中文字体、英文字体中有空格时需要加引号 多个字体间用逗号连接先解析第一个字体如果没有则解析第2个字体以此类推... 4font-weight加粗 font-weight:bolder/bold/normal; bolder更粗bold加粗normal常规 font-weight:100-900; 100-500不加粗600-900加粗 5font-style倾斜font-style:italic/oblique/normal; italic斜体字oblique倾斜的文字normal常规6text-align文本水平对齐 text-align:left; 水平靠左 text-align:right; 水平靠右 text-align:center; 水平居中 text-align:justify; 水平两端对齐只对多行起作用 7line-height行高line-height的数据height的数据可以实现单行文本垂直居中8font文字简写 font是 font-style font-weight font-size/line-height font-family的简写 font:italic 800 30px/80px 宋体; 注意顺序不能改变必须同时指定font-size和font-family属性时才起作用 9text-decoration文本修饰 text-decoration:none; 无修饰 text-decoration:underline; 下划线 text-decoration:overline; 上划线 text-decoration:line-through; 删除线 10text-indent首行缩进 text-indent可以取负值 text-indent属性只对第一行起作用 11letter-spacing字间距控制文字和文字之间的间距
# 字体大小
属性font-size
字体大小取值单位pxptem等
px 像素单位pt 磅值单位12pt16pxem 相对单位相对于自己字体标签大小进行缩放的一个倍数默认的情况下1em16px也就是2em32px 注意页面中默认字体大小为16px一般情况下浏览器中最小的字体是10/12px设计图常用最小字号是12px # 文本颜色
属性color
颜色取值颜色单词、六位十六进制的颜色值、rgb取值
颜色单词用颜色英文单词命名如red blue orange…十六进制颜色值由于“#”键和六位十六进制的颜色值0-9A-F组成如#123456、#aabb12等rgb取值rgb(red,green,blue) 每一个颜色取值范围0~255
# 文本字体
属性font-family
属性取值中文字体、英文字体
其中字体取值的书写如下
中文字体不需要带引号单个英文单词字体不需要带引号多个英文单词组成一个字体的话则需要带引号且英文单词之间用空格隔开可以取值为一个值也可以为多个值多个取值之间使用逗号隔开多个取值字体时中间用逗号链接先解析第1个字体如果没有解析第2个字体以此类推 注意浏览器中默认字体为宋体现在大部分高版本的浏览器为了增加用户的体验度让用户看起来更好看选择改变成了微软雅黑 # 文本加粗
属性font-weight
属性取值数值类型、关键词类型
1、数值类型100-900整百的数值其中W3C中规定固定数值的加粗程度100------细体400------正常700------加粗900------更粗注意事项700和900显示的效果一致但是900更加具有强调性2、关键词类型lighter------细体normal-------正常bold---------加粗bolder-------更粗注意事项bold和bolder显示的效果一致但是bolder更加具有强调性# 文本倾斜
属性font-style
属性取值
italic--------倾斜oblique-----斜体字normal-----正常字体 注意italic和oblique显示的效果一致但是oblique更加具有强调性 # 文本水平对齐
属性text-align
属性取值
left----------左对齐默认值right--------右对齐center-------居中对齐justify-------两端对齐经常使用
# 文本行间距行高
属性line-height
取值数值px
应用场景实现某一个区域里面的单行文本垂直居中对齐即line-height取值等于高度 注意行高即为第一行文字的最上边到第二行文字最上边的距离 # 复合属性
一个属性能实现多种样式
属性font
属性使用
属性书写格式
font:font-style font-weight font-size/line-height font-family
例如
font:italic bold 20px/30px 宋体注意事项
复合属性使用的时候必须带字体和字体大小字体必须位于最后面字体大小和行高使用的时候必须使用/进行连接前后不能有空格/前面代表字体大小/后面代表行间距可以省略或者调整前面两个的加粗或倾斜书写位置
# 文本修饰线
指的是线条的修饰有下划线、中划线、上划线、取消修饰线
属性text-decoration
属性取值
underline---------下划线uline-through------中划线s,deloverline-----------上划线none--------------取消修饰线 注意可以使用多修饰线-多个属性值共用一个属性并且使用空格隔开 如 text-decoration: underline line-through; # 首行缩进
属性text-indent
属性取值默认为2em首行缩进两位 1、首行缩进只对第一行起作用 2、取值为整数也可以取值为负数 # 间距
属性分类字符间距属性、词间距属性
1、字符间距属性指对英文字母、标点符号、空格、汉字进行间距修饰属性letter-spacing
2、词间距属性指对英文单词与英文单词之间进行间距修饰属性word-spacing属性值数值px
2背景相关属性
序号属性描述1background-color背景颜色2background-image背景图片3background-repeat背景图片的平铺4background-position背景图片的定位5background-size背景图片的大小6background-attachment背景图片的固定
# 背景颜色
属性background-color
属性取值颜色单词、六位十六进制的颜色值、rgb取值、rgba取值
1、颜色单词用颜色英文单词命名如red blue orange...
2、十六进制颜色值由于“#”键和六位十六进制的颜色值0-9A-F组成如#123456、#aabb12等
3、rgb取值rgb(red,green,blue) 每一个颜色取值范围0~255
4、rgba取值rgba(red,green,blue,alpha)red------红色green----绿色blue-----蓝色alpha----透明度-取值范围0-1取值是小数一般保留一位小数0---透明1---不透明# 背景图片
属性background-image:url(图片的路径)
属性取值取值即为图片的路径 注意只要插入背景图片默认就会产生平铺效果产生平铺后背景颜色是看不到了不是被代码覆盖了 # 背景平铺
属性background-repeat
属性取值
repeat-----------默认重复平铺no-repeat-------取消平铺实际开发中经常应用repeat-x---------水平平铺repeat-y---------垂直平铺
# 背景图片的位置
目的只要插入背景图片就默认产生平铺效果取消平铺后背景图片默认在左上角显示需要调整背景图片的显示位置
属性background-position
属性取值数值单位、关键词
书写格式background-position:x y;x表示水平方向位置y表示垂直方向位置
x、y的取值有两种格式数值单位、关键词
1、数值单位x取值为正数向右侧走x取值为负数向左侧走y取值为正数向下边走y取值为负数向上边走
2、关键词x、y取值left/right/center# 调整背景图片尺寸大小
属性background-size
属性取值数值单位、关键词
书写格式background-size:x y;x-----水平方向大小y-----垂直方向大小
x、y的取值有两种格式数值单位、关键词
1、数值单位x表示图片宽度y表示图片高度
2、关键词cover------覆盖应用频率高等比例放大这个图片直到这个图片撑满这个盒子位置问题容易出现被裁减的问题contain----包含等比例放大这个图片只要有一个边缘撑满了就结束了问题容易出现留白的问题# 背景图片的滚动和固定
定义
滚动当页面有滚动条的时候滚动滚动条背景图片被带上去的效果固定当页面有滚动条的时候滚动滚动条背景图片固定在原来的位置不会被滚上去
属性background-attachment
属性取值scroll—滚动、fixed----固定 注意只要添加了背景的固定背景图的参照物位置都是浏览器窗口的左上角大小调整也是参照浏览器窗口 # 背景的复合属性
一个属性能实现多种样式
格式
background:color image repeat position/size attachment注意事项
后面可以跟一个值也可以跟多个值多个值不分先后顺序尺寸大小和位置一起使用的时候必须使用/连接就算位置不调整也需要给值(如0px 0px/200px 200px) /前面代表的是位置/后面代表的是大小
# 精灵图
含义将页面中使用到的图片放在一张背景透明的图片上面, 通过背景定位的属性将对应的精灵图区域显示在对应的元素内
优点主要是降低图片在服务器存储时的请求次数
属性background-position
使用
1、先插入精灵图片即background-image: url(img/素材2.png);
2、在精灵图中查看小图标位置将图片向左向上移动到当前小图标位置处即可即background-position: -275px -7px;3列表相关属性
序号属性描述1list-style-type列表项类型单一2list-style-image列表项图片单一3list-style-position列表项位置单一4list-style列表属性的简写复合
# 列表项类型
属性list-style-type
属性取值
disc--------黑色实心圆点circle-------黑色圆环square-----黑色实心方块none-------取消列表项
# 列表项图片
属性list-style-image:url(路径)
注意实际开发时不会使用列表图片作为列表项大部分使用背景图作为列表项因为背景图方便调整位置这里了解即可
# 列表项位置
属性list-style-position
属性取值
inside--------里面outside------外面
# 列表项复合属性
属性list-style:type image position
注意事项
三个取值可以调整位置后面可以跟一个值也可以跟多个值 实际开发时我们经常使用的一行代码是list-style:none; 目的取消列表项的项目类型 4边框属性
边框代表盒子或者是容器的边缘用来隔绝元素内外的一个辅助线
作用可以用来制作特殊图形如三角形、梯形、旗帜、风车等
# 四个方向边框属性
序号属性描述1border为一个元素添加边框复合2border-width边框粗细单一3border-style边框样式单一4border-color边框颜色单一border单一样式复合属性可以取值一个值到四个值单独使用的时候只能是border-style能单独使用 边框复合属性
属性border
属性使用border:10px solid gray;
注意事项边框加上后会撑大盒子—占位置 border 后面跟多个取值且取值之间以空格隔开 边框单一属性-粗细
属性border-width
属性取值取值内容为像素
border-width: v1;------------实现的是四个方向边框的粗细-v1上下左右
border-width: v1 v2;---------实现的是四个方向边框的粗细-v1上下v2左右
border-width: v1 v2 v3;------实现的是四个方向边框的粗细-v1上v2左右v3下
border-width: v1 v2 v3 v4;---实现的是四个方向边框的粗细-v1上v2右v3下v4左规律当粗细取值为四个值时可以记忆为上右下左边框单一属性-样式
属性border-style
属性取值取值内容设置边框样式也可以取四个值取值逻辑同粗细一致
边框样式取值solid------单实线dashed------虚线线段dotted------虚线点状double------双实线边框单一属性-颜色
属性border-color
属性取值取值内容设置颜色也可以取四个值取值逻辑同粗细一致 1、单一属性能否直接单独使用 如果单独使用的时候粗细和颜色均不能实现效果但是样式可以实现默认3像素粗细、黑色的实线因此样式是必须项 2、背景颜色能蔓延到边框位置处 # 单一方向边框属性
序号属性描述1border-top上边框单一2border-right右边框单一3border-bottom下边框单一4border-left左边框单一border-方向词用来设置某一个方向的边框其实也属于复合属性 上边框
属性border-top
取值同border复合属性取值一致
border-top: 10px solid green; 右边框
属性border-right
取值同border复合属性取值一致
border-right: 10px solid yellow; 下边框
属性border-bottom
取值同border复合属性取值一致
border-bottom: 10px solid blue; 左边框
属性border-left
取值同border复合属性取值一致
border-left: 10px solid orange;颜色中透明色的取值有两种 rgba() ; transparent 5浮动属性
序号属性描述说明1floatfloat:left;元素靠左边浮动2floatfloat:right;元素靠右边浮动3floatfloat:none;元素不浮动浮动的作用1定义网页中其他文本如何环绕该元素显示浮动的作用2简单讲就是让竖着的东西横着来
# 属性
float
# 属性取值
left---------左浮动right-------右浮动none-------默认值不浮动
# 浮动特点
默认值是不浮动的浮动元素不占页面空间导致后面的元素上去补位置单个元素浮动的时候只会在自己本行中左侧或者右侧浮动所有元素都浮动时都会让元素横向显示如果盒子大小参差不齐那么实现的效果如下如果所有元素都浮动的话剩下的空间不够了那么元素就会折行显示如果盒子浮动的话参照是以倒数第二个浮动盒子的右侧和下方进行补位的若高度不一致则会出现被卡住的效果 注意 左侧浮动各元素从左侧开始依次向右显示 右侧浮动各元素从右侧开始依次向左显示 总结只要布局的时候想让元素横向显示我们目前来看就是使所有的元素都浮动 # 清除浮动
浮动带来的影响让元素脱离文档流不占页面空间后面的元素上去补位置导致出现文字环绕的问题因此需要清除补位元素的浮动
序号属性描述说明1clearclear:none;允许有浮动对象2clearclear:right;不允许右边有浮动对象3clearclear:left;不允许左边有浮动对象4clearclear:both;不允许有浮动对象清除浮动知识改变元素的排列方式该元素还是漂浮着不占据文档位置
清除浮动的属性clear
属性取值
none--------不清除浮动left----------清除左侧浮动right--------清除右侧浮动both--------清除左侧和右侧浮动常用
7、CSS的层叠与选择器优先级
1CSS语法对比
优先级描述
!important行内样式内部样式外部样式
遵循原则 : 就近原则挨着哪一个近就实现哪一个效果
注意如果外部样式表在内部样式表的下边则实现的效果是外部样式 内部样式
因为外部引入的东西CSS、公共的CSS、JS 等都要放在前面因此遵循就近原则内部样式优先级高于外部样式优先级
2权重
不同的选择器修饰同一个元素的时候实现的样式是以选择器的权重值大小来实现的
各选择器权重值
id选择器100类选择器10标签选择器1通配符选择器0)
如果选择器混合使用的时候则需要把选择器的权重值相加进行判断 注意 涉及多层嵌套的时候将权重值相加但权重值只是一个虚拟值默认还是类选择器要远远大于标签选择器 3CSS层叠性
CSS层叠性是指CSS样式在针对同一元素配置同一属性时依据层叠规则权重来处理冲突选择应用权重高的CSS选择器所指定的属性一般也被描述为权重高的覆盖权重低的因此也称作层叠
规则1当不同选择符的样式设置有冲突的时候高权重选择符的样式会覆盖低权重选择符的样式规则2相同权重的选择符样式遵循就近原则哪个选择符最后定义就采用哪个选择符样式
8、常见可继承属性
1继承的理解
理解即继承了父元素的某些属性
2默认设置继承的属性
可继承的属性文字属性如文本缩进、对齐、行高
9、实例
1判断文字颜色
查看【我是大漂亮】文字的颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title实例/titlestyle* {color: blue!important;}ul li{color: red;}.box{color: green;}#box1 {color: pink;}/style
/head
body!-- 文字的颜色显示为蓝色 --ulli classbox idbox1 stylecolor: orange;我是大漂亮/li/ul
/body
/html 2根据要求实现对应盒子效果
⼀个div标签有四个子元素标签div子元素的内容分别为“苹果”、“橘子”、“橙⼦”、“香蕉”子元素的宽高为100px边框为2px实线红色每个子元素的上下间距为50px子元素的实际宽高为设置的宽高第二个子元素鼠标悬浮时字体为红色背景颜色为绿色即使子元素个数发⽣变化都满足
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title实例2/titlestyle.box div{width: 100px;height: 100px;border: 2px solid red;margin: 50px 0;box-sizing: border-box;}.box div:nth-child(2):hover {color: red;background-color: green;}/style
/head
bodydiv classboxdiv苹果/divdiv橘子/divdiv橙子/divdiv香蕉/div/div
/body
/html 四、CSS布局定位
1、布局前置知识
1正常元素布局
# 块级元素
默认一个块级元素的内容宽度就是其父元素的100%他的高度和其内容高度一致
# 行内元素
行内元素的宽度和高度都是根据内容决定的我们无法直接设置行内元素的高度不过可以通过设置【display】属性来更改元素的类型
2元素间相互影响
每个块级元素会在上个元素下面另起一行行内元素则不会另起一行
2、【float】布局
1使用
属性float
属性值
none-------默认值元素不浮动left----------元素向左浮动right--------元素向右浮动
2特点
浮动元素会脱离文档流不再占据文档流空间浮动元素彼此之间是从左向右排列宽度超过一行会自动换行在浮动元素前面元素不浮动时浮动元素无法上移块级元素和行内元素浮动之后都会变成行内块元素浮动元素不会盖住文字可以设置文字环绕效果
3清除浮动
# 原因-高度塌陷
引起高度塌陷的原因
父元素不设置高度默认的高度是被子元素撑开的如果子元素添加浮动父元素的高度会降低这种降低的效果被称为高度塌陷—会影响布局
# 操作
使用伪元素的方法来完成解决高度塌陷的问题
方法给父元素追加一个行内元素再将其转化为块级元素最后给该元素清除浮动即可
.father::after {clear: both;content: ;display: block;
}
3、【flex】布局
1flex布局定义
flex布局即弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
# 触发弹性盒子的方式
给父元素添加display属性, 并且将取值设置成:flex影响的是子元素
display:flex; # 触发弹性盒子的特点
子元素默认横向显示子元素会默认变成块级元素, 能设置宽度高度如果只有一个子元素的话, 则给子元素添加margin:auto的时候 会让子元素直接实现水平垂直居中显示
# 弹性盒子概念
容器父元素给父元素触发弹性盒子项目子元素父元素触发弹性盒子之后影响的都是子元素横轴水平方向的轴线纵轴垂直方向的轴线主轴(重点)触发弹性盒子之后子元素的排列方向侧轴(重点)触发弹性盒子之后与主轴对立的方向 备注 1、触发弹性盒子之后, 项目默认沿主轴排列 2、移动端布局里面/flex布局/弹性盒子布局里面最主要的就是按照轴线进行布局 2父元素容器的属性 操作属性属性值结果修改主轴方向/项目的排列方向flex-directionrow横向从左至右默认值column纵向从上至下row-reverse横向从右至左主轴在横向项目反方向排列column-reverse纵向从下至上主轴在纵向项目反方向排列调整主轴上面的对齐方式justify-contentflex-start主轴的开始位置 项目没有分开默认位置flex-end主轴的结束位置 项目没有分开center主轴的居中位置 项目没有分开space-around两端环绕项目与项目左右都有间距项目与项目之间的距离是贴边项目距离父元素之间距离的2倍space-between主轴两端对齐首尾贴边中间的距离进行均分调整侧轴上面的对齐方式(单行侧轴对齐方式)align-itemsflex-start侧轴的开始位置默认位置flex-end侧轴的结束位置center侧轴的居中位置stretch默认侧轴的开始位置若没有高度的话默认是拉伸到父元素的高度baseline侧轴的基线位置与flex-start效果一致项目折行flex-wrapnowrap不折行wrap折行项目折行后的行间距(多行侧轴对齐方式)align-contentflex-start侧轴的开始位置没有行间距经常使用flex-end侧轴的结束位置没有行间距center侧轴的中间位置没有行间距space-around行间距环绕行与行之间的距离是贴边行与父元素之间距离的2倍space-between侧轴的两端对齐第一行和最后一行贴边显示中间行间距自动分配 备注 1、添加折行之前: 默认不折行是有挤压效果的且会失去宽度 2、添加折行之后: 1默认是高度均分的----显示很多留白的原因是因为给子元素设置了高度 2不给项目高度的话默认是拉伸的高度均分 3折行之后如果子元素有高度的话则会产生一个比较大的间距(行间距) 3子元素容器的属性 操作属性属性值结果定义子元素的排列顺序order数值无单位 1、order取值越大位置越靠后面取值可以为正数也可以为负数 2、默认的排列的顺序为order:auto-----等价于0即从左向右显示 3、以主轴最开始位置算起 调整剩余宽/高的长度flex数值无单位1、主轴在横向项目不设置高度的话则高度是拉伸的 2、主轴在纵向项目不设置宽度的话,则宽度是拉伸的 3、调整剩余宽高时若要使得项目均分则各项目中flex取值一样即可不挤压不折行flex-shrink0 实现不挤压不折行 应用场景移动端横向滚动条 1默认值默认被挤压不折行调整每个项目侧轴上面的对齐方式align-selfflex-start侧轴的开始位置默认位置flex-end侧轴的结束位置center侧轴的居中位置stretch默认侧轴的开始位置若没有高度的话默认是拉伸到父元素的高度baseline 侧轴的基线位置与flex-start效果一致
float布局与flex布局的对比
flex布局易用布局全面float的创建初衷只是为了达到文字环绕的效果另外需要清除浮动现在几乎所有公司的产品使用场景都在浏览器ie9以上所以不需要考虑兼容性问题
4、【position】定位
1定位理解
定位就是让元素在布局的过程在进行位置的偏移相对于自己的位置或者是其他元素的位置进行调整
2定位种类
静态定位、相对定位、绝对定位、固定定位、粘性定位
3定位属性
属性position
4定位配合
偏移属性top、right、bottom、left
5定位分类
# 静态定位
含义普通文档流定位元素是怎么排列就怎么排列属性position属性值static默认值实际开发时不适用注意事项无论怎么跟偏移属性都不会改变位置
position:static;
# 相对定位
含义相对定位指的是相对于自己的位置进行微调参照物为自己的位置 属性position 属性值relative
top取值为正数时盒子向下走即盒子距离原来顶部有对应数值的距离left取值为正数时盒子向右走即盒子距离原来左边有对应数值的距离bottom取值为正数时盒子向上走即盒子距离原来底边有对应数值的距离right取值为正数时盒子向左走即盒子距离原来右边有对应数值的距离
实际开发的时候经常使用的是left和top所有元素的基准点都是左上角
position:relative;
# 绝对定位
含义
子元素使用绝对定位父元素有定位一般是相对定位则位置调整是相对于父元素左上角进行位置的改变子元素使用绝对定位父元素没有定位这次子元素位置的调整是根据上一层的元素判断有定位属性则参照最近的一层进行位置调整如果外面所有层都没有定位则参照浏览器左上角的body位置
属性position 属性值absolute 顺口溜子绝父相
position:absolute;
# 固定定位
含义让元素相对于浏览器窗口进行位置的显示参照物当前浏览器窗口左上角应用场景返回置顶、广告、楼梯层、遮罩层属性position 属性值fixed
position:fixed;
# 粘性定位
含义粘性定位是相对定位和固定定位的结合体当页面元素发生滚动的时候实现了对应的吸附效果也叫作滚动吸顶属性position属性值sticky
position:sticky;
6定位使用场景
静态定位默认值始终不会使用相对定位出现微调的时候会使用该定位绝对定位出现大调的时候会使用该定位使用时遵循子绝父相的写法固定定位实现广告栏、楼梯层、遮罩层等效果粘性定位主要做滚动吸顶的效果
5、三栏布局
目标高度固定左右两侧的盒子宽度为200px中间自适应
解决float实现、position实现、flex实现 1float实现
使用浮动来实现三栏布局即新增三个盒子分别为左中右左盒子左浮动右盒子右浮动中间的盒子不设置宽度自适应设置一个margin:0 200px中间盒子放置最后即可
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle* {margin: 0;padding: 0;}.top {width: 100%;height: 100px;background-color: pink;}/* 设置左中右 */.left {width: 200px;height: 300px;background-color: yellowgreen;float: left;}.center {height: 300px;background-color: blanchedalmond;margin: 0 200px;}.right {width: 200px;height: 300px;background-color: coral;float: right;}/style
/head
bodydiv classtop/divdiv classboxdiv classleft/divdiv classright/divdiv classcenter/div/div
/body
/html
2position实现
使用position来实现三栏布局即左中右三个盒子左盒子定位距离左边位置为0邮盒子定位距离右边盒子为0中间盒子不设置宽度放在最后直接补位进去即可
这里使用的绝对定位是因为我们直接根据浏览器来设置三栏布局因此不需要相对父元素而定位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.top {width: 100%;height: 100px;background-color: pink;}/* 设置左中右 */.left {width: 200px;height: 300px;background-color: yellowgreen;position: absolute;left: 0;}.center {height: 300px;/* width: 200px; */background-color: blanchedalmond;}.right {width: 200px;height: 300px;background-color: coral;position: absolute;right: 0;}/style
/head
bodydiv classtop/divdiv classboxdiv classleft/divdiv classright/divdiv classcenter/div/div
/body
/html
3flex实现
使用flex来实现三栏布局即给父元素设置【display:flex;】给中间盒子调整剩余宽度即可【flex:1;】
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.top {width: 100%;height: 100px;background-color: pink;}.box {display: flex;}/* 设置左中右 */.left {width: 200px;height: 300px;background-color: yellowgreen;}.center {height: 300px;/* width: 200px; */background-color: blanchedalmond;flex: 1;}.right {width: 200px;height: 300px;background-color: coral;}/style
/head
bodydiv classtop/divdiv classboxdiv classleft/divdiv classcenter/divdiv classright/div
/body
/html 6、水平垂直居中布局 1行内块元素
方法1使用水平居中和行高来实现水平垂直居中方法2使用弹性盒子布局主轴居中/侧轴居中来实现水平垂直居中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title水平垂直居中/titlestyle* {margin: 0;padding: 0;}span {width: 100px;height: 100px;background-color: pink;display: inline-block;/* 法1 *//* text-align: center;line-height: 100px; *//* 法2 */display: flex;justify-content: center;align-items: center;}/style
/head
bodyspan完美世界/span
/body
/html
2块级元素
使用positionmargin来进行中心位置的调整使用positiontransform计算子元素宽高一半占比来进行中心位置的调整使用弹性盒子进行水平垂直居中使用单元格【display:table-cell;】和外边距【margin:0 auto;】实现水平垂直居中兼容性差不建议
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title水平垂直居中-块级元素/titlestyle* {margin: 0;padding: 0;}.box{width: 500px;height: 500px;background-color: pink;/* 法1法2子绝父相 *//* position: relative; *//* 法3设置弹性盒子 *//* display: flex;justify-content: center;align-items: center; *//* 法4设置单元格 */display: table-cell;vertical-align: middle;}.box1 {width: 100px;height: 100px;background-color: beige;/* 法1法2子绝父相 *//* position: absolute;top: 50%;left: 50%; *//* 法1positionmargin平移 *//* margin-top: -50px;margin-left: -50px; *//* 法2positiontransform计算子元素宽高一半占比 *//* transform: translate(-50%,-50%); *//* 法4设置单元格margin实现但是兼容性差 */margin: 0 auto;}/style
/head
bodydiv classboxdiv classbox1/div/div
/body
/html
7、BFC
1定义
块格式上下文Block Formatting ContextBFC是Web页面的可视化CSS渲染的一部分是块盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域
即形成了一块封闭的区域能检测到区域内脱离文档流的元素
2特点
CSS中隐含的属性开启后不会被浮动的元素覆盖BFC元素可以包含浮动元素BFC元素的子元素和父元素外边距不重叠
3开启
设置元素浮动【float:left;】设置为行内块元素【display:inline-block;】overflow:hidden推荐使用
4作用
清除浮动带来的影响解决边距塌陷问题外边距折叠也只会发生在属于同一BFC的块级元素之间 五、CSS3常用属性
1、CSS3边框
1圆角
# 属性分类
复合属性border-radius单角属性border-垂直方向-水平方向-radius
# 复合属性
属性取值数值px
取值v1;-----------------实现四个方向的圆角取值v1 v2;-------------实现四个方向的圆角显示v1代表左上右下v2代表右上左下取值v1 v2 v3;---------实现四个方向的圆角显示v1代表左上v2代表右上左下v3代表右下取值v1 v2 v3 v4;-----实现四个方向的圆角显示v1代表左上v2代表右上v3代表右下v4代表左下 规律从左上角开始顺时针旋转记忆 示例设置一个角的时候
border-radius: 30px 0 0 0;
# 单角属性
单角属性只设置一个角
border-垂直方向-水平方向-radius
垂直top、bottom
水平left、right
border-top-left-radius------------左上border-top-right-radius----------右上border-bottom-left-radius-------左下border-bottom-right-radius-----右下
# 用法
圆角的水平半径和垂直半径
border-radius:x/y;x-------所有角的水平半径y-------所有角的垂直半径
示例
border-radius:x1 x2 x3 x4/y1 y2 y3 y4;/前面代表的是每一个角的水平半径/后面代表的是每一个角的垂直半径 注意水平半径和垂直半径设置的时候只会应用在复合属性上border-radius不会应用在单角属性上 # 应用
正方形在取值为实际总宽度的一半时会变成一个正圆要想使得正方形变成一个圆形可以直接设置取值为50% 即 border-radius: 50%;
长方形盒子设置圆角时不会给百分比取值除非想实现椭圆的效果要想实现操场跑道效果则取值要给出实际数值-----高度边框的一半
width: 500px;
height: 200px;
border: 10px solid gray;
border-radius: 110px;-----110px为高度边框后的一半
2盒阴影
# 属性
box-shadow
# 属性取值
box-shadow:h-shadow v-shadow blur size color inset;
h-shadow-----水平方向上的阴影位置*正数向右走负数向左走
v-shadow-----垂直方向上的阴影位置*正数向下走负数向上走
blur---------阴影的模糊距离
size---------延展半径
color--------阴影的颜色
inset--------内阴影设置不设置则代表外阴影
示例box-shadow: 30px 30px 5px 40px blue inset;
多个阴影也可添加---取值同文本阴影一致中间使用逗号分隔开
示例box-shadow: 30px 30px blue,-30px -30px yellow;2、CSS3渐变
CSS3渐变效果分为线性渐变以及径向渐变
1线性渐变
属性
backgroundlinear-gradient(to 方向词,col1,col2,col3)注解
to 方向词到达某一个方向to top:从下面开始到达上面to bottom:从上面开始到达下面to left:从右侧开始到达左侧to right:从左侧开始到达右侧
col1,col2,col3------渐变的颜色col1:开始的颜色col2:中间的颜色col3:结束的颜色
# to 方向词
to 方向词即到达某一个方向
to top从下面开始到达上面to bottom从上面开始到达下面to left从右侧开始到达左侧to right从左侧开始到达右侧
background: linear-gradient(to bottom,red,green,blue);# to 方向词1 方向词2
to 方向词1 方向词2即到达某一个角
to top left从右下角开始到达左上角to top right从左下角开始到达右上角to bottom left从右上角开始到达左下角to bottom right从左上角开始到达右下角
background: linear-gradient(to top left,red,green,blue);# 不跟方向词参数
不跟任何参数也能实现渐变默认是从上向下进行渐变的
background: linear-gradient(red,green,blue);# 沿着一个度数/角度进行渐变
沿着一个度数/角度进行渐变即numdeg其中num代表数值deg代表度数单位
background: linear-gradient(10deg,red,green,blue); # 线性渐变重复
background: repeating-linear-gradient(to left,red,yellow 10%,green 20%);2径向渐变
# 属性
background: radial-gradient(center, shape, size, co1,col2,col3) # 属性值拆解
center---渐变位置渐变起点的位置可以为百分比默认是图形的正中心shape---渐变形状ellipse表示椭圆形circle表示圆形默认为ellipse如果元素形状为正方形的元素则ellipse和circle显示一样size---渐变大小closest-side最近边farthest-side最远边closest-corner最近角farthest-corner最远角col---渐变颜色col1开始颜色; col2中间颜色; col3结束颜色# 示例
/* 到达最近的边结束 */
.box1 {background: -webkit-radial-gradient(100px 50px,closest-side,red,green,blue);
}
/* 到达最远的边结束 */
.box2 {background: -webkit-radial-gradient(100px 50px,farthest-side,red,green,blue);
}
/* 到达最近的角结束 */
.box3 {background: -webkit-radial-gradient(100px 50px,closest-corner,red,green,blue);
}
/* 到达最远的角结束 */
.box4 {background: -webkit-radial-gradient(100px 50px,farthest-corner,red,green,blue);
}# 径向渐变重复
background: repeating-radial-gradient(red,green 10%,blue 20%);3、CSS3文本效果
1文本阴影
文本阴影即给文字添加阴影
# 语法
text-shadow: h-shadow v-shadow blur color
取值说明h-shadow必填项水平阴影的位置允许负值v-shadow必填项垂直阴影的位置允许负值blur选填项模糊的距离color选填项阴影的颜色 注意text-shadow 属性可连接一个或更多的阴影文本阴影文本用逗号分隔开 # 示例 style.root{margin: 50px;}.text{width: 200px;margin: auto;font-size: 44px;font-weight: bold;color: #fff;text-shadow: 2px 2px 4px skyblue,-2px -2px 4px skyblue;}
/style
bodydiv classrootdiv classtext文字渐变/div/div
/body
2文本溢出
属性属性说明属性值属性值说明overflow文字长度超出限定宽度则隐藏超出的内容visible默认值内容不会被修剪可以呈现在元素框之外scroll无论是否超出容器都会出现一个滚动条auto如果没有超出容器的显示将会正常显示如果超出将会出现一个滚动条hidden如果内容超出父级容器超出部分将会被隐藏text-overflow 规定当文本溢出时显示省略符号来代表被修剪的文本 注意只有在设置了overflow:hidden和white-space:nowrap后text-overflow才能够生效的 clip当对象内文本溢出部分裁切掉ellipsis当对象内文本溢出时显示省略标记…white-space控制空白字符的显示同时还能控制是否自动换行normal连续的空白符会被合并换行符会被当作空白符来处理nowrap和 normal 一样连续的空白符会被合并但文本内的换行无效pre连续的空白符会被保留仅在遇到换行符或 br标签时才会换行pre-wrap连续的空白符会被保留pre-line连续的空白符会被合并 # 单行文本溢出
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文本溢出/titlestyle.box{width: 300px;margin: 0 auto;text-align: left;}.one-line{border: 2px solid pink;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }/style
/head
bodydiv classboxdiv classone-line人们总是把幸福解读为“有”有房有车有钱有权但幸福其实是“无”无忧无虑无病无灾“有”多半是给别人看的“无”才是你自的。/div/div
/body
/html
# 多行文本溢出
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title多行文本溢出/titlestyle.box{width: 300px;margin: 0 auto;text-align: left;border: 2px solid pink;}.two-line{overflow: hidden;text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;/* 行数值可以改表示展示x行后多余的伸缩展示 */-webkit-line-clamp: 2;}/style
/head
bodydiv classboxdiv classtwo-line土地是世界上唯一值得你去为之工作为之战斗为之牺牲的东西。 Land is theonly thing in the world worth working for, worth fighting for, worth dyingfor./div/div
/body
/html
3文本换行
# 长文本换行
word-wrap:break-word;
# 单词拆分换行
word-break:break-all;
4、CSS3网格布局【grid】
1理解
网格布局【grid】是最强大的CSS布局方案它将网页划分为一个个网格可以任意组合不同的网格做出各种各样的布局
Grid 布局与 Flex 布局有一定的相似性都可以指定容器内部多个项目的位置。但是它们也存在重大区别Flex 布局是轴线布局只能指定项目针对轴线的位置可以看作是一维布局Grid 布局则是将容器划分成行和列产生单元格然后指定项目所在的单元格可以看作是二维布局Grid 布局远比 Flex 布局强大
2应用场景
flex布局、float布局应用于⼀维布局网格布局应用于⼆位布局
3操作
属性说明属性值说明display指定一个容器采用网格布局grid默认是块元素inline-grid默认是行内块元素grid-template-columns定义每一列的列宽像素值 grid-template-columns100px 100px 100px; //总共三列每列列宽是100px 百分比 grid-template-columns: 33.33% 33.33% 33.33%; repeat(次数大小) grid-template-columns: repeat(3, 33.33%); grid-template-rows定义每一行的行高像素值 grid-template-rows: 10px 10px 10px; 百分比 grid-template-rows: 33.33% 33.33% 33.33%; repeat(次数大小) grid-template-rows: repeat(3, 33.33%);
4示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlegrid网格布局/titlestyle.box{width: 800px;height: 800px;background-color: beige;display: grid;/* grid-template-columns: 50% 50%; *//* grid-template-rows: 25% 25% 25% 25%; */grid-template-columns: repeat(2,200px);grid-template-rows: repeat(4,25%);}.son{width: 200px;height: 200px;background-color: pink;border: 1px solid orange;box-sizing: border-box;}/style
/head
bodydiv classboxdiv classson/divdiv classson/divdiv classson/divdiv classson/divdiv classson/divdiv classson/divdiv classson/divdiv classson/div/div
/body
/html
