深入CSS ｜ 青训营

Luc4s
81 阅读4分钟

CSS简介

CSS 是层叠样式表( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。

CSS布局的几种方式

1 table 布局

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>CSS 布局</title> 
</head> 
<style>
.container{ 
    height:200px;
    width: 200px;
}
.left{ 
    background-color: blue
} 
.right{
    background-color: yellow 
} 
</style> 
<body>
    <table class=container> 
        <tbody>
            <tr>
                <td class=left> 1 </td> 
                <td class=right> 2 </td> 
            </tr>
        </tbody> 
    </table> 
</body> 
</html>

效果如下

image.png

2 定位布局

通过设置position属性的不同值，实现四种类型定位

（1） static

默认属性值，实现静态定位，就是元素按照普通流布局

（2） relative

相对定位，设置元素相对于它在普通流中的位置偏移

（3） absolute

绝对定位，元素会基于相对于距离它最近的那个已定位的祖先元素偏移某个距离。

如果元素没有已近定义的祖先元素，那么它的偏移位置相对于最外层的包含框

（4） fixed

固定定位，元素相对于浏览器窗口偏移某个位置，且固定不动，不会随着网页移动而移动

3 flex 布局

3.1 盒模型

一个盒子的占用空间是：content+padding+border+margin。

3.2 display/position

display的值有
● block（元素表现为块级元素，有固定的宽高，独占一行）
● inline（元素表现为行内元素，不能设置宽高）
● inline-block（对外表现为行内元素，对内表现为块级元素）

position的值有：
● static （默认情况，存在文档流中）
● relative：（根据元素本身原来所处的位置偏移，不会改变布局的计算）
● absolute：（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的relative或者absolute定位元素）
● fixed：（绝对定位，脱离文档流，相对于的是屏幕，这个是固定在一定的位置，但是absolute元素是离开相应的位置就看不见了）

position的层叠是按顺序层叠的，不过可以通过设置z-index来改变层叠的顺序，只有relative，absolute，fixed是可以设置z-index。

3.3 flexbox 布局

flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
.container{
    height:200px;
    width: 200px;
    display: flex
}
.left{
    background-color: lightblue; 
    flex: 1;
}
.middle{
    background-color: lightgoldenrodyellow; 
    flex: 1;    
}
.right{
    background-color: lightpink;
    flex: 1;
}
</style>
<body>
    <div class=container>
        <div class=left></div>
        <div class=middle></div>
        <div class=right></div>
    </div>
</body>
</html>

效果如下

image.png

如果需要定义两边定宽，中间自适应，写法如下：

.left{
    background-color: lightblue; 
    width: 20px;
}
.middle{
    background-color: lightgoldenrodyellow; 
    flex: 1;    
}
.right{
    background-color: lightpink;
    width: 20px;
}

效果如下

image.png

4 float 布局

浮动元素是脱离文档流的，但不脱离文本流，相当于 word 里面图片环绕的方式是文字环绕的效果。

浮动盒子可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动设置

使用float属性设置盒子浮动。

  • float:none：盒子不浮动
  • float:left：盒子浮在父元素左边
  • float:right：盒子浮在父元素右边

浮动清除

使用clear属性清除元素的浮动

  • clear:left：在元素左侧不允许出现浮动元素
  • clear:right：在元素右侧不允许出现浮动元素
  • clear:both：在元素左右不允许出现浮动元素
  • clear:none：默认值，运行在左右两侧出现浮动元素

5 响应式布局

5.1 meta标签

<meta name="viewport" content="width=device-width, initial-scale=1">

其中，width = device-width 为使页面的宽度等于屏幕的宽度。

5.2 使用rem

rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

学习感受

css相对于html来说相对复杂，需要记录的知识点也比较多，今天一口气听完了深入css上篇和下篇，需要一段时间来消化知识，记笔记只是加深记忆的一种方法，重要的还是要加强理解，巩固知识。

avatar
文章
阅读
粉丝