CSS笔记

无关风月1001

已于 2024-03-18 21:29:18 修改

阅读量1.7k

点赞数 30

文章标签： css 笔记前端

于 2024-03-18 21:21:06 首次发布

本文链接：https://blog.csdn.net/weixin_42979993/article/details/136822155

版权

CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明

选择器时指定css样式的html标签，花括号内是对该对象设置的具体样式

 	p {
      color: red;
      font-size: 12px;
    }
<body>
  <p>PPP</p>
</body>

属性和属性值以 “键值对” 的形式出现

CSS代码风格

①展开格式书写

②选择器、属性名、属性值关键字全部使用小写字母

③在属性值前面，冒号后面保留一个空格

④选择器(标签) 和大括号中间保留空格

CSS选择器

选择器就是根据不同需求把不同的标签选择出来，主要是选择标签用的

1.标签选择器

标签选择器（元素选择器）是指用html标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式

    标签名 {
      属性1: 属性值1;
      属性2: 属性值2;
    }

作用：标签选择器可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

2.类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器

    .类名 {
      属性1: 属性值1;
      属性2: 属性值2;
    }
    <div class="类名">类选择器</div>

语法：结构需要用class属性来调用class类的意思，命名规范参照类命名规则

**多类名：**给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签

    .red {
      color: red;
    }
    .font-size-12px {
      font-size: 12px;
    }
    
    <div class="red font-size-12px">类选择器-多类名</div>

在标签class属性中写多个类名
多个类名中间必须用空格分开

3.id选择器

id选择器可以为标有特定id的html元素指定特定的样式，一般和JavaScript搭配使用

html元素以id属性来设置id选择器，css中id选择器以"#" 来定义

    #id名 {
      属性1：属性值1；
      .......
    }
    <div id="id名">id选择器</div>

**注意：**id属性值只能在每个html文档中出现一次，样式#定义，结构id调用，只能调用一次

4.通配符选择器

在CSS中，通配符选择器使用"*"定义，表示读取页面中所有元素（标签）

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

    * {
      属性1: 属性值1；
      ..........
    }

特殊情况下才使用，如下述清楚所有元素标签的内外边距：

    * {
      margin: 0;
      padding: 0;
    }

CSS字体属性

1.字体属性

CSS中使用font-family属性定义文本的字体系列

    h2 {
      font-family: Arial, Helvetica, sans-serif;
    }
    p {
      font-family: 'Times New Roman', Times, serif;
    }

  <h2>h2hh2h2h2h2</h2>
  <p>ahlfafhshaksfagfaskgfo</p>
  <p>ahlhflaghalghagagaga</p>
  <p>shdkashfasghalghhalga</p>

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
一般都在body标签中添加一些常见字体属性

2.字体大小

CSS使用font-size属性定义字体大小

   p {
      font-size: 20px
    }

px大小是网页最常用单位
谷歌浏览器默认的字体大小是16px
不同浏览器可能默认显示的字号大小不一致，尽量给一个明确的大小，不要默认大小
可以给body指定整个页面文字的大小
标题标签比较特殊，需要单独指定文字大小

3.字体粗细

CSS中使用font-weight属性设置文本字体的粗细

    .bold {
      /* font-weight: bold; */
      /* 或 */
      font-weight: 700;
    }

700等价于 bold 都是加粗的效果，这个700后面不要跟单位，400等价于normal

实际开发中提倡使用数字表示加粗或者加细

4.文字样式

CSS中使用font-style属性设置文本的风格

    p {
      /* 斜体 */
      font-style: italic;
    }
    em {
      /* 让斜体变得正常 */
      font-style: normal;
    }

5.字体符合属性

   	div {
      font:font-style值 font-weight值 font-size值 font-family值;
    }
    案例：
    div {
      font-style: italic;
      font-weight: 700;
      font-size: 16px;
      font-family:  serif;
    } 
    等价于
    div {
      font: italic 700 16px 'Microsoft yahei';
    }

使用font属性时，必须按照上述语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family，否则font属性将不起做好用

CSS文本属性

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

1.文本颜色

    div {
      color: deepskyblue;
      color: #fff;
      color: rgb(255, 0, 255);
    }

