HTML/CSS 基础和面试题

lieke
314 阅读9分钟

基础知识

行内元素和块级元素

meta标签

  • 是HTML结构 HEAD区的一个辅助性标签
  • META标签描述一个HTML网页文档的属性，作者 日期 网页描述 关键字等

性质？

行内元素和其他元素都在一行之上，高度，行高，外边距/内边距不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素， 块级元素总是在新行上开始，高度行高外边距/内边距 都可以控制，可容纳内敛元素和其他元素。 inline-block：和其他元素都在一行之上，高宽行高 顶 底边距都可以设置

有哪些？

  • 块级元素：<div>、 <p>、<h1>、<form>、<ul> <li>
  • inline elem：<span>、<a>、<label>、 <strong> <em>
  • inline-block: <img>、<input>

img算什么，span算什么 a算什么

img是行元素，span行内 a是行内

怎么把行内元素转换为块级元素 反过来呢？

css diplay:block display:inline display:inline-block

将多个元素设置为一行？ 清除浮动有几种方式

css float: left/right/initial

清楚浮动

  • 添加新的元素，应用clear:both 可以使得p元素与其他浮动元素不兼容，且优先级不受位置的影响
  • 父级div定义 overflow：hidden， overflow只在块级元素有明确高度的情况之下，有几种设置 scroll左右都可以设置，hidden超出的部分不显示 auto只有右侧有scrollbar，visible显示。 overflow-x overflow-y可以针对左右进行精确设定

盒模型

标准模式盒子布局

盒子总宽度/高度 = width/height + padding + border + margin 怪异模式下：width/height + margin

content-box border-box

box-sizing:content-box 标准模式 border-box 怪异模式

href src的区别？alt属性

href（Hypertext Reference)指定网络资源的位置，超文本引用，从而在当前元素或者当前文档和由当前属性定义的需要的锚点活资源之间定义一个链接或者关系，在link和a等元素上使用 src 属性仅仅嵌入当前资源到当前文档元素定义的位置，是引入，在img，script iframe等元素上使用。

href用于替代这个元素，而href用于建立这个当前元素和外部资源的联系。加载不会阻塞页面渲染 src用于引入js/图片 href则是外部网站和css。加载会阻塞页面渲染，这就是为什么js引入要放到body的最后做

alt 用于网页中图片无法正常显示的时候给用户提供文字说明使其了解图像信息

nth-of-type nth-child

<ul>
<p>111</p>
<span></span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

li:nth-of-type(2):每一组的第二个 li:nth-child(2)：表示既是li元素又是在父元素下的第二个元素（找不到）。 建议一般使用nth-of-type，不容易出问题。

冒号

单冒号（：）用于CSS3伪类，双冒号用于CSS3伪元素，对于CSS2之前已经有的伪元素，都一样。

如何引入CSS？

内联 inline

<div style="color:red"></div>

嵌入书 embedded

<style type='text/css'
span{
    color:red;
}
</style>

外部 external

<link href='path.css' rel='stylesheet' type='text/css' />

优先级？

inline > embedded > external 就近原则，embedded external 受就近原则影响

CSS选择器

标签选择器，ID选择器，类选择器

div{} #id {} .class {}

id只能用一次 但是class可以用好多次。 同一个元素只能有一个id选择器，但是class可以有很多个

子选择器 ，后代选择器， 分组选择器

建立在上面3个基础选择器之上，可以用#id>li选择指定标签的第一代子元素。 注意是第一代子元素，那么怎样选取不受限制的后代选择器呢 使用后代选择器即可，后代选择器使用空格实现

div p {
}

所有div标签下面的p标签里面的元素都会被选择。

使用空格是后代选择器，如果我有多个标签想一同设置，怎么办？使用分组选择器，使用逗号隔开即可

通用选择器

* {color:red} html所有标签元素全部设置属性

伪类选择器

什么是伪类选择器？允许给html不存在（或者说现在不存在，表示一种状态）设置字体颜色。比如一个标签鼠标滑过的状态 现在兼容最好还是a:hover 表示鼠标划过的状态

