万字详解H5C3前置知识点

  • 时间:
  • 来源:互联网
  • 文章标签:

阶段一前端开发基础

初始HTML

本阶段重难点

3.29小时40小节4个模块

CSS选择器

盒模型

CSS三大特性

浮动和清楚浮动

CSS四种定位

CSS进阶

CSS3

前端工程师需要会的PS取图

案例/项目网页布局

前端基础开发::学习目标
学习内容Html+CSS(5、3)
最终目标:(做出如下静态网站,以达到熟练使用html+Css,精通网页布局的目的。在网上看到的任何一个网站都可以把他复刻下来)
+品优购电商网站
+博学谷官网静态网页
+猫眼视频网站
+京东商城
+淘宝商城
+学成网案例

-----------------------------------------------------------------------------------------
基础学习路线

HTML5基础:
+课时20%
学习常见的HTML5基础,主要学习最常见的没有兼容性的HTML标签

CSS3基础:
+课时50%
学习CSS3基础,主要学习最常用的没有兼容性的CSS样式,利用前面学习的标签完成传统PC端网页布局
可以做到常见的企业级静态网页开发

H5C3
+课时10%
学习HTML5新增的标签、CSS3样式,有一定的兼容性,可以与未来更好的接轨

静态网页项目
+课时20%
综合以前学习的知识点,贴近于实际开发,制作品优购电商网站,完成首页,列表页,注册页制作
目的:学习网页制作实际开发制作流程规范

vscode使用

shift+alt +上下就可以复制一行

光标定在哪一行复制的时候会默认复制全行

放大缩小CTRL±

vscode是微软推出的非常轻量级的好用的编辑器

分为资源管理区还有代码区

+文件管理功能open floder

+可以在设置首选项里面去选择常用的主题格式

tab可以自动补齐

li{中国}*2

在ol里面可以加type选择用什么表示顺序

标签中多属性用空格隔开

可以设置文件项中的自动保存,要不然有时候会忘记保存或者写完要测试的时候没保存好尴尬啊

想学习快捷键的可以在左下角的设置里面找到快捷键或者快捷键映射,达到自己定义或者查找默认插件的目的

推荐安装的插件

插件作用
Chinese (Simplified) Language Pack for VS Code中文(简体)语言包
Open in Browser右击选择浏览器打开html文件
JS-CSS-HTML FormatterSJ每次保存,都会自动格式化js css 和html 代码
Auto Rename Tag自动重命名配对的HTML / XML标签
CSS Peek追踪至样式

https://zhuanlan.zhihu.com/p/40417719推荐安装的30个常用插件

vscode的插件安装会非常容易

然后安装完需要重启vscode才会生效,不建议桌面有所有的软件的快捷方式。建议全部拖到开始里面,直接win+软件名字就可以打开很方便,要不然会占用内存

open in browser比view in browser要好在他可以选择浏览器,view的那个直接就默认浏览器不方便测试

JS-CSS-HTML FormatterSJ这个插件的话其实可以用快捷键解决,为了方便就可以直接用这个插件

Auto Rename Tag这个改标签特别好用,改了前面后面的会自动改

HTML简介

内容:
+网页
+常用浏览器
+Web标准

要求:
+能够说出网页的基础组成
+能够说出什么是HTML
+能够说出常用的浏览器
+能够说出Web标准的三大组成部分

网页

+什么是网页?

网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合

网站是网页中的一页,通常是HTML格式的文件,他要通过浏览器来阅读

网页是构成 网页的基本元素,他通常有图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.html或.html后缀结尾的文件,因此将其俗称为HTML文件

+什么是html?

HTML:超文本标记语言,他是一种专门来描述网页的语言,他不是编程语言而是一种标记语言,里面是一整套各种功能的标签

所谓的超文本有两层含义

1.它可以加入图片、声音、动画、多媒体等内容(超越了文本的限制)

2.它可以从一个文件跳到另外一个文件,与世界各地的主机的文件链接(超级链接文本)

+网页是怎么形成的?

网页是由网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器解析展现给用户的

前端人员开发代码->浏览器显示代码(解析、渲染)->生成最后的web网页

网页总结:

网页是由图片、链接、文字、声音、视频等元素组成的其实就是一个后缀是.html的html文件

网页生成制作:由前端人员书写的HTML文件,然后浏览器打开解析、渲染,就可以看到网页

