本文介绍: 含义就是当Item的总宽度超过父级宽度时候item进行等比例缩小相对于圣杯布局来说,center通过margin预留两边的位置的,两边的margin就相当于center的翅膀。,可以理解一个容器,在这个容器里面按照一定的规则进行物品排列,并且不会影响其他环境中的物品,也不受外部影响设置inline之后,产生的换行符被渲染成空格占用个字符长度。的值大于0 的时候,那么各个item的宽度根据设置大小按比例放大使用浮动左边浮动右边浮动,中间设置相应的margin值,

1、css选择器及其优先级

2、display属性值及其作用

属性 作用
none 元素显示,并会从文档流中移除
flex 子元素根据flex布局方式进行布局
block 类型默认宽度父级元素的宽度,高度默认。可设置宽高相邻相同属性换行显示
inline 行内元素类型默认宽度为内容的宽度,不能设置宽高,同行显示
inlineblock blockinline结合,宽度默认内容的宽度。可设置宽高换行显示
listitem 像块元素一样显示,并添加样式列表标记
table 作为块级表格来显示
inherit 继承父级display属性来显示

3、displayblockinlineinlineblock区别

4、隐藏元素的方法哪些

5、display:nonevisibility:hidden的区别

6、对盒模型的理解


可以通过一下方法改变盒子模型

7、css3中有哪些特性

8、单行多行文本溢出隐藏

单行文本溢出

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出

overflow: hidden;               /*溢出隐藏*/
text-overflow: ellipsis;        /*溢出显示省略号*/
display: -webkit-box;           /*作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical;   /*弹性伸缩盒子模型排列方式垂直排列*/
-webkit-line-clamp: 3;          /*显示的行数*/

不能设置高度,否则显示的内容就按设置的高度显示。

9、两栏布局的实现

一般两栏布局指的是左边一栏宽度固定右边一栏宽度自适应
HTML结构

    <div class="outer"&gt;
        <div class="left"&gt;左边固定200px</div>
        <div class="right">右边适应宽度</div>
    </div>

公共样式:

div {
    height: 200px;
}
.left {
    width: 200px;
    height: 150px;
    background-color: red;
}
.right {
    background-color: green;
}

方法
使用 float + margin

.left {
    float: left;
}
.right {
    margin-left: 200px;
}

方法二
左边浮动右边加上overflow:hidden 触发了BFC,两侧就不会重叠

.left {
    float: left;
}
.right {
    overflow: hidden;
}

方法三
利用flex布局,左边固定宽度,右边flex:1自动填满宽度。

.outer {
    display: flex;
}
.left {
    
}
.right {
    flex: 1;
}

方法三
利用flex布局,左边固定宽度,右边flex:1自动填满宽度。

.outer {
    display: flex;
}
.left {
    
}
.right {
    flex: 1;
}

方法四
利用绝对定位 + margin左边使用absolute右边使用margin-left

.outer {
    position: relative;
}
.left {
    position: absolute;
}
.right {
    margin-left: 200px;
}

方法五
同样的使用绝对定位,左边固定高度,右边适应绝对定位

.outer {
    position: relative;
}
.left {
    
}
.right {
    position: absolute;
    left: 200px;
    top: 0;
    right: 0;
    bottom: 0;
}

10、三栏布局的实现

三栏布局一般指的是页面中一共有三栏左右两栏宽度固定,中间自适应的布局
HTML结构

    <div class="outer">
        <div class="left">左边固定100px</div>
        <div class="center">中间自适应宽度</div>
        <div class="right">右边边固定200px</div>
    </div>

公共样式:

div {
    height: 200px;
}
.left {
    width: 100px;
    background-color: red;
}
.center {
    height: 300px;
    background-color: gold;
}
.right {
    width: 200px;
    background-color: green;
}

方法一
使用flex布局,左右两边固定高度,中间使用flex:1自动撑开宽度

.outer {
    display: flex;
}
.center {
    flex: 1;
}

方法二
使用绝对定位,左边定位到左边,右边定位到右边,中间设置margin进行隔开

.outer {
    position: relative;
}
.left {
    position: absolute;
}
.center {
    margin-left: 100px;
    margin-right: 200px;
}
.right {
    position:absolute;
    right: 0;
    top: 0;
}

方法三
使用浮动,左边左浮动,右边右浮动,中间设置相应的margin值,注意:这种方式center的元素必须放到最后,否则center会将right挤到下方

.left {
    float: left;
}
.center {
    margin-left: 100px;
    margin-right: 200px;
}
.right {
    float: right;
}

方法四
圣杯布局。父级设置左右两边的padding值留空给两边位置中间放在最上面宽高设为父级的宽高,因此元素被挤到下一行,使用margin移动到上一行,在使用定位和浮动定位到两边

.outer {
    padding-left: 100px;
    padding-right: 200px;
    background-color: black;
}
.left {
    position: relative;
    left: -100px;
    float: left;
    margin-left: -100%;
}
.center {
    float: left;
    width: 100%;
    height: 100%;
}
.right {
    position: relative;
    left: 200px;
    float: right;
    margin-left: -200px;
}

方法五
双飞翼布局。相对于圣杯布局来说,center是通过margin预留两边的位置的,两边的margin就相当于center的翅膀。

    <div class="outer">
        <div class="center-wrapper">
            <div class="center">中间自适应宽度</div>
        </div>
        <div class="left">左边固定100px</div>
        <div class="right">右边边固定200px</div>
    </div>