a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */
a:first-of-type {color:#0000FF;} /* 已选中的链接 */
a:first-child {color:#0000FF;} /* 已选中的链接 */

CSS继承

某些样式是允许继承的，color，font相关 list相关 line-height text-align可以继承， border不可以 在开头使用 all:revert可以控制所有属性可继承

优先级权重

  • 标签 1
  • 类选择器 10
  • id选择器 100
  • 继承 0.1
  • ！important 最高 MAX
  • 同级别 后写的覆盖

inherit

对齐

text-align:center/left/right

CSS 行高,缩进,下划线,删除线,斜体粗体

line-height:2em text-indent:2em text-decoration:underline，line-through font-style: italic font-weight:bold

CSS 三模型

FLOW

默认情况下的模型，

  • 块状元素以宽度100%的设定自上而下顺序延伸
  • 内联元素在所处的包含元素内从左到右水平分布显示

LAYER

在层模型中，可以使用三种相对定位，绝对定位，相对定位，固定定位。可以将每个元素视为一个图层，精确操作。 由于是相当于图层操作，重叠的时候可能不会发生覆盖，要自己设定

参照定位的操作，relative和absolute组合使用。参照定位的元素必须是相对定位元素的前辈元素，即又是父辈元素又是position：relative。需要定位的元素使用Position: absolute，定位可以超出到超过父辈元素的范围

CSS position

这个属性相当于使用层布局模型

  • static(default) 在文档流模型中按照渲染顺序的位置
  • absolute 这个相对位置是相对该元素的第一个非static的祖先元素的位置，如果没用就是相对于浏览器窗口固定。默认情况下是相对浏览器body
  • fixed 相对浏览器窗口固定
  • relative 相对static的位置
  • sticky 根据scrollbar的相对位置
  • initial/inherit
隐式改变display类型
  • position：absolute
  • float 这两个css标签可以将标签自动改变为块状元素，可以设定宽高了

FLOAT

设置元素为浮动模型可以让块状元素更灵活，比如让两个块状元素水平分布， float可以设置的属性只有left，right，inital，inherit

参数的简写

border margin padding

top right down left

color

每两位相同缩写

font

font的各个属性有自己的css，但是可以使用css一个搞定 font: style, variant weight size/line-height family 简写需要指定font-size font-family

行间距

line-height-font-size的差

px/em/rem

图片和文字在同一行显示?

1 在css中给div添加上“vertical-align:middle”属性。 2 分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行。float 3 把图片设置为背景图片。

禁止事件冒泡event.stopPropagation()

禁止默认事件event.preventDefault()

清除浮动

1、父级div定义 height 2、结尾处加空div标签 clear:both 3、父级div定义 伪类:after 和 zoom 4、父级div定义 overflow:hidden 5、父级div定义 overflow:auto 6、父级div 也一起浮动 7、父级div定义 display:table

CSS3的改变

HTML的语义化

H5新特性

增加了图像，位置，存储，多任务等功能 音频：header,nav,footer,aside,article,section 视频：audio，video 画布：canvas 离线存储：localStorage，sessionStorage，

移除了：纯表现的元素：basefont，big，center，font，s，strike，tt，u 可用性产生负面的元素：

如何区分：!DOCTYPE html是h5的最容易最简单的识别方法

让行内元素水平居中

text-align:center 这里的行内元素包括了div等块状元素的文本，不能直接在div上设置，而是要通过class或者id来设置。

如何让一个div 上下左右居中

思考方式，上下左右居中说明相对浏览器窗口上下左右居中，div而已没有其他要求说明不跟随浏览器滑动，text-align只能对齐居中，得使用LAYER模型，使用position:absolute。但是距离怎么调整？

块状定宽

div是一个块状元素，块状元素又分为定宽和非定宽，定宽的意思要显式设置width属性，在高度上又分为定高和非定高，是同一个意思。凡是宽度或者高度固定的块状元素，可以通过margin：auto 对应方向上的auto来设定居中

块状不定宽

  • 加入table标签 margin:auto 因为table可以视作定宽块
  • display：inline + text-align:center
  • position:relative left:50%

块状定高单行

  • ight与line-height高度一致即可，弊端是文字长度可能超过块的大小
  • margin：auto

块状定高多行

  • table标签 + vertical-align（对inline-block类型的子元素有用）
  • display:table-cell

左边定宽 右边自适应

以aside和secion标签为例，我们可以采取多种办法。

左浮动右宽度拉满

aside {
    float:left;
}
section {
    width:100%;
}

弹性盒子

body {
    display:flex;
}
section {
    flex:1;
}

左右浮动，右计算

aside {
    float:left;
    width:200px;
}
section {
    float:left;
    width:calc(100vw - 200px)  ;
}

vw: viewport width vh: viewport height 1vw or 1vh 就是 当前viewport的 1%。十分适合自适应场景使用

负margin

avatar
文章
阅读
粉丝