知识汇总【HTML、CSS篇】

1 篇文章 0 订阅

来自学长笔记

目录

一、z-index的工作原理及适用范围

二、对html5的理解(HTML5新特性)

三、进程与线程的区别

四、盒子水平、垂直居中

五、盒模型

六、display属性值

七、div标签中 中文自动换行,但英文不换行

八、写css需要注意什么

九、解决图片下方几像素空白空隙的三种方法:

十、哪些主流图片格式

十一、布局方式

十二、外边距塌陷

十三、CSS3动画

十四、什么是BFC?

十五、position定位和float的基准问题

十六、less(预处理器)语法

十七、清除浮动

十八、块级元素行内元素区别

十九、如何解决行内(或者行内块)元素之间的空隙:只要解决了换行的问题,也就解决间隙问题。

二十、样式选择器的优先级

二十一、CSS选择器

二十二、css三大特性:层叠、继承、优先级。权重是优先级的算法,层叠是优先级的表现。

二十三、隐藏元素的方式

二十四、双栏布局(左边固定,右边自适应)

二十五、网页中页面跳转方式

二十六、前端如何进行seo优化

二十七、将line-height设置为纯数字或百分数。

二十八、vw、vh

二十九、CSS3新特性

三十、媒体查询是CSS3新引入的,能让页面使应不同的设备

三十一、响应式布局方案


一、z-index的工作原理及适用范围

  1. z-index属性控制着元素在z轴上的堆叠顺序,数值越大越靠近屏幕。默认情况下,后来元素的z-index的值大。
  2. 适用范围:仅适用于定位元素,即有relative,absolute,fixed属性的position元素。

二、对html5的理解(HTML5新特性)

(1)DOCTYPE声明

(2)新增语义化标签:

article定义文章、

header定义页眉、

footer定义页脚、

nav定义导航、

section文档中的区段、

aside定义侧栏。

(3)input新增type属性:

email(输入为邮件格式)、

tel(电话格式)、

url(url格式)、

search(搜索框)、

range(自由拖动滑块)。

(4)canvas:canvas元素使用JS在HTML网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas是基于位图的图形;SVG是基于矢量的图形,使用XML描述2D图形的语言。

(5)新增多媒体标签:video,audio。

(6)新的HTML5的API:

HTML Geolocation地理位置、

HTML Drag & Drop拖放。

通过window.onLine来检测,用户当前的网络状况,返回一个布尔值。

window.online用户网络连接时被调用

window.offline用户网络断开时被调用。  (?)

HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题。

Navagator:提供有关浏览器的信息
Window:Window对象处于对象层次的最顶层,它提供了处理Navagator窗口的方法和属性
Location:提供了与当前打开的URL一起工作的方法和属性,是一个静态的对象
History:提供了与历史清单有关的信息
Document:包含与文档元素一起工作的对象,它将这些元素封装起来供编程人员使用

(7)Web存储:

本地存储(localStroage):长期存储数据,浏览器关闭后数据不丢失。

会话存储(sessionStroage):数据在浏览器关闭后自动删除。

(8)应用程序缓存(Application Cache):web 应用可进行离线缓存,并可在没网时访问。 (?)

application ----> application cache--->cache.manifest

(9)web worker:允许JavaScript有多个线程,但是子线程完全受主线程的控制,子线程不能操作DOM,只有主线程可操作DOM,所以以主线程为主的单线程执行原理成了JavaScript的核心。web worker可实现单页面多线程,sharedworker可实现多页面多线程,从而实现多标签通信。 (?)

(10)websocket全双工通信,持久连接。 (?)

(11)加入了requestAnimationFrame以及requestIdleCallback解决了定时器实现动画的问题。 (?)

html5十大新特性的总结:
一、html5新特性之用于绘画的canvas元素
二、html5新特性之更加丰富强大的表单
三、html5新特性之用于媒介的video和audio元素
四、html5新特性之html5地理定位
五、html5新特性之html5拖放
六:html5新特性之html5 Web存储
七、html5新特性之用程序缓存html5应
八、html5新特性之html5 Web Workers
九、html5新特性之html5服务器发送事件
十、html5新特性之html5 WebSocket  

三、进程与线程的区别

详细请看:xhttps://blog.csdn.net/qq_44810886/article/details/125467492?spm=1001.2014.3001.5501