文本颜色常用的三种表示形式有：预定义的颜色值、十六进制、RGB代码

2.对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

    div {
      text-align: 属性值;
    }

属性值有：left（默认）、right、center

3.装饰文本

text-decoration属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等

    div {
      text-decoration: 属性值;
    }

属性值有：none（默认）、underline（下划线）、overline（上划线）、line-through（删除线）

**注意：**a标签有默认的下划线，给其添加：text-decoration: none 可删除自带的下划线

4.文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

    /* 段落首行缩进20px */
	p {
      text-indent: 20px;
    }

em 是一个相对单位，就是当前元素（front-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

5.行间距

line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

设置 line-height 值等于 height 值可以设置垂直居中的效果

    /* 行间距26px */
    div {
      line-height: 26px;
    }

CSS的引入方式

1.内部样式表

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

style 标签理论上可以放在html文档的任何地方，但一般都会放在文档的 head 标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置，权重高
代码结构清晰，但是没有实现结构和样式的完全分离
使用内部样式表设定CSS，通常也被称为“嵌入式引入”

2.行内样式表

  <div style="color: red; font-size: 12px;">行内样式表</div>

style其实就是标签的属性
在双引号中间，写法要符合CSS规范
可以控制当前标签设置样式
不推荐一次对一个标签用这种方法写很多样式
使用行内样式表设定 CSS，通常也被称为行内式引入

3.外部样式表

实际开发中都是外部样式表，适合于样式比较多的情况，核心是单独写到css文件中，之后把css文件引入到html文件

/* style.css文件 */
div {
  color: lightcoral;
  font-size: 20px;
}

  <link rel="stylesheet" href="style.css">

ref：定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet” ，表示被链接的文档是以一个样式表文件
href：样式所链接外部样式文件的URL，可以是相对路径，也可以是绝对路径
使用外部样式表设定css，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

Emmet语法

生成标签，直接输入标签名按tab键即可
如果想要生成多个相同的标签，后面加上 *和数字
如果有父子级关系的标签，用 >
如果有兄弟关系的标签，用 +
如果生成带有类名或id名字的标签，直接写 .类名或者 #id名即可
如果生成的div类名是有顺序的，可以用自增符号$
如果想要在生成的标签内部写内容可以用{ }表示

CSS复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的

复合选择器可以更准确、更高效的选择目标元素
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1.后代选择器

后代选择器又称包含选择器，可以选择父元素里面的子元素。其写法为把外层标签写在前面，内层标签写在后面，中间用空格分隔开，当标签发生嵌套时，内层标签就成为外层标签的后代

    /* 只有ul里面的li标签会变成浅蓝色 */
    ul li {
      color: lightblue;
    }
	/* 只有ul里面的li标签里面的span标签会变成红色 */
    ul li span {
      color: red;
    }
	/* 只有nav类里面的li标签里面的span标签会变成红色 */
    .nav li span {
      color: pink;
    }

  <ul>
    <li><span>red</span></li>
    <li>lightblue</li>
    <li>lightblue</li>
  </ul>
  <ul class="nav">
    <li><span>pink</span></li>
    <li>lightblue</li>
    <li>lightblue</li>
  </ul>

父元素名和子元素名之间必须用空格隔开
最终更改的样式的只有子元素标签里的内容
后面的元素不仅可以是子元素，也可以是子元素的子元素，只要是前面元素的后代即可
不必须是标签名，用类名也可以

2.子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是亲儿子选择器

   	/* 元素1>元素2 { 样式声明 } */
	div>a {
      color: lightblue;
    }

  <div class="nav">
    <a href="">浅蓝色</a>
    <p><a href="">默认颜色</a></p>
  </div>

元素1和元素2中间用 > 隔开
元素1是父级元素，元素2是子级元素，最终选择的是元素2
元素2必须是直接子元素，除了直接子元素以为的后代元素都不会受影响

3.并集选择器

并集选择器可惜选择多组标签，同时为他们定义相同的样式，通常用于集体声明

