CSS总结（内容略长）

已于 2022-02-17 17:12:11 修改
阅读量1.7k 收藏 23
点赞数 5
分类专栏： css 文章标签： css css3 前端
于 2019-05-31 15:47:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42235173/article/details/90717564
版权

CSS样式表

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

注意： link 是单标签

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表总结（位置）

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）
外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

CSS基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用 class=“类名”  即可

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

小技巧：

1.长名称或词组可以使用 中横线- 来为选择器命名
2.不建议使用“_”下划线来命名CSS选择器（浏览器兼容问题）
3.不要纯数字、中文等命名， 尽量使用英文字母来表示

多类名选择器

<div class="pink fontWeight font20">亚瑟</div>
1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关
2. 各个类名中间用空格隔开

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

通配符选择器

通配符 选择器用“*”号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

属性选择器

选取标签带有某些特殊属性的选择器 我们称为属性选择器

div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
    color: pink;
}
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>

<div class="24font">属性选择器123</div>  /* 不匹配 */

div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
    color: skyblue;
}
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>

div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
    color: green;
}
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>

CSS Unicode字体

​ 可以通过escape() 来测试属于什么字体。

字体名称英文名称Unicode 编码
宋体SimSun\5B8B\4F53
新宋体NSimSun\65B0\5B8B\4F53
黑体SimHei\9ED1\4F53
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312
隶书LiSu\96B6\4E66
幼园YouYuan\5E7C\5706
华文细黑STXihei\534E\6587\7EC6\9ED1
细明体MingLiU\7EC6\660E\4F53
新细明体PMingLiU\65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：

交集选择器 是 并且的意思。 即…又…的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧：

并集选择器 和 的意思， 只要逗号隔开的，所有选择器都会执行后面样式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如可以选择 第1个，第n个元素。

类 .one 类选择器是一个点

伪类 :link 用 2个点 就是 冒号

链接伪类选择器

  • :link /* 未访问的链接 */

  • :visited /* 已访问的链接 */

  • :hover /* 鼠标移动到链接上 */

  • :active /* 选定的链接 */

    注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序

结构(位置)伪类选择器（CSS3)

  • :first-child 选取属于其父元素的首个子元素的指定选择器
  • :last-child 选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n) 匹配属于其父元素的第 N 个子元素，不论元素的类型
  • :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
    n 可以是数字、关键词或公式

目标伪类选择器(CSS3)

:target 可用于选取当前活动的目标元素

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

伪元素选择器(CSS3)

  • E::first-letter 文本的第一个单词或字

  • E::first-line 文本第一行

  • E::selection 可改变选中文本的样式

  • E::before 和 E::after

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

注意

伪元素:before和:after添加的内容默认是inline元素；这两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

标签显示模式（display）

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

注意：

  1. 只有 ‘文字’ 才能组成段落, 因此p 里面不能放 ‘块级元素’，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
  2. 链接里面不能再放链接。
  3. a里面可以放块级元素

行内块元素（inline-block）

在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

块级元素、行内元素、行内块元素 区别

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或其他行内元素（特殊:  a里面可以放块级元素 ）

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内：display: inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

CSS 三大特性

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

CSS层叠性

所谓层叠性是指多种CSS样式的叠加

  1. 样式冲突，遵循的原则是就近原则。 哪个样式离着结构近，就执行哪个样式， 按照CSS书写的顺序，以最后的样式为准
  2. 样式不冲突，不会层叠

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可 ---- 子承父业

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准, 具体规范如下：

specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

类型贡献值
继承 、 *0,0,0,0
元素（标签） — div0,0,0,1
类，伪类 — .nav, :hover0,0,1,0
ID — #nav0,1,0,0
行内样式 — <div style="...">1,0,0,0
!important∞ 无穷大

权重是可以叠加的

注意： 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

总结优先级：

  1. 使用了 !important声明的规则。 ∞
  2. 内嵌在 HTML 元素的 style属性里面的声明。 <div style="..."> 1,0,0,0
  3. 使用了 ID 选择器的规则。 #nav 0,1,0,0
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。 .nav, a[href][title], :hover 0,0,1,0
  5. 使用了元素选择器的规则。 div 0,0,0,1
  6. 只包含一个通用选择器的规则。 * 0,0,0,0
  7. 同一类选择器则遵循就近原则。
总结：权重是优先级的算法，层叠是优先级的表现

