CSS基础常考题

散韬
154 阅读9分钟

VS code中! tab自动补全html模板

1. 如何理解语义化

内容和页面效果与全用div效果相同

  • ①让人更容易读懂（增加代码可读性）

  • ②让搜索引擎更容易读懂（SEO 问题，让搜索排名靠前 "钱"）

  • ③正确的标签做正确的事情

  • ④页面内容结构化

2. 哪些标签是块级元素？哪些标签是内联（行内）元素？

  • 块级（display：block/table）：div、p、h1-h6、ul、ol、dl、li、header、footer、aside、section、article、form、table等

  • 内联（display：inline/inline-block）：span、img、button、input、b、q、i、a、em、label等

  • 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不可以设置垂直方向的padding和margin

3. 盒子模型的宽度（offsetWidth）如何计算？

#div1{
  width: 100px;
  padding: 10px;
  border: 1px solid ;
  margin: 10px;
}

首先要知道 offsetWidth 的概念是什么？

width不包括边框和内边距

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

在水平格式化的"7大属性"中，只有3个可以设置为auto: width, margin-left, margin-right;因此， 只要我们设置了block element的width, 并且margin-leftauto; margin-right: auto; 就可以让block element水平居中。

其实 offsetWidth = （ 内容宽度 + 内边距 + 边框 ）不包括margin如下图

所以这道题的答案也就是 100px + 20px + 2px = 122px

那如果要让这里的 offsetWidth = 100px 要怎么做呢？

我们可以设置 box-sizing ： border-box，这样设置的width就会包括边框和内边距。这样设置之后，offsetWidth 就会变成 100px 了，这里之后的内容宽度就会被减小，而内边距和边框的宽度是不变的，也就是此时的 offsetWidth = 78px + 20px + 2px

IE的盒模型有什么不同

IE 盒子模型的width包含了border以及padding就是border-box

4.margin纵向重叠问题

  <style>
    p{
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
      background-color: cornflowerblue;
    }
  </style>
</head>
<body>
  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>
</body>

两个p标签之间多少距离?

相邻的`margin-top`和`margin-bottom`  会发生重叠,空白的p标签也会重叠,所以是15px

5.CSS3 新增了哪些属性？

只罗列部分常见、常用的属性

  • 动画属性

    • @keyframes

    • animation

  • 边框属性

    • border-image

    • border-radius

    • box-shadow

  • 颜色属性

    • opacity

  • 「弹性盒子模型（Flexible Box）」

    • flex

    • align-content

    • align-items

    • align-self

    • justify-content

    • order

  • 网格（Grid） 属性

    • grid-columns

    • grid-rows

  • 超链接 (Hyperlink) 属性

    • target

  • 2D/3D 转换属性

    • transform

    • translate，可以控制元素的水平或垂直移动

    • scale，可以控制元素的放大缩小，以 1 为界限界定放大还是缩小

    • rotate，可以控制元素的旋转，按角度旋转

    • 设置 translate3d，可以控制 Z 轴

    • skew，对元素进行倾斜

  • 过渡（Transition） 属性

    • transition

6.margin 上下左右分别设置负值，有何效果？

  • top、left：设置负值，该元素会向上向左移动

  • right：设置负值，右侧元素左移，自身不动

  • bottom：设置负值，下方元素上移，自身不受影响

7.BFC 理解和应用

是什么？

  • Block format content，块级格式化上下文

  • 是一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

应用

  • 清除浮动

    • 浮动元素超出容器范围,没有撑大容器,脱离文档流

    • 在容器上设置BFC可以包含浮动元素

  • 作用：解决父元素高度塌陷问题；解决外边距重叠问题；清除内部元素浮动

  • 1.父元素的垂直外边距不会和子元素的重叠 2.开启BFC的元素不会被浮动元素覆盖 3.开启BFC的元素可以包含浮动的子元素

BFC 如何产生？

    1. 根元素
    1. float 属性【不为】none;
    1. display 属性【为】:line-block,table-cell,line-flex,flex
    1. position 属性【不为】:static,relative; absolute或fixed
    1. overflow 属性【不为】:visible; hidden

8.float 布局问题，手写 clearfix

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

两栏自适应布局(左列定宽，右列自适应)

float + margin 布局

float + overflow 布局

flex

圣杯布局(float,定位,margin负值)

  • 需求：三栏布局，左中右，中间一栏最先加载和渲染，两侧内容固定，中间内容随着宽度自适应(随着窗口放大缩小)，一般用于 pc 网页

  • 大体关键步骤：

    • center写在容器的第一个元素,容器设置padding分别与两边栏宽度相等

    • ①使用 float 布局,三个都浮动

    • ②两侧使用 margin 负值，以便和中间内容横向重叠,

      • 左栏margin:left:-100% 父元素宽度值,向左移动回到上一行(浮动元素逻辑上应该在上一行,是被挤下来的),中间栏的width:100% 所以两栏重合,使用相对定位然后使用坐标设置移动到需要的位置

      • 右栏用margin-right:-自身宽度 因为ml负值相当于自身宽度缩小,浮动元素没有宽度了,就自动到上一行去了

    • ③防止中间内容被两侧覆盖，一个用 padding、一个用 margin(两种实现方式)

      • 使容器左边padding等于左栏宽度,右边padding等于右栏宽度

  • clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。

    可以设置left,right或者both

