首页 前端知识 HTML CSS基础题

HTML CSS基础题

2024-01-29 14:01:02 前端知识 前端哥 324 330 我要收藏

1、下列哪条CSS样式规则是不正确的(C)
A.img{float:left;margin-bottom:2em;}
B.img{float:right;width:120px;height:80px;}
C.img{float:right;right:30;}
D.img{float:left;margin:20px;}
2、下列不属于CSS背景属性正确的是(B
A.background-color
B.bgcolor
C.background
D.background-attachment

注:background用于设置背景,是一个复合属性;background-color用于设置背景颜色;background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。

3、CSS边框样式属性使用的是(D)
A.border-width
B.border-color
C.其他均不正确
D.border-style

注:border-style属性用于设置元素所有边框的样式,或者单独为各边设置边框样式。

4、下列哪一个不是width属性值的单位(C)
A.%
B.px
C.m
D.cm

注:px、cm属于绝对单位,%是相对单位,没有m这个单位。

5、在CSS中,关于CSS样式说法错误的是(D)
A.CSS样式无法实现页面的精确控制
B.每条样式规则使用分号(;)隔开
C.CSS样式实现了内容与样式的分离,利于团队开发
D.CSS代码不区分大小写

注:CSS代码对大小写敏感,是区分大小写的。

6、下列哪个选项是CSS正确的集体声明方式(B)
A.#two{color:red;}
B.p,h1{color:red;}
C. .one{color:red;}
D.p;h1{color:red;}

注:逗号分隔是集体一起。

7、根据这段代码,选出正确的效果(A)

<!DOCTYPE html>
<html>
         <head>
                   <meta charset="UTF-8">
                   <title>块级元素和行内元素</title>
         </head>
         <body>
                    <div>块级元素</div>
                    <div>块级元素</div>
                    <div>块级元素</div>
                    <div style="display:inline;></div>
                    <span>行内元素</span>
                     <span>行内元素</span>
                     <span style="display:block;></span>
                     <span>行内元素</span>
          </body>
</html>

A.
块级元素
块级元素
块级元素
块级元素 行内元素 行内元素
行内元素
行内元素
B.
块级元素
块级元素
块级元素
块级元素
行内元素 行内元素 行内元素 行内元素
C.
块级元素
块级元素
块级元素 块级元素 行内元素 行内元素
行内元素
行内元素
D.
块级元素
块级元素
块级元素
块级元素 行内元素 行内元素
行内元素 行内元素

注:块级元素是盒子,盒子是有宽高的,即不管里面有多少东西,外部都可以设置其宽高。内联元素是袋子,其宽高由里面的东西撑起来。块级元素和内嵌元素之间互相转换,转换代码如下:
display:block;转成块级元素
display:inline;转成内嵌元素

8、下列样式定义字体间距为0.5倍间距、水平左对齐、垂直顶端对齐、有下划线正确的定义是:(A)
语句一:p{text-decoration:0.5em;letter-spacing:underline;vertical-align:top;text-align:left}
语句二:p{text-decoration:left;letter-spacing:top;vertical-align:0.5em;text-align:underline}
语句三:p{text-decoration:underline;letter-spacing:0.5em;vertical-align:top;text-align:left}
语句四:p{text-decoration:underline;letter-spacing:0.5em;vertical-align:left;text-align:top}
A.语句三
B.语句四
C.语句二
D.语句一

注:text-decoration:underline;letter-spacing:0.5em;vertical-align:top;text-align:left;

9、CSS盒模型不包括下列哪一项(B)
A.margin
B.font
C.border
D.padding

注:CSS盒模型由四部分组成:content、border、padding、margin。

10、如果我们想要定义某一个元素的右边框,宽度为1px,外观为实线,颜色为红色,正确写法应该是(B)
A.border:1px solid red;
B.border-right:1px solid red;
C.border:1px dashed red;
D.border-right:1px dashed red;
11、关于哪项不属于CSS盒模的属性(B)
A.margin
B.length
C.width
D.padding

注:盒子中:margin padding border width height

12、div{width:220px;height:220px;padding:10px;border:5px;margin:0}根据以上的样式,下面说法正确的两项是(CD)
A.元素实际的高度为230px
B.元素实际的宽度为235px
C.元素实际的宽度为250px
D.元素实际的高度为250px

注:W=220+10+10+5+5=250

13、当一个元素"margin:20px;padding:20px;border:0px}求它具体占据的大小:(D)
A.80px 80px
B.40px 40px
C.60px 60px
D.100px 100px

注:元素实际大小=margin+border+padding+width/height

14、如何设定一个元素的边框:(A)
A.border
B.width
C.margin
D.padding
15、CSS3中flex-direction属性的默认值是(D)
A.colum
B.intial
C.none
D.row

注:row:默认值,主轴在水平方向,起点在左端。

16、以下说法正确的是:(D)
A.flex不是响应式布局
B.flex中没有换行的概念
C.flex是二维布局,分为主轴与交叉轴
D.任何容器都可以被指定为flex布局

注:flex是一维布局。

17、关于flex布局说法不正确的是(D
A.可以实现类似垂直居中布局
B.Flexible Box,弹性布局,用来为盒状模型提供最大的灵活性
C.所有子元素自动成为容器成员,称为Flex项目(flex item)
D.设为Flex布局以后,子元素的float、clear和vertical-align属性将继续发挥作用
18、在flex布局中,决定主轴的方向(项目的排列方向)的属性是(A)
A.flex-direction
B.flex-wrap
C.justfy-content
D.flex-flow

注:flex-direction属性决定主轴方向(即项目的排列方向)。flex-wrap属性:默认情况下,项目都排列在一条线(又称”轴线“)上。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row
nowrap。justify-content属性定义了项目在主轴上的对齐方式。

19、下列关于弹性布局说法不正确的是(D)
A.display值为flex时,创建弹性布局容器;
B.弹性布局也称为”伸缩盒子“或弹性盒布局;
C.可以使用flex-direction属性调整弹性布局主轴的方向
D.弹性父元素对子元素,及所有的后代元素都可以产生影响。

注:弹性父元素只能影响子元素,无法影响所有的后代元素。

20、利用flex布局可以优雅地实现元素在水平和垂直方向上的排布,为了让三个div元素在水平方向均匀分布,下列属性设置正确的是(B)
A.flex-direction:row;justify-content:flex-start;
B.flex-direction:row;justify-content:space-around;
C.flex-direction:column;justify-content:center;
D.flex-direction:column;justify-content:space-around;

注:flex-direction:属性指定了弹性元素在父容器中的位置。
justify-content:内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main
axis)对齐。

21、在一般css中垂直居中是一件很难的事情,但是在flex却很简单,以下哪个方法可以让flex项目中的内容垂直居中:(B)
A.align-items:stretch
B.align-items:center
C.align-items:flex-end
D.align-items:flex-start

注:align-items设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

22、不属于CSS position定位类型的是(D)
A.absolute
B.relative
C.fixed
D.left

注:定位:static、relative、fixed、absolute、sticky

23、以下说法正确的是(D)
A.CSS中设置层叠顺序的属性为index;
B.CSS中设置层叠顺序的属性为y-index;
C.CSS中设置层叠顺序的属性为x-index;
D.CSS中设置层叠顺序的属性为z-index;
24、在HTML中,以下关于position属性的设定值描述错误的是(D)
A.用来实现偏移量的left和right等属性的值,可以为负数
B.static为默认值,没有定位,元素按照标准流进行布局
C.absolute表示绝对定位,需要配合top、right、bottom、left属性来实现元素的偏移
D.relative属性值设置元素的相对定位,垂直方向的偏移量使用up或down属性来指定

注:定位边偏移的控制有top、left、right、bottom。

25、在CSS中可以设置元素绝对定位的是(A)
A.position:absolute
B.position:relative
C.position:static
D.position:fixed

注:static是原本元素的位置,relative是相对位置,fixed是与浏览器的位置,absolute是绝对位置。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/775.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!