美文网首页
CSS

CSS

作者: 裁尘的人儿 | 来源:发表于2020-08-12 20:35 被阅读0次

盒子模型里margin和padding的区别：

image

margin的用法说明:

（1）需要在border外侧添加空白时，

（2）空白处不需要有背景（色）时，

（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。

padding的用法说明:

（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），

（2）空白处需要背景（色）时，

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

margin和padding的区别:

margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。(margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。)
什么时候用

什么时候用Margin？什么时候用Padding？

1. 盒子模型：

任意一个块级元素均由content(内容), padding(内边距), background(包括背景颜色和图片), border(边框), margin(外边距)五个部分组成。

image

其中margin属性定义了元素边框外部的空白区域，给其赋值可以设置元素与元素之间的距离

padding属性定义了元素边框与元素内容之间的空白区域，给其赋值可以设置元素与内容之间距离
<meta charset="utf-8">

2. margin和padding的属性及语法：

(1). Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 可以分别给其四个方向赋值，也可以对值进行简写，其中属性值可以是具体数子，也可以用百分比表示，当用百分比时，百分比参考父元素的宽度。

image

margin-top: 40px;

margin-right: 40px;

margin-bottom: 40px;

margin-left: 40px;

根据上, 右, 下, 左的顺时针规则, 简写为：margin: 40px 40px 40px 40px;

当上下, 左右margin值分别一致, 可简写为：margin: 40px 40px；

前一个40px代表上下margin值, 后一个40px代表左右margin值。

当上下不同，左右一致时，可简写为：margin：20px 40px 30px；

中间的40px代表左右margin值。

当上下左右margin值均一致, 可简写为：margin: 40px;

(2). Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.

3. 什么时候用margin？什么时候用padding？