body{
  min-width:550px;
}
<!-- 在浏览器缩小时保持布局不变 -->
#center{
  width:100%;
}
#header{
 text-align:center;
}
#footer{
  clear:both
 }

双飞翼布局(不用相对定位)

1.左中右全浮动,高度设置相同,中间的在外层设置float

2.中间是两层div外层div`width:100%`,在内层div设置`margin:0 190px;`实现中间内容不被覆盖

3.左边的`margin-left:-100%`,就到第一行左边了

3.右边的如果用`margin-right:-自身宽度`  会到上一行中间外层容器的后面,因为right负值自身不会移动,想要移动可以用`margin-left`负值,会移动到中间元素外层容器内部

手写 clearfix

如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

clearfix::after{
  content: '';
  display: table;
  clear: both;
}
  
同时加入::before以解决现代浏览器上边距折叠的问题 
.clearfix{
   *zoom: 1;
}
兼容ie

9.flex 画色子

flex-direction

justyfy-content 主轴

align-items 交叉轴

flex-wrap属性定义，如果一条轴线排不下，如何换行。

align-self 设置在子元素上

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。设置为1占有剩余空间

<head>
<style> 
.box {

width: 200px;

height: 200px;

border: 2px solid #ccc;

border-radius: 10px;

padding: 20px;

display: flex;

justify-content: space-between;

}
两端对齐,然后在子元素上分别设置交叉轴对齐方式,align-self

.item {

display: block;

width: 40px;

height: 40px;

border-radius: 50%;
画圆形

background-color: #666;

} 
.item:nth-child(2) {

align-self: center;

}

.item:nth-child(3) {

align-self: flex-end;
尾对齐

}
</style>

</head>

<body>

    <div class="box">

    <span class="item"></span>

    <span class="item"></span>

    <span class="item"></span>

    </div> 
  </body>

10.absolute 和 relative 分别依据什么定位？

  • absolute：相对于父级最近的定位元素(absolute,relative,fixed)，会一层层往上寻找，直至找到根元素，相当于浏览器页面定位(body)。它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离

  • relative：相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置,对其他元素无影响。 它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离

11. 居中对齐有哪些实现方式？默认左上对齐

水平居中：

  • 将inline 元素居中：text-align：center 元素中文本也可以是行内元素 写在容器上

  • block 元素：margin：0 auto 元素自身

  • 直接 absolute：（ left：50% + margin-left：负值）

  • transform:translate(x,y) translateX(x)移动自身长宽的 50%

    fixed元素的父元素加了transform就会以父元素为参考对象

  • 可以设置scale,rotate等

  • flex：（ display: flex;     justify-content: center;）

垂直居中：

absolute元素在具体宽高容器中垂直水平居中对齐。

  • 块级元素：height = line-height 元素中文本

  • absolute：（ top：50% + margin-top：负值 ） 必须知道尺寸

  • translateY 先用absolute坐标移动再用translate拉回来自身50%

  • flex：（display: flex;     flex-direction: column;     justify-content: center;）

  • 绝对定位坐标全部等于0,margin auto 要设置width

12.line-height 的继承问题

行高的百分比根据字体大小计算 font-size

  • ①具体数值、直接继承

  • ②比例，继承该比例 与自身font-size计算

  • ③百分比，如 200%，先计算出来，再继承该值

13.rem 是什么？响应式的常见方案有哪些？

rem：相对于根元素，是相对长度单位，常用于响应式布局

字体大小,段落行距(p标签的line-height),容器大小,框线大小,margin,padding

px 绝对单位 em 相对单位 根据当前容器大小计算,父容器10px,子容器2em,相当于20px,内部元素如果继续使用em会进行累乘

p {
  font-size: 1em;
  line-height: 1.5em;
} 
/*单个选择器内使用实现按比例缩放*/ 

rem = root em 根据html的字体大小计算(统一标准)

vw/vh=viewport width/viewport height 设定值1-100，为占当前视图的百分比

vmin vmax 视图较短和较长的一边 百分比

img {
    width: 100vmin;
}
/*以视图较短一边的总边长作为宽度*/

响应式的常见方案有哪些？

  • 媒体查询(media-query)

    根据不同的屏幕宽度设置根元素font-size,设置max/min-width条件范围,按比例设置font-size,在body设置rem

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

  • flex 布局

  • grid 布局（兼容性较差）

  • 百分比布局

14. 网页视图尺寸是什么？

  • vh、vw，网页视口高度、宽度的 1%

    window.screen.height

    window.innerHeight //浏览器内容区域

    document.body.clientHeight //内容

    • rem弊端

      阶梯性:不连续

15.不换行,加省略号

.text-handle{
    white-space:nowrap;//规定空白的处理方式，nowrap不换行
    over-flow:hidden;//超出父元素的处理办法，此处我们选择隐藏
    text-overflow:ellipsis;//省略号
}

16.CSS动画

语法简单,不是重点
avatar
文章
阅读
粉丝