并集选择器是各选择器通过英文逗号 ( , ) 链接而成，任何形式的选择器都可以作为并集选择器的一部分

    /* 元素1,元素2 { 样式声明 } */
    div>a {
      color: lightblue;
    }

元素1和元素2中间用逗号隔开
并行选择器常用于集体声明

4.伪类选择器

伪类选择器适用于某些向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素

伪类选择器书写的最大特点是用冒号：表示，比如: hover、 : first-child

    /* 未访问的链接 a:link {} 把没有点击(访问)过的链接选出来*/
    a:link {
      color: red;
    }
    /* 未访问的链接 a:visited {} 已经访问过的链接选出来*/
    a:visited {
      color: lightsalmon;
    }
    /* 未访问的链接 a:visited {} 当前鼠标经过的链接选出来*/
    a:hover {
      color: plum;
    }
    /* 未访问的链接 a:visited {} 当前鼠标点击但未松开的链接选出来*/
    a:active {
      color: green;
    }

注意：

为了确保样式生效，请按照 L、V、H、A 的顺序声明
因为a链接在浏览器中具有默认样式，所以我们实际开发工作中都要给链接单独指定样式
切记：两边不能有空格

5.:focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素，通常这个选择器用于表单中常用的标签，如 input 标签

    /* 把获得光标的input标签元素取出来 */
    input:focus {
      background-color: skyblue;
    }

CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，html元素一般分为块元素和行内元素两种类型

1.块元素

常见的块元素有 h1到h6、p、div、ul、ol、li等，其中 div 标签是最典型的块元素，块元素有以下特点：

自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

注意：

文字类元素内不能使用块级元素
p 标签主要用于存放文字，因此里面不能存放块级元素，特别是不能存放
元素
同理，h1 到 h6 都是文字类的块级标签，里面也不能放其他块级元素

2.行内元素

常见的行内元素有，，，，，，，，等

其中标签是最典型的行内元素，行内元素也称为内联元素，行内元素的特点：

相邻的行内元素都在一行上，一行可以显示多个
高度、宽度直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意：

链接里面不能再放链接
特殊情况链接里面可以放块级元素

3.行内块元素

在行内元素中有几个特殊的标签，、、，他们同时具有块元素和行内元素的特点，称为行内块元素

行内块元素有以下特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素特点）

4.元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解就是一个模式的元素需要另外一种模式的特性

    /* 给a标签设置宽和高，需要将其转换为块级元素 */
    a {
      display: block;
      height: 100px;
      width: 100px;
      background-color: skyblue;
    }
    /* 将div块级元素转换为行内元素,此时设置高和宽是无效的 */
    div {
      display: inline;
      /* height: 100px;
      width: 100px; */
      background-color: yellowgreen;
    }
    /* 将行内元素转换为行内块元素 */
    span {
      display: inline-block;
      height: 100px;
      width: 100px;
      background-color: sandybrown;
    }

CSS背景

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

1.背景颜色

    div {
      /* 背景颜色默认为transparent（透明） */
      /* background-color: transparent; */
      background-color: skyblue;
      width: 200px;
      height: 200px;
    }

2.背景图片

    div {
      /* background-image: none | url(); */
      background-image: url(../../background-img.png);
      width: 200px;
      height: 200px;
    }

3.背景平铺

    div {
      /* background-repeat: repeat | no-repeat | repeat-x | repeat-y; */
      background-repeat: repeat;
      background-image: url(../../background-img.png);
      width: 600px;
      height: 600px;
    }

4.背景图片位置

    div {
      /* background-position: x y; */
      background-position: 60px 60px;
      background-image: url(../../background-img.png);
      background-repeat: no-repeat;
      width: 500px;
      height: 500px;
    }

注意： x坐标和y坐标可以使用方位名词或者精确坐标：

length：20%、200px等
position：top | center | bottom | left | right 方位名词

5.背景图片估定（背景附着)

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

    div {
      /* background-attachment: fixed | scroll */
      background-attachment: fixed;
      background-position: 60px 60px;
      background-image: url(../../background-img.png);
      background-repeat: no-repeat;
      width: 500px;
      height: 2500px;
    }