HTML:超文本标记语言,用来制作网页的一门标记语言,由各种功能的标签组成

常用的浏览器

浏览器是网页的显示、运行的平台。常用的浏览器有EG、火狐、谷歌、Opera、safari

我们做前端的需要对所有的浏览器进行网页测试

浏览器内核备注
firefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器的内核
Opera/chrome/EGBlink(统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核,是webkit的二次开发做了功能的增强)chrome/opera浏览器内核。Blink其实是Webkit的分支
IETridentIE、猎豹安全、360极速、百度的内核(有一部分IE浏览器兼容模式用的是Trident,高速模式用多个是webkit采取的是双内核制)

目前国内浏览器大部分会采用webkit/blink内核

Web标准

Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织

为什么需要web标准

不同浏览器开发的浏览器不同,解析渲染的标准不一样,那么他显示的页面或者排版就会有差异

为了达到相同的效果可能要开发很多个版本

Web标准的构成

主要包括**结构(Structure)、表现(Presentation)、行为(Behavior)**三个方面

标准说明
结构结构用于对网页元素进行整理分类,现阶段主要学习的是Html
表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为行为是指网页模型的定义及交互的编写,现阶段主要学习的是JavaScript

用人来做比喻:结构就是骨架、表现就是皮肉。所以学完CSS、HTML就可以做出静态网站,就有一个完整的人出现了,但是这个人是不会动的。加上JavaScript就可以动了。

Web标准提出的最佳 体验方案:结构、样式、行为分离。

简单理解就是:结构写道HTML文件中,表现写道CSS文件中,行为写道JavaScript文件中

HTML标签

内容:
+HTML语法规范
+HTML基本结构标签
+开发工具
+HTML常用标签
+HTML中的注释和特殊字符
	
要求:
+能够说出标签的书写规范
+能够写出HTML的骨架标签
+能够写出超链接标签
+能够写出图片标签并说出alt和title的区别
+能够说出相对路径的三种形式	 

HTML语法规范

第一个HTML网页

每一个网页都会有一个基本的结构标签(也称为股价标签),页面内容也是在这些基本标签上书写的。

HTML页面也称为HTML文档

标签名定义说明
HTML标签页面中最大的标签,我们称之为根标签
文档的头部注意在head标签中我们必须要设置的标签是title
文档的标题设置页面的网页名
文档的主题元素包含文档的所有内容,页面内容基本都是放到body里面的
文档类型声明标签<第一行>

要求必须写在第一行,他不是html标签,是一个文档 类型的声明标签,所以多出来了一行,只有在中的才是html标签

“”文档类型声明,作用就是告诉浏览器使用哪一种HTML版本来显示网页

这句代码的意思是:当前页面采取的是HTML5版本来显示网页

lang语言种类

用来定义当前文档显示的语言

+en定义语言为英文网页

+zh-CN定义语言为中文网页

其实对文档来说定义中文也可以写英文,定义英文也可以写中文

这些对于浏览器来说是个警示作用,(改成其他语言)显示内容会有错误

字符集
万国码 ​
html常用标签

学习标签是有技巧的,重点是记住每个标签的语义,简单理解就是指标签的含义,即这个标签是用来干嘛的

根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。用标签的时候最好使用语义的标签,因为他是语义化的

加完标签后刷新才会出现效果

写在html中的不管隔多少行都会自动整合除非用了标签

标题标签双标签h1-h6每个标签都是独占一行,重要性递减
段落标签、换行标签双标签


这两个都是独占一行的,段落和段落之间有空隙,且会根据浏览器窗口大小自动换行;br是break的缩写,和段落标签不一样,段落垂直上只有空隙会大过换行标签
加粗双标签或者推荐使用语义化
删除线双标签或者推荐使用语义化
倾斜双标签或者推荐使用语义化
下划线双标签或者推荐使用语义化
盒子标签双标签块状元素,可以用display改成行内块元素。span意为跨度、跨距
盒子标签
块状元素,独占一行。division表示分割、分区
图像单标签src(图片路径)指定图片来源,alt(文本)替换文本,图像不能显示的文字。title(文本)提示文本鼠标放到图像上显示的文字。width(像素)设置图像的宽度,height(像素)设置图像的高度,border(像素)设置图像的外边框粗细
超链接标签双标签点击内容跳转target表示的是目标窗口的弹出方式a是anchor缩写。属性href用于指定链接目标的url地址,当为标签应用href是具有了超链接的功能。target默认是—self,—blank代表新窗口打开

