CSS基础总结

最新推荐文章于 2022-04-29 10:45:43 发布
最新推荐文章于 2022-04-29 10:45:43 发布
阅读量338 收藏
点赞数 1
分类专栏： 前端 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61324100/article/details/124182562
版权

CSS简介

文章目录

1.CSS是什么

  • CSS是一种标记语言，CSS主要用于设置页面的文本内容(字体、大小、对齐方式)等、图片的外形(宽度、边框样式、边距)等以及版面的布局和外观显示的样式。

2.CSS的作用

  • CSS让我们的网页更加丰富多彩，布局更加灵活自如。

  • CSS可以美化HTML,让HTML更漂亮，让页面布局更简单。

一. CSS语法基础(一)

1.CSS主要部分结构**: 选择器、声明样式

2.CSS的语法规范:

  1. 选择器是用于指定样式的html标签，花括号内是对该对象设置的具体样式。

  2. 属性和属性值以"键值对"的形式出现。

  3. 属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。

  4. 属性和属性值之间用英文冒号分开。

  5. 多个键值对之间用分号进行区分。

    p {
            color: blue;
            font-size:20px;
        }

1. CSS选择器

1.选择器的分类

  • 选择器分为基础选择器和复合选择器两个大类。

  • 基础选择器是由单个选择器组成的。

  • 基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器。

2.选择器的作用

选择器就是根据不同需求把不同的标签选择出来。

1.1 标签选择器

html标签名作为选择器

  • 标签选择器可以把某一类标签全部选择出来。

  • 能快速为页面中同一类型的标签统一设置样式。

  • 不能设计差异化样式，智能选择全部的当前标签。

    <body>
    <p>段落</p>
    <div>盒子</div>
</body>

    p {
            color: aqua;
        }
div {
            color: blueviolet;
        }
1.2 类选择器

使用类名作为选择器

  • 差异化选择不同的标签，单独选1个或者多个标签。

  • 类选择器使用.进行表示，后面紧跟类名

  • 长名称的类名可以使用-来命名

  • 使用英文字母命名

    <body>
    <div class="blue">黑色毛衣</div>
    <div class="star-sing">七里香</div>
</body>

     .blue {
            color: blue;
        }
 .star-sing {
            color: chocolate;
        }

类选择器的多类名使用

  • 可以把一些标签相同的样式(公共部分)放到一个类里

  • 这些标签都可以调用这个公共得到类，然后再调用自己独有的类

    <body>
    <div class="box red">红色</div>
    <div class="box gree">绿色</div>
</body>

    .box {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
    font-size: 20px;
}

.gree {
    background-color: green;
    font-size: 30px
}
1.3 id选择器

使用id名作为选择器

  • id选择器可以为标有特定的HTML元素指定特定的样式

  • HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义

  • id属性只能在每个HTML文档中出现一次

    <body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>刘德华</div>
</body>

    #pink {
    color: pink;
}

id选择器和类选择器的区别

  • 类选择器就类似名字，一个名字可以有很多人同名。
  • id选择器就好比每个人的身份证号码，统一不重复。
  • id选择器和类选择器最大的不同在于使用的次数上。
  • 类选择器在修改样式中使用最多，id选择器一般用于页面唯一的元素上，经常和js搭配使用。
1.4 通配符选择器

  • 通配符选择器使用 * 来定义，表示选取页面中所有的元素(所有的标签)

  • 通配符选择器不需要调用，自动就给所有的元素使用样式

  • 特殊情况下才会用到，例如:清除所有的元素标签的内外边距

    * {
  margin: 0;
  padding: 0;
}

2. CSS字体属性

  • 定义字体系列，大小粗细，文字样式等。

  • font: weight | size | style | family | …

2.1 font-weight 设置字体粗细

  • font-weight: nomal(默认值) | boder

  • font-weight: 400/700

  • 400等同于nomal(默认值) 不加粗

  • 700等同于boder 加粗

  • 开发中推荐使用数字

    h2 {
            font-weight: 400;
            /* font-weight: normal; */
        }
.bold {
            font-weight: 700;
            /* font-weight: bold; */
        }
2.2 font-size 设置字体大小

  • 一般情况下可以给body指定整个页面文字的大小

  • 标题标签比较特殊，需要单独指定文字大小

    body {
	font-size: 18px;
}
2.3 font-style 设置字体风格

  • font-style: nomal(默认值) | italic(斜体)

  • 平时很少给文字加斜体，反而要给斜体标签em改为不倾斜字体

    p {
            font-style: italic;
        }
em {
            font-style: normal;
        }
