【凤凰社】 (办公)html5与css3的相关知识
1.html超文本标记语言,图片,链接,文字组成.
2.常用的浏览器:IE,火狐,谷歌浏览器.
浏览器内核:
IE Trident
firefox Gecko
chrome Blink
3.web标准w3c
4.基本语法:
1.html是由尖括号包裹的标签
2.html标签是成对出现的.
3.有些特殊的是单标签.
3.包含关系,兄弟关系.
5.html结构标签:
1.html 根标签
2.head 头部
3.title 标题
3.body 身体
6.编辑器采用vscode
1.vscode安装插件:(安装完需要重启)
[
chinese(中文汉化)
Open in Browser打开浏览器
JS-CSS-HTML Formatter 自动保存格式化
Auto Rename Tag 自动重命名配对的HTML和XML标签
CSS Peek 追踪至样式.
]
7.DOCTYPE以及字符集的作用:
1.DOCTYPE 文档类型声明标签,在html前面.
2.zh-CN语言是中文,<html lang="en"> lang当前文档的显示语言.
3.charset="UTF-8" 字符集<meta charset="UTF-8"/>
8.html常用的标签:
标签的语义:在合理的情况放置一个合适的标签,可以让页面的结构更加的清晰.
9.标题标签
h1~h6 语义:作为标题来使用,而且根据重要性递减.
10.段落
<p>段落</p>
1.文本会根据浏览器大小自动换行.
2.段落中间有空隙.
<br/> 强制换行
1.单标签
11.案例编写:
12.文本格式化标签:
文字需要粗体,斜体,下划线.
加粗:<strong></strong>,<b></b>
倾斜:<em></em>,<i></i>
删除线:<del></del>,<s></s>
下划线:<ins></ins>,<u></u>
13.div和span标签:
没有语义是一个盒子标签.
1.div 单行,大盒子
2.span 不换行,小盒子
14.img图片标签:
<img src="图像路径"/>
src是图像的必须属性.
alt是图像不显示时候的文本.
width设置一下宽
height设置一下高
title提示文本.
border边框
1.标签名后面写属性
2.属性中间以空格分开.
3.属性key=value
15.目录文件夹和根目录
1.目录文件夹
2.打开目录文件夹第一层就是根目录
16.相对路径和绝对路径
1.相对路径.(图片相对于html的位置)
同路径
上一级../
下一级/
2.绝对路径:
直接从盘符Start:C://xcxx
17.超链接
<a href="跳转目标" target="目标窗口弹出的地方"></a>
跳转页面,target="_self"默认值,_blank为在新窗口打开的方法.
1.可以访问外部页面.
2.可以访问内部的网页也可以.
3.空连接#
4.可以在href放路径.xxx.zip文件,就可以下载.
18.锚点连接:
a标签连接#id属性就可以跑到这个地方.
<a href="#id属性"></a>
<h2 id="id属性"></h2>
19.注释和特殊字符:
1.<!-- 注释 --> ctrl+/
2.  空格
< 小于号
> 大于号
20.表格
1.table定义表格
2.tr列
3.td单元格内容
4.th表头,加粗居中.
21.表格属性(并不常用)
1.align,对其方法
2.border,边框
3.cellpadding,像素值
4.cellspacing,像素值
5.width像素或百分比.
22.表格结构thred,tbody
23.合并单元格
1.rowspan:合并几行
2.colspan:合并单元格个数.
24.列表(无序有序,自定义)
1.无序:ul,li
2.有序:ol,li
3.自定义dl,dt,dd
25.表单
1.表单域可以收集表单元素提交给服务器form
常用的属性:
action url地址 表单数据送到哪里。
method get/post 表单提交方法
name 名称 指定表单名称
2.表单元素:
1.<input type="" />
type=button 按钮
type=checkbox 复选框
type=file 浏览文件上传
type=hidden 隐藏字段
type=image 定义图像的方法提交数据
type=password 密码
type=radio 单选
type=reset 重置标签
type=submit 提交按钮
type=text 文本
还有其他的元素:
name 用户自定义,设置input的名称
value 用户自定义,设置input的值.
checked 规定input元素首次载入应当被选中.
maxlength 整数,输入字符最大长度.
2.label标签
3.select下拉框,option
option中定义selected=selected的话,当前为默认选中项.
4.textarea文本域
cols 用来指定每行显示的字符数。
rows 用来指定正常情况下（没有滚动条）显示的文本行数
**************************************************************************
*****************************css样式表************************************
**************************************************************************
1.css美化网页
2.选择器:{属性:值}
1.给谁的样式,
2.选择器就是指定css样式的标签
3.属性之间,用逗号分隔.
3.代码风格:小写,空格规范:冒号后面打个空格,选择器后面加个空格.
4.选择器的作用:选择标签
4.1.标签选择器:标签名当做选择器
4.2.类型选择器:类名class(开发较为常用)
语法:.类名 {
属性:值
}
补充:多个类名必须空格分开.
4.3.id选择器:#id名称:{
属性:值
}
唯一的.
4.4.通配符选择器
* {
属性: 值
}
* 代表所有元素,特殊情况下使用.
5.CSS字体属性:
5.1.font-family 字体,各个字体之间用逗号分隔,尽量用系统自带的字体。
5.2.font-size 字体大小,px像素
5.3.font-weight 字体粗细
normal 默认值
bold 粗体
100~900 400=normal,700=bold 不带单位
5.4.font-style 字体风格
italic 斜体
normal 默认
5.5.字体属性简写的顺序:font: font-style font-weight font-size/line-height font-family
(不可以颠倒顺序,必须严格按照这个编写,空格隔开
font-size和font-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
)
5.6.文本颜色:color (十六进制,RGB,还有颜色单词)
5.7.文本对齐:text-align 让盒子里的文字水平居中对齐.
5.8.文本装饰:text-decoration 下划线,上划线,删除线.
underline下划线,none文本无装饰.
5.9.文本缩进:text-indent 1em 1个文字的距离,2em 2个文字的距离
5.10.行间距:line-height
6.css引入方法3种:
6.1.内部样式表(hred标签里写<style>写css样式</style>)
6.2.行内样式表(标签里写属性style,比如<h1 style="写css样式"></h1>)
6.3.外部样式表(创建css后缀的文件,用link引入)
<link rel="stylesheet" href="index1.css" />
6.4.行内样式表>内部样式表>外部样式表
7.Emmet语法:
7.1.emmet语法生成html
1.生成标签,标签名加tab div + tab 就可以生成<div></div>
2.生成多个相同的标签,加上*就可以了,div*3 就可以生成3个div
3.如果有父子关系的标签,可以用>比如ui>li就可以
4.如果生成兄弟标签,用+就可以了,比如div+p
5.如果生成类名或者id名字的,直接写.demo或者#two 即可。
6.如果生成div类名有顺序,可以用$
.demo$*5
7.在标签里生成文字 div{dasdfasdfasdf}
7.2.emmet语法快速生成css样式:
1.比如w200 按tab 可以生成 width: 200px;
2.比如lh26 按tab 可以生成 line-height: 26px;
8.快速格式化代码: shift+alf+f
9.复合选择器(准确,高效)
9.1.后代选择器,子选择器,并集选择器,伪类选择器
9.2.后代选择器:包含选择器,可以选择父元素里面的子元素。
语法:元素1 元素2 {样式声明}
元素1 包含元素2标签(后代元素)
元素1和元素2空格隔开
无论是儿子,孙子只要是元素1的后代即可
元素1和元素2可以是任意的标签选择器.
9.3.子选择器:只可以选择某元素的最近一级的元素,简单理解就是亲儿子选择器
语法:元素1>元素2{样式声明}
元素1和元素2用大于号隔开.
元素1父和元素2子
9.4.并集选择器:可以选择多组标签,同时为他们定义相同的样式。
并集标签选择器通过英文(,)连接而成,任何形式的选择器,都可以当做并集选择器的一部分.
最后一个选择器不需要加逗号
10.伪类选择器:用于向某些选择器添加特殊的效果,比如链接添加特殊效果,或者选择第1个元素,第n个元素.
伪类标签选择器最大的特点就是(:)表示,比如:hover,:first-child.
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动连接(鼠标按下未弹起的链接) */
为了确保可以生效,按照LVHA的顺序声明
补充伪类选择器:focus用于获取焦点的表单元素.
11.css的元素的显示模式:
1.元素的显示模式:元素以什么方法显示,div自己占一行,一行可以放多个span.
块元素和行内元素
块元素会换行(h1~h6,p,div,ul,ol,li)
行内元素不会换行(span,a,em,b,s,ins,u,strong)
1.1.块级元素的特点:
1.换行
2.高度,宽度,外边距和内边距可以控制。
3.宽度是默认容器(父容器)100%
4.使一个容器以及盒子,里面可以放行内或者块级元素.
文字类元素内不可以使用块级别元素
1.2.行内元素
1.相邻行内元素在一行上,一行可以显示多个
2.高,宽设置是无效的
3.默认宽度就是他本身内容的宽度
4.行内元素只可以容纳文本或其他行内元素.
注意:
1.链接里面不可以放链接。
2.特殊情况链接a下面放块级标签,a标签转换一下模式最安全.
1.3.行内块元素
img,input,td 他们同时具有块级元素和行内元素的特点.行内块元素
1.和相邻行内元素(行内块)在一行上,But他们之间会有空白的缝隙,一行可以显示多个.(行内元素特点)
2.默认的宽度就是他本身的宽度(行内元素特点)
3.高度,行高,外边距,内边距可以控制(块级元素特点)
2.显示模式转换
display:block; 转块
display:inline 转行内
display:inline-block; 行内块
12.小工具:snipaste截图工具
13.文字单行垂直居中:
让文字的行高等于盒子的高度
盒子高:height: 50px;
行 高 :line-height:50px;
原理:
行高=上空隙+文字本身高度+下空隙.
盒子本身也有高度.
文字的本身加上上空隙加上下空隙加起来等于盒子的高度就成。
15.背景颜色:
1.背景颜色,背景图片,背景平铺,背景图像固定等等.
背景颜色background-color 默认transparent透明
2.背景图片background-image none | url('')
3.背景平铺 background-repeat
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 当背景图像不可以以整数次平铺时，会根据情况缩放图像。（CSS3）
space： 当背景图像不可以以整数次平铺时，会用空白间隙填充在图像周围。（CSS3)
默认是平铺的
4.背景图片位置:background-position:x y;
方位名词:center top,left,right,
比如超大背景图片:background-position:center top;
1.精确定位: 第一个是x坐标,第二个是y坐标.
background-position: 5px 10px;
如果写一个值一定是x,另外一个是垂直居中center.
2.混合单位:
数值和方位名词混搭,第一个是x,第二个是y.
3.背景固定:
background-attachment 背景图像是否固定或者滚动
background-attachment可以做视差滚动效果.
background-attachment: scroll | fixed
scroll 随着内容的滚动而滚动的.
fixed 不随着页面滚动是固定的.
4.背景属性复合写法:(实际开发中使用这个写法多,空格隔开属性)
background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置;
5.背景半透明:
background: rgba(0,0,0,0.3)
最后一个参数是alpha透明度,取值范围在0~1之间。
注意:背景半透明是指盒子背景半透明,盒子的内容不受影响。
背景图片的应用:实际开发中的logo或者装饰性的小图片或者是超大的背景图片,有点是非常容易控制位置。
16.css的三大特性:(层叠性,继承性,优先级)
1.层叠性:相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠主要解决冲突问题.
层叠的原则:
1.样式冲突,遵循的原则就是就近原则,那个样式离结构进,就用那个.
2.样式不冲突,不会层叠.
2.继承性:子标签会集成父标签的某些样式,比如文本颜色和字号。简单的理解就是子承父业。
(恰当的使用可以减少css代码)
div {
color: pink;
font-weight: 700;
}
<div>
<p>长江后狼</p>
</div>
子元素可以继承父元素的样式(text,font,line-这些元素开头的可以继承,以及color)
2.1.行高的继承性:
body{
font: 12px/1.5 'Microsoft YeHei';
}
1.行高可以跟单位也可以不跟单位
2.如果子元素没有设置行高,则会继承父元素的行高为1.5
3.此时子元素的行高是:当前子元素的文字大小*1.5
body行高1.5 这样写法最大的优势是里面的子元素可以根据文字大小自动调节行高.
3.优先级:
1.选择器相同,则Run层叠属性。
2.选择器不同,则根据选择器权重Run。
选择器 选择器权重(最下面的最大)
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important重要的 无穷大
优先级注意点:
1.权重有4组数字组成,但不会有进位。
2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推。
3.等级从左到右判定,如果某一个值相等,就判断下一位.
4.简单的记忆法,通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器100,行内样式为1000,!important无穷大.
5.继承的权重是0,如果该元素没有直接选中,不管父元素的权重多高,子元素得到的权重都是0
(a标签浏览器默认给了一个样式)
4.权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。
(权重虽然会叠加不会进位的问题)
div ul li ----> 0,0,0,3
.nav ul li ----> 0.0.1,2
a:hover ----> 0.0.1,1
.nav a ----> 0.0.1,1
17.盒子模型:
17.1.看透网页布局的本质:
1.先准备好相关的网页元素,网页元素基本都是盒子box
2.利用css设置好盒子样式,然后摆放到相对应的位置.
3.往盒子里添加内容.
17.2.盒子模型的组成部分:
盒子模型,布局元素可以当做一个矩形的盒子。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包含:边框,外边距,内边距,和实际内容.
border边框
content内容
padding内边距,控制盒子边框和内容
margin外边距,盒子与盒子的距离。
1.边框:border分为3部分边框的宽度(粗细)边框的样式,边框的颜色。
语法:border:border-width || border-style || border-color
1.边框的简写方法
border:1px solid red;//没有顺序
边框分开的写法:
border-top:1px solid red;//只设定上边框,其他同理
表格细线边框:
border-collapse separate： 边框独立 collapse： 相邻边被合并
2.测试盒子大小,不量边框。
3.如果测试的是对的,width/height减去边框宽度.
2.内边距(padding)
padding属性用于设置内边距,即边框和内容之间的距离。
属性 作用
padding-left 左边距
padding-right 右边距
padding-top 上内边距
padding-bottom 下内边距
padding的简写:
值的个数 表达的意思:
padding:5px; 1个值,上下左右都有5像素的内边距.
padding:5px 10px; 2个值,上下5像素的内边距,左右都有10像素的内边距.
padding:5px 10px 20px; 3个值,上5像素的内边距,左右10像素的内边距,下都有20像素的内边距.
padding:5px 10px 20px 30px; 4个值,上5像素的内边距,右10像素的内边距,下有20像素的内边距.左有30像素 的内边距(顺时针)
2.1.padding会影响盒子实际大小
1.内容和边距都有了距离,添加了内边距
2.padding影响了盒子的实际大小
也就是说,如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子.
解决方案:
如何保证盒子跟效果图大小一致,则让width/height减去多出来的内边距大小即可.
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.
3.外边距(margin):用于处理外边距,控制盒子和盒子之间的距离。
属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
margin简写方法代表的意义跟padding完全一致.
3.1.外边距典型应用块级元素盒子水平居中.
1.盒子必须制定宽度(width)
2.盒子左右外边距都设置为auto
.header{width:900px;margin:0 auto;}
常见的写法,以下三种都可以:
2.1.margin-left:auto;margin-right:auto;
2.2.margin:auto;
2.3.margin:0 auto;
注意:以上方法是让块级元素水平居中,行内元素行内块元素水平居中给其父亲元素添加text-align:center即可;
4.外边距合并-嵌套块元素塌陷
1.相邻块元素垂直外边距合并
当上下相邻的两个块元素(兄弟关系)相遇的时候,如果上面的元素有下边距margin-bottom,下面的元素有上边距margin-top，则他们的垂直距不是margin-bottom和margin-top之和。取两个值中较大者这种现象称为相邻块元素垂直外边距合并。
解决办法:只给一个盒子添加margin值.
2.嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
1.可以为父元素定义上边框
border: 1px solid transparent;
2.可以为父元素定义上内边距
padding:1px;
3.可以为父元素添加overflow:hidden;
5.清除内外边距:
* {
margin:0;/*清除外边距*/
padding:0;/*清除内边距*/
}
注意:行内元素为了照顾兼容性,尽量的设置左右内外边距,不要设置上下的内外边距,But转换为块级和行内块元素就可以了。
18.去掉li身上的小圆点:list-style: none;
19.(圆角边框,盒子阴影,文字阴影)
圆角边框:border-radius:length;
数值越大,弧度越大.
设置高度的一半就是圆 border-radius:50%;
该属性是简写属性:后面可以跟左上角,右上角,右下角,左下角
盒子阴影:box-shadow添加阴影
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（Start时）改变阴影内侧阴影
注意
1.默认是外形阴影(outset)But不可以写这个单词,否则导致阴影无效。
2.盒子阴影不占空间,不会影响其他的盒子排列。
文字阴影:text-shadow
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。
20.传统布局的三种方法:
1.普通流(标准流)
1.块级元素会单独占一行,从上到下排列.
常用的元素:div,hr,p,h1~h6,ol,dl,form,table
2.行内元素会按照顺序,从左往右排列,碰倒父元素则自动换行.
常用的元素:span,a,i,em等
2.浮动
3.定位
(注意实际开发中,一个页面基本都包含了三种布局方法,后面是移动端的布局方法)
21.浮动可以改变元素默认的排列方法.
浮动的经典应用:可以让多个块级元素一行内排列显示
网页布局的第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动.
22.浮动:float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框的边缘。
语法:选择器{float:属性值;}
none： 设置元素不浮动 left： 设置元素浮在左边 right： 设置元素浮在右边
23.浮动的特性:
1.浮动的特性会脱离标准流(脱标)
1.脱离了标准普通流的控制(浮)移动到指定的位置(动),俗称脱标
2.浮动的盒子不需要保留之前的位置.
2.浮动里的元素会一行里显示而且元素顶部对齐.
3.浮动的元素会具有行块元素的特性.
(如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度.)
如果块级盒子没有设置宽度,默认宽度和父级一样宽,But添加浮动后,他的大小由内容来决定.
浮动的盒子中间是没有缝隙的,是紧挨着一起的。
行内元素同理
24.浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置,我们网页布局一般采取的策略。
先用标准流的父元素排到上下位置,之后内部子元素采取浮动排列左右,符合网页布局第一准则。
网页布局第二准则:先设置盒子大小,之后设置盒子位置.
25.常见的网页布局:
1.自上而下:
top,banner,main,footer
2.top,banner,left,right,footer
3.top,banner,中间拆分更多的模块,footer
26.浮动的注意点:
1.浮动和标准流的父盒子搭配:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.
2.一个元素浮动了,理论上其他兄弟元素也要浮动.
一个盒子里面有个多个子盒子,如果其中一个盒子浮动了,其他的兄弟也要跟着浮动,以避免引起问题.
(浮动的盒子只会影响盒子后面的标准流,不会影响前面的标准流.)
理想状态,让盒子撑开父亲,有多少孩子,我父盒子就有多高
27.为什么需要清除浮动:
由于父级盒子很多情况下,不方便给高度,But盒子浮动又不占有位置,最后父级盒子高度为0,就会影响下面的标准盒子.
由于浮动元素不再占用原文档流的位置,So它会对后面的元素排版产生影响.
28.清除浮动
1.清楚浮动元素造成的影响.
2.如果盒子本身有高度,则不需要清除浮动.
3.清除浮动之后,父级就会根据浮动的子盒子自动检索高度,父级有了高度,就不会影响下面的标准流了
语法:选择器{clear:属性值;}
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。(实际开发中最常用的)
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
清除浮动的策略是闭合浮动.
4.清理浮动方法
1.额外标签也被称为隔离法,是W3C推荐的做法.
额外标签法,是w3c推荐的做法。
额外标签法会在浮动元素的末尾添加一个空的标签,例如<div style="clear:both"></div>或者其他标签比如<br/>
要求这个空元素必须是块级元素
清除浮动的本质:是清除浮动元素脱离标准流的影响.
清除浮动的策略:闭合浮动,只让浮动在父盒子内部影响,不影响外部的其他盒子.
2.父级添加overflow属性
可以给父级添加overflow属性,将其属性值设置为hidden,auto或scroll
注意是给父元素添加的。
缺点:无法显示溢出的部分.
3.父级添加:after伪元素
:after方法是额外标签法的升级版,也是给父元素添加.
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点:没有增加标签,结构更加简单
缺点:照顾低版本浏览器
代表网站:百度,淘宝网,网易等等.
4.父级添加双伪元素
也是给父元素添加
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点:代码更加简洁
缺点:照顾低版本浏览器
代表网站:小米,腾讯等等
5.为什么需要清除浮动:
1.父级别没高度
2.子盒子浮动了。
3.影响下面布局了,那我们就应该浮动了.
29.CSS属性的书写顺序:
1.布局定位属性:
display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式)
2.自身属性:
width/height/margin/padding/border/background
3.文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性(CSS3):content/cursor/border-radius/bos-shadow/text-shadow/background:linear-gradlient....
30.页面布局整体思路:
1.必须确定页面版型(可视区域),我们测量可得知.
2.分析页面中的行模块,以及每个行模块中的列模块,其实页面布局是第一准则.
3.一行中的列模块经常浮动布局,先确定每个列的大小,之后确定位置,页面布局的第二准则
4.制作HTML结构,我们还是遵循,先有结构,后有样式的原则,结构永远最重要.
5.So,先理清楚布局结构,再编写代码尤其重要,这个需要我们多多积累.
31.导航栏注意点:
实际开发中,我们不会直接用链接a而是用li包含(li+a)的写法
1.li + a 更加的清晰,一看这个就是有条理的表型内容。
2.如果直接用a,搜索引擎容易辨别为有堆砌关键字的嫌疑(故意堆砌关键字容易被搜索引擎降权的风险,从而影响网络),从而影响网站排名.
3.这个nav导航栏可以不给宽度,将来可以继续添加其余文字.
4.Beacuse导航栏里面的文字不一样多,So最好给链接a,左右padding撑开盒子,而不是指定宽度.
(行内块之间有空隙,可以加浮动消除这个缝隙)
(注意行内元素给左右内外边距)
32.定位
1.某个元素可以自由的在一个盒子内移动位置,而且压住其他的盒子。
2.当我们在滚动窗口的时候,盒子是固定在某些位置的.
以上效果,标准流和浮动无法实现的,此时需要定位来实现.
So:
1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
2.定位则是可以让盒子自由在某个盒子移动位置或者固定屏幕中某个位置,而且可以压住其他盒子.
32.1.定位的组成
1.定位:将盒子定在某一个位置,So定位也是在摆放盒子,按照定位的方法移动盒子.
定位=定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方法,边偏移则决定了该元素的最终位置。
position
static： 静态定位
(对象遵循常规流。此时4个定位偏移属性不会被应用。 )
relative： 相对定位
( 对象遵循常规流，而且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 )
absolute： 绝对定位
( 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。 )
fixed： 固定定位:
( 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 )
sticky： 对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
1.1.边位移
top 顶部偏移量,定义元素相对于父元素上边线的位置.
bottom 底部偏移量,定义元素相对于父元素下边线的位置.
left 左侧偏移量,定义元素相对于父元素左边线的位置.
right 右侧偏移量,定义元素相对于父元素右边线的位置.
32.2.静态定位(了解)
静态定位就是无定位的意思.
语法是:
选择器 {position: static;}
静态定位按照标准流的特性摆放位置,他没有偏移.
静态定位在平时很少会用到.
32.3.相对定位 relative(重要)
相对定位是元素在移动位置的时候,是相对它原来的位置来说的(自恋型)
语法是:
选择器 {position: relative;}
相对定位的特点:(务必记住)
1.它相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方法对待它。(不脱标,继续保留原来的位置.)
因而,相对定位并没有脱标,他是最典型的给绝对定位当爹的...
32.4.绝对定位absolute(重要)
绝对定位是元素在移动位置的时候,是相对于他的祖先元素来说的(拼爹型)
语法:
选择器 {position:absolute;}
绝对定位的特点(务必记住)
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对,绝对,固定定位),则以最近的一段有定位的元素为参考点移动位置.
3.绝对定位不再占有原先的位置。(脱标)
32.5.子绝父相的由来:
弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景.
意思:子级使用绝对定位,父级则需要相对定位
1.子级绝对定位,不会占有位置,可以放到父盒子里面任何一个地方,不会影响其他兄弟盒子。
2.父盒子需要加定位限制子盒子在父盒子内显示。
3.父盒子布局时,需要占有位置,因而父亲只可以是相对定位。
这个就是子绝父相的由来,So相对定位经常用来作为绝对定位的父级。
总结:Beacuse父级需要占有位置,因而是相对定位,子盒子不需要占有位置,则是绝对定位。
当然子绝父相不是一成无变化的,如果父元素不需要占有位置,子绝父绝也会遇到。
32.6.固定定位(重要)
固定定位是元素固定于浏览器可视区域。主要使用场景:可以在浏览器滚动的时元素的位置不会改变。
语法:
选择器 {position: fixed;}
固定定位的特性:
1.以浏览器的可视窗口为参考点移动元素.
1.1.跟父元素没有任何的关系
1.2.不随着滚动太的滚动而滚动
2.固定定位不在占有的原先位置上.
(小技巧:不要直接控制图片,给图片一个父盒子是最好的情况)
固定定位也是脱标的,其实固定定位就可以看做是一种特殊的绝对定位.
(小技巧:固定在版心右侧位置
小算法:
1.让固定定位的盒子left:50%;走到浏览器可视区域(也可以看做版心)的一半位置。
2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置。
就可以让固定定位的盒子贴着版心右侧对齐了。
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/*1.走浏览器宽度的一半*/
left: 50%;
/*2.版心是800,走400px*/
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
)
32.7.粘性定位sticky(了解)
粘性定位可以被人为是相对定位和固定定位的混合sticky
语法规范:
选择器 {position:sticky;top: 10px;}
粘性定位的特点:
1.以浏览器的可试窗口为参照点移动元素(固定定位的特点)
2.粘性定位是占有原先的位置(相对定位的特点)
3.必须添加top,left,right,buttom其中一个才有效.
32.8 定位的总结:
定位模式 是否脱标 移动位置 是否常用
static 否 不可以使用偏移 很少
relative 否(占位置) 相对于自身位置移动 常用
absolute 是(不占位置) 带有定位的父级 常用
fixed 是(不占位置) 浏览器可视区域 常用
sticky 否(占位置) 浏览器可视区域 当前阶段很少.
32.9.定位的叠放顺序:z-index
在使用定位布局时,可可以会出现盒子重叠的情况,此时,可以使用z-index来控制盒子的前后顺序。(z轴)
语法:
选择器 {z-index:1;}
数值可以是正数,负数或0,默认是auto,数值越往大,盒子越靠上。
如果属性值相同,则按照书写顺序,后来居上
数字后面不可以加单位.
z-index仅有定位才有的属性.
32.10 绝对定位居中算法
1.加了绝对定位的盒子不可以通过margin:0 auto;水平居中,But可以通过以下的计算方法实现水平居中和垂直居中。
水平居中:
/* 1.left 50% 父容器宽度的一半 */
left: 50%;
/* 2.margin-left 负值一半宽度,比如宽度是200,就拿100 */
margin-left: -100px;
垂直居中:
top: 50%;
/* 2.margin-top 负值一半宽度,比如宽度是200,就拿100 */
margin-top: -100px;
32.11 定位的特殊性:
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对定位或者固定定位,如果不给宽度或者高度,默认是内容大小。
3.脱标的盒子不会触发外边距坍塌的
(浮动元素,绝对定位(固定定位)元素都不会触发外边距合并的问题。)
0 评论