还有sup和sub用来表示次方还有脚标

设置图像的宽高的时候,如果只修改宽或者只修改高的话对应的高或者宽会自动等比例缩放,不会失真

图像标签可以有很多属性但是必须写在src后面其他属性没有先后顺序并且以空格分隔。属性采用的是键值对的形式定义的

目录文件夹:存放了所有素材的文件夹

绝对路径:从根目录开始(打开目录文件夹的第一层就是根目录)

相对路径:从当前文件开始

同一级往上一级走 . ./ 往下一级走 /

相对路径/

绝对路径\

URL用的是/其实就是在他服务器上的路径往下找

超链接分类

外部链接:链接外部网站

内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如

空连接:href = “#”(表示的是跳到(本页面刷新了)本页面,)锚点不管在哪里,点击后都会刷新到相应的页面

下载链接:如果href里面是一个文件或者压缩包,会下载这个文件

title=悬浮提示框

网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接(实质就是两个a中间的内容点击可跳转 )

锚点链接:当我们点击链接可以快速定位到页面中的某个位置(其实这里用的是id选择器)

+加锚点:加一个id(也可以不用id,用name也是可以的)

+设置href = “#id”

跨页面跳转:

​ href里面加(比如想要跨页面到005文件夹中的html)005.html#锚点

特殊字符(可以去查特殊字符表)/转义字符

有很多特殊字符无法显示需要特殊字符表来帮忙显示

$nbsp:一个空格

$lt <

$gt >

$copy 版权

$reg 标签

一个小tips ,通常来说img是内联元素,为了img元素设定宽高

我们一上来就把img设置display成block

包裹img的a也要设置成block

属性和属性本身是没有差别的,差别是 * 属性是给ie去识别的,老版本的ie能够识别的是 属性

所以如果在属性底下再加一行* 属性就可以避免没有被读到的问题。但是IE现在已经不用了

在计算盒子和盒子之间距离的时候我们是不用padding的,因为padding会把整个高度拉高。

IE6里面有个bug就是如果

+两个都浮动

+margin top left都是零则

结果:margin left变double

把display变inline

宽度不够的时候会盒子会被挤到最下面

文字在调试的过程中可能会引起盒子与盒子之间的距离发生错误

写header的时候如果没有给出height的时候如果做了浮动的话height的结果是零,是因为这个时候内容是溢出的,他是不做自适应性计算的,但是浏览器会做自适应性计算,所以在设定更宽的盒子的时候多出来的部分会被撑开无法正常显示(IE做了自适应可以正常显示)。所以这时候用了浮动我们无法去定义一个高度

解决方案就是overflow:hidden;

原理:浮动之后会让子元素脱离文档流,当所有元素都脱离文档流,而于此董事父元素没有设定高度,高度会塌陷成0。浮动元素会对后面元素排版产生影响。一个是浮动元素后面的同级元素,一个是浮动元素父元素后面的同级元素。为了避免这种现象我们可以用overflow:hidden:隐藏溢出,让父元素感知到这些浮动元素的高度(其实就是浮动的清除,但是这里做的是自适应高度的计算,父元素没有设定高度,所以不会被裁剪)

img

gif:支持透明 支持动画 最多支持256种颜色

png:支持透明 不支持动画

jpg:不支持透明 不支持动画 支持多种颜色

HTML制作表格和列表

一个网页有三个最关键的元素文字、图片、超链接

表格:

早期是用来做排版的那个时候没有css

目前主要是用来展示数据的

< table >< /table >

<table  width="400"  height="70" align="center"(让他水平居中,还有个align-tetx的属性是让文本居中,这个也可以让文本居中;垂直居中用的是valign) border="1"(加一个像素的边框) cellspacing="0"(单元格和单元格之间的空隙)所以就会合并成两个像素>
//caption定义表格标题
<caption>学生成绩</caption>
//tr定义行
<thead>
<tr>
	<th>学号</th>
	<th>姓名</th>
	<th>语文</th>
	<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
	<td>10001</td>    
	<td>张三</td>  
	<td>98</td>    
	<td>100</td>  
</tr>
<tr>
	<td>10002</td>    
	<td>李四</td>  
	<td>96</td>    
	<td>100</td>  