2.4 font-family 设置字体系列

  • 可以使用中文，推荐使用英文，可以定义多个，默认从第一个开始用,没有则下一个

  • 多个单词组成的字体可以用引号

  • 在开发中经常定义在body标签里

    h2 {
            font-family: '微软雅黑'
        }
body {
            font-family: '宋体','Microsoft Yahei',tahoma,arial, 'Hiragino Sans GB';
        }
2.5 字体属性的复合写法
  • font: font-style font-weight font-size font-family
  • 一定要按照这个格式顺序来写，空格分隔
  • 若都是默认值,也必须保留font-size和font-family
font: italic 700 16px 'Microsoft yahei'

3. CSS文本属性

  • CSS 文本属性可定义文本的外观。
  • 比如文本颜色，文本对齐、文本装饰、文本缩进、行间距等
3.1 color 设置文本颜色

  • color: 单词名称 | 16进制 | rgb形式

  • 开发中最常用的是16进制形式

      div {
            /* color: red; */
            color: #ff008c;    
            /* color: rgb(76, 0, 255); */
            
        }
3.2 text-align 设置文本对齐

  • text-align: left | center | right

  • 文本对齐有三种方式:左对齐，右对齐，居中对齐

    h3 {
            text-align: center;
        }
3.3 text-decoration 设置文本装饰

  • text-decoration: none | underline | overline | line-through

  • 装饰文本:最常用就是下划线和默认无线。上划线和删除线不常用

    h1 {
            text-decoration: underline;
        }
a {
            text-decoration: none
        }
3.4 text-indent 设置文本缩进

  • text-indent: 像素 | 距离

  • 可指定缩进像素,也可指定2em，缩进两个文字大小的距离 em是相对单位，相对当前字体大小来缩进

    p {
            /* text-indent: 20px; */
            text-indent: 2em;
        }
3.5 line-height 设置文本行间距

  • line-height: 像素

  • 文本行间距:文本高度、上间距、下间距组成

  • 文字行高等于盒子高度可以让盒子内元素垂直居中

       p {
            line-height: 25px;
        }

4. CSS的引入方式

按照CSS样式书写的位置，CSS样式表可以分为三大类:
1.内部样式表(嵌入式)
2.行内样式表(行内式)
3.外部样式表(链接式)

4.1 内部样式表
  • 写到html页面内部。是将所有的CSS代码取出来，单独放到<style>标签中。
  • <style>理论上可以放到HTML文档的任何地方，但一般会放在<head>中。
  • 通过此种方式，可以方便控制当前整个页面的元素样式设置。
  • 代码结构清晰，但是并没有完全实现结构与样式完全分离。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <div>内部样式表</div>
</body>
</html>
4.2 行内样式表

  • 行内样式表适合修改样式比较简单、比较少的情况下

  • 直接在标签中用style="属性:属性值"

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>

    <div style="color: deeppink;font-size: 16px;">幸甚至栽歌以咏志</div>

</body>
</html>
4.3 外部样式表
  • 实际开发都是外部样式表，适合于样式比较多的情况
  • 样式单独写到CSS文件中，之后再把CSS文件引入到HTML文件中使用

  1. 新建.css后缀的文件，把css代码写入到文件中

  2. 在HTML页面中通过link标签引入.css文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    
    <link rel="stylesheet" href="07_外部样式表之css文件.css">
</head>
<body>
    <div>HTML负责写HTML的代码,CSS负责只写CSS的代码</div>
</body>
</html>

5. 调试工具

1.chrom调试工具

  1. 打开调试工具 -chrom f12

  2. Elements 元素

  3. 左边是html，右边是css

2.使用chrom调试工具

  1. ctrl+滚轮 放大代码大小
  2. 右边的css样式可以改动数值(键盘上下键或者直接输入)和查看颜色
  3. ctrl +0 复原浏览器大小
  4. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
  5. 如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误

二. CSS语法基础(二)

1. Emmet语法

  • 使用缩写形式，提高html,css的编写速度,vscode已经继承该语法
1.1 快速生成html结构语法

1.标签名+tab div tab
2.标签名+数字 div*5
3.父子关系 ul>li
4.兄弟关系 div+span
5.如果带有类名或者id名,直接.pcc 或者 #phh tab键
6.若生成的div类名是由顺序的，可以用自增符号$
7.如果想要在生成的标签内部写内容，则{}

1.2 快速生成css结构语法

1.可以写属性提示后tab
2.可以变态快速，如:w100 h100 lh26

1.3 快速格式化代码的使用

1.格式化文档-shift+alt+f
2.设置-搜emmet.include
3.settings.json【用户】下配置:
"editor.formatOnType":true,
"editor.formatOnSave":true
设置一次，以后crl+s保存自动就格式化了

