css-04

青旅半醒 2022-07-15 01:13 43阅读 0赞

1、浮动 元素 对 父层元素带来的影响  
   影响：一个元素内如果包含了浮动元素，那么该元素的高度可能会变成0。  
   原因：浮动元素 脱离了 文档流，理论上讲，就不在父层容器内  
   解决方案:  
       1、显示设置父层元素的高度  
       2、通过overflow:hidden 来撑起父层元素的高度  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
1、显示方式  
   1）块级元素  
      <div></div>  
      hn  
      p  
      特点：单独占一行  
   2）内联元素/行内元素  
      span , b , i , u , s , a  
   display属性:  
      改变元素的显示方式 比如：由行内 改变成块级  
   取值:  
       1⃣️none  
          隐藏,让生成的元素没有框  
 特点：隐藏之后在页面不显示，并且不占据页面空间  
       2⃣️block  
          让行内元素 变成 块级元素  
 使用场合：想显示修改行内元素的宽度和高度的时候，可以将其显示形式设置为 block(块级)  
       3⃣️inline  
          将 块级元素 更改成 行内元素  
       4⃣️inline-block  
          行内块  
 特点：本身为行内元素，但是具备块级元素的特点  
       多个行内块会在同一行内显示，但是可以改变其宽度和高度  
 使用场合：想改变行内元素的宽度和高度的时候去使用  
2、显示效果  
   属性：visibility  
   作用：真正实现元素显示 与 隐藏的  
   取值：  
       1）visible   
          默认值，元素可见  
       2）hidden  
          隐藏，元素可以隐藏，但是空间依然保留  
       3）collapse

用在表格上，删除一行和一列时不影响表格的布局

visibility 与  display 的区别  
   a。visibility 是真正实现元素的 显示与隐藏的  
      而 display 是改变元素的显示方式的。  
   b。visibility:hidden ，能够实现元素的隐藏，但是会占据页面空间  
      display:none ，没有显示方式，能实现元素的隐藏，并且不会占据页面空间  
   c。visibility取值：hidden,visible,collapse  
      display取值：none,block,inline,inline-block  
3、opacity  
   透明度  
   属性：opacity  
   取值：0 - 1 之间的小数  
         值越小，越透明  
值越大，越不透明  
4、vertical-align  
   属性：vertical-align  
   取值：top ， middle ，bottom ，baseline(基线对齐)  
5、cursor  
   当鼠标放在某个元素上时，可以改变鼠标的显示状态  
   属性：cursor  
   值：  
      default 默认  
      pointer : 小手  
      crosshair : +  
      text: I  
      wait: 圆圈在转  
      help: 箭头加问号  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
1、列表  
   1）列表项标志  
      list-style-type  
      取值：  
         1）无序列表  
   none , disc , circle , square  
2）有序列表  
   none , decimal , lower-roman , upper-roman  
3）none  
   2）列表项图像  
      属性:list-style-image  
      取值:url(图像的路径)  
      list-style-type:none;  
      list-style-image:url(Images/type.png);  
   3）列表项位置  
      属性：list-style-position  
      取值：  
            outside : 在文本区域之外  
   inside : 在文本区域之内  
   4）列表属性(综合)  
      属性:  
        list-style:type url() position;  
常用值：list-style:none;  
   5）用法  
      1⃣️CSS重写  
         将一些标签的默认样式修改掉  
\*\{  
margin:0px;  
padding:0px;  
list-style:none;  
\}  
      2⃣️导航  
      <ul>  
<li>  
<h3>图书、音像、数字商品</h3>  
</li>  
      </ul>  
         
2、定位  
   1）什么是定位  
      ... ...  
   2）定位方式  
      1、浮动定位  
         脱离文档流，不占用页面空间，会靠在包含框的左边或者右边，或者离他最近的浮动元素  
      2、相对定位、绝对定位、固定定位、\[静态定位\]  
   3）定位属性  
      1⃣️定位方式相关属性  
         position  
取值:  
     1、static : 默认，静态定位  
     2、relative : 相对定位  
     3、absolute : 绝对定位  
     4、fixed : 固定定位  
      2⃣️与定位位置相关属性  
         top  
bottom  
left  
right  
以像素为单位的值  
      3⃣️堆叠顺序  
         z-index : value;  
值越大越靠近用户  
   4）static  
      页面中默认定位方式，即文档流定位  
   5）相对定位  
      相对于当前元素本身出现的位置而实现定位的一种方式  
      实现方式:  
        position:relative;  
通过 top bottom left right 来实现位置移动  
      使用场合：  
        1、会进行位置的微妙的调整  
2、配合着绝对定位使用  
   6）绝对定位  
      特点：脱离文档流，不占据页面空间  
      定位位置：相对于【最近】的【已定位】的【祖先】元素  
                如果祖先元素没有进行定位，它的位置就相对于最初的包含块(body)  
      <nav>  
        <div>  
 <p>  
  <span></span>  
 </p>  
</div>  
      </nav>  
      已定位：非static ， 指 relative、absolute、fixed  
      实现方式：  
         position:absolutel  
top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移。  
      使用场合:  
         1、弹出菜单的位置  
   所有的弹出菜单都是绝对定位  
   7）固定定位  
      将元素固定在页面上的某一个位置，不随滚动条滚动而发生改变  
      语法:  
           position:fixed;  
  top、left、right、bottom