</tr>
<tr>
	<td>10003</td>    
	<td>王五</td>  
	<td>97</td>    
	<td>100</td>  
</tr>
</tbody>
<tfoot></tfoot>
< /table >

​ 可以通过width height去设置宽高

边框合并也可以通过css样式设置

table{
    border-collapse:collapse;
}
border-collapse可能的样式
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit规定应该从父元素继承 border-collapse 属性的值。

border的css使用还可以这样写边框粗细、实线、颜色

*{
    border: 1px solid black;
}
合并行、列

合并行rowspan(要确保被合并的其他单元格是空的)

合并列collspan(要确保被合并的其他单元格是空的)

作业:个人简历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zlMnV6px-1624481080686)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210621125314138.png)]


HTML表单控件

<form action="指定表单提交的地址" method="GET(默认)/POST表示表单的提交方式" enctype="编码的类型">
    
    <input type="text" name="" id="" disabled maxlength="文本框的最大长度" placeholder="" disabled="disable"></input>//文本框
	<input type="password" name="" id=""></input>//密码,内容会被遮掩
	<input type="radio" name="sex" id=""></input>//单选
 	<input type="radio" name="sex" id=""></input>//单选,否则单选无法表示(两个name一样的情况下会互斥以达到单选的效果)
    <input type="checkbox" checked name="" id="">多选</input>
	<input type="file" name="" id="">上传文件</input>
	<input type="submit" name="" id="">提交</input>
	<input type="button" name="" id="">按钮</input>
	<input type="reset" name="" id="">重置</input>
	<input type="image" src="" alt="" name="" id="">图片提交按钮</input>
你最近最想去的城市
<select size="" multiple>//下拉框
    <option value="">成都</option>
    <option value="">杭州</option>
    <option value="">上海</option>
    <option value="">武汉</option>
    <option value="">苏州</option>
</select>
<textarea cows="可以显示多少行" cols="可以显示多上列">文本框默认是可以改变大小的但是这个是不好的</textarea>
</form>

表单靠的是表单元素来实现的

这里有快速实现input:text

真实从表单获取某个值数据靠的是value

有些表单控件是需要人为赋予功能,有些自己就有功能

不屑表单提交地址数据就会提交到当前页面

name的作用是不填则数据无法正确发送,所以name的作用其实是提交数据用的。name就相当于是key,value就是value。数据是以这样的方式提交的。需要填写数据的则不需要value,选择项的需要value。在提交类的表单元素中value里面可以用来填写默认值,然后通过js或者html5新增的功能placeholder去达到我们经常需要的那种提示文本

disabled禁用表单元素,表达的意义就是不想让别人填,只能看不能输入

小tips如果之和属性名一样可以把=和值全部去掉

checked表示的是默认选中,可用在多选或者单选中,

在下拉列表中表示默认选中的是selected,表示显示多个的是size="“下拉框选显示个数”,多个选中用的是multiple,在win中需要按住ctrl就可以实现多个选中

?之后是数据,数据和数据之间靠&隔开

初识CSS

HTML负责页面的内容、结构

CSS负责页面的样式

JS负责交互

CSS三种表达形式

行内式:在标签内加style(写一两个还可以如果大量使用这种样式则html和css代码混在一起导致无法维护)

<p style="color: green 和其他属性空格隔开最后要加;..."><p>

内嵌式

在head里面加

外链式

<link ref="stylesheet(样式表)" href="相关的css文件"></link>

CSS三大特性

+继承(要去看看怎么知道一个属性书否能被继承)不可继承参考1 不可继承参考2

+层叠(可以覆盖,所以可以理解的就是前端切页的过程中就是类似画画,效果是一层一层覆盖上去的叠加实现的,通过不同的选择器或者是其他方式实现精确制导,精准打击)

+优先级/权重

而对于以上三种表达样式关于第三个特性权重的体现

-在选择器里面属性值后面加 ! important是加权重的加到第一

  • 行内样式最高(除非在选择器内部属性值后面加 ! important)> 内嵌式和外链式中,对于相同的标签的描述和他们在head中的先后有关系。后面的会把前面的覆盖

  • 对单个标签描述:id>class>标签>*{}

  • 对多个嵌套的标签描述:需要统计单个选择器权重之和(就慢慢加)

    ​ id:100个单位

    ​ class:10个单位

    ​ 标签:1个单位

    ​ 假如属性是靠继承的则权重近乎为0