2. 复合选择器

  • 复合选择器是建立在基础选择器之上的

  • 更高效、准确的目标元素(标签)

  • 由两个或者多个基础选择器，通过不同的方式组合而成

  • 常用复合选择器包括:后代选择器，子元素选择器，并集选择器，伪类选择器等

2.1 后代选择器

  • 有包含关系,层层选择

  • 任何形式的选择器都可以作为后代选择器

    ul li {
            color: red;
        }

ul li a {
            color: green;
        }

.ol2 li a {
            color: blueviolet;
        }
2.2 子元素选择器

  • 只能选择最近一级子元素

    div>a {
            color: red;
        }
2.3 并集选择器

  • 可以选择多组标签，同时为他们定义相同的样式。

  • 通常用于集体声明。

  • 任何形式的选择器都可以作为并集选择器。

    div,
p {
            color: red;
        }

div,
p,
.home li {
            color: red;
        }
2.4 伪类选择器
  • 用于向某些选择器添加效果，比如给链接添加效果
  • 用 : 来表示

1. 链接伪类选择器

  1. a:link 选择未访问过的连接

  2. a:visited 选择所有已访问过的链接

  3. a:hover 鼠标位于其上的链接

  4. a:active 选择活动链接(鼠标按下未弹起的链接)

    a:link {
            color: #333;
            text-decoration: none;
        }

a:visited {
            color: orange
        }

a:hover {
            color: aqua;
        }

a:active {
            color: red;
        }

    开发中最常用的格式

    a {
	text-decoration: none;
        }
a:hover {
	color: aqua;
	text-decoration: none;
        }

    链接伪类注意事项:
    1.lvha顺序
    2.因为链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

2. focus伪类选择器

  • 用于获得光标的表单元素

    input:focus {
            color: aqua;
        }

3. CSS的显示模式

3.1 块元素

常见的块元素:h1~h6,div,p,ul,ol,li等

块元素的特点:

  • 独占一行

  • 可控制高度，宽度，内外边距

  • 宽度默认是容器(父级宽度)的100%

  • 是一个容器及盒子，里面可以放行内或者块级元素

    div {
            width: 300px;
            height: 300px;
            background-color: darkorange;
        }

    注意: 文字元素不能放块级元素,如p元素不能放div元素。

3.2 行内元素

常见的行内元素有: a, strong, b, em, i, del, s, ins, u, span等

行内元素的特点:

  • 相邻行内元素在一行上，可以显示多个

  • 宽、高设直接置是无效的

  • 默认宽度就是它本身内容的宽度

  • 行内元素只能容纳文本或其他行内元素

    strong {
            background-color: blueviolet;
        }

span {
            background-color: orangered;
        }

    注意:
    1.链接里面不能再放链接
    2.特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

3.3 行内块元素

常见行内块元素: input, img, td, textarea

同时具有块元素和行内元素的特点

行内块元素的特点:

  • 和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可显示多个

  • 默认宽度就是它本身容器的宽度

  • 宽度，行高，内外边距都可以设置

      input {
            width: 249px;
            height: 35px;
        }
3.4 显示模式转换

特殊情况下 一个元素的显示模式需要另一种模式的特性时 比如想让<a>触发范围–元素模式转换

  • 转换为块元素: display: block

  • 转换为行内元素: display: inline

  • 转换为行内块元素: display: inline-block

    a {
            width: 300px;
            height: 200px;
            display: block;
        }

4.CSS背景属性

背景属性可以设置背景颜色、背景图片、背景平铺，背景图片位置、背景图像固定等

background: background-color | background-image | background-repeat | background-attachment | background-position

4.1 设置背景颜色

  • background-color: transparent(默认透明) | color

    div {
            background-color: pink;
        }
4.2 设置背景图片

  • background-image: none(默认) | url(url)

    div {
            background-image: url(images/logo.png);
        }
4.3 设置背景平铺

  • background-repeat: repeat | no-repeat | repeat-x | repeat-y

    repeat 平铺(默认)
    norepeat (不平铺)
    repeat-x (沿x轴平铺)
    repeat-y (沿y轴平铺)
    可以既有背景颜色又有背景平铺

    div {
            background-repeat: no-repeat;  
        }
4.4 设置背景图片位置

  • background-position: x y

    可以使用方位名词或者精确单位
    length 百分数|由浮点数字和单位标识符组成的长度值

1.参数是方位名词

  • background-position: top | center | bottom | left |right

    如果指定的两个值都是方位名词，则两个值前后顺序无关 如left top和 top left
    如果只指定了一个方位名词，另一个值省略，则第二个值默认居中

    div {
            background-position: left center;
        }

