本文共 2181 字，大约阅读时间需要 7 分钟。

这是我在整理的笔记，接下来还会持续更新。

B站用户名：RodmaGO

作者：RodmaChen

转载说明：务必注明来源，附带本人博客连接。

一.显示属性——display

1.块元素——block

• 介绍：块元素是占据最大可用宽度的元素，前后都有换行符。
• 事列：下例中的样式规则将内联<span>元素显示为块级元素：

HTML

内容
    

CSS

span {
      display: block;}作者：RodmaChen

2.内联元素——inline

• 介绍：不强制换行

p {
       display：inline ; }

3.隐藏元素——none

介绍：元素将被隐藏，并且页面将显示为该元素不在其中。

h1 {
      display: none;}

二.是否显示——visibility

介绍：visibility属性指定是否一个元素是可见（visible）或隐藏（hidden）。

HTML

   
       This text will not display in browser.
   

CSS

div.hidden {
      visibility: hidden;}

三.定位——position

1.基本概念

1. CSS定位属性允许您定位元素。它还可以将元素放置在另一个元素之后，并指定当元素的内容太大时应该怎么做。作者：RodmaChen
2. 可以使用top，bottom，left，right属性定位元素。但是，首先要设置position属性，否则这些属性将不起作用。

2.静态定位——static

HTML元素默认情况下处于静态位置。始终根据页面的正常流程来定位静态定位的元素。作者：RodmaChen

作者博客https://blog.csdn.net/weixin_46654114

p.position_static {
      position:static;   top: 30px;   right: 5px;   color: red;}

静态定位的元素不受top，bottom，left和right属性的影响。

3.固定定位——Fixed Positioning

固定位置的元素相对于浏览器窗口定位，并且即使滚动窗口也不会移动。

p.position_fixed {
      position: fixed;   top: 30px;   right: 5px;   color: red;}

4.相对定位——Relative Position

相对于自身的一种定位，随意改变移动他的位置并不会影响其他元素的位置。作者：RodmaChen

HTML

作者是谁 RodmaChen  给个赞吧。

CSS

p {
      width: 350px;   border: 1px black solid;   position: fixed;}span {
      background: green;   color:white;   position: relative;   top: 150px;   left: 50px;}

相对定位的元素的内容可以移动并与其他元素重叠，但是仍保留该元素的空间。

5. 绝对定位——Absolute Position

1. 绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left，right，top，bottom进行绝对定位。
2. 绝对定位的元素可以与其他元素重叠。

6.自我总结，代码效果

HTML

没有定义的段落
没有定义的段落
没有定义的段落
没有定义的段落
没有定义的段落
没有定义的段落
没有定义的段落
这是绝对定位  作者 RodmaChen. 
没有定义的段落
没有定义的段落
没有定义的段落
这是固定定位 作者  RodmaChen 
没有定义的段落
没有定义的段落
这是相对定位 作者 RodmaChen
没有定义的段落
没有定义的段落
没有定义的段落
没有定义的段落

CSS

.abs {
       width: 150px;    left:100;    border: 3px black solid;    position: absolute;}    /* it works without top/bottom    or left/right */.fix {
       width: 150px;    border: 2px red dotted;    position: fixed;    top:50; left:100;}    /* work only with positioning */.rel {
       width: 150px;    border: 1px blue dashed;    position: relative;}

输出效果

作者：RodmaChen

本人博客：https://blog.csdn.net/weixin_46654114

qq：1342709867

转载说明：务必注明来源，附带本人博客连接。

请给我点个赞鼓励我吧

转载地址：https://chenyunzhi.blog.csdn.net/article/details/105949043 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！