html和css面试题

HTML和CSS的面试题(2) 阅读详情

块级元素:

1. 独占一行(一行只能显示一个)

2. 宽度默认是父元素的宽度,高度默认由内容撑开

3. 可以设置宽高

代表的元素:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

行内元素:

1. 一行可以显示多个

2. 宽度和高度默认由内容撑开

3. 不可以设置宽高

代表标签:a、span 、b、u、i、s、strong、ins、em、del……

行内块元素:

1. 一行可以显示多个

2. 可以设置宽高

代表标签:input、textarea、button、select……

特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline

css优先级

 

css盒子模型

 

css定位

 

 浮动与清楚浮动(解决塌陷问题)

float:left  表示就是左浮动,就是在父元素的上一层

浮动产生的问题:

父元素的高度塌陷,还会对后续元素也造成塌陷问题:

解决塌陷问题方法:

1.给父元素添加高度属性,只有解决父级同级元素塌陷,无法解决子集元素塌陷,这时可以使用第二种方式

2.给受影响的元素添加cleat:both 意识是无论是左浮动还是右浮动都可以清楚。

3.在父元素无法设置高度情况下,可以使overflow:hidden;和clear:both 同时在父元素中使用就解决塌陷,但是如果子集元素还存在塌陷问题,就在塌陷的元素上加clear:block就行。

 绝对定位与相对定位还有固定定位

position:absolute;绝对定位(脱离文档流)

position:relative;相对定位(不脱离文档流)

position:fixed;      固定定位,不会随着页面的滚动而滚动(脱离文档流)

z-indax:50    数值谁的数值大谁就可以覆盖调比他小的值。

动画效果

动画是使元素从一个变成另一个效果的过程。

0%表示动画开始,100%表示动画结束,或者使用关键字from和to

px,em,rem,vw,vh的区 

怎么理解语义化?

div水平垂直居中?

        父div设置:display: flex; 子组件: margin: auto;

一个div水平垂直居中

        绝对定位方法:     

.box {
  postion: absolute;
  top: 50%;
  left:50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
}
<body>
<div class="box"><div>
</body>

flex方法:

body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
  width: 50px;
  height: 50px;
}

<body>
<div class="box"><div>
</body>

 绝对定位方法:

.z {
			width: 450px;
			height: 300px;
			background-color: rgb(153, 63, 63);
			/* 圆角效果 */
			border-radius: 30px;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
<div class="z"></div>

        

padding与margin有什么区别?

        padding作用域自身,而margin作用域外部

VW与百分比区别?

        百分比有继承关系,VW只和设备分辨率有关系。

如何让Google支持小字体?

        考查的是支持比12px更小的字体

<style>
  p {
    font-size: 12px;
  }

  .font {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }
</style>

<body>
  <p class="normal">我是12px的文字</p>
  <p class="font">我是比12px更小的文字</p>

</body>

2021面试题——css和html面试题 css和HTML面试题 1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE:trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用GoogleChrome的Blink内核 Chrome:Blink(基于webkit,Google与OperaSoftware共同开发) 2、行内元素、块元素和行内块元素都有什么?区别是什么 行内元素:span,em,a,label,textarea,b,select 特点: ( 阅读详情

相关推荐

HTML和CSS面试题

HTML 和 CSS 1、浏览器内核: IE: trident 内核 Firefox:gecko 内核 Safari: webkit 内核 Opera:以前是 presto 内核,Opera 现已改用 Google Chrome 的 Blink 内核 Chrome:Blink(基于 webkit,Google 与 Opera Software 共同开发) 2、什么是 Doctype? 严格模式与混杂模式的区别? 声明位于文档中的最前面的位置,处于标签之前。 告知浏览器文档使用

做技术,坚持才是最重要的,一时的热情只是暂时的进步 315

前端 html,css 经典面试题 16道 (20220322)

1.html5有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?HTML5是构建web内容的一种语言描述方式,在08年正式发布,12年已形成了稳定的版本。 H5新特性有: 语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket 移除了: 1、显现层元素:basefont 、big、center、font、s、strike、tt、u 2、性能较差元素:fr...

weixin_59519449的博客 4260

HTML和CSS常见面试题

一、HTML和CSS 21 0.请列举出清除浮动的几种方式(最少三种) ......................................................................................1 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?..................................1 2. 每

手掌日月摘星辰 3287

第一章 面试题基础篇(HTML+CSS)

CSS的盒子模型有哪些:标准盒子模型、IE盒子模型CSS的盒子模型区别:标准盒子模型:margin、border、padding、contentIE盒子模型 :margin、content( border + padding + content )通过CSS如何转换盒子模型:/*标准盒子模型*//*IE盒子模型*/reset.css 是一个css文件,用来重置css样式的。normalize.css 为了增强跨浏览器渲染的一致性,一个CSS 重置样式库。

欢迎来到我的博客! 2324

html及css常见的面试题

常见的HTMLcss面试题

300道HTML、CSS习题及面试题(含答案)

最全面的300道HTML、CSS习题及面试题(含答案),希望对你用帮助

HTML+CSS面试题整理(持续更新)

• 行内元素在同一行显示,不可以设置宽高,宽高由内容撑开,padding、margin 左右显示准确,上下显示不准确,margin:0 auto,不生效,可以给内联元素添加一个外层的盒子形成一个大的区域,给该盒子设置 text-align:center 的居中属性,添加浮动可以解决内联元素之间的间歇,也能将内联元素的元素类型转换为块元素,例如span b strong i em a u del img。会失效,内联元素设置定位转换成块元素。

m0_69250830的博客 1039

HTML+CSS习题及面试题.pdf

124道HTML+CSS习题及面试题,前端、全栈开发面试必备;自建网站基础知识必备。来自2011腾讯前端面试稿。

HTML与CSS面试题

前端领域,html和css方面的面试题汇总

qq_45259815的博客 681

plc secs半导体通讯协议 PLC 与MES的SECS/GEM通讯方案

符合SEMI E4, E5, E30, E37 的 SECS/GEM通讯方案 专业稳定的产品,持续运行5年都不出错 遵循 SEMI 人机交互设计,提供触摸屏支持让你触手可及。 毫米级的响应,单个messge在5ms以内 MES与PLC之间达到实时性,如采集实时性的数据 每秒支持100条Message以上 快速搭建PLC与MES之间的SECS/GEM桥梁,只需简单配置数据 SECS/GEM介绍 遵循 SEMI 人机交互设计,提供触摸屏支持让你触手可及。 增删改上报数据配置简单,并且一目了然 大量的数据处理.

SECS/GEM 6362

win x64下安装oracle 12c出现[INS-30131]报错的解决方案

问题:  win x64下安装oracle 12c出现[INS-30131]报错的解决方案 安装oracle11g碰到“无法访问临时位置”的问题,详细信息如下: INS-30131] 执行安装程序验证所需的初始设置失败。 原因 - 无法访问临时位置。   操作 - 请确保当前用户具有访问临时位置所需的权限。   附加信息:  - 所有节点上的框架设置检查都失败  

一条道走到黑的GISer 1348

HTML5和CSS3常见面试题

这篇博客概述了HTML5与CSS3的关键特性,包括HTML5中的语义化标签、增强的表单功能、多媒体支持、绘图与动画能力,以及CSS3提供的布局方案如Flexbox与Grid,还有媒体查询、自定义字体、透明度等功能。同时,文章解释了rem与em作为长度单位的不同,并展示了实现自适应布局的多种方法,以及如何解决清除浮动的问题。

小田是个程序员的博客欢迎你的到来呀~ 1430

基于HPM5E00的EtherCAT从站开发实战:从硬件解析到软件调试

实时工业以太网通信是工业自动化与运动控制领域的核心技术,它通过硬件与协议栈的协同,实现了微秒级的高确定性数据交换。其技术价值在于为多轴同步、机器人控制等复杂场景提供了高实时性、高同步精度的通信基础。在应用场景上,广泛服务于数控机床、包装机械、半导体设备等高端制造领域。本文聚焦于EtherCAT从站开发,深入解析了基于先楫HPM5E00高性能MCU与专用从站控制器(ESC)的硬件架构设计,并详细阐述了开源协议栈SOES的移植、对象字典配置以及过程数据(PDO)映射等核心软件实践,为开发者快速构建稳定可靠的实时

weixin_30915951的博客 501

HTML和CSS的面试题

css的盒子模型分为:W3C标准盒子模型、IE盒子模型W3C标准盒子模型包括:margin、border、padding、contentIE盒子模型包括:margin、content(border、padding、content)盒子模型转行:使用box-sizing//标准盒子模型//IE盒子模型。

qq_43537814的博客 904

使用ESP32设计嵌入式蓝牙游戏手柄

通过使用ESP32开发板和相关的库,我们可以设计和实现嵌入式蓝牙游戏手柄。连接到该设备后,您可以使用控制器模块的按钮和摇杆等元件来模拟游戏手柄的输入。根据您使用的具体模块和引脚分配,连接按钮和摇杆等控制元件到ESP32的GPIO引脚。ESP32是一款功能强大的微控制器,集成了Wi-Fi和蓝牙功能,非常适合用于开发物联网和嵌入式应用。请注意,本文仅提供了一个基于ESP32的嵌入式蓝牙游戏手柄设计示例,具体实现可能因硬件和需求而有所不同。确保开发板正确连接到计算机,并选择正确的开发板和端口。

CodeMaven的博客 1643

【Pix4d精品教程】Pix4d空三后处理:点云分类与过滤、DSM精编生成DEM、生成等高线案例详解

本文详细介绍了利用Pix4D软件进行无人机摄影测量后处理的关键步骤,主要包括点云分类与分配、DEM精编生成和等高线绘制三个核心环节。首先通过点云分类区分地面、植被等7种地物类型,然后通过点云分配将地面点云归并到Ground类别,剔除植被等干扰要素。随后重新运行DSM生成步骤获取精确DEM,最后在附加输出中设置参数生成标准等高线。文中配有详细的操作截图和注意事项,如处理前需备份原始DSM/DOM数据,并解释了DEM与DSM的本质区别。该教程为无人机摄影测量内业处理提供了完整的解决方案。

智慧空间实验室 1万+

html和css的一些问题总结以及面试题 ,点赞加关注持续更新~

外边距重叠就是 margin-collapse。折叠外边距 :在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。解决外边距重叠的问题:开启元素的BFC属性,在元素的前面加一个空的table?标准的 W3C 盒子模型模型 ,css为了更好的布局,将页面中所有的元素形状都统一为矩形。盒模型包括四个方面:内容、内边距、边框、外边距(不计入盒子实际大小)标准模式页面按照HTML,CSS的定义渲染,

小十七的个人分享博客 1375

智能车图像处理0-图像处理整体框架思路

1.总体框架如上所示,具体代码请查看后续文章。2.因为参与竞赛时间是大二,所以在编程中有许多不规范的地方(如变量的命名),大家见谅。3.原创文章,请勿侵权=-=

taiyuezyh的博客 1万+

html与css期末考试试题答案,HTML和CSS面试题及答案.doc

文档介绍:HTML和CSS面试题及答案编程语言——HTML/CSS1、input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。A.T B.F2、根据栅格系统的标准用法,错误的是A.<div class="container"><br><div class="row">B.<div class="row"><br&gt...

weixin_39709262的博客 1569

使用AI预测彩票的架构思路

彩票是随机的数字游戏,不要过度依赖AI,本文仅供娱乐研究

淘淘小窝 9413

7.5华为OD机试真题 新系统 - 省超足球比赛获胜队伍计算 (Java/Py/C/C++/Js/Go)

7.5华为OD机试真题 新系统 - 省超足球比赛获胜队伍计算 (Java/Py/C/C++/Js/Go)

算法大师! 827

前端面试题之Html和CSS_如果面试官问到算是html css问题 代表什么

IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim;关于html和css的总结到这里。有错误的地方还清大家指出来。大家在面试的时候遇到什么问题可以给我留言我们一起解决整理下来!HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

2401_89791770的博客 722

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

HTML和CSS面试题总结

HTML面试题 如何理解HTML语义化? 让人更容易读懂(增加代码的可读性) 让搜索引擎更容易读懂(利于SEO) 默认情况下,哪些HTML标签是块级元素,哪些是内联元素? display: block/table; 有div h1-h5 table ul ol p等 display: inline/inline-block; 有 a b em strong i span img input button等 CSS面试题 布局 ​ 盒模型宽度计算: <!DOCTYPE html> &lt

qq_39208971的博客 291

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

HTML和CSS面试题及答案总结一

对于html的语义化标签的理解,结构化标签的理解,同时写出简洁的html结构,如何进行SEO优化? 答: 对于html的语义化标签,用正确的标签做正确的事情。html语义化,让页面的内容结构化,便于对浏览器和搜索引擎的解析,在没有css样式的情况下,以文档的形式同样易于阅读,符合文档语义的标签。标签本身所代表的语义,每一个标签所带有的语义,根据语义去使用标签,依赖标记确定权重,同时也可以提高SE...

浮生离梦的博客 8975

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

上一篇: 数组扁平化
下一篇: JavaScript基础面试题
Js_WEB
博客等级 码龄9年 115粉丝 12原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值