2.参数是精确单位

  • background-position: px px

​ 第一个肯定是x坐标，第二个一定是y坐标

​ 如果只指定一个数值，那么数值一定是x坐标，另一个默认垂直居中

div {
            background-position: 100px 10px;
            /* background-position: 100px;  只指定一个值，数值一定是x坐标，y坐标默认为center*/
        }

3.参数是混合单位

  • background-position: px 方位名词

    如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标

     div {
            background-position: 100px center;
        }
4.5 设置背景图像固定

background-attachment属性设置背景图像是否是固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动效果

  • background-attachment: scroll(默认)|fixed

    scroll 背景图像随对象内容滚动
    fixed 背景图像固定

    body {
            background-attachment: fixed;
            /* background-attachment: scroll;  滚动(默认)*/
        }
4.6 背景属性复合写法

background: 背景颜色 背景图像 背景平铺 背景图像滚动 背景图片位置

一般按照此约定的顺序

body {
            /* 背景属性复合写法 */
            background: pink url(images/bg.jpg) no-repeat fixed top;

        }
4.7 背景半透明

CSS3为我们提供了背景颜色半透明的效果

div {
           background: rgba(0, 0, 0, 0.2);      
        }

最后一个参数是alpah透明度，取值在0~1之间
注意:背景半透明是指盒子背景半透明，盒子里面的内容并不收影响

三. CSS的三大特性

CSS三大特性: 层叠性,继承性，优先级

1. 层叠性

相同选择器给设置相同的样式，此时样式就会层叠(覆盖)另一个冲突的样式

层叠性原则:

  • 样式冲突，就近原则

  • 样式不冲突的，不会层叠

    <body>
    <div>长江后浪推前浪，前浪死在沙滩上</div>
</body>

    div {
            color: red;
            font-size: 30px;
        }

        div {
            color: pink;
        }
2. 继承性

子标签会继承父标签的某些样式，如文字颜色和字号。

使用继承性可以简化代码，降低css样式的复杂性。

<div>
        <p>长江后浪推前浪</p>
    </div>

div {
            color: red;
            font-size: 30px;
        }
3. 优先级

  • 当同一个元素指定了多个选择器，就会有优先级的产生

  • 选择器相同，则执行层叠性

  • 选择器不同，则根据选择器权重执行

  • 继承和*<元素选择器<类、伪类选择器<id选择器<行内样式选择器<!important

    1. 继承 或者 * 0000

    2. 元素选择器 0001

    3. 类、伪类选择器 0010

    4. id选择器 0100

    5. 行内样式style=" " 1000

    6. !important 无穷大

    <body>
    <div class="nav" id="emo" style="color: turquoise;">你笑起来真好看</div>
</body>


    div {
            color: red;
        }

        .nav {
            color: orange;
        }

        * {
            color: blue !important;
        }

        #emo {
            color: green;
        }

  • 继承权重注意事项：

  • 继承的权重是0，不管父元素的权重多高，子元素得到的权重都是0

    <body>
    <div id="nav">
        <p>你笑起来真好看</p>
    </div>
    <a href="#">www.baidu.com</a>
</body>

    #nav {
            color: red;
        }
        
 p {
            color: pink;
        }

body {
            color: purple;
        }

  • 权重的叠加

​ 如果是复合选择器 就会有权重的叠加，需要计算权重

<ul class="nav">
        <li>蓝天</li>
</ul>


ul li {		/* 0001 + 0001 = 0002 */
            color: blue;
        }

        
.nav li {	/* 0010 + 0001 = 0011 */
            color: deeppink;
        }

        
li {		/* 0001 */
            color: red;
        }

四.CSS三大布局方式

网页布局三大核心:盒子模型、浮动、定位

1.盒子模型

盒子组成：盒子边框、盒子内容，内边距，外边距

网页布局的过程:

  1. 先准备好相关的网页元素，网页元素基本都是盒子。
  2. 利用CSS设置好盒子样式，然后摆放到相应位置。
  3. 往盒子里面装内容。

网页布局的本质:

利用CSS摆盒子

1.1 盒子边框

盒子边框可以设置边框宽度、边框样式、边框颜色。

boder: boder-weight | boder-style | boder-color

  • boder-width: px;

  • boder-style: solid | dashed | dotted

  • boder-color: 颜色;

      div {
            /* 边框宽度 */
            border-width: 5px;
            /* 边框样式 */
            border-style: solid;
            /* 边框颜色 */
            border-color: pink;
        }

盒子边框一共有四条边:

  • boder-top、boder-bottom、boder-left、boder-right

复合写法:

  • boder: boder-width boder-style boder-color;

    div {
            border: 5px dashed blue;
        }