如果权重相同就按照代码中选择器的顺序,后面的会把前面的覆盖。

选择器

选择器{

​ k:v;

}

选择器帮助我们选中指定标签的语法

id选择器 标签中用 id=“name” css样式中#name{}:id选择器的name是唯一的不可以重复使用,一般在css中用的比较少,一般在表示一个唯一东西/区域的时候会使用

类选择器 标签中用class=“name” css样式中.name{}:可以重复使用,一个标签中可以携带多个class不同的class之间要用空格隔开

标签选择器 css样式中直接标签名{}

**通配符选择器 ***{}:但是一般不太去用它,因为如果用他的话浏览器在加载时候会去把每一个标签都给加载一遍会非常麻烦非常耗内存速度就会慢下来

后代选择器 ul li{}:表示的是仅仅对ul的后代li施加效果,li可以是儿子也可以是孙子。ul和li中间用空格隔开

如果只想对儿子施加效果不想对所有后代都施加效果则可以用 例如 div>p表示的是只对div的儿子p有用

并集选择器 div,p{}:用,隔开表示div和p都用到了一样的表示相当于div{xxxx},p{xxxx}.就类似并集的那个意思。并集选择器的话不一定用的是标签,也可以是选择器和选择器。反正只要是合法的就行

**交集选择器 **div.box{}:表示的是div同时类是box才成立,就类似于类下面的方法的那个意思

伪类选择器(不同状态下元素的样式,一般针对超链接)

love hate

a:link{
    点击链接前
}
a:hover{
    鼠标碰到链接时表示的样式
}
a:visited{
    访问后样式
}
a:active{
    激活效果(按住的效果)
}

小tip li{$}表示的是生成默认的从1开始的顺序数据

div.box+tab表示的就是div中class是box

常用属性

字体

color:

+单词

+16进制#XXXXXX:一共是六位前两个表示的红色中间的是绿色最后面是蓝色,16*16-1=255,其实和RGB是一样的,RGB更方便,如果某个颜色两个值是一样的则可以省略成一个X

+RGBA模式A表示的透明度 rgb(0-255,0-255,0-255,0-1(小数可以写成.3这样的表示))A可写可不写

相同的属性后面会把前面覆盖

小tips :fscapture体积小可以用于取色,量取还有切图等

font-size:

设置字号

X px:多少个像素,如果不写则有个默认的在盒子模型下可以看得到,谷歌的是16px ,有的浏览器是14px

还有种单位是pt那个是印刷用的一般换算比例是3pt=4px,em=12pt=16px

如果font-size:2em;他参照的是父亲字号的两倍,如果父亲字号没有则为默认字号的两倍

font-weight:

字号加粗

100-700 400normal(可以写单词可以写数字)700bold

font-style:

调整字的外观

normal:正常

italic:变成一个斜体

oblique:外观变倾斜

font-family:

字体

font-family:“微软雅黑”,“宋体”;

因为不是所有的字体都有所以我们一般把保险的放在后面写多种字体以防没有的用去使用默认

font-variant

font-variant:small-caps;

把小写转成大写,并且大小没什么变化,这就很离谱

字体的符合属性(简写)

行高可以不写,但是写的话就是size/行高的格式。字号字体必写

font: size/行高 字体

文本属性

text-align:

设置文本水平对齐方式

center:居中对齐

right:右对齐

left:左对齐

justify:两端对齐

小tips:overflow:hidden;除了可以如上文所说做到清楚浮动,还可以做到隐藏超过设定好的边框里的文字

line-height:

设置单行文本垂直居中,多行文本做不到

设置成和height一样的时候可以做到垂直居中

text-transform:

转换大小写

uppercase:全部转成大写

lowercase:全部小写

capitalize:每个单词首字母大写,用空格作为一个单词的标识

text-decoration:

加修饰线的

none:去掉下划线

underline:加下划线

line-through:删除线

overline:上划线

text-indent:

缩进

缩进的单位有很多

em表示当前字号的两倍,也就是缩进两个字大小。比如一个字如果是20px,那么2em就是40px

这个还有一个用处:

overflow:hidden;

text-indent:-9999px;

就是先往左死里缩进,然后用hidden去隐藏。就可以达到搞掉一些不需要被看到的文字,比如超链接嵌套的文字,但是这种文字的作用是个SEO做搜索引擎的。说明这个是各个网站可以被收录。