.outer {
    background-color: black;
}
.left {
    float: left;
    margin-left: -100%;
}
.center-wrapper {
    float: left; 
    width: 100%;
    height: 100%;
}
.center {
    margin-left: 100px;
    margin-right: 200px;
}
.right {
    float: left;
    margin-left: -200px;
}

11、水平垂直居中的实现

公共样式

    .parent {
        width: 500px;
        height: 500px;
        background-color: lightblue;
    }
    .child {
        width: 100px;
        height: 100px;
        background-color: gold;
    }

方法一
利用flex进行布局。

    .parent {
        display: flex;
        justify-content: center;
        align-items: center;
    }

方法二
使用positiontanslate进行配合实现居中

    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

方法三
利用绝对定位,将四个方向设置为0,再通过margin:auto实现居中,这种方法只适用于盒子由宽高的情况下。

    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法四
利用绝对定位和margin来调整居中,这种适合于盒子已知宽高的情况。

    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }

方法五
利用绝对定位和calc计算位置居中,这种适合于盒子已知宽高的情况。

    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
    }

12、对flex布局的理解及其使用场景

FLex是FlexibleBox的缩写,意为”弹性布局”。可以使盒模型具有很大的灵活性。任何一个容器都可以指定为flex布局。行内元素也可以使用FLex布局。采用FLex布局的元素,称为FLex容器(FLex container,它的所有子项目自动成为容器的成员,称为FLex项目(FLex Item。容器默认存在两根轴,水平主轴main axis)和垂直交叉轴(cross axis),项目默认沿水平主轴排列。注意:设置为FLex布局之后,子元素的float、clear和vertical-align属性失效

以下6个属性设置在容器上

以下6个属性设置在项目

13、为什么需要清除浮动?清除浮动的方式

浮动不设高度且子元素浮动时,容器高度不能被内容撑开,内容会溢出到容器外面而影响布局,这种现象被称为浮动。
具有以下特点:

  • 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)
  • 浮动元素碰到包含它的边框或者其它浮动元素的边框停留

浮动元素引发的问题

  • 父元素的高度无法被撑开,影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素也会跟随其后
  • 浮动之后的元素会发生变化,影响页面的显示结构

清除浮动的方式如下

.parent::after {
	content: "";
	display: block;
	clear: both;
}
.parent {
*zoom: 1;
}

14、对BFC的理解,如何创建BFC

BFC(Box Formatting Context块级上下文格式化,是一块渲染区域里面包含多个box。是一个独立的布局环境,可以理解为一个容器,在这个容器里面按照一定的规则进行物品排列,并且不会影响其他环境中的物品,也不受外部影响。

创建BFC的条件

BFC的特点

BFC的作用

15、position的属性有哪些区别什么

16、实现一个三角形

border生成一个正方形

div {
    width: 0;
    height: 0;

    border: 100px solid;
    border-color: red green blue gold;
}

生成向下的三角形

div {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

生成对角的三角形

div {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

17、如何解决1px的问题

这个问题主要出现在不同devicePixelRatio之间的屏幕,同样是1px,有些屏幕看起来会更粗。
方法一
得出设备devicePixelRatio,根据该值计算mata标签中的值。

const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);

方法二
直接改成0.5px

18、li与li之间的空白是由什么引起的?如何解决

原因

浏览器会把inline内联元素之间的空白字符空格换行tab等)渲染成一个空格。为了美观,我们在写代码时候通常是把<li>标签换行书写,把<li>设置成inline之后,产生的换行符被渲染成空格占用个字符长度

解决办法

  1. 既然是换行产生的,那么就不换行书写,写成一行不足:不美观
  2. <li>设置float:left不足:有些元素是不能浮动的,如做鱼切换的焦点图等
  3. <ul>字符大小设为0,即font-size: 0不足<li>需要单独设置字符大小
  4. 设置<ul>的字符间隔letter-spacing:-8px不足<li>之间的字符间隔也被设置,文字重叠在一起,所以<li>的字符间隔还需要设置成letter-spacing:normal

19、flex:1 代表什么

flex代表flex-grow、flex-shrink和flex-basis的简写,默认值是 0 1 auto。含义就是当Item的总宽度超过父级的宽度的时候,item进行等比例缩小

解释一下:flex-grow、flex-shrink和flex-basis三个属性的含义。

.item {
  flex-grow: <number>; /* default 0 */
}

默认值为0,表示不自动放大元素。当还有剩余空间的时候没有剩余空间设置该属性不生效,多个item设置flex-grow的值大于0 的时候,那么各个item的宽度根据设置的大小按比例放大
在这里插入图片描述

  • flex-shrink
.item {
  flex-shrink: <number>; /* default 1 */
}

表示缩放比例。该值的计算方法稍微有点绕,建议阅读这篇文章https://c.biancheng.net/css3/pseudo-class.html

  • flex-basis
.item {
  flex-basis: <length> | auto; /* default auto */
}

属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

它可以设为跟width或height属性一样的值。

flex:1 代表 1 1 0%

表示在剩余空间多余的情况下会自动方法,空间不足的时候也会自动缩小

一条0.5px的线

使用transform:scale(0.5,0.5)的方式缩放。

原文地址:https://blog.csdn.net/qq_43706089/article/details/134219774

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_29224.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注