表格细线边框: 将相邻的两个边框合并到一起。

boder-callapse: collapse;

边框会影响到盒子的实际大小

div {
            /* 实际要200*200的盒子（包含边框） */
            width: 180px;
            height: 180px;
            border: 10px solid blue;

        }

解决方案:
1.测量盒子大小的时候，不量边框
2.如果测量的时候也包含了边框，则需要width/height减去边框的宽度

1.2 盒子内边距

盒子cotent内容默认紧贴边框，此时可以设置内边距

  • padding: padding-top | padding-bottom | padding-left | padding-right

     div {
            width: 200px;
            height: 200px; 
            padding-top: 1px;
            padding-bottom: 1px;
            padding-left: 1px;
            padding-right: 1px;
        }

    padding复合写法:

    div {
            width: 200px;
            height: 200px;
            /*上下左右距离边框5px*/
            padding: 5px;
            /* 上下距离边框5px,左右距离边框10px*/
            padding: 5px 10px;
            /* 上距离边框5px 左右距离边框10px 下距离边框20px*/
            padding: 5px 10px 20px;
            /*上距离边框5px,右10px，下20px,左30px*/
            padding: 5px 10px 20px 30px;
        }

给盒子指定padding值:

1.内容和边框有了距离，添加了内边距
2.padding影响了盒子实际大小

  • 如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
  • 如果盒子本身没有指定width/height属性，则padding不会撑开盒子大小
div {
            /* 需求:添加20px内边距   盒子实际大小width/height是200px*/
            width: 160px;
            height: 160px;
            padding: 20px;
        }

解决方案:
如果保证盒子效果图大小保持一致，则让width/height减取多出来的内边距大小

padding影响盒子的好处:

  • 如果盒子中每个模块的字数不一样多
  • 给盒子设置同样的宽度不合理
  • 最好的解决方案是设置padding值 撑开盒子
  • 这样这些模块的距离都是相等的
1.3 盒子外边距

margin属性用于设置外边距。控制盒子与盒子之间的距离

  • margin: margin-top | margin-bottom | margin-left | margin-right

    div {
            margin: 20px;
        }

    margin复合写法:

    div {
            margin: 10px;
            margin: 20px 30px;
            margin: 10px 20px 30px;
            margin: 10px 20px 30px 40px;
        }
1.4 外边距的典型应用

块元素的水平居中:

1.必须设置有盒子的宽度

2.保证盒子的左右边距设置为auto

div {
	width: 200px;
	height: 100px;
	margin: 0 auto;
}

行内元素和行内块的水平居中:

行内元素和行内块元素水平居中的话给其父元素添加text-align

span {
	text-algign: center;
}

img {
	text-algign: center;
}

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的边距值

解决嵌套块元素垂直外边距的塌陷问题

  • 给父元素设置边框
  • 给父元素设置内边距
  • 给父元素添加 overflow: hidden
  • 浮动、定位，绝对定位的盒子不会有塌陷问题

清除内外边距:


* {
   padding: 0;
   margin:0
}

注意: 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距.但是装换为块级和行内块元素就可以了。

1.5 圆角边框

CSS3中新增了圆角边框样式，border-radius属性用于设置元素的外边框圆角

  • border-radius: length;
boder-radius: 10px;
/* 也可以用百分比
border-radius: 20%; */

圆角边框四个角:

.radius {
            width: 200px;
            height: 200px;
           	border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 40px;
        }

圆角边框复合写法:

.radius {
            width: 200px;
            height: 200px; 
            /* 顺时针代表每个角 */
            border-radius: 10px 20px 30px 40px;
        }
1.6 盒子阴影

CSS3中新增了盒子阴影
box-shadow: h-shadow | v-shadow | blur | spread | color | inset;

  • h-shadow 水平阴影的位置

  • v-shadow 垂直阴影的位置

  • blur 模糊度

  • spread 模糊范围

  • color 颜色

  • inset 将外部阴影(默认)改为内部阴影

    
div:hover {		/* 原先盒子没有影子，鼠标移到盒子有影子 */
            box-shadow: 10px 10px 10px -2px rgba(0, 0, 0, .3);
        }

注意:
1.默认的是外阴影(outset) ，但是不可以写这个单词，否则无效。
2.盒子阴影不占空间，不会影响到其他盒子排列。
3.设置阴影的话前两个值必写。其他可选。

1.7 文字阴影

text-shadow: h-shadow | v-shadow | blur color;

div {
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }

2. 浮动

float: none | left | right