overflow属性

letter-spacing:

文字和文字之间的距离

如果是单词的话,每一个字符都会被当成一个独立的个体来看

word-spacing:

单词与单词之间的间距,他以空格为标识

关于各种对齐的相关文档

补充一个属性

vertical-align:

垂直居中

元素(标签)显示模式属性

元素分类:

+块状/块级(可以设置宽高,独占一行,不设置宽度的时候默认宽度是父亲的100%)

div、p、h1~h6、ul、li等

+行内/内联元素(设置宽高无效,默认宽度由内容撑开,可以与其他非块级元素并排)

span、a、em、b、i、strong等

+行内块(具备行内元素和块级元素的特点,能设置宽高,并且能和其他非块级元素并排)

img、input等

通过display可以改变元素的显示模式

转成块级元素的时候要注意宽高

宽如果没设定会默认时父亲的100%

但是高不会继承

display:

+block:块状元素

+inline:行内元素

+inline-block:行内块元素

+none:元素消失(就是真的消失掉了耶)

列表属性

html中list-style-type与list-style的区别

list-style:(这是一个复合属性)

list-style的默认值为:disc outside none.

list-style-position:

设置列表项标记的位置

+outside

+inside

默认为outside

描述
inside列表项标记在文本以内
outside列表项标记在文本左侧
inherit继承父元素的值
outside示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NDDINFIh-1624481080688)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210623170556715.png)]

inside示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDNXcK2q-1624481080689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210623170614485.png)]

list-style-image

利用图像替换列表项的标记

list-style-type:

列表项标记的类型

+none:把列表前面的小圆点去掉

+circle:小圆点变成空心圆

+square:小圆点变成实心正方体

+disc:小圆点变成实心圆

left

描述
none无标记
circle空心圆
square实心方块
decimal数字,1,2,3…
decimal-leading-zero01, 02, 03…
lower-romani, ii, iii, iv, v…
upper-romanI, II, III, IV, V…
lower-alpha/lower-latina,b,c,d,e…
upper-alpha/upper-latinA,B,C,D,E…
cjk-ideographic一、二、三…

列表属性的补充

背景属性补充

浮动(将来可能会被淘汰的技术)

用div不使用浮动的时候要做成块状元素和块状元素并排的时候,通过改成行内块来是实现

但是在左块和右块;上块以及下块之间会碰见一个个白色的空隙这个是由于div会换行变成行内块时会把换行变成一个空格导致的

解决方案

+左块和右块 两个div连着写(但是可读性差,不推荐使用)

+上块和下块用垂直居中那种方式middle解决

+浮动

float:

主要用于网页布局的

实现有宽高的元素的并排

+left

+right

+none

特点:

浮动后元素会脱离标准流

当子元素全部浮动后,是无法撑开父元素的,所以如果一个div包括了left和right的话,左右全部浮动后会发现这个div的宽高分别是body的100%宽以及0px的高

浮动的元素也是有高度的如果没有定义的话,是默认被子元素撑开

解决方案

+给左右的父亲div加高度(但是这个不是一个很好的方式)

+清除浮动

浮动清除(以下方式均可)

+overflow:hidden;(这是一个清除浮动的偏方;表示的是多出来的内容隐藏)

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

+使用带clear属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" /><hr class="clear" />来进行清理。

优点:简单,代码少,浏览器兼容性好。

缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