6.背景符合写法

    div {
      background-color: black;
      background-attachment: fixed;
      background-position: 60px 60px;
      background-image: url(../../background-img.png);
      background-repeat: no-repeat;
      width: 500px;
      height: 2500px;
    }
    /* 两者等价 */
    div {
      background: black url(../../background-img.png) no-repeat fixed 60px 60px;
      width: 500px;
      height: 2500px;
    }

backgroud：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

6.背景颜色半透明

    div {
      background-color: rgba(0, 0, 0, .7);        
      width: 200px;
      height: 200px;
    }

最后一个参数alpha是透明度，取值范围在0~1之间
我们习惯把第三个参数 0.x 中的 0 省略掉，直接写为 .x
背景半透明是指盒子背景半透明，盒子里面的内容不受影响
只有 IE9+ 以上的版本才支持，但是实际开发中不需要考虑这个问题

CSS三大特性

1.层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，层叠性主要是用来解决样式冲突的

层叠性原则：

样式冲突遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突就不会层叠

2.继承性

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

恰当地使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式 text-、font-、line- 这些元素开头的可以继承，以及color属性

行高的继承性：

    body {
      /* 字体大小12px,行间距24px */
      /* font: 12px/24px 'Microsoft YaHei'; */

      /* 字体大小12px,行间距12*1.5=16px */
      font: 12px/1.5 'Microsoft YaHei'
    }

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素行高为1.5倍
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3.优先级

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

!important > 行内样式 > ID选择器 > 类选择器、伪类选择器 > 元素选择器 > 继承或者 *

    div {
      /* 优先级最高 */
      color: skyblue !important;
    }

  <!-- 显示为天蓝色 -->
  <div style="color:burlywood;">CSS优先级</div>

**权重叠加：**如果是复合选择器，则会有权重叠加，需要计算权重

	/* 复合选择器会有权重叠加的问题 */
    /* 权重虽然会叠加，但是永远不会有进位 */
    /* li 权重 0.0.0. */
    li {
      color: orange;
    }
    /* ul li 权重 0.0.0.1 + 0.0.0.1 = 0.0.0.2 */
    ul li {
      color: skyblue;
    }
    /* .nav li 权重 0.0.1.0 + 0.0.0.1 = 0.0.1.1 */
    .nav li {
      color: greenyellow;
    }

  <ul class="nav">
    <li>li标签</li>
    <li>li标签</li>
    <li>li标签</li>
  </ul>

盒子模型（Box Model）

盒子模型包括：border边框、content内容、padding内边距、margin外边距

1.border

常用属性包括边框的宽度、样式、颜色

    div {
      width: 200px;
      height: 200px;

      /* border-width 边框的粗细,一边情况下都用 px */
      border-width: 10px;

      /* border-style 边框样式 */

      /* 实线 */
      /* border-style: solid; */

      /* 虚线 */
      /* border-style: dashed; */

      /* 点线 */
      border-style: dotted;

      /* 边框颜色 */
      border-color: skyblue;
    }

边框的复合型写法：

    div {
      width: 200px;
      height: 200px;
      /* 边框的三个属性没有先后顺序 */
      border: 10px dotted skyblue;
    }

    div {
      width: 200px;
      height: 200px;
      /* 盒子的上下左右四个边可以分开写样式 */
      border-top: 10px dotted skyblue;
      border-bottom: 10px dotted coral;
      border-left: 10px solid palevioletred;
      border-right: 10px solid greenyellow;
    }

表格细线边框：

    td, th {
      border: 10px skyblue solid;
      /* 将两个相邻的边框合并在一起 */
      border-collapse: collapse;
    }

**注意：**边框会影响盒子实际大小

2.padding

    div {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      /* 上边框内边距20px */
      padding-top: 20px;
      /* 下边框内边距20px */
      padding-left: 20px;
    }

padding复合属性写法：

    div {
      width: 200px;
      height: 200px;
      background-color: skyblue;

      /* 上下左右都有5像素内边距 */
      padding: 5px;
      /* 上下内边距5px 左右内边距10px */
      padding: 5px 10px;
      /* 上内边距5px 左右内边距10px 下内边距20px*/
      padding: 5px 10px 20px;
      /* 上内边距5px 右内边距10px 下内边距20px  左内边距30px 按照顺时针方向*/
      padding: 5px 10px 20px 30px;
    }