盒子模型（CSS重点）

CSS三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并（也称外边距塌陷）。

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

​ 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的

垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。
解决方案： 避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：

  1. 可以为父元素定义1像素的上边框或上内边距。
  2. 可以为父元素添加overflow: hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

盒子模型布局稳定性

根据稳定性来分，建议使用顺序如下： width > padding > margin

原因：

  1. margin 会有外边距合并， 还有 ie6以下margin 加倍的bug（讨厌），所以最后使用

  2. padding 会影响盒子大小， 需要进行加减计算（麻烦）， 其次使用

  3. width 没有问题（嗨皮）我们经常使用宽度剩余法、 高度剩余法来做

CSS3盒模型

box-sizing: content-box 盒子大小为 width + padding + border + margin， box-sizing默认值，让元素维持W3C的标准盒模型

box-sizing: border-box 盒子大小为 width + margin， padding 和 border 是包含到width里面的

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的

CSS的定位机制(普通流、浮动和定位)

CSS的定位机制有3种：普通流（标准流/ 文档流）、浮动和定位。

普通流(normal flow)

浮动(float)

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：float: left | right | none

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

元素添加浮动后，元素会具有行内块元素的特性。

元素的大小完全取决于定义的大小或者默认的内容多少，浮动根据元素书写的位置来显示相应的浮动。

浮动首先创建包含块的概念（包裹）。浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

浮动的元素排列位置，跟上一个元素（块级）有关系。
	如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
	如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
	
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

清除浮动

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

清除浮动的方法

清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：clear: left | right | both

额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear: both”></div>，或其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 /* content:"."  里面尽量跟一个小点，或者其他，尽量不要为空，否则firefox 7.0前的版本会有生成空格 */
.clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

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

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
    content: "";
    display: table;   /* 触发BFC, BFC可以清除浮动 */
}
.clearfix:after {
   clear: both;
}
.clearfix {
    *zoom: 1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

定位(position)

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移 top bottom left right

2、定位模式(定位的分类) position: static | relative | absolute | fixed

1、静态定位(static)

默认定位方式，将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

2、相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性 改变元素的位置，但是它在文档流中的位置仍然保留。

每次移动的位置，是以自己的 左上角 为基点移动（相对于自己来移动位置）

如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。

3、绝对定位absolute (拼爹型)

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

绝对定位最重要的一点是，它可以通过 边偏移 移动位置，但是它完全脱标，完全不占位置。

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相

子级是绝对定位的话， 父级要用相对定位。

其实，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

为什么要是“子绝父相”呢？

​ 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

​ 父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

  1. 首先left 50% 父盒子的一半大小

  2. 然后走自己外边距负的一半值就可以了 margin-left。

4、固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，以浏览器窗口作为参照物来定义网页元素。

固定定位有两点：

  1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
  2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

ie6等低版本浏览器不支持固定定位。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

注意：

  1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

  2. 如果取值相同，则根据书写顺序，后来居上。

  3. 后面数字一定不能加单位。

  4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式是否脱标占有位置是否可以使用边偏移移动位置基准
静态static不脱标，正常模式不可以正常模式
相对定位relative不脱标，占有位置可以相对自身位置移动（自恋型）
绝对定位absolute完全脱标，不占有位置可以相对于定位父级移动位置（拼爹型）
固定定位fixed完全脱标，不占有位置可以相对于浏览器移动位置（认死理型）

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，此时元素可以不转换模式，直接给高度和宽度

元素的显示与隐藏(display、visibility、overflow)

让一个元素在页面中消失，但是不在文档源码中删除

属性值特点
displaynone隐藏之后，不再保留位置
visibilityhidden隐藏之后，继续保留原有位置
overflowhidden不显示超过对象尺寸的内容，超出的部分隐藏掉

vertical-align 垂直对齐

设置或检索对象内容的垂直对齐方式。

vertical-align : baseline |top |middle |bottom

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。

模式设置
基线对齐vertical-align: baseline;
垂直居中vertical-align: middle;
顶部对齐vertical-align: top;

BFC(块级格式化上下文)

元素具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table的元素，会产生BFC.

注意其他的display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。

这个BFC 有着具体的布局特性：有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。

什么情况下可以让元素产生BFC

  • float 属性不为 none

  • position 为 absolute 或 fixed

  • display 为 inline-block, table-cell, table-caption, flex, inline-flex

  • overflow 不为 visible。

BFC元素所具有的特性

  • 在BFC中，盒子从顶端开始垂直地一个接一个地排列

  • 盒子垂直方向的距离由margin决定, 属于同一个BFC的两个相邻盒子的margin会发生重叠

  • 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

  • BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。

  • 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等

BFC的主要用途

  • 清除元素内部浮动

    父元素设为BFC, 就可以清理子元素的浮动了，最常见的用法在父元素上设置overflow: hidden样式，IE6加上zoom:1

  • 解决外边距合并问题

    盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

    解决： 创建不属于同一个BFC，就不会发生margin重叠了

  • 制作右侧自适应的盒子问题

    普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过 flex-direction 可以互换。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7U05MMd-1644995731695)(media/1498441839910.png)]