进程是操作系统资源分配的基本单位

线程是任务调度和执行的基本单位。

在操作系统中能同时运行多个进程(程序);

而在同一个进程(程序)中有多个线程同时执行。

原先大部分浏览器是一个进程,现在几乎所有浏览器是多个进程。好处,某个页面崩溃或者是未响应,不会影响其他页面。

四、盒子水平、垂直居中

(1)定位

方式一:(一定要知道子盒子具体宽高

父:position: relative

子:position: absolute;

top:50%;

left:50%;

margin-top:-25px;

margin-left:-25px;

方式二:(子盒子一定要有宽高,但是不必知道具体多少

父:position: relative

子:position: absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

方式三:(不需要子盒子有宽高,但是此方法兼容性不好

父:position: relative

子:position: absolute;

top:50%;

left:50%;

transform:translateX(-50%);

transform:translateY(-50%);

transform:translate(-50%, -50%)。

(2)利用伸缩盒的方式:当普通盒子被调整为伸缩盒后,要让子盒子水平垂直居中,就得给父盒子设置为:display:flex;justify-content:center;align-items:center;

(3)利用JS的方式

(4)将显示方式设置为表格

.father{

display: table-cell;//使子元素成为表格单元格

vertical-align: middle;//控制文本垂直居中

text-align: center;//控制文本水平居中

width: 500px;

height: 600px;//必须要有固定宽高

}

.son{

display:inline-block;

}

五、盒模型

css盒子属性box-sizing,控制元素盒模型的解析模式。box-sizing:

  1. content-box(默认W3C标准盒模型):盒子大小=width(content)+padding+border。
  2. padding-box:盒子大小= width(content+padding)+border。
  3. border-box(IE称为传统盒模型,IE8以下称为怪异模式):盒子大小= width(content+padding+border)

六、display属性值

display:list-item,像块类型元素一样显示,并添加样式列表标记。

display:table,块级表格显示。

display:inherit,从父元素继承display属性的值。

七、div标签中 中文自动换行,但英文不换行

word-break:break-all,只对英文起作用,以字母为换行依据。

word-wrap:break-word,只对英文起作用,以单词为换行依据。

white-space:prep-wrap,只对中文起作用,强制换行。

white-space:nowrap,对中英文起作用,强制不换行

设置或检索使用一个省略标记(...)标示对象内文本的溢出:

容器的宽度要固定,white-space:nowrap;overflow:hidden; text-overflow:ellipsis;当对象内文本溢出时显示省略标记(...),(另外text-overflow:clip,不显示省略标记(...),而是简单的裁切 )

八、写css需要注意什么

  1. 样式,从右向左解析。
  2. 选择器解析速度由快到慢依次是ID、class、tag、通配符选择器,但ID选择器不利于语义化。
  3. 后代选择器效率最差。html body ul li a {}
  4. :nth-child(n) 会浪费浏览器资源。

九、解决图片下方几像素空白空隙的三种方法:

  1. Img为display:block。
  2. 定义父容器为font-size:0。
  3. 给img添加vertical-align:middle | top等等。让图片不要和基线对齐。

十、哪些主流图片格式

JPG:压缩率高、文件小、最常用。

PNG:支持无损压缩,色彩损失少,文件稍大。

GIF:支持动画显示,但只支持256色显示。

十一、布局方式

  1. 浮动布局
  2. 定位布局
  3. 流式布局(相对布局):不适合在移动端,因为行高、高度一般都不用百分数,还是会用像素值,移动端设备千差万别,在分辨率高的设备中,元素看着太小,在分辨率低的设备中,元素看着太大。
  4. rem弹性布局(相对布局):适合移动端布局参照的是根元素html的字体大小。不同的移动设备,根元素的字体大小略有不同,需要用js动态计算出来,其中有flexible.js。
  5. flex伸缩盒布局:不能再使用float和vertical-align

以下六个属性给父元素设置:

flex-direction:设置主轴方向;

justify-content:设置主轴上子元素的排列方式;

flex-wrap:设置子元素是否换行;

align-content:设置侧轴上子元素排列方式(多行);

align-item:设置侧轴上子元素排列方式(单行);

flex-flow:复合属性。

以下是给子元素设置:

flex:0(扩展比例) 0(收缩比例) 100px(伸缩基准值flex-basis);当容器宽度大于子元素宽度总和时,会形成剩余空间,子元素按照扩展比例分配空间;当容器宽度小于子元素总宽度时,会形成溢出空间,子元素按照收缩比例减小尺寸避免溢出。

当出现min-width、flex-basis、width同时存在时,优先级min-width>flex-basis>width

  1. 多列布局
  2. 等高布局

(6)grid等新兴布局

十二、外边距塌陷

  1. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时,

如果上面的元素有下外边距margin-bottom,

下面的元素有上外边距margin-top,

则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者

若是一正一负就是相加之和

两负取绝对值较大者。

     2、嵌套块元素垂直外边距的合并

如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并

解决方案:(1)为父元素定义1px的上边框或上内边距。(2)为父元素添加overflow:hidden。

十三、CSS3动画

CSS3出现之前,动画通过JS定时器动态改变元素样式属性来完成,这种方式在性能上存在问题。

(1)动画的循环时间间隔不好确定,设置长了动画显得不够平滑流畅,设置短了浏览器的重绘频率会达到瓶颈,推荐的最佳循环间隔是17ms(大多数电脑的显示器刷新频率是60Hz,1000ms/60)。

(2)定时器第二个时间参数只是指定了多久后将动画任务添加到浏览器的UI线程队列中,如果UI线程处于忙碌状态,那么动画不会立刻执行。为了解决这些问题,H5中加入了requestAnimationFrame以及requestIdleCallback

优点:

(1)requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。

(2)在隐藏或不可见的元素中,requestAnimationFrame 将不会进行重绘或回流,这当然就意味着更少的 CPU、GPU和内存使用量。

(3)requestAnimationFrame 是由浏览器专门为动画提供的 API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

(4)requestAnimationFrame的回调会在每一帧确定执行,属于高优先级任务,而requestIdleCallback的回调则不一定,属于低优先级任务。

CSS3的出现,让动画变得更容易,性能也更好。CSS3中有关于动画的样式属性transform、transition和animation;

(1)transform

transform:rotate(旋转) scale(缩放) skew(扭曲) translate(移动) matrix(矩阵变形)。所有的变形都是基于基点,基点默认为元素的中心点。用法:transform-origin: (x, y),其中x和y的值可以是百分比、rem或者px等,也可用表示位置的单词来表示例如:x可用left、center、right;y可用top、center、bottom。

(2)transition

transition设置元素如何从一种状态平滑过渡到另一种状态,它有四个属性值:transition-property(变换的属性,即大小、位置、扭曲等) transition-duration(变换花费的时间)  transition-timing-function(变换的速率) transition-delay(变换的延时)。

eg:transition:all  0.5s ease(逐渐变慢) 1s;

(3)animation

类似于flash中的逐帧动画,逐帧动画就像电影的播放一样,表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态,整个动画的过程也是由特定的函数控制。这种逐帧动画是由关键帧组成,很多个关键帧连续的播放就组成了动画,在CSS3中是由属性keyframes来完成逐帧动画的。

animation:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-play-state、animation-direction。

.sofa{

    animation: sofa01 1s linear;

}

@keyframes sofa01 {//sofa01为动画名

    from{

        opacity: 1;

    }

    to{

        opacity: 1;

        transform: translate(-80px,700px);

    }

}

十四、什么是BFC?

BFC就是一个css的一个布局概念,是一个独立的区域,是一个环境。

文档流分为:浮动流、定位流、普通的标准流,

其中普通标准流是BFC中的FC(formatting context,格式化上下文)。

常见的FC:BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。

BFC约束规则

  1. BFC内部的Box会在垂直方向上一个接一个地放置。
  2. 垂直方向的距离由margin决定(属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关)。
  3. 每个元素的margin box的左边,与包含块border box的左边界相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此,而position为absolute的元素可以超出他的包含块边界。
  4. BFC的区域不会与BFC外的float元素区域重叠。
  5. 计算BFC的高度时,BFC内的浮动子元素也参与计算。
  6. BFC是页面上的一个隔离的独立容器,不受外界干扰也不干扰外界。

满足下列条件之一就可触发BFC

(1)根元素,即html元素。

(2)float的值不为none的浮动元素。

(3)position为absolute、fixed的定位元素。

(4)display的值为inline-block、伸缩盒的元素(inline-flex、flex)、table-caption(相当于caption元素)、table-cell(相当于td,th元素)。

(5)overflow的值不为visible。

BFC用途

(1)清除浮动:在父元素上设置overflow: hidden样式;

(2)解决外边距合并问题:盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠。

(3)左边固定右边自适应的两栏布局。

十五、position定位和float的基准问题

(1)当父元素设置为absolute、relative定位时,子元素相对于父元素定位基准是父元素的内容区,也即是content+padding区域,不包括border和margin。

例:top设置的元素上外边距到参照物的上内边框的距离。

(2)当父元素没有设置定位的时候,子元素相对于body进行定位。

(3)元素相对定位是以元素自己的左上角为基点进行移动,基准包括子元素的整体 = margin + border + padding + content ,即以margin外边界为基准进行定位。

(4)float不能跨越父元素的padding。

fixed:固定定位,相对于浏览器窗口进行定位。

sticky:生成黏性定位的元素。类似relative和fixed结合体,如果目标区域在屏幕中可见,表现为relative;如果目标区域在屏幕中不可见,表现为fixed。

十六、less(预处理器)语法

less嵌套:子元素直接写到父元素里面。

  1. 内层选择器前若没有&,则被解析为父选择器的后代。
  2. 若遇到交集、伪类选择器(:),则内层选择器需要加上&。

(3)在css语法基础上引入变量、运算、函数等功能。

十七、清除浮动

主要是为了解决父级元素因为子级元素浮动而引起的高度为0的问题。把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。方法:

  1. 额外标签法:在浮动元素末尾添加一个空标签<div style=”clear:both”></div>。

clear属性会让元素增加上外边距,使其在浮动元素的下面。

  1. 给父盒子加上overflow:hidden,触发BFC。缺点:无法显示需要溢出的元素。
  2. after伪元素清除浮动。.clearfix::after {content: ""; display: block; height: 0; clear: both; visibility: hidden; }  .clearfix {*zoom: 1;} IE6、7
  3. 双伪元素(::)清除浮动。

.clearfix::before,.clearfix::after {

  content:"";

  display:table;  /* 这句话可以触发BFC清除浮动*/

}

.clearfix::after {

 clear:both;

}

.clearfix {

  *zoom:1;

}

十八、块级元素行内元素区别

块级

(1)总是从新行开始

(2)高度、宽度、行高、外、内边距都可以控制。

(3)宽度默认是容器的100%。

(4)可以容纳行内元素和其他块级元素。

(5)占一整行。

行内:

(1)高宽无效,有左右内外边距,无上下内外边距

(2)行内元素只能容纳文本和其他行内元素(a特殊)。

(3)一行可显示多个。

行内块:image、td、input

注:只有文字才能组成段落,p里面不能放块级元素。同理,h1,h2,,,h6,dt都是文字类块级标签,也不能放其他块级元素。

十九、如何解决行内(或者行内块)元素之间的空隙:只要解决了换行的问题,也就解决间隙问题。

 (1)

<span>行内元素</span><span>行内元素</span><span>行内元素</span>并排显示。

(2)

<span>行内元素</span

><span>行内元素</span

><span>行内元素</span>

(3)

<span>行内元素</span><span>

行内元素</span><span>

行内元素</span>  

(4)

<span>行内元素

<span>行内元素

<span>行内元素

二十、样式选择器的优先级

*/继承:0,0,0,0;

标签选择器:0,0,0,1;

伪类(:)/类/属性选择器:0,0,1,0;

ID选择器(#):0,1,0,0;

每个行内样式:1,0,0,0;

important:无穷大。

div {

color: hotpink!important;

}

二十一、CSS选择器

基本选择器:

a、通配符选择器*。

b、标签选择器。

c、类选择器。

e、id选择器#myId。

f、属性选择器button[disabled=”true”],input[name]只能匹配包含name属性的input标签,只能与标签选择器搭配。

属性选择器:选取标签带有某些特殊属性的选择器。

/* 获取到拥有该属性的元素 */

div[class^=font] { /*  class^=font表示font开始位置就行了 */

color: pink;

}

div[class$=footer] { /* class$=footer表示footer结束位置就行了 */

color: skyblue;

}

div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */

color: green;

}

(2)关系选择器:

a、后代选择器ul li,用空格隔开

b、子代选择器(ul > li)

c、相邻选择器(h1+p),兄弟选择器(h1 ~ p)

d、交集选择器:div.red,紧挨着,不需要用空格隔开

e、并集选择器:em, i,用逗号隔开。

(3)伪类选择器

a、链接伪类选择器

a:hover(鼠标移动到链接上)被置于a:link(未访问的链接)和a:visited(已访问的链接)之后才有效。

a:active(选定的链接)被置于a:hover之后才有效。

b、结构(位置)伪类选择器(CSS3)

:first-child选取属于其父元素的首个子元素,

:last-child 选取属于其父元素的最后一个子元素,

:nth-child(n) 匹配属于其父元素的第N个子元素,

:nth-last-child(n) :,

first-of-type匹配某父元素下相同类型子元素中的第一个,

:last-of-type

:nth-of-type,n可以是数字、关键词或公式。

c、目标伪类选择器(CSS3):

:target目标伪类选择器 :选择器 可用于选取当前活动的目标元素。

(4)伪元素选择器(CSS3)

E::first-letter文本的第一个单词或字(如中文、日文、韩文等)。

E::first-line 文本第一行;

E::selection 可改变选中文本的样式;

E::before和E::after:添加的内容默认是inline元素,必须设置content属性,表示伪元

素的内容。

伪类用于为已有元素添加对应样式。伪元素用于创建一些不在文档树中的元素,并为其添加样式。

二十二、css三大特性:层叠、继承、优先级。权重是优先级的算法,层叠是优先级的表现

子元素可继承父元素的样式是:text-,font-,line-,以这些字母开头的样式属性都可以继承,以及color属性,其中text-decoration不能被继承。

二十三、隐藏元素的方式

   (1)  display:none;不占据空间,无法点击

(2) visibility:hidden;占据空间,无法点击

(3)opacity:0;占据空间,可以点击。

(4)width\height=0px;overflow: hidden;(隐藏子元素)不占据空间,无法点击

(5) position: absolute; top: -999em;不占据空间,无法点击。 position: relative; top: -999em;占据空间,无法点击。

(6)position:absolute;z-index:-1000;不占据空间,无法点击

(7)transform: scale(0,0);占据空间,无法点击。

(8)transform:translate(-9999px,-9999px); 占据空间,无法点击。

:background:transparent与opacity:0区别:transparent相当于rgba(0,0,0,0),仅仅将元素背景设置为透明,但元素的内容还是显示。opacity:0会把元素内容当成一个整体,当定义为0时,两者都会透明。

:如果父元素定义了opacity,那么子元素也定义一个opacity,那么子元素的效果是两者的乘积。使用rgba设置的透明度,子元素不会继承。

display:none

visibility:hidden

opacity:0

是否占据页面空间

不占据

占据

占据

子元素不设置值,对子元素影响

不显示

不显示

不显示

子元素设置该属性其他值,是否可以继续显示

不可以

可以

不可以

自身绑定的事件是否能继续触发(是否可点击)

不会

不会

是否影响遮挡住的元素的事件触发

不影响

不影响

影响

属性值改变是否产生回流

产生

不产生

不产生

属性值改变是否产生重绘

产生

产生

不一定

该属性是否支持transition

不支持

支持

支持

二十四、双栏布局(左边固定,右边自适应)

法一:将左侧固定的div盒子采用浮动,右侧自适应div盒子设置margin-left。

法二:将左侧固定的div盒子采用绝对定位,右侧自适应div盒子设置margin-left。

法三:table布局,父display:table;左display:table-cell;width:200px;右display:table-cell。

法四:左右盒子双浮动,左width: 200px;右width: calc(100% - 200px);

法五:flex,父display: flex;左flex: 0 0 200px;右flex: 1;

法六:float+BFC,左盒子宽度固定,左浮动;右盒子宽度不固定,设置overflow:hidden。

<div style = “float: left; width:100px;height:100px”></div>

<div style = “overflow:hidden; height:100px”></div>。因为BFC的区域不会与BFC外的float元素区域重叠。

注:overflow: visible(默认) | hidden | scroll | auto

二十五、网页中页面跳转方式

(1)使用a标签,标签跳转。(2)使用window.location.href的形式,编程式导航。

二十六、前端如何进行seo优化

  1. 合理的title、description、keywords。
  2. 语义化的HTML代码,语义化代码让搜索引擎容易理解网页。
  3. 非装饰性图片必须加alt。alt属性是无法正常显示的时候使用。
  4. 友情链接可以快速提高网站权重。
  5. 重要的HTML代码放在前面:搜索引擎从上到下抓取HTML顺序,保证重要的内容一定会被抓取。
  6. 提高网站速度。
  7. 少用iframe:搜索引擎不会抓取iframe中的内容。

二十七、将line-height设置为纯数字或百分数。

行高:两行文字基线之间的最小距离。

行距:上一行底线和下一行顶线之间的距离。

字体大小:font-size,同一行顶线和底线之间的距离。line-height = font-size+行距

P{

font-size: 20px;

line-height: 1.2;

line-height: 120%;

}

数字和百分数都需要与字体大小font-size相乘才能得到真实行高,上面p元素的真实行高是24px。区别在于继承上,如果行高是数字,子元素继承的也是数字;如果行高是百分百,子元素继承的将是父元素计算后的行高。

div{

font-size: 18px;

line-height: 14px;

}

div p{

line-height: 50%;

}

行高参照的是元素自身的字体大小计算的,因为p元素没有字体大小属性,需要从父元素继承,继承过来后是font-size:18px,再乘以50%,得到p元素最后行高,就是9px。

二十八、vw、vh

视口也就是文档内容的可视区域,将视口宽和高均分为100份。

50vw等于将视口宽度分为50%,

50vh等于将视口高度分为50%,只和视口的宽度有关系

百分比%布局有继承关系,相对于父元素。

二十九、CSS3新特性

  1. 完善了选择器,包括属性、关系、伪类和伪元素选择器。能避免添加多余的html元素属性名,例如id、name、class等,还能保持页面整洁。
  2. CSS3新增的阴影、圆角、web字体、渐变能替代以往得用图像才能实现的效果,既能减少HTTP请求数,还能提升页面加载速度。
  3. CSS3对背景不再仅限于颜色、填充方式、定位,现在可以一次性使用多张背景图、控制背景尺寸、裁剪背景图像。
  4. 引入过渡、动画、transform。

    触发过渡的条件:div { transition:all 500ms ease-out}

      1) css伪类触发,:hover,div:hover { transform:rotate(30deg) }

      2) 媒体查询触发@media only screen and (max-width: 600px){

div { transform:rotate(30deg) }

}

     3) js触发 <div id = “transition”></div>