+什么都不做,给浮动元素后面的元素添加clear属性

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.content{
  clear:both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

+给浮动的元素的容器添加浮动(不推荐)

+使用CSS的:after伪元素

结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

总结

通过上面的例子,我们不难发现清除浮动的方法可以分成两类:

一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素,关于这一点。

overflow:hidden为什么能够清除浮动

overflow:hidden 的意思是超出的部分要裁切隐藏掉
那么如果 float 的元素不占普通流位置
普通流的包含块要根据内容高度裁切隐藏
如果高度是默认值auto (这时候算的是真实高度,由于其触发了BFC,需要包含子元素,所以高度不是0,而是子元素高度。)
那么不计算其内浮动元素高度就裁切
就有可能会裁掉float
这是反布局常识的

所以如果没有明确设定容器高情况下
它要计算内容全部高度才能确定在什么位置hidden
浮动的高度就要被计算进去
顺带达成了清理浮动的目标

总之,是先计算真实高度,再去隐藏。如果是先直接隐藏了,再去计算高度也就没有意义了。

盒子模型

每一个元素都可以看成一个盒子

盒子相关属性

+width:内容区域的宽

+height:内容区域的高

+padding:内边距(指的是边框到内容区域的距离)

​ +顺序是顺时针上、右、下、左(4)

​ padding:20px;四个方向都是20px

​ +上下相同或者左右相同的时候,也可以写成上下、左右(2)

​ padding:20px,30px;上下20px,左右30px

​ +找对立面,上、左右、下(3)

​ padding:10px,20px,30px;上10px、左右20px、下30px

层叠性依旧有用,写两遍的话下面的代码会把上面的覆盖掉

经过实验可以证明行内元素左右padding生效,上下不生效

+margin:外边距(盒子和其他盒子的间距)

我们一般会把内外边距都设为0,因为浏览器会给盒子设置默认的内外边距,这样会对我们的布局造成影响,所以一般情况下我们需要对其进行重置

对一个有宽度的块级元素margin:0 auto;可以让盒子水平居中

+顺序是顺时针上、右、下、左(4)

​ margin:20px;四个方向都是20px

​ +上下相同或者左右相同的时候,也可以写成上下、左右(2)

​ margin:20px,30px;上下20px,左右30px

​ +找对立面,上、左右、下(3)

​ margin:10px,20px,30px;上10px、左右20px、下30px

层叠性依旧有用,写两遍的话下面的代码会把上面的覆盖掉

+border(按顺序设置border-width、border-style、border-color)

​ -border-width:规定边框的宽度

​ -border-style:规定边框的样式

​ -border-color:规定边框的颜色

p
  {
  border:5px solid red;
  }
如果不想这样设置的话也可以做特定方向的设置
solid是实线的意思
dashed是虚线的意思

border补充

网站底部的footer的底线或者间隔符都可以通过设定单独的边框某个边来实现

盒子塌陷/margin塌陷

发生场景:

  • 两个div(兄弟),上兄弟的margin-botton和下兄弟的margin-top会发生塌陷

    结果:以大的为准,小的被吞噬。不是简单的叠加

    解决方案
    +最简单的方法就是只设置一个方向

    margin的适用情况就是兄弟塌陷,处理并列关系的时候

  • 父子塌陷

    结果:儿子的margin-top传递给了父亲,最终的margin-top是以父子中较大的那个值为准。不是简单的叠加

    解决方案

    +在父亲中设置padding-top,但是盒子会被撑大(原理就是父盒子和子盒子之间其实是容器的关系,padding的意义指的是边框到内容区域的距离,子盒子就是内容。在未被指定宽高的情况下父亲的宽高是被儿子撑开的。在设定好了宽高的情况下 ,如果用的是padding的话父盒子依旧会被撑大,所以要用padding的时候要注意一下)

    padding的适用情况就是父子塌陷盒子与内容(子盒子)关系的时候

盒子塌陷问题补充(1)

盒子塌陷问题补充(2)

背景

background

属性意义
background-colorbackground-color 属性定义了元素的背景颜色.
background-image属性描述了元素的背景图像.默认情况下 background-image 属性会在页面的水平或者垂直方向平铺,以覆盖整个元素实体.
background-repeat默认背景图会被平铺
background-attachment决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动,可简单理解为定义背景图片随滚动轴的移动方式
background-position设置定位

当使用简写属性时,属性值的顺序为::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

综合属性不一定需要全部被用上

background: red no-repeat url(jiazhuang.png) 40px 50px;

url里面可以没有单引号,规范的话最好是要有单引号

background-color

CSS中,颜色值通常以以下方式定义:

    十六进制 - 如:"#ff0000"
    RGB - 如:"rgb(255,0,0)"
    颜色名称 - 如:"red"

以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

background-image

body {background-image:url('paper.gif');} 


background-repeat

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
} 

背景图像- 设置定位与不平铺
让背景图像不影响文本的排版

如果你不想让图像平铺,你可以使用 background-repeat 属性:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
} 

