前端考核总结

1,在页面中实现文字滚动的标记是marquee标签

注: 元素已经 过时,请不要再使用。尽管一些浏览器仍然支持它,但它不是必须的。此外,使用这个元素基本上是你可以对你的用户做最糟糕的事情之一,所以请不要这样做。

2.表格中合并列colspan;合并行用rowspan;

3.css优先级:参考属性值的计算过程;

4.css属性哪些有继承性?哪些没有?

有继承性属性:

  • 字体系列属性:font-family,font-weight,font-size,font-style,font-variant:设置字体(英文,数字间隙),当设置英文为大写的时候,首字母比其他字母都大一点;

  • 文本系列:text-indent,text-align,line-height,word-space(字间距,不包括标点符号) ,letter-spacing(字符间距,包括标点符号),text-transform,direction,color

  • 元素可见性:visibility

  • 表格布局:caption-side(caption-side 属性设置表格标题的位置,top 默认值。把表格标题定位在表格之上。
    bottom 把表格标题定位在表格之下。
    inherit 规定应该从父元素继承 caption-side 属性的值。);
    border-collapse(separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
    inherit 规定应该从父元素继承 border-collapse 属性的值。)

  • 列表布局:list-style-type,list-style,list-style-position,list-style-image(list-style-image 属性使用图像来替换列表项的标记)

  • cursor

  • 页面样式属性:page、page-break-inside、windows、orphans

  • 声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

无继承性:

1、display:规定元素应该生成的框的类型

2、文本属性:

vertical-align:垂直文本对齐、text-decoration:规定添加到文本的装饰

text-shadow:文本阴影效果、white-space:空白符的处理、unicode-bidi:设置文本的方向

3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性:content、counter-reset、counter-increment

7、轮廓样式属性:outline-style、outline-width、outline-color、outline

8、页面样式属性:size、page-break-before、page-break-after

9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

所有元素可以继承的属性

1、元素可见性:visibility

2、光标属性:cursor

内联元素可以继承的属性

1、字体系列属性

2、除text

伪类的写作顺序:

link,visited,hover,active

让一段文本中的英文字母大写

text-transform:capitalize(首字母大写)
uppercase(所有单词大写)
lowercase(所有单词小写)

块级标签和行级标签有什么特点

块级标签:所有尺寸都可设;宽高不设,默认为父标签的100%。独占一行。
行级标签:宽高不可设,被内容撑开;内边距,外边距,边框(仅水平有效),不换行。

css创建一个三角形的原理是什么

均分原理

行内元素,块元素,空元素

块级元素:

<address>
联系方式信息。
<article> HTML5
文章内容。
<aside> HTML5
伴随内容。
<audio> HTML5
音频播放。
<blockquote>
块引用。
<canvas> HTML5
绘制图形。
<dd>
定义列表中定义条目描述。
<div>
文档分区。
<dl>
定义列表。
<fieldset>
表单元素分组。
<figcaption> HTML5
图文信息组标题
<figure> HTML5
图文信息组 (参照 <figcaption>)<footer> HTML5
区段尾或页尾。
<form>
表单。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
标题级别 1-6.
<header> HTML5
区段头或页头。
<hgroup> HTML5
标题组。
<hr>
水平分割线。

<noscript>
不支持脚本或禁用脚本时显示的内容。
<ol>
有序列表。
<output> HTML5
表单输出。
<p>
行。
<pre>
预格式化文本。
<section> HTML5
一个页面区段。
<table>
表格。
<tfoot>
表脚注。
<ul>
无序列表。
<video> HTML5
视频。

行内元素:
在这里插入图片描述
空元素:
在这里插入图片描述

div水平居中的办法

  • 定宽,左右margin设置为auto
  • 父标签设置为text-align:center,自己设置为display:inline-block
  • 采用绝对定位,父标签设置为relative,自己设置absolute;left:0 right:0,margin设置为auto
  • 设置为绝对定位,left:50%;margin-lrft:-100px;
 div{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: orchid;
        /* top: 50%; */
        left: 50%;
        /* margin-top: -100px; */
        margin-left: -100px;
        }

    </style>
</head>
<body>

浏览器内核