注意：

padding影响盒子的实际大小
如果盒子没有设置 width 或者 height 那么设置 padding 则不会超出容器范围

3.margin

margin 用法和 padding 类似，都可以单独设置上下左右外边距，也可以用复合属性写法

块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件

盒子必须制定了 width
盒子左右的外边距都设置为 auto

    div {
      height: 200px;
      width: 400px;
      background-color: skyblue;
      margin: 0 auto;
    }

以上方法是让块级元素水平居中

如果想让行内元素或者行内块元素水平居中，则需给其父元素添加 text-align: center 即可

    div {
      height: 200px;
      width: 400px;
      background-color: skyblue;
      text-align: center;
    }

  <div>
    <span>span标签里面的文字</span>
  </div>

4.相邻块元素垂直外边距的合并

当上下相邻的两个元素快相遇时，如果上方元素块有margin-bottom，下方元素快有margin-top，

则两者间的距离取两个值中较大的一方的值而非两者之和

解决方案：尽量只给其中一个盒子加添margin值

5.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时子元素也有上外边距

此时父元素会塌陷比较大的外边距值，例如：

    .father {
      width: 400px;
      height: 400px;
      background-color: skyblue;
      margin-top: 50px;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: yellow;
      margin-top: 100px
    }

    <div class="father">
      <div class="son"></div>
    </div>

此时父元素距离顶部的值为 100px

解决方案：

可以为父元素定义边框
可以为父元素定义上内边距
可以为父元素添加 overflow: hidden （推荐）

    .father {
      width: 400px;
      height: 400px;
      background-color: skyblue;
      margin-top: 50px;
      /* 方法一 */
      /* border: 1px transparent solid; */

      /* 方法二 */
      /* padding: 1px; */

      /* 方法三 */
      overflow: hidden;
    }

6.清除内外边距

网页元素很多都自带默认的内外边距，而且不同浏览器默认值也不一致，因此布局前需要清除网页元素内外边距

    /* CSS中第一行 */
    * {
      padding: 0;
      margin: 0;
    }

**注意：**行内元素为了照顾兼容性，尽量只设置左右的内外边距，不要设置上下的内外边距，但是可以通过将其转换为块级元素和行内块元素解决

    * {
      padding: 0;
      margin: 0;
    }
    span {
      background-color: skyblue;
      margin: 20px;
    }

  <!-- 这里虽然设置了 margin: 20px ,但实际上下边距不会生效 -->
  <span>span标签的内容</span>

圆角边框、盒子阴影、文字阴影

1.圆角边框

border-radius 参数值可以为数值或者百分比的形式
该属性是一个简写属性，可以跟四个值，分表表示左上角、右上角、右下角、左下角

    div {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      /* border-radius: 10px 20px 30px 40px; */
      border-top-left-radius: 10px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 30px;
      border-bottom-left-radius: 40px;
    }

圆形：将圆角边框的值设置为长方形的一半或者直接用50%

    div {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      /* border-radius: 100px; */
      border-radius: 50%;
    }

圆角矩形：将圆角边框的值设置为长方形款或者高的一半

    div {
      width: 300px;
      height: 100px;
      background-color: skyblue;
      border-radius: 50px;
    }

2.盒子阴影

使用 box-shadow 属性可以为盒子添加阴影，语法：

    div {
      box-shadow: h-shadow v-shaow blur spread color inset;
    }

h-shadow ：必需，水平阴影的位置，默认正值放下为右，允许负值
v-shadow ：必需，垂直阴影的位置，默认正值方向为下，允许负值
blur ：可选，模糊程度
spread ：可选，阴影的距离
color ：可选，阴影的颜色
inset ：可选，将默认的外部阴影（outset）改为内部阴影

注意：

默认的是外阴影（outset），但是不可以写这个单词，负责会导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列

3.文字阴影

text-shadow 可以设置文字阴影

    div {
      text-shadow: h-shadow v-shaow blur color;
    }