background-attachment

  • ```html
    scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。

    fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了body上。

    local:背景图相对于元素内容固定,

    inhert:继承,没什么说的。

    该属性可以应用于任何元素。

    一、scroll【背景图滚动】
    设置background-attachment:scroll,背景图是相对于元素自身固定,内容动时背景图也动。附加到元素的border。
    Note:
    对于scroll,一般情况背景随内容滚动,但是有一种情况例外。
    对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。

    下拉看效果:

    这里我要强调一点我的看法:

    给任何元素的背景图设置background-attachment: fixed;效果都是一样的,都是相对于视口,因为一个网页只有一个视口,该背景和元素已经没关系了,要说有关大概也只是元素不可见则背景图不可见。

    而这个视口是什么呢?这里推荐一篇文章《像素与视口》

    四、多背景图【background-attachment】
    也可以为多个背景图设置background-attachment
    body {
    background-image: url(“img1.png”), url(“img2.png”);
    background-attachment: scroll, fixed;
    }

    
    ​	[像素与视口1](https://blog.csdn.net/Amnesiac666/article/details/112364121)
    
    ​    [像素与视口2](https://bbs.huaweicloud.com/blogs/209372)
    
    ​	[a table of two viewports](https://www.quirksmode.org/mobile/viewports.html)
    
    ​	[文章引用,转载自](https://www.cnblogs.com/starof/p/4511367.html)
    
    

background-position(精灵图的原理)

以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
} 
表示水平居右、垂直居上
center、top、left、botton
如果只写一个center表示全部居中
如果只写left表示另外一个默认居中,写top也是一样的另外一个默认居中

还可以用像素表示
background-position:100px;
background-position:-100px,-100px;
参照点是左上角原点,如果是负值则会被裁掉并且隐藏

也可以用百分比来表示
background-position:50%;
参照左上角为原点

background-size

背景图大小
background-size:100px,100px;

背景图和背景色的权重

背景图更大,优先展示

如果背景图没有展示才显示背景色

文本溢出隐藏问题(ellipsis)

场景描述:一般我们在网上看新闻的时候会有只让你看一部份然后就是省略号,剩下的要看的话需要点开剩余部分

1、css

text-overflow语法:
text-overflow : clip | ellipsis

text-overflow参数值和解释:
clip :  不显示省略标记(…),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(…)

单行文本溢出隐藏

white-space:nowrap;强制所有文字在一行

overflow-hidden;多出的文字裁剪并隐藏

text-overflow:ellipsis;溢出的文本以什么方式显示,ellipsis表示的是省略号

多行文本溢出隐藏

我想在第三行或者第四行的位置打省略号

display:-webkit-box;转成弹性盒

-webkit-box-orient:vertical;(浏览器内核需要时webkit的浏览器)这个是设置垂直排列的,垂直对齐

-webkit-line-clamp:3; 可以自主设定显示多少行剩下的就是省略号以及多出来的文字

overflow:hidden;多余文字隐藏

高度一般可以不设置,靠内容撑开

这里有兼容性的问题

带-webkit前缀的只有特定浏览器认识

单行
display: block;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行
直接用css属性设置(只有-webkit内核才有作用)
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
移动端浏览器绝大部分是WebKit内核的,所以该方法适用于移动端;
-webkit-line-clamp用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
display: -webkit-box将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。
以下作为溢出显示省略号,line-clamp 表示显示多少行的数据,在数据最后显示…


.ellipsis1{
display:block;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap
}
.ellipsis2{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
text-overflow:ellipsis;
overflow:hidden
}
.ellipsis3{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
text-overflow:ellipsis;
overflow:hidden
}

插件:
Clamp.jt
jQuery.dotdotdot

文本溢出隐藏补充文章引用,转载于

定位

相对定位

绝对定位

固定定位

相对定位

绝对定位

固定定位

vertical-alignline-height老基友了,掏出你的枪我们来击剑吧

vertical-align补充–张鑫旭大佬

深入理解css中vertical-align属性

vertical-align–MDN文档

vertical-align到底怎么用

导航栏实战之如何实现鼠标覆盖上去的时候中英文菜单的切换

.nav li a span{
    display:none;
}
.nav li a:hover{
    backgound-color:red;
    color:#fff;
}
.nav li a:hover b{
    display:none;
}
.nav li a:hover span {
    display:inline;
}
这里span中放置英文菜单,b里面是中文菜单
两者是并列的关系
当正常的时候span是消失的
当覆盖上去的时候b是消失的
当覆盖上去的时候span显示的是从none到inline的转变所以span中的英文可以展现 






本文链接http://www.taodudu.cc/news/show-2466118.html