HTML+CSS基础题

不解风情的老妖怪哎

已于 2022-12-09 21:52:40 修改

阅读量2.5k

点赞数 3

文章标签： css html css3

于 2022-12-09 21:51:09 首次发布

本文链接：https://blog.csdn.net/weixin_46132649/article/details/128256690

版权

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属性来指定