浮动的特性:

  • 脱离标准流(脱标)

  • 一行内显示并且元素顶部对齐

  • 具有行内块元素的特性

  • 不占有位置

    1.任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后会具有行内块元素相似的特性。
    2.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动以后，它的宽度根据内容来决定。
    3.浮动的盒子中间是没有缝隙的，是紧紧挨着。

  • 浮动元素经常和标准流父级搭配使用

  • 为了约束浮动元素位置，我们网页布局一般财局的策略是:

  • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

2.1 定义浮动
float: left;
2.2 清除浮动

为什么要清除浮动?

  • 由于父级盒子很多情况下(例如产品很多时)，不方便给高度，但是子盒子浮动又不占有位置。

  • 因此当父级盒子高度为0时，就会影响下面的标准流盒子。

  • 由于浮动元素不再占用源文档流的位置，所以它会对后面的元素排版产生影响。

清除浮动的本质:

  • 清除浮动的本质就是清除浮动元素造成的影响。

  • 如果父盒子本身有高度，则不需要清除浮动。

  • 清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的策略:

  • 闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

清除浮动的三种方式:

1.额外标签法

<div class="clear"></div>

.clear {
            clear: both;
        }

2.overflow

overflow: hidden;

3.after伪元素法

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

4.双伪元素法

.clearfix:before,
.clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

3. 定位

定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

  • 定位的方式：静态定位、相对定位、绝对定位、固定定位、粘性定位。
3.1 静态定位

  • 静态定位是元素的默认定位方式

  • 静态定位在布局时很少用到

    position: static;
3.2 相对定位

  • 相对定位是元素在移动位置的时候，相对于它原来的位置来说的。

  • 不脱离标准流

    position: relative;
3.3 绝对定位

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

  • 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级有定位的祖先元素作为参考

  • 绝对定位不再占有原先的位置(脱标)

  • 一般都是子绝父相

    position: absolute;
3.4 固定定位

  • 固定定位是元素固定在浏览器可视区的位置。

  • 应用场景：可在浏览器页面滚动的时候元素的位置不会改变。

  • 固定定位脱离标准流

    positon: fixed

    固定定位小技巧：固定在版心右侧位置
    1.让固定定位的盒子left: 50% 走浏览器可视区的一半位置
    2.让固定定位的盒子margin-left: 版心宽度的一半距离 走版心宽度的一半位置

3.5 粘性定位
  • 相对定位和固定定位的混合
  • 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  • 粘性定位占有原先的位置(相对定位特点)
  • 必须添加top、left、right、bottom其中一个才有效
  • 跟页面滚动搭配使用。兼容性较差。ie不支持
position: sticky;
top: 0;
3.6 定位的叠放顺序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序

只有定位的盒子才会有z-index属性

z-index: 1;

默认是auto 数值越大，盒子越靠上。

3.7 绝对定位的居中
.box {
            position: absolute;
            width: 200px;
            height: 200px;
            /* 水平居中 */
            left: 50%;
            margin-left: -100px;
            /* 垂直居中 */
            top: 50%;
            margin-top: -100px;
            background-color: deeppink;
            /* margin: 0 auto; */
        }

定位特殊特性:

  • 绝对定位和固定定位也和浮动类似。
  • 行内元素添加绝对或者固定定位，可以直接设置宽度和高度
  • 块级元素添加绝对或者固定定位，如果不给宽度高度，默认大小是内容的大小。
  • 脱标的盒子不会触发外边距塌陷
  • 浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题

定位与浮动元素的区别:

  • 绝对定位(固定定位)会完全压住盒子:
  • 浮动元素不同，只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字
  • 绝对定位(固定定位)会压住下面标准流所有的内容
  • 浮动之所以不会压住文字，因为浮动产生的目的最初就是为了做文字环绕效果。
  • 定位最大的特点就是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位
3.8 元素的显示与隐藏

1.display属性

display属性用于设置一个元素如何显示

  • display: none | block

    display: none;

    display隐藏元素后，不再占有原来的位置

    display: block; 除了转换为块级元素之外，同时还有显示元素的意思

2.visibility属性

visibility属性用于指定一个元素应可见还是隐藏

  • visibility: visible(可见) | hidden

    visibility: hidden;

    visibility隐藏元素后，继续占有原来的位置

3.overflow属性

over属性指定了如果内容溢出一个元素的框，会发生什么

  • overflow: visible | hidden | scroll | auto

    overflow: hidden

    一般情况下，我们都不想要溢出的内容显示出来，因为溢出的部分会影响布局

五. CSS高级技巧

1.精灵图的使用

使用精灵图核心:

  1. 精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为sprites精灵图
  3. 移动背景图片位置，此时可以使用background-position.
  4. 移动的距离就是这个目标图片的x和y坐标。网页中的坐标有所不同
  5. 因为一般情况都是往上往左移动，所以数值是负值
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
background: url(images/sprites.png) no-repeat -182px 0;