<script>

window.onload = function(){

var div = document.getElementById(“transition”)

div.style.transform = “rotate(30deg)”

}

</script>

    5.  两种全新布局:多列布局、伸缩盒布局。

三十、媒体查询是CSS3新引入的,能让页面使应不同的设备

使用的两种方法:

1、link元素存在于HTML文档中。

<link rel = “stylesheet”  media = “all and (max-width:600px)”  href = “style.css”/>

 2、@media存在于样式表中,给不同尺寸的设备,设置单独、互不影响的css属性。

@media all  and (max-width:600px){   }

480px,800px,1400px,2000px:手机屏幕、平板、小屏幕电脑、普通电脑

三十一、响应式布局方案

a、媒体查询。b、百分比布局。c、rem布局。d、视口单位布局

body标签的两个属性 

body标签的两个属性

1)background:只能写url表示背景图像

2)bgcolor:写背景颜色
Html5不支持,Html4.01已废弃

 什么是 XML? XML 与 HTML 的主要差异

  • XML 指可扩展标记语言(EXtensible Markup Language)
  • XML 是一种标记语言,很类似 HTML
  • XML 的设计宗旨是传输数据,而非显示数据
  • XML 标签没有被预定义。需要自行定义标签。
  • XML 被设计为具有自我描述性。
  • XML 是 W3C 的推荐标准

  • XML 不是 HTML 的替代。
  • XML 和 HTML 为不同的目的而设计:
  • XML 被设计为传输和存储数据,其焦点是数据的内容。
  • HTML 被设计用来显示数据,其焦点是数据的外观。
  • HTML 旨在显示信息,而 XML 旨在传输信息。

浏览器内核:Trident、webkit、Blink、Gecko  

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值