h-shadow ：必需，水平阴影的位置，默认正值放下为右，允许负值
v-shadow ：必需，垂直阴影的位置，默认正值方向为下，允许负值
blur ：可选，模糊程度
color ：可选，阴影的颜色

浮动

网页布局的本质——用CSS来拜访盒子，把盒子摆放到相应位置

CSS提供了三种传统布局方式：

标准流（普通流/文档流）
浮动
定位

**网页布局第一准则：**多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

1.什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

语法：

选择器 { float: 属性值 }

none 元素不浮动
left 元素向左浮动
right 元素向右浮动

2.浮动特性

浮动元素会脱离标准流的控制，不再保留原来的位置，原来的位置会被其他标准流盒子所占有
浮动的元素会在一行内显示并且元素顶部对齐，中间是不会有缝隙的，多出的盒子再下一行显示
浮动元素元素只会压住下面标准流的盒子，不会压住下面标准流盒子里面的内容（文字图片）
浮动元素会具有行内块元素特性，不管原先是什么模式的元素，添加浮动以后具有行内块元素相似的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来显示
- 浮动的盒子中间是没有缝隙的，是紧挨着一起的
- 行内元素同理

3.浮动元素和标准流父级元素搭配

为了约束浮动元素的位置，我们网页布局一般采用的策略是：

**先用标准流的父元素排列上下左右位置，之后的内部子元素采取浮动排列左右位置，**符合网页布局第一准则

4.两个注意点

先用标准流的父元素排列上下位置，之后内部的子元素采取浮动排列左右位置
一个元素设置了浮动，理论上其余的兄弟元素也要设置浮动，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5.清除浮动

清除浮动的本质就是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了

选择器 { clear : 属性值 }

left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

注意：在实际工作中，几乎只用 clear ：both

清除浮动的策略是：闭合浮动，限制子盒子的浮动只在父元素内部发生作用，不影响父盒子外面的其他盒子

清除浮动的方法：

1.额外标签法

也称为隔墙法，是W3C推荐的做法

额外标签法会在浮动元素末尾添加一个空的块级元素标签，例如：

  <div style=" clear:both"></div>

优点：通俗易懂，书写方便
缺点：添加很多无意义的标签，结构化比较差

2.父级添加 overflow 属性

给父级元素添加overflow 属性，将其属性值设置为 hidden、auto、或 scroll

优点：代码简洁
缺点：无法显示溢出的部分

3.*父级添加 after 伪元素

: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;
    }

CSS书写顺序

建议遵循以下顺序：

1.布局属性：display、position、float、clear、visibility、overflow（建议display第一个写）

2.自身属性：width、height、margin、padding、border、background

3.文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word

4.其他属性（CSS3）：content、cursor、border-radius、box-shadow、text-shadow…

定位

1.定位组成

定位：将盒子定在某一个位置，所以定位也在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式用于之当一个元素在文档中的定位方式：

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

边偏移则决定了该元素的最终位置：top、bottom、left、right

2.静态定位

静态定位是元素默认的定位模式，无定位的意思

    div {
      position: static;
    }

静态定位按照标准流特性摆放位置，没有边偏移
静态定位在布局中很少用到

3.相对定位

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

    div {
      width: 200px;
      height: 200px;
    }
    .div1 {
      position: relative;
      background-color: skyblue;
      left: 300px;
    }
    .div2 {
      background: yellowgreen;
    }

  <div class="div1"></div>
  <div class="div2"></div>

相对定位的特点：

它是相对于自己原来的位置来移动的
原来在标准流的位置继续占有、后面的盒子仍然以标准流的方式对待它

4.绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

    /* div1距离浏览器左侧100px,顶部0px */
    .div1 {
      position: absolute;
      background-color: skyblue;
      width: 200px;
      height: 200px;
      left: 100px;
      top: 0;
    }
    /* div2距离div1左侧50px,顶部50px */
    .div2 {
      position: absolute;
      background-color: yellowgreen;
      width: 50px;
      height: 50px;
      top: 50px;
      left: 50px;
    }
    /* div3占有了原来没偏移之前div1的位置 */
    .div3 {
      width: 400px;
      height: 100px;
      background: pink;
    }

  <div class="div1">
    <div class="div2"></div>
  </div>
  <div class="div3"></div>