2.字体图标的使用

  • 字体图标使用场景: 主要用于显示网页中通用、常用的一些小图标
  • 字体图标的下载: https://iconmoon.io

字体图标的引用:

/* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?nqdbnz');
            src: url('fonts/icomoon.eot?nqdbnz#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?nqdbnz') format('truetype'),
                url('fonts/icomoon.woff?nqdbnz') format('woff'),
                url('fonts/icomoon.svg?nqdbnz#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
        }

3.CSS三角

设置CSS三角，要让让盒子宽度高度都为0

width: 0;
height: 0;
border: 10px solid pink;

4.用户界面样式

  1. 鼠标样式

  • cursor: default | pointer | move | text | not-allowed

    cursor: default;

  • default: 默认的鼠标样式

  • pointer: 鼠标小手

  • move: 鼠标移动

  • text：鼠标文本样式

  • not-allowed：鼠标禁止样式

  1. 取消表单轮廓
outline: none;
  1. 取消文本域拖拽
resize: none;
  1. 图片、表单和文字对齐

​ 解决图片底部默认空白缝隙

​ 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

  • vertical-align: baseline | top | middle | bottom

    vertical-align: middle;

  • baseline: 基线对齐

  • top: 顶端对齐

  • middle: 居中对齐

  • bottom: 底部对齐

  1. 单行溢出文字显示省略号
white-space: nowrap;		/* 1.强制一行显示 */
overflow: hidden; 			/* 2.溢出隐藏 */
text-overflow: ellipsis;	/* 3.溢出的部分用省略号显示 */
  1. 多行溢出文字显示省略号
overflow: hidden;			
text-overflow: ellipsis;
display: -webkit-box;			/* 弹性盒子模型显示 */
-webkit-line-clamp: 3;			/* 第三行文本溢出显示省略号 */
-webkit-box-orient: vertical;	/* 文本内容垂直居中 */
  1. margin负值的巧妙运用

​ 实现1+1 = 1 的效果

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 120px;
            border: 1px solid red;
            /* 让每个盒子margin往左侧移动-1px正好压住相邻盒子边框 */
            margin-left: -1px;
        }
  1. 文字围绕浮动的妙用
  • 给盒子添加浮动时，文字会围绕浮动元素
  • 添加了浮动并不会把文字给压住
  1. 行内块元素的妙用

  • 行内块元素本身自带点距离 然后又可设置宽高，父元素只要text-align: center后

  • 里边的行内块元素都水平居中对齐。

  1. CSS三角的巧妙运用
width: 0;
height: 0;
 /* 上下左边框颜色都为透明 */
border-color: transparent #fff transparent transparent;
  1. CSS初始化
  • 不同浏览器对有些标签的默认值时不同的，为了消除不同浏览器对HTML文本呈现的差异。照顾浏览器的兼容，所以要对CSS做初始化。

height: 0
border: 10px solid pink

4.用户界面样式

  1. 鼠标样式

  • cursor: default | pointer | move | text | not-allowed

    cursor: default;

  • default: 默认的鼠标样式

  • pointer: 鼠标小手

  • move: 鼠标移动

  • text：鼠标文本样式

  • not-allowed：鼠标禁止样式

  1. 取消表单轮廓
outline: none;
  1. 取消文本域拖拽
resize: none;
  1. 图片、表单和文字对齐

​ 解决图片底部默认空白缝隙

​ 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

  • vertical-align: baseline | top | middle | bottom

    vertical-align: middle;

  • baseline: 基线对齐

  • top: 顶端对齐

  • middle: 居中对齐

  • bottom: 底部对齐

  1. 单行溢出文字显示省略号
white-space: nowrap;		/* 1.强制一行显示 */
overflow: hidden; 			/* 2.溢出隐藏 */
text-overflow: ellipsis;	/* 3.溢出的部分用省略号显示 */
  1. 多行溢出文字显示省略号
overflow: hidden;			
text-overflow: ellipsis;
display: -webkit-box;			/* 弹性盒子模型显示 */
-webkit-line-clamp: 3;			/* 第三行文本溢出显示省略号 */
-webkit-box-orient: vertical;	/* 文本内容垂直居中 */
  1. margin负值的巧妙运用

​ 实现1+1 = 1 的效果

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