浏览器:{shell:外壳}{core:内核(js执行引擎,渲染引擎)
界面上的浏览器:(有独立内核)
IE:Trident
Firfox:Gecko
Chrome:webkit/Blink(先联合,后闹,谷歌制造了自己内核)
Safari:webkit
Opera:presto(弃用)/Blink(现在)

如何让一个元素从页面中消失

  • display:none
  • visibility:hidden
  • opacity:0

清除浮动

1.给父标签加clearfix
.clearfix::after{
            content: "";
            /* 必写内容为空 */
            display: block;
            clear: both;
        }
2.给父标签加上overflow:hidden
3.给包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素
.clear{
clear:both;
}
<div class="clear"></div>
4.创建bfc
overflow不等于visible

iframe优缺点:

优点:1、支持任何浏览器

      2、原封不动的把嵌入的网页展现出来

      3、重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度

缺点:1、页面复杂度高,不容易管理

      2、页面加载速度相对frame较慢

      3、代码复杂,无法被一些搜索引擎索引到

说说你对标签语义化的理解?
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构【1分】
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;【1分】
c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;【1分】
d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
块级元素与行级元素分别有什么特点(5分)
块级元素:总是在新行开始【1分】
高度,行高,内边距外边距都可控【0.5分】宽度默认是容器的100%,除非重新设定【1分】
可以容纳内联元素(文本元素)与其他块级元素【0.5分】行级元素:和其他元素在同一行【1分】
高,行高,内边距与外边距不可改变【0.5分】
内联元素只能容纳文本或其他内联元素【0.5分】元素的alt和title有什么异同? (3分)
在alt和title同时设置的时候,alt作为图片的替代文字出现【1.5分】
title是图片的解释文字【1.5分】
说出三种在定宽高的块元素中水平竖直居中的方法(3分)
1)position absolute + margin auto+top,bottom,left,right=0四方为都为0 ,margin:auto【1分】
2)position absolute + top:50%,left50% + translate(-50%, -50%)元素尺寸不固定【1分】
3)position absolute + top:50%,left50% + margin:-元素宽度一半 0 0 -元素高度一半定位 ,50%,margin负距【1分】
css标签优先级排序以及优先级相同时应该如何选择(3分)
元素选择符: 1class选择符: 10id选择符:100元素标签:1000 !important声明的样式优先级最高,如果冲突再进行计算。【2分】
如果优先级相同,则选择最后出现的样式。继承得到的样式的优先级最低。【1分】
用纯CSS创建一个三角形的原理是什么(2分)
把上、左、右三条边隐藏掉(颜色设为 transparent)【2分】
如何实现元素的显示隐藏,都有哪些方法 各自的优缺点(7分)
1)display(15%)使用none值会让元素从文档中直接删除,”直接消失不见了”【0.5分】用法:display:none 优点:简单暴力,不需要多余代码。不占空间,对布局没影响。缺点:元素从文档删除,不利于seo【0.5分】2)text-indent (15%)一般是首行缩2个中文字的用法是 text-indent:2em。但当给他一个足够大的负值,大到一般我们浏览器无法显示。【0.5分】用法:text-indent:-999em优点:利于搜索引擎缺点:它的作用其实就是把文字提到段落前面,不让我们看见,不影响宽度,会影响布局。【0.5分】3)position(15%)假如说一个元素的距离我们的视窗(电脑显示屏幕)足够大,大到我们浏览器也无法显示出来,那么它也是“消失”的。但是这种做法一般适用于比较写死的东西。【0.5分】用法:position:absolute; top:-999em或者left:-999em或 position:absolute; visibility:hidden;优点:信手拈来,随意摆放缺点:用法太死,不能随意修改,比较死板【0.5分】4)visibility(15%)只是“看不见”而已,所以元素依然会影响到布局用法:visibility:hidden【0.5分】优点:利于SEO优化缺点:该属性会继承,假如祖先用了visibility:hidden,那么子元素也是直接显示不见,想要子元素显示让用户看见,还要必须再多写visibility:visible【0.5分】5)opacity:0 设置透明度0,视觉上隐藏【1分】 6)transform transform:scale(0) transform:rotateX(90deg) transform:skew(90deg) 【1分】 7)overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐 【1分】 讲一下浮动会带来什么问题 如何清除浮动(7分)浮动问题:【3分 每点各1分】 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会编程0若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来。若浮动元素前面还有同级元素没有浮动则会影响页面结构。如何清除浮动:【4分 每点各1分】 在最后一个浮动标签后,新加一个标签,给其设置clear:both(不推荐)如果清除了浮动,父元素会自动检测子盒子最高的高度,然后与其同高 缺点:添加了无意义标签,语义化差父级添加overflow属性(overflow:hidden) ,通过触发BFC实现清除浮动(不推荐)内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素使用after为元素清除浮动使用before和after为元素清除浮动(双伪元素)什么是BFC,怎样触发BFC?(7分)BFC可以理解为一个区域(块级格式化上下文),在这个区域内的元素无论如何排版布局,都不影响区域外的元素【3分】触发BFC的条件:【4分 只要回答大体就给分 每点1分】浮动元素:float除none以外的值绝对定位元素:position(absolute,fixed)display为inline-block、table-cells、flexoverflow:除了visible以外的值(hidden,auto,scroll圣杯布局与双飞翼布局是什么 解决了什么问题【3分】 主要实现方式【2分】以及区别在哪里【4分】(9分)此题大家按照标答适当给分圣杯与双飞翼布局都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。 其主要实现方式都为三栏全部浮动,但左右两栏加上负margin让其跟中间栏div并排。不同在于解决 “中间栏div内容不被遮挡” 问题的思路不一样。圣杯布局为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。 双飞翼布局为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。Html代码题(20分)用html和css实现一个圆形在矩形容器中左右循环滑动的效果(5分)类似下图:颜色等不限自由发挥答案:(不唯一)(圆角处理20%、动画制作60%、循环播放20%) Document

请只使用html编写一个基础from表单,要求含有文本输入框【1.5分】、单选框【4.5分】(其中默认选定一个选项【1.5分】)、复选框【4.5分】、提交按钮【1.5分】,且行与行间有换行【1.5分】,最终达到下图效果(15分)答案: name:
sex:
Male
Female
interest:
Male
Female

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值