相对定位的特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果父元素有定位（绝对、相对、固定定位），则以最近一级的有定位的祖先元素作为参考点移动
原来在标准流的位置不再占有、后面的盒子可以占用它原来的位置

使用绝对定位进行水平居中：

    /* left:50;margin-left: -wideth*50% */
    .div1 {
      position: absolute;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      height: 200px;
      background: skyblue;
    }

5.子绝父相

子绝父相是定位中最常用的一种方式

子元素绝对定位，不会占有位置，可以放到父盒子里面的任何一个位置，不会影响其他的兄弟盒子
父盒子需要加定位限制盒子在父盒子内显示
父盒子布局时要占有位置，因此父盒子只能是相对定位

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

6.固定定位

固定定位是元素固定于浏览器可视区的位置，主要适用场景：可以在浏览器页面滚动时元素的位置不会改变

    /* div1始终浏览器顶部*/
    .div1 {
      position: fixed;
      background-color: skyblue;
      width: 100%;
      height: 200px;
      top: 0;
      left: 0;
    }

固定定位的特点：

以浏览器的可视窗口为参照移动元素，不随滚动条滚动而滚动
固定定位不再占有原来的位置

固定定位也是脱标的，因此固定定位可以看成是一种特殊的绝对定位

固定定位小技巧：固定在版心右侧位置：

让固定定位的盒子left：50%
让固定定位的盒子margin-left：版心宽度的一半距离

7.粘性定位

粘性定位可以被认为是相对定位和固定定位的混合

    body {
      height: 3000px;
    }
    /* 当距离浏览器顶部位置为20px时变为粘性定位 */
    .nav {
      position: sticky;
      background-color: skyblue;
      width: 100px;
      height: 100px;
      top: 20px;
      margin: 100px auto;
    }

粘性定位的特点：

以浏览器的可视窗口为参照进行移动（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top、left、right、bottom 其中一个才有效

**注意：**IE不支持

8.定位叠放次序z-index

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

    /* div2在div1的上方 */
    .div1 {
      position: absolute;
      z-index: 1;
      width: 200px;
      height: 200px;
      background: skyblue;
    }
    .div2 {
      position: absolute;
      z-index: 2;
      width: 100px;
      height: 100px;
      background: yellowgreen;
    }

数值可以是正整数、负数或0，默认是auto，数值越大，盒子越往上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性

9.定位特殊性

①绝对定位和固定定位也和浮动类似：

行内元素添加绝对或者固定定位，可以直接设置宽度和高度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认是内容的大小

    span {
      position: absolute;
      top: 200px;
      background: yellowgreen;
      width: 200px;
      height: 200px;
    }
    div {
      position: absolute;
      background: skyblue;
    }

②浮动元素、绝对定位（固定定位）的元素都不会触发外边距合并的问题

③绝对定位（固定定位）会完全压住盒子：

浮动元素元素只会压住下面标准流的盒子，不会压住下面标准流盒子里面的内容（文字图片）
绝对定位（相对定位）会压住下面标准流所有的内容

元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来

1.display 显示隐藏(不保留位置)

    /* none隐藏元素，隐藏后不占有原来的位置 */
	/* block除了是块级元素，还可以用来配合js显示元素 */
    div {
      display: none;
      background: yellowgreen;
      width: 200px;
      height: 200px;
    }

2.visibility 显示隐藏（保留位置）

    /* hidden隐藏元素但是保留位置 */
    /* visible显示元素 */
    div {
      visibility: visible;
      background: yellowgreen;
      width: 200px;
      height: 200px;
    }

3.overflow 溢出显示隐藏

    div {
      overflow: auto;
      background: yellowgreen;
      width: 200px;
      height: 200px;
    }

visible为默认值，显示溢出的元素
hidden隐藏溢出的元素
scroll不管是否溢出都显示滚动条
auto在需要的时候才显示

**注意：**如果是有定位的盒子，慎用 hidden 因为它会隐藏多余的部分

无关风月1001

关注

30
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS笔记，包含各个常用属性、选择器、特性。
复制链接

扫一扫