2、各属性详解

1、display: flex 必须指定flex属性，否则不参与伸缩分配

2、flex-direction: column垂直 | row水平调整主轴方向（默认为水平方向）

3、justify-content调整主轴对齐（水平对齐）

值描述白话文
flex-start默认值。项目位于容器的开头。让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end项目位于容器的结尾。让子元素从父容器的后面开始排序但是盒子顺序不变
center项目位于容器的中心。让子元素在父容器中间显示
space-between项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子，中间的平均分布空白间距
space-around项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距

4、align-items 调整侧轴对齐（单行垂直对齐）

值描述白话文
stretch默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center项目位于容器的中心。垂直居中
flex-start项目位于容器的开头。垂直对齐开始位置 上对齐
flex-end项目位于容器的结尾。垂直对齐结束位置 底对齐

5、flex-wrap 控制是否换行

值描述
nowrap默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 , 强制一行内显示
wrap规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

6、flex-flow 是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap;  // 排列方向   换不换行

7、align-content 堆栈（由flex-wrap产生的独立行） 多行垂直对齐方式

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

值描述
stretch默认值。项目被拉伸以适应容器。
center项目位于容器的中心。
flex-start项目位于容器的开头。
flex-end项目位于容器的结尾。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。

8、order 控制子项目的排列顺序，正序方式排序，从小到大

用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是0