(1) 使用margin值的情况：

  • 需要在border外侧添加空白时。

  • 空白处不需要背景（色）时。

  • 上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。(margin折叠）。

  • 需要使用负值对页面布局时(margin值可以取负，padding不行)。

(2) 使用padding时的情况：

  • 需要在border内测添加空白时。

  • 空白处需要背景（色）时。

  • 上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

总结：

  • margin是用来隔开元素与元素的间距；
  • padding是用来隔开元素与内容的间隔。

  • margin用于布局分开元素使元素与元素互不相干；
  • padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

nth-child(2)的作用：

作用是控制指定子元素的CSS样式，nth-child(n) 选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。

//指定属于其父元素下的第二个子元素p的样式：
p:nth-child(2)
{
background:#ff0000;
}

//nth-child的参数也可以是奇偶odd/even
//Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
//在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}


//使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
//在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
p:nth-child(3n+0)
{
background:#ff0000;
}


//指定父元素div下的P子元素，对第（5的倍数）的p元素设置右边距为0.
div .section:nth-child(5n) {
  margin-right: 0;
}

超链接a标签里的href:

（1）a元素

超链接：<a href="链接地址">name</a>

（2）href属性

hyper reference:通常表示跳转地址
1、跳转地址
2、跳转某个锚点
id属性：全局属性，表示元素在文档中的唯一编号

（href不仅可以用网址赋值，也可以用id选择器赋值[这就是说的瞄点链接]）

（3）锚点链接

什么是锚点链接？通俗一点就是在阅读文章中，文章很长！但是你想快速的跳转到其中一段内容的时候，这个时候就需要增加锚点链接，可以使页面可读性更高，更方便！

语法：<h1 id="ls1">章节1</h1>

<a href="#ls1">章节1</a>

先写一个标题或者链接，然后在元素中添加id属性，id不能重复！
在链接id前面加上#，<a href="#ls1">章节1</a>就可以了！

在页面中加入锚点链接后，点击锚点链接页面链接地址是会变动的。

<a href="#title1">标题1</a>
<a href="#title2">标题2</a>


<h2 id="title1">标题1</h2>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>
<p>我是内容1</p>

<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>

<h2 id="title2">标题2</h2>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>
<p>我是内容2</p>

目标伪类

目标伪类选择器用来匹配文档（页面）的URI中某个标识符的目标元素。URI中的标识符通常会包含一个#号，后面带有一个标识符名称，
例如#contact:target就是用来匹配ID为contact的元素被URI选中时候的样式的，:target伪类选择器选取链接的目标元素，然后供定义样式。

目标伪类选择器语法如下：
E:target ---> 选择匹配E的所有元素，且匹配元素被相关URL指向
(如果仅仅是:target，那就是匹配所有的具有id且被相关URL指向的元素）
注意：“E:target ”这种语法是交集选择器，要是E元素，并且被选中即target，一般这里不用加E，因为如果链接指向的不是E元素呢？如果这里不加E，那么就匹配链接指向的元素就可以了

目标伪类选择器是动态选择器，只有存在URL指向该匹配元素的时候，样式效果才会生效。
目标伪类选择器需要IE9以及以上，opera9.6以及以上，还有所有版本的chrome，FF，Safari都支持。

加入有一个元素id="box_one", 有一个超链接链接到它，
那么:target就是匹配ID为"box_one"的目标元素，
一旦该超链接发生点击，被链接的目标元素就会变红。

目标伪类最主要用在锚点链接里：
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    h2:target{//注意：这种语法是交集选择器，要是h2元素，并且被选中即target，一般这里不用加h2，因为如果链接指向的不是h2元素呢？如果这里不加h2，那么就匹配链接指向的元素就可以了
      color: red;
    }
  </style>
</head>
<body>
  <a href="#title1">标题1</a>
  <a href="#title2">标题2</a>


  <h2 id="title1">标题1</h2>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>
  <p>我是内容1</p>

  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>
  <br><br><br><br><br><br>

  <h2 id="title2">标题2</h2>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>
  <p>我是内容2</p>

</body>

元素状态伪类：

用来选择具有某种状态的类：
例如：button有一个状态属性：disabled，一旦写了这个属性，这个按钮就不可以和用户交互了（就是点了没有反应了）

<style>
//伪类的第一种用法：
  button[disabled] {
    color: red;
  }
//伪类的第二种用法：
:disabled {
  color: red;
}
</style>

<body>
  <button disabled>我是按钮</button>
  <button>我是按钮</button>
</body>

元素动态伪类：

主要用在a标签的！！！

一、a的动态伪类：

a标签有很多状态：

  • a:link ---> 表示该链接是未访问状态。
  • a:visited ---> 表示该链接是已访问状态。
  • a:hover --->鼠标挪动到链接上。
  • a:active --->激活的链接（鼠标在链接上长按住未松开，即鼠标长按下去的时候
    ）

使用注意：

  • a:link、a:visited、a:hover、a:active是官方推荐的顺序。
  • :hover必须放在 :link 和 :visited 后面才能完全生效
  • :active必须放在:hover后面才能完全生效
  • 所以建议的编写顺序是：:link, :visited, :hover, :active
  • 记忆：女朋友看到LV后，ha ha大笑
<style>
//该链接是未访问状态。
  a:link {
    color:red;
  }

//链接是已访问状态/鼠标点下去松手以后
a:visited {
    color:yellow;
  }

//鼠标挪动到链接上/放上去
a:hover {
    color:green;
  }

//手指点下去未松手
a:active {
  color: blue;
}
</style>
<body>
  <a href="#">Google一下</a>
</body>

二、其他元素的动态伪类

hover和active也可以应用到其他元素上
一旦移动到某个元素上，就会激发相应样式。

<style>
strong:hover {
  background-color: purple
}
strong:active {
  font-size: 40px
}
</style>
<body>
  <strong>我是strong元素</strong>
</body>

动态伪类 :focus

:focus指聚焦状态（鼠标点击下去松开，鼠标原位不动或者移开了但还没有在其他位置点击 即在其他位置还没有被点击的这段时间里焦点还是这个位置的，其他位置还没有被获取焦点）
或者鼠标放在要获焦的元素上，键盘点击Tab键，那这个元素就获焦了、被选中了。

  • 文本输入框一聚焦（获取焦点=鼠标点下去）后，背景就会变成红色
<style>
button:hover {
      color:green;
    }
button:focus {
      color:deeppink;
    }
</style>
<body>
  <button>我是按钮</button>
</body>

注意：动态伪类的建议顺序为

  • :link ---> :visited ---> :focus ---> :hover ---> :active
  • 记忆：女朋友看到LV包包后，(F)疯一样地ha ha大笑

Tab键：获焦选中键

tabindex可以调整tab选中元素的顺序，如果tabindex="-1",那么这个元素就不能被选中了

<a tabindex="-1" href="#">Google一下</a>

去掉a元素的焦点状态/去掉a元素获焦以后的外方框轮廓

a:focus{
  outline: None
}

结构伪类

（1）结构伪类一 ---> :nth-child(数字)

  • :nth-child(3)表示选中html的body页面里所有父元素的第3个子元素（第一个父元素的第3个子元素、第二个父元素的第3个子元素、第三个父元素的第3个子元素。。。）
    只要是第3个子元素都会被选中

  • p:nth-child(3)表示选中所有元素的第三个子元素且它是p元素
    这是一个交集选择器：1. 要是一个p元素；2. p元素是子元素中的第三个元素

:nth-child(3){
  color:red
}
//会选中下面的文字内容3、span文字内容3、strong文字内容1
//其中strong文字内容1被选中的原因是：body也是一个父元素，strong文字内容1也是body下的第三个子元素！！！



<div>
  <p>文字内容1</p>
  <p>文字内容2</p>
  <p>文字内容3</p>#被选中
</div>

<p>
  <span>span文字内容1</span>
  <span>span文字内容2</span>
  <span>span文字内容3</span>#被选中
</p>

<div>
  <strong>strong文字内容1</strong>#被选中
</div>

（1.1）非常注意：交集选择器p:nth-child(1)和后代选择器p :nth-child(1)的区别：

p:nth-child(1)：（这是一个交集选择器）

  • 是一个p元素
  • 同时该p元素作为子元素的第一个元素

p :nth-child(1)：（这是一个后代选择器，这里p后面的空格表示后代）

  • 后代选择器：选择p元素，但是后面是一个空格，选中p的后代。指定选择什么样的后代！！！
  • p元素是父元素
  • 只选p元素里面子元素的第一个/只选p元素里面的第一个子元素

p span:nth-child(1)：（这是一个后代+交集选择器）

  • 选中p的第一个后代
  • 该后代要是span元素

(2) 结构伪类二 ---> :nth-child(n)

  • :nth-child(n)语法里n就表示包括了从0开始的所有自然数0, 1，2，3，4，5，...，所以他的含义是选中了所有的子元素
  • p:nth-child(n)表示选中了所有的p子元素
  • :nth-child(2n)语法里n就表示包括了所有偶数2，4，6，8，...，所以他的含义是选中了所有的子元素，且该子元素在父元素里排偶数
  • :nth-child(2n) 等同于 :nth-child(even)
  • :nth-child(2n+1) 等同于 :nth-child(odd)
  • :nth-child(5n) ，:nth-child(5n+3) ，....

(3) 结构伪类三 ---> :nth-last-child

倒数第几个！！！
:nth-child(数字)是从前往后数，:nth-last-child(数字)是从后往前数

  • p:nth-last-child(3) 倒数第3个
  • p:nth-last-child(2n+1)

(4) 结构伪类四 ---> :nth-of-type()、 :nth-last-of-type()

:nth-of-type()用法跟nth-child()类似，都是在父元素下数，不同点是:nth-of-type()计数只计算同种类型的元素

  • p:nth-of-type(3) 在父元素下数，只数p元素，在数到p元素中获取第三个p元素
  • :nth-last-of-type(3) 在父元素下数，只数p元素，获取倒数第三个p元素
  • :nth-of-type(2n) ====:nth-last-of-type(even)
  • :nth-of-type(2n+1) ===:nth-last-of-type(odd)
<style>
 p:nth-of-type(3) {
   color: red;
 }
</style>

<body>
<div>
 <div>我是div元素</div>
 <p>我是内容1</p>----------------------------------数到1
 <span>我是span元素</span>
 <p>文字内容2</p>----------------------------------数到2
 <p>文字内容3</p>----------------------------------数到3，选中！！！
 <p>文字内容4</p>
</div>
</body>

<style>
  p:nth-of-type(2) {
    color: red;
  }
</style>
<body>
  <p>文字内容1</p>
  <div><p>文字内容2</p></div>
  <div>
    <div><p>文字内容3</p></div>
    <p>文字内容4</p>
    <p>文字内容5</p>--------------------选中
  </div>
  <p>文字内容6</p>--------------------  选中
</body>

(5) 结构伪类五（其他结构伪类） ---> :first-child、 :last-child、:first-of-type、 :last-of-type、:only-child、:only-of-type、:root

  • :first-child，等同于:nth-child(1)
  • :last-child，等同于:nth-last-child(1)
  • :first-of-type，等同于:nth-of-type(1)
  • :last-of-type，等同于:nth-last-of-type(1)
  • :only-child，是父元素中唯一的子元素
  • :only-of-type，是父元素中唯一类型的子元素
div :only-child    这是一个后代选择器，选中div下的唯一的子元素。
body :only-child    这是一个后代选择器，选中body下的唯一的子元素。
  • :root ，是根元素，就是Html元素，选中<html></html>元素。
  • :empty，是空元素，该元素里面没有内容
<style>
  :empty {
    height: 20px;
    background-color: red;
  }
</style>
<body>
  <div>
    <p></p> -----------------------------------选中
    <span>哈哈哈</span>
  </div>
  
  <div>
    <strong>呵呵呵</strong>
    <a href="#">嘻嘻嘻</a>
    <div></div>-------------------------------选中
  </div>
</body>

(5) 结构伪类五（否定伪类） ---> :not(x)

其中x是一个简单的选择器

  • 元素选择器
  • 通用选择器
  • 属性选择器
  • 类选择器
  • id选择器
  • 伪类（除否定类）
<style>
  /*p元素里面除了div|span之外选中所有的元素*/
  p :not(div):not(span) {
    color: red;
  }
</style>

伪元素

伪元素有两种写法：一种是一个冒号，另一种是两个冒号，都一样。开发里一般用两个冒号，为了和伪类做区分。
常见伪元素有：

  • :first-line、::first-line 是第一行
    注意：只有下列属性可以应用在::first-line伪元素
    • 字体属性
    • 颜色属性
    • 背景属性
  • :first-letter、::first-letter 是选中第一个字母
    注意：只有下列属性可以应用在::first-letter伪元素
    • 字体属性
    • 颜色属性
    • 背景属性
    • margin、padding、border属性
<style>
    /*选中p元素内容的第一个字母*/
    p::first-letter {
        font-size: 50px;
    }

 /*选中p元素内容的第1行*/
    p::first-line {
        color: white;
    }
</style>
  • :before、::before 是用来在一个元素前面插入其他内容（可以是文字、图片）
  • :after、::after 是是用来在一个元素后面插入其他内容（可以是文字、图片）

注意：

  • 使用::before 和::after 时，content属性不能省！！！conten里可以是空内容content=""，但是不可以不设置content这个属性！！！
  • 伪元素可以看成是行内元素，所以伪元素是不支持设置宽高的！！！
  • 如果想要设置伪元素的宽高，可以更改伪元素的display属性：display: inline-block 
<style>
    /*想在“我是span文本”前面加上一个红色的“123”*/
    span::before {
        content: "123";/*把content看成一个元素，对这个元素可以设置css属性*/
        color: red;
        margin-right: 20px
    }

 /*想在“我是span文本”后面加上一个紫色的“abc”*/
   span::after {
        content: "abc";
        color: purple;
        margin-left: 20px
    }

   /*content可以加文字外，也可以添加图片*/
   span::before {
        content: url("./img/test.png");
        margin-right: 20px
    }
</style>

<body>
    <span>我是span元素</span>
</body>

Tips:

  • strong和span元素都不支持width属性，因为行内元素是不支持设置宽高的！！！
  • 伪元素可以看成是行内元素，所以伪元素是不支持设置宽高的！！！
  • tab简写：
ul>li*5>a[href=#]

效果==>
<ul>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
</ul>

清浮动

clear 属性规定元bai素的哪一侧不允许其他浮动元素。
clear有四个属zhi性值，分别是：

  • left（在左侧不允许浮动元素
  • daoright（在右侧不允许浮动元素
  • both（在左右两侧均不允许浮动元素
  • none（默认值。允许浮动元素出现在两侧）
  • inherit（规定应该从父元素继承 clear 属性的值）。
    最常用到的就是clear：both----用来清除浮动的。
    比如两个层都用了浮动，而且不想他们在一行显示，这时候就用到了这个属性。有时候发现层漂浮的位置不对，就试着给它的上一个层加个那个属性看看可能解决问题。

CSS选择器优先级（包括伪类）：

当选择不同的选择器，选中同一个元素时并且设置相同的样式时，这样样式之间就会产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）来决定，优先级高的优先显示。
优先级的规则：

内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配选择器，优先级0
继承的样式没有优先级

当选择器包含多种选择器时，需要将多种选择器的优先级相加然后进行比较。但是注意，选择器的优先级计算不会超过他的最大数量级，如果选择器的优先级一样，则使用靠后的样式。
并集选择器的优先级时单独计算。
可以在样式的最后添加一个!important，则此时该样式会获得一个最高的一个优先级，将会超过所有的样式甚至超过内联样式，所以在开发中尽量避免使用。

伪类的顺序

涉及到a的伪类一共四个：

:link
:visited
:hover
:active

这四个选择器的优先级是一样的，和类选择器在一个优先级。

CSS样式继承

  • 外层元素身上的样式会被内层元素所继承。
  • 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式。
  • 并不是所有的样式都能够继承，只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承。

注：但是并不是所有的样式都会被子元素所继承，比如：背景相关的、边框相关的、定位相关的样式都不会被子元素所继承。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>继承性</title>
    <style>
        body{
            color: red;
        }
    </style>
</head>
  
<body>
    <div>
        <h2>微笑是最初的信仰</h2>
        <p>微笑是最初的信仰</p>
    </div>
</body>
</html>

* 选择器----通用选择器，用*来选择所有元素。

选择所有元素，并设置其背景色：

*
{
background-color:yellow;
}

  • * 选择器：通用选择器，用*来选择所有元素。

  • * 选择器也可以选择另一个元素内的所有元素:

div *
{
background-color:yellow;
}

交集、并集、兄弟、后代选择器

  • 交集选择器：selector1selector2
  • 并集选择器：selector1,selector2
  • 兄弟选择器：selector1+selector2
  • 后代选择器：selector1 selector2

flex布局

开启flex布局：display: flex

一、flex-containor

flex-direction:row|row-reverse|column|column-reverse
决定主轴的方向（即项目的排列方向）。
flex-wrap:nowrap|wrap|wrap-reverse
如果一条轴线排不下，如何换行。

  • flex-flow:flex-direction flex-wrap

  • justify-content: flex-start|flex-end|center|space-between|space-around
    定义了item在主轴上的对齐方式
    align-items

align-content:flex-start|flex-end|center|baseline|stretch

二、flex-item

  • flex-grow：定义item的放大时占据剩余空间的比例，默认为0，即如果存在剩余空间，也不放大。
    如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
    （如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。）
  • flex-shrink：只有在空间不足的时候才生效。定义item的缩小时缩小超出空间的比例，默认为1
    flex-basis：定义了在分配多余空间之前，item占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    (它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。)
    flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    order:定义item的排列顺序。数值越小，排列越靠前，默认为0。
    align-self:auto|flex-start|flex-end|center|baseline|stretch
    允许单个item有与其他items不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

!important:

作用是提高指定样式规则的应用优先权（优先级）为最高优先级。
语法格式{ cssRule !important }，即写在样式属性定义的最后面，例如：

box{color:red !important;}

div { color: #f00 !important; }

在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

选择器优先级：

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

层叠优先级：

position（非static) -> 浮动 -> 标准元素（position:static)

display、position、float 三者的优先级

  1. display 的值是 none(是彻底消失）

如果 display 的值是 none，则 position 和 float 无效。否则，继续进行2。

  1. position 的值是 absolute 或 fixed

如果 position 的值是 absolute 或 fixed，则浮动失效，并且 display 的值 按照 对应表 设置。否则，继续进行3。

此时，元素的位置将由 ‘top’，’right’，’bottom’ 和 ‘left’ 属性和该框的包含块确定。

  1. float 的值不是 none

如果 float 的值不是 none，则元素浮动，并且 display 的值 按照 对应表 设置。否则，继续进行4。

  1. 元素是根元素

如果元素是根元素，display 的值 按照 对应表 设置。否则，继续进行5。

相关文章

网友评论

      本文标题：CSS

      本文链接：https://www.haomeiwen.com/subject/zynmdktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！