CSS

Jayson柴

于 2021-05-05 15:32:46 发布

阅读量81

点赞数

文章标签： css 面试

本文链接：https://blog.csdn.net/weixin_45678402/article/details/116425935

版权

一、行内元素和块级元素的区别

inline行内元素：不能自成一行，width和height不可用；margin和padding的垂直方向不可用；
block块级元素：自成一行，margin垂直方向会发生塌陷问题；
inline-block：除了自成一行，拥有块级元素所有的特性；
置换元素：置换元素一般内置框高属性，可以设置height和width；典型的置换元素：img ；

置换元素是根据标签属性来显示的元素；
比如：img根据src属性来显示；iframe通过src显示；input根据value属性来显示；select也是置换元素

 <img src=" " height="30px" width="40px">
 
 <iframe src="/i/eg_landscape.jpg"></iframe>
 
 <input type="text" name="lastname" value="Mouse">
 
 <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

在这里插入图片描述

二、CSS常见属性

text-align：文字的水平对齐方式；常见值：center、left、right；
vertical-align：元素的垂直对齐方式；常见值：text-top；text-bottom；middle；
font-size：字体大小

三、盒子模型

box-sizing：content-box；标准的盒子模型；盒子的实际宽度：width+padding+border
box-sizing：border-box；盒子的实际宽度：width
box-sizing：padding-box；盒子的实际宽度：width+border；

四、块级格式化上下文

BFC：（block formatting context）独立的布局环境，其中的元素布局不受外部影响；

主要作用
- 清除浮动；
- 解决兄弟元素之间的重叠问题
- 防止margin重叠；
- 解决父元素高度塌陷问题overflow: hidden；
创建BFC：
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption
- overflow的值不是visible

五、CSS中的px、em、rem

项目中px用于元素的边框或者定位；em/rem用于响应式页面；

px：表示像素，是绝对单位，不会因为其他元素的尺寸变化而变化；
em：相对长度单位。相对于当前元素的font-size；当前元素字体大小的em相对于其父元素的字体大小
rem：相对于根元素html（可以给html的font-size设置大小）
vw：1vw等于视口宽度的1%；
vh：1vh等于视口高度的1%；
vmin：选取vm和vh中最小的那个；
vmax：选取vm和vh中最大的那个；

六、CSS属性选择器
根据元素的属性和属性值来选择元素；

img[alt] {border: 5px solid red}
p[class="important warning"] {color: red}
p[class~="important"] {color: red}
p[class^="abc"] class属性值以abc开头的所有p元素
p[class$="abc"] class属性值以abc结尾的所有p元素
p[class*="abc"] class属性值包括子串abc所有p元素

七、选择器优先级

!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 元素、伪元素选择器

常见的伪类选择器（使用:）：抽象的类

:link :visited :hover :active			
:first-child :nth-child(n) :nth-of-type(n)
p:first-child {color: red}

注意：
nth-child(n)表示：寻找所有兄弟元素中的第n个元素，并且要求该子元素是p元素
:nth-of-type(n)表示：寻找所有同类型兄弟元素的第n个元素

常见的伪元素选择器（使用::）：DOM中不存在的元素

::before ::after
p::after {content:"- 台词"}
// 我是唐老鸭。-台词

八、radius

// radius半径
当一个值时：border-radius:5px
//  四个角的半径值为5px
当两个值时：border-radius:3px 5px
// 左上角与右下角的半径值为3px、右上角与左下角的半径为值5px
当三个值时：border-radius:3px 5px 8px
// 左上角的半径值为3px ,右上角与左下角5px, 右下角为8px
当四个值时：border-radius:3px 5px 8px 6px
// 左上角的半径值为3px, 右上角的半径值为5px, 右下角8，左下角6

border-top-left-radius:左上角的圆角半径；
border-top-right-radius:右上角的圆角半径；
border-bottom-right-radius:右下角的圆角半径；
border-bottom-left-radius:左下角的圆角半径；

九、flex布局

https://www.cnblogs.com/liuXiaoDi/p/12874589.html
在这里插入图片描述
十、CSS样式

background：url("../img/test.jpg")

十一、页面布局（圣杯布局、双飞翼布局）

十二、垂直居中

/* 文字居中 */
<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #span {
        display: flex;
        width: 300px;
        height: 300px;
        background-color: chartreuse;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
<body>
<div id="box">
  <div id="span">aa</div>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        height: 100vh;
        width: 100vw;
        position: relative;
      }
      #span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 300px;
        transform: translate(-50%, -50%);
        background-color: chartreuse;
        text-align: center; /* 文字居中 */
      }
    </style>
  </head>
<body>
<div id="box">
  <div id="span">aa</div>
</div>
</body>
</html>