hello_dashen
关注
  • 5
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
中国最大同性交友网站--Gitee入门教程
weixin_44505035的博客
05-17 1万+
你好，我是江潮 你有没有遇到过这种情况： 在开发项目的时候，我们会不断地去修改代码，但是有时候会遇到，想查看某一时间的代码这种情况，如果没有版本控制器，你可能需要不断地定时备份代码，但这样显然是很麻烦的，而且备份也不一定好用。 比如某个时间点并没有修改代码，那么备份就重复了；再比如虽然备份了代码，但你并不知道两个版本有什么区别。 在这种情况下，一些工程师尝试开发代码版本控制器系统；每次当你修改完代码想进行备份时，只需要输入简单的命令，版本控制系统便会帮你完成备份操作； 就这样两种截然不同的版本控制器诞生了！
***测试第一弹：信息刺探
weixin_34406796的博客
09-03 213
***第一弹刺探信息：freebuf  1,分析目标网站内容及功能(1) 首先确定网站采用何种语言编写.或者是否有混用的情况.此处可以通过查看网站源文件,观察网站链接,捕获提交请求等方式获取.(2) 爬行网站目录,使用工具对网站目录进行爬行,可以辅助上一步让结果更加精准.将爬行结果存档,如果可以,此处应分析出网站是否使用通用程序,如果是,记录下来.进行下一步. (3) 根据上一步的爬行结果,对网站...
css学习心得内容包括了所有css样式调整
07-24
css学习心得，内容包括了所有css样式调整，很适合开发用
CSS学习笔记总结（上）
Shaun_X
05-02 682
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。
使用css实现div垂直居中的示例
09-25
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
CSS 数字和字母将容器撑大问题解决
09-27
总结起来，解决CSS中数字和字母将容器撑大的问题，主要依靠调整`white-space`、`word-break`、`word-wrap`和`overflow`等属性，以及可能需要结合`table-layout: fixed;`来控制表格的布局。根据不同浏览器的兼容性和...
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
09-24
总结来说，这个示例展示了CSS3径向渐变在创建复杂图形时的灵活性和表现力。通过熟练掌握径向渐变和其他CSS3属性，开发者可以创造出各种各样的视觉效果，提高网页设计的美观性和用户体验。此外，对于初学者而言，这个...
CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器
09-25
总结来说，为了实现跨浏览器的渐变背景，我们需要编写针对不同浏览器特性的CSS代码，包括IE的滤镜、Firefox的`-moz-linear-gradient`、Webkit的`-webkit-linear-gradient`以及现代浏览器的`linear-gradient`。...
div+css实现的小三角tip小提示(原理及代码)
09-25
总结来说，通过巧妙地使用CSS的定位和颜色叠加，我们可以轻松地创建出具有小三角提示和阴影效果的元素。这种方法不仅提高了用户体验，还增强了页面的视觉吸引力。在实际开发中，可以根据项目需求进行调整，如改变...
HTML+CSS总结.doc
11-17
HTML+CSS总结.doc
css学习总结
xiaoyong5854的博客
07-24 216
1. 概念 css：Casading Style Sheets 层叠样式表 层叠：多个样式可以作用在同一个html的元素上，同时生效。 好处： 1.功能强大 2.将内容展示和样式控制分离，降低耦合度，让分工协作更容易，提高开发效率 2 css与html的结合方式 1.内联样式 在标签内使用style属性指定css代码 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
Html+Css实训总结-------bug收集
qq_48718857的博客
08-04 1247
一、圆角按钮button点击后出现矩形框线 错误示例解决方式： { outline：none } 解决之后的正确示例 二：图标引用方法混乱 方法1 @font-face { font-family: ccy; src: url("../font/fontAbout/iconfont.woff"); src: url("../font/fontAbout/iconfont.ttf"); } span{ font-family:ccy } <span>&am
CSS学习总结
竹叶戏雨的博客
01-21 1234
总结由达内学习的笔记和菜鸟教程CSS板块(不包括CSS3)组成。 一.CSS概述 1.CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门技术 。 使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力 2.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:    ...
HTML+CSS 个人学习时的笔记，粗略参考【CSS】
Limonor的博客
09-11 226
CSS CSS书写顺序 1. 布局定位属性 display / position / float / clear / visibility / overflow 2. 自身属性 width / height / margin / padding / border / background 3. 文本属性 color / font / text-decoration / text-align / vertical-align / white-space / break-word
CSS粗略小总结
qianxunand的博客
09-07 86
主流浏览器及内核 ie(trident) firefox(gecko) google chrome(webkit/blink) safari(webkit) opera(presto) CSS(cscading style sheet) 层叠样式表 引入css 1. 行间样式 <div style=""></div> 2，页面级css ，写在<head>标签中的<style type = "text/css"> 3. 外部的css文件,<link re
css多个属性怎么写,CSS 那么多属性，而且每个属性都有多个值怎么记？
weixin_34669890的博客
08-03 397
原标题：CSS 那么多属性，而且每个属性都有多个值怎么记？层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号...
web实验2 制作简单网页（HTML+CSS）
热门推荐
人生当苦无妨
08-20 2万+
web实验2 制作简单网页（HTML+CSS） 一、实验目的 1．掌握文本样式的设置。 2．掌握图像样式的设置。 3．掌握各种媒体的插入方法。 二、实验内容 采用DIV+CSS，制作“在线电影”页面。 三、操作提示 1．新建网站的文件夹，网站图像素材保存在images文件夹中，媒体文件放在flash文件中。 2．新建index.html页面，要求：  页面字体大小为14px，文本颜色为#000；  页面背景颜色为#edb8d2；  上下左右距均为0。 3．利用div布局，宽度为900px，居中对齐。
CSS进阶之基线（参考线）
xun__xing的博客
07-14 5140
基线（参考线）一、引入1.CSS属性2.文字二.行高三、vertical-align1.一个元素如果子元素出现行盒，该元素内部也会产生参考线2.行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。四、可替换元素和行块盒的基线 一、引入 1.CSS属性 font-size、line-height、vertical-align、font-family 这些属性的它们在页面里是参考的什么线，我们从文字的设计开始。 2.文字 文字是
css input输入框根据输入内容变化长度
最新发布
05-19
你可以通过CSS设置`input`元素的宽度来实现根据输入内容变化长度的效果。具体实现方法有以下两种： ...但是，使用这种方法的缺点是，当用户输入过长的内容时，输入框的宽度也会相应增加，可能导致页面布局出现问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值