01html&css

最新推荐文章于 2024-08-14 09:51:48 发布

coderwm

最新推荐文章于 2024-08-14 09:51:48 发布

阅读量82

点赞数 2

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/qq_44089555/article/details/118691161

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML面试题

如何理解HTML语义化？

	全写div vs 标题h1，段落p
	让人易读
	让搜索引擎更易读懂（SEO）

默认情况下，哪些HTML标签是块级元素、哪些是内联元素？

	块级元素 display：block/table ;  有div h1 h2 table ul ol p等
	内联元素 display：inline/inline-block; 有span img input button等

CSS面试题

布局
盒子模型的宽度如何计算？

 <style type="text/css">
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="div1">
        this is div1
    </div>
    <script>
        // document.getElementById('div1').offsetWidth
    </script>
</body>

	offsetWidth=(内容宽度+内边距+边框），无外边距
	100px+20px+2px=122px
	让offsetWidth等于100px，怎么做？
	加样式：border-sizing：border-box；即内容宽度+padding+border=width=100px

margin纵向重叠问题（子元素纵向排列存在margin重叠问题）

在这里插入图片描述

相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p></p>也会重叠，没有指向
答案：15px

margin负值问题

对margin的top left right bottom设置负值，有何效果？
	margin-top和margin-left负值，元素向上、向左移动
	margin-right负值，右侧元素左移，自身不受影响
	margin-bottom负值，下方元素上移，自身不受影响

BFC的理解和应用

什么是BFC？如何应用？
	Block format context，块级格式化上下文
	一块独立渲染区域，内部元素的渲染环境不会影响边界以外的元素
形成BFC的常见条件
	float不是none
	position是absolute或fixed
	overflow不是visible
	display是flex inline-block等
BFC的常见应用
	清除浮动

<head>
 <style type="text/css">
        .container {
            background-color: #ccc;
        }
        .left {
            float: left;
        }
        /*     注意加bfc与不加bfc区别 */
        .bfc {
            overflow: hidden;
            /* 触发元素 BFC */
        }
    </style>
</head>
<body>
    <div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;" />
        <p class="bfc">某一段文字……</p>
    </div>
</body>

float布局的问题，以及clearfix （手写clearfix）

如何实现圣杯布局和双飞翼布局（PC布局）
	目的
		三栏布局（左中右），中间一栏最先加载和渲染（内容最重要）
		两侧内容固定，中间内容随着宽度自适应
		一般用于PC网页
	技术总结
		使用float布局
		两侧使用margin负值，以便和中间内容横向重叠
		防止中间内容被两侧覆盖，一个用padding，一个用margin

手写clear

 		 /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }

flex画色子

flex实现一个三点的色子
	flex常用语法
		flex-direction：row | row-reverse | column | column-reverse定义了主轴的方向(正方向或反方向)
		justify-content何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间
		align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
		flex-wrap指定 flex 元素单行显示还是多行显示 
		align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

absolute和relative分别依据谁定位？

		relative依据自身定位
		absolute依据最近一层的定位元素定位
	定位元素
		absolute relative fixed
		body

居中对齐有哪些方式？

	水平居中
		inline元素：text-align：center
		block元素：margin：auto
		absolute元素：left：50%+margin-left 负值
	垂直居中
		inline元素：line-height的值等于height值
		absolute元素：top：50%+margin-top 负值
		absolute元素：transform（-50%，-50%）
		absolute元素：top，left，bottom，right=0+margin：auto
		第二种，需要知道子元素尺寸
		第三种，第四种不需要知道子元素尺寸
		第四种方法，即保证浏览器兼容性又子元素尺寸未知

图文样式

line-height的继承问题

  line-height如何继承？
  	写具体数值，如30px，则继承该值
  	写比例，如2/1.5，则继承该比例
  	写百分比，如200%，则继承计算出来的值（考点）

	<style type="text/css">
        body {
            font-size: 20px;
            line-height: 1.5;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
    <!--以上代码 p标签行高多少  16*1.5=24px 比例先继承再算 -->
	<p>AAA</p>

	<style type="text/css">
        body {
            font-size: 20px;
            line-height: 200%;
        }
        p {
            background-color: #ccc;
            font-size: 16px;
        }
    </style>
	<!--以上代码 p标签行高多少  20px*200%=40px 百分比先算再继承（注意和比例区别）-->
	<p>AAA</p>

响应式

rem是什么?em,px

   px，绝对长度单位，最常用
   em，相对长度单位，相对于父元素，不常用
   rem，相对长度单位，相对于根元素（root-em），常用于响应式布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>rem 演示</title>
    <style type="text/css">
        html {
            font-size: 100px;
        }

        /* 相当于1rem=100px */
        div {
            background-color: #ccc;
            margin-top: 10px;
            font-size: 0.16rem;
        }
    </style>
</head>
<body>
    <p style="font-size: 0.1rem">rem 1</p>
    <p style="font-size: 0.2rem">rem 1</p>
    <p style="font-size: 0.3rem">rem 1</p>

    <div style="width: 1rem;">
        this is div1
    </div>
    <div style="width: 2rem;">
        this is div2
    </div>
    <div style="width: 3rem;">
        this is div3
    </div>
</body>
</html>

如何实现响应式

  media-query，根据不同的屏幕宽度设置根元素 font-size
  rem，基于根元素的相对单位

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式布局</title>
    <style type="text/css">
        @media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            /* iphone6/7/8 和 iphone x */
            html {
                font-size: 100px;
            }
        }
        @media only screen and (min-width: 414px) {
            /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
            html {
                font-size: 110px;
            }
        }
        body {
            font-size: 0.16rem;
        }
        #div1 {
            width: 1rem;
            background-color: #ccc;
        }

    </style>
</head>
<body>
    <div id="div1">
        this is div
    </div>
</body>
</html>

CSS3

css动画（不是面试重点）

coderwm

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01html&css

HTML面试题如何理解HTML语义化？全写div vs 标题h1，段落p 让人易读让搜索引擎更易读懂（SEO）默认情况下，哪些HTML标签是块级元素、哪些是内联元素？块级元素 display：block/table ; 有div h1 h2 table ul ol p等内联元素 display：inline/inline-block; 有span img input button等CSS面试题布局盒子模型的宽度如何计算？ <style type="text/cs
复制链接

扫一扫