css相关

被脑子绑架的人
128 阅读10分钟

CSS相关

1.盒子模型有哪几种？区别？

浏览器渲染时会把每个元素当成一个矩形盒子来布局，一个盒子包括内容content、内边距padding、边框border、外边距margin

盒子模型有两种：标准盒子模型和怪异盒子模型，通常都是标准的模型

即指定的宽度/高度width//height不包括padding和border

而怪异盒子模型指定的宽高就包括了padding和border

在CSS设置中可以通过box-sizing属性来设置盒子的模型：

box-sizing: content-box|border-box|inherit:
​
/*content-box即标准盒子模型
border-box即怪异盒子模型
inherit即从父元素继承*/

以下模型为怪异盒子模型，所以盒子的实际宽度就是200px

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>

2.css选择器有哪些？优先级？哪些属性可以继承？

  • 基本选择器

    • *通用选择器
    • #box ID选择器
    • .class 类选择器
    • h1 标签选择器

  • 组合选择器

    • div1,div2 多元素选择器
    • div p 后代元素选择器
    • div>p 子元素选择器
    • div1+div2 相邻元素选择器

  • 属性选择器

    • input[type] 选择有type属性的input元素
    • input[type='text']
    • input[type~='text']选择某属性有多个值的其中包括text值的元素

  • 伪类选择器

    • div:first-child 匹配父元素的所有子元素
    • a:link 所有未被点击的连接
    • a:visited 所有已经被点击的链接
    • div:active 鼠标已经按下，但还没释放的元素
    • div:hover 鼠标悬停的元素
    • div:focus 获得焦点的元素

CSS3相关

  • CSS3的同级元素通用选择器

    • p ~ ul 匹配任何在p元素之后的同级ul元素

  • CSS3的属性选择器

    • div[id^="nav"] 匹配属性id以nav开头的元素
    • div[id$="nav"] 匹配属性id以nav结尾的元素
    • div[id*="nav"] 匹配id的值包含nav字符串的元素

  • CSS3与用户界面有关的伪类

    • E:enabled匹配表单中激活的元素
    • E:disabled 匹配表单中被禁止的元素
    • E:checkd 匹配表单中被选中的元素 radio或者checkbox选择的
    • E::selection 匹配用户当前选中的元素

  • CSS3中结构性伪类

    • E:root 匹配文档的根元素 即HTML元素
    • E:nth-child(n)匹配父元素的第n个子元素
    • E:nth-last-child(n)匹配父元素的倒数第n个子元素
    • E:nth-of-type(n)也是匹配第n个子元素，但是只匹配同种标签的
    • E:nth-last-of-type(n)同理
    • E:last-child匹配父元素的最后一个子元素
    • E:first-of-type 匹配父元素下同种标签的第一个子元素和nth-of-type(1)同理
    • E:last-of-type同理
    • E:only-child
    • E:only-of-type
    • E:empty

  • CSS3中的反选伪类

    • E:not(s) （如:not(p)）匹配不符合当前选择器的任何元素

  • CSS3中的:target伪类

    • E:target 匹配文档中特定"id"点击后的效果

优先级：

内联样式 > ID选择器 > 类选择器 > 标签选择器

继承属性：

字体系列属性、文本系列属性、元素可见性、表格布局属性、列表属性、引用、光标属性 都会继承

display、文本属性的vertical-align和text-decoration、盒子模型的属性、背景属性、定位属性、生成内容属性、轮廓样式属性、页面样式属性 不会继承

3.em/px/rem/vh/vw区别？

绝对长度单位：px 表示像素

相对长度单位：em/rem/vh/vw

  • em：

相对于当前对象内文本的字体尺寸,一般默认相对于浏览器的默认字体尺寸，即1em=16px

当把body中的font-size设置为62.5%时，或者直接设置成10px，此时10px=1em

特点：

1.em的值不固定

2.em会继承父级元素的字体大小

3.em是相对长度单位，如果没有设置对象内文字字体大小，则相对于浏览器默认字体尺寸16px=1em

html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
    .big{font-size: 1.4rem}
    .small{font-size: 1.2rem}
  • rem

相对于HTML元素的字体大小的值，和em同理可以在html根元素下设置font-size : 62.5%

特点：

rem单位可谓集相对大小和绝对大小的优点于一身

和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

和rem的主要区别在于两者的值转换为像素值的不同：

em值转换为像素，大小取决于自身父元素所设置的px值，即父级元素字体大小乘以em值

rem值转换为像素，大小取决于页面根元素的字体大小，即根元素字体大小乘以rem值。

  • vw、vh

vw就是根据窗口的宽度，分为100等份，100vw就是满宽，50vw就是一半宽

同理vh就是根据窗口的高度，分100等份。

窗口：桌面端就是浏览器的可视区域、移动端就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

  • 对于普通定位元素就是我们理解的父元素
  • 对于position: absolute;的元素是相对于已定位的父元素
  • 对于position: fixed;的元素是相对于ViewPort（可视窗口）

4.隐藏页面元素的方法？区别?

image-20220316112050973

  • display:none

不占据原有空间，无法响应点击事件，v-show:false就是这个原理

  • visibility:hidden

还占据原有空间，无法响应点击事件

  • opacity:0

还占据原有空间，变透明了，但是仍然可以触发点击事件

  • 设置height、width模型属性为0

不占据页面空间，无法响应点击事件，如果含有子元素需要加上 overflow:hidden来隐藏子元素

  • position:absolute

设置绝对定位，然后直接移出可视区域，不影响页面布局

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
  • clip-path

通过裁剪，仍占据页面空间，无法响应点击事件

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

5.BFC？触发条件？应用场景？

BFC（Block Formatting Context），即块级格式化上下文，页面中一块特别的渲染区域，有着自己的渲染规则：

  • 盒子会在垂直方向上一个接一个的放置
  • 两个相邻的盒子的margin会发生重叠
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，里外元素不会相互影响

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的父元素

触发BFC的条件：

  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不为visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

应用场景：

1.防止margin重叠（防止高度塌陷）

两个p元素都有margin，则会发生重叠，以大的值为准，如果给p元素外面都添加一个容器，这个容器再去触发BFC，不同属一个BFC就不会重叠。

<style>
    .wrap {
        overflow: hidden;// 触发生成新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

2.清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

这个好像也叫高度塌陷？就是父元素不能被浮动子元素撑起高度（更红的框浮动了，但是没有撑起高度）

img

给父元素.par添加一个overflow:hidden，开启BFC，浮动的子元素就能撑起父元素的高度。

img

3.自适应多栏布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果如下：因为每个元素的左边距都会与包含块的左边界接触，所以虽然aside浮动了，但是还是会接触。而BFC的区域不会和已经浮动的盒子重叠。

img

因此给main开启BFC，因此实现了多栏布局。

6.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

实现元素水平垂直居中的方式：

  • 利用定位+margin:auto

父元素开启相对定位，子元素开启绝对定位，清除默认样式即子元素回到左上角后margin:auto即可。

  • 利用定位+margin:负值

元素开启绝对定位， 子元素移动自身50%实现水平垂直居中，注：需要知道元素的宽高

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-200px;
  • 利用定位+transform

元素开启绝对定位，子元素加以下设置，和上面方式类似

top: 50%;
left: 50%;
transform: translate(-50%,-50%);
  • table布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

  • flex弹性布局
<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

只需要给父元素开始flex布局，justify-content: center;水平居中，垂直居中

  • grid网格布局
display: grid;
align-items:center;
justify-content: center;

和flex布局类似

总结：？

内联样式居中布局：

  • 水平居中

    • 行内元素可设置：text-align:center
    • flex布局设置父元素：display:flex; justify-content:center

  • 垂直居中

    • 单行文本父元素确认高度：height = line-height
    • 多行文本父元素确认高度：display:table-cell； justify-align:middle

行内元素居中布局

  • 水平居中

    • text-align:center

块级元素居中布局

  • 水平居中

    • 定宽：margin 0 auto；

    • 不定宽：

      • 方法1：转化为行内块元素display:inline-block和text-align:center
      • 方法2：flex布局display:flex;和justify-content:center;
      • 方法3：绝对定位后transform: translate(50%,0)

  • 垂直居中

    • 纯文字类：height=line-height

    • 其他：

      • 父元素relative定位，子元素absolute定位，子元素margin:auto;

      • 父元素flex布局，子元素margin:auto;

      • flex布局display:flex;和align-items: center;

      img

7.如何实现双栏布局？三栏布局

双栏布局-----

方法1：

左侧栏直接float:left；右侧栏设置一个margin-left留出位置；父元素开启BFC防止下方元素浮动上来。

方法2：

左侧栏给一个固定宽度，右侧栏设置flex:1；父元素设置flex布局 display:flex；

三栏布局-----

方法1：

两侧分别向两侧浮动，中间设置两个margin，父元素开启BFC----不好，响应式设置不能换行展示，因为主体内容最后才加载

方法2：

两边使用绝对定位固定，和负margin，中间还要再加一层-----不好，麻烦

方法3：

两边绝对定位，中间margin左右，父元素相对定位

方法4：

父元素使用display:table设置为表格，设置table-layout: fixed表示列宽由自身宽度决定；

三栏设置display: table-cell设置为表格单元。左右设置固定宽度，中间设置100%填充。

方法5：

父元素设置display:flex；然后justify-content: space-between;设置盒内元素两端对齐；左右设置固定宽度，中间设置100%填充(或者flex:1)。盒内元素高度撑开容器高度------最简单

方法6：

网格布局，和flex类似

8.弹性盒布局模型？适用场景？

不同页面有不同的尺寸和分辨率，这就需要响应式的界面设计来满足布局需求，Flex弹性盒模型的优势在于开发人员只需要声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器就负责完成实际布局。

当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

盒子模型有三个核心概念，分别是：flex容器、flex子元素(项)、排列方向(布局方向)

容器属性：

img

子元素属性：

img

应用场景：

实现元素水平垂直方向的居中(尤其是不定宽度)，两栏三栏的自适应布局

网格布局grid实现的flex都能实现，且兼容性也一般，手机端不友好

9.CSS3新特性？

  • 选择器和伪元素
  • 新样式（边框、背景、文字、颜色
  • transition过度
  • transform转换
  • animation动画
  • gradient渐变
  • flex、gird布局

\

avatar
文章
阅读
粉丝