ul li {
            list-style: none;
            float: left;
            width: 100px;
            height: 120px;
            border: 1px solid red;
            /* 让每个盒子margin往左侧移动-1px正好压住相邻盒子边框 */
            margin-left: -1px;
        }
  1. 文字围绕浮动的妙用
  • 给盒子添加浮动时，文字会围绕浮动元素
  • 添加了浮动并不会把文字给压住
  1. 行内块元素的妙用

  • 行内块元素本身自带点距离 然后又可设置宽高，父元素只要text-align: center后

  • 里边的行内块元素都水平居中对齐。

  1. CSS三角的巧妙运用
width: 0;
height: 0;
 /* 上下左边框颜色都为透明 */
border-color: transparent #fff transparent transparent;
  1. CSS初始化
  • 不同浏览器对有些标签的默认值时不同的，为了消除不同浏览器对HTML文本呈现的差异。照顾浏览器的兼容，所以要对CSS做初始化。
PanCc220
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础入门总结（很详细的哟）
10-25
一、CSS语法规范 二、CSS选择器 （1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2）字体名称（字体系列） （3）字体粗细 （4）字体样式 （5）字体 四、CSS文本属性 （1）文本颜色 （2）文本对齐 （3）文本缩进 （4）文本修饰 （5）文本行高 五、CSS的引入方式 （1）行内样式表 （2）内部样式表 （3）外部样式表 六、CSS的综合案例
CSS基础学习总结（1）
JavaAlliance
05-22 5396
CSS基础学习总结（1） 一、引入CSS样式表（书写位置） 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head&g...
css 基础总结
没有如果的博客
10-10 311
css样式学习 一. 位置和布局 1. 相对定位：relative 用途： 就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 特性： 不脱离标准文本流,真实位置是在老家,只不过影子出去了,可以到处飘. 移动: 可以用left,right来描述盒子右,左的移动，可以用top,bottom来描述盒子的下,上的移动. position:relative; left
html+css基础总结（思维导图）
02-20
HTML和CSS基础知识点总结（xmind编辑的思维导图）
css基础知识总结-学习
最新发布
12-02
CSS，全称Cascading Style Sheets，是一种用于描述HTML或...总之，CSS是构建网页样式的关键技术，掌握其基本概念和用法是Web开发的基础。通过合理利用选择器、属性和显示模式，我们可以创建出美观、响应式的网页设计。
CSS样式的基础学习总结
09-25
【CSS样式的基础学习总结】 CSS，全称Cascading Style Sheets，中文译为级联样式表，是一种用于描述HTML或XML文档（包括如SVG、MathML等各种XML方言）外观和格式的语言。它允许我们将样式信息与结构化内容分离，...
css基础总结
抛弃幻想，准备斗争
02-27 156
语法 Id 和 Class选择器 创建 Backgrounds(背景) Text(文本) Fonts(字体) 链接(link) 列表样式(ul) Table(表格) 盒子模型 Border(边框) 轮廓（outline）属性 margin(外边距) padding（填充） 分组和嵌套 尺寸 (Dimens...
[ CSS ] CSS基础总结
丹的博客
05-15 179
选择器的权重: *通用选择器 0 标签需选择器 1 类选择器 10 id选择器 100 行内样式 1000 CSS文本属性: 颜色: color 字体: font-family 行高: line-height 大小: font-size 加粗: font-wight 倾斜: font-style: italic 首行缩进:text-indet: 水平对齐:text-align: center 文字修饰: text-decoration: ...
【css】基础总结
WHUZXQ的博客
03-03 337
外边距与内边距1 元素的背景会延伸到内边距中，但不会延伸到外边距。 因此，为元素指定的内边距和外边距会影响元素的背景何时结束。 2 对元素的外边距设置百分数值，百分数是相对于父元素的width计算而来的(即使margin-top也是) 3 上下外边距，正常流中垂直相邻的外边距会合并， 4 外边距可以应用到行内元素，对行高没有任何影响，由于外边距是透明的，所以没有任何视觉效果，其原因就在于行内
CSS基础知识总结
Lotus_fragrance的博客
04-29 3279
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础学习总结
rotation博客
07-15 522
CSS概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 优点 样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的...
CSS基础知识点总结
renaway的博客
02-18 495
一、css的简介 1、什么是css 层叠样式表，css是对html进行样式修饰语言 层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用 样式表：就是css属性样式的集合 2、css的作用 (1)修饰html的 使其html样式更加好看 (2)提高样式代码的复用性 (3)html的内容与样式相分离 便于后期维护 ...
CSS知识点
RiccDo的博客
06-03 216
CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。目的是为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。 ...
HTML前端与CSS基础总结
"这篇资料是关于在校学习HTML前端知识的总结，涵盖了HTML基本标签、CSS样式设置、JavaScript和jQuery的基础内容，以及相关的案例笔记。" HTML是超文本标记语言，用于构建网页结构，其常用标签包括： 1. `a`标签用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值