常见问题以及属性、浮动和定位对比、透明度属性（兼容）、盒模型特点

最新推荐文章于 2024-08-16 19:29:16 发布

@西楚霸王

最新推荐文章于 2024-08-16 19:29:16 发布

阅读量217

点赞数

分类专栏：常见问题以及属性、浮动和定位对比、透明度属性（兼容）、盒模型特点文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_41027812/article/details/108190610

版权

常见问题以及属性、浮动和定位对比、透明度属性（兼容）、盒模型特点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS布局中的盒模型特点，包括内容区域、边框和内外边距。接着对比了浮动与定位的区别，如`float`对文本的影响和`position`的完全脱离文档流特性。此外，文章还涵盖了常见的CSS问题解决方案，如垂直对齐、图片间隙消除、文本框与按钮对齐。最后，讨论了透明度属性`opacity`和`rgba()`的使用，以及在不同浏览器中的兼容性策略。

摘要由CSDN通过智能技术生成

布局技巧

盒模型特点

所有的子标签和文字都在内容区域
默认标签的宽高描述的是内容区域（content-box）
边框由三部分组成：宽度，样式，颜色
内边距是内容到边框的距离，外边距是盒子外部的空间
默认内边距拥有背景色，外边距没有背景色

浮动和定位对比

CSS 中能够使标签脱离文档流的属性有：
- float:left;
- float:right;
- postion:absolute;
- position:fixed;
对于使用 float 脱离文档流时，其他盒子会无视这个标签，但其他盒子内的文本、图片、表单标签依然会为这个标签让出位置，环绕在周围 ( 脱离文档流，不脱离文本流 )。
而对于使用 position 脱离文档流的标签，其他盒子完全无视它，包括标签内部的文本、图片、表单标签（既脱离文档流，又脱离文本流）。

常见问题以及属性

vertical-align 属性设置标签的垂直对齐方式。利用这个属性做图文对齐方式
- baseline 默认。标签放置在父标签的基线上。
- top 把标签的顶端与行中最高标签的顶端对齐。
- middle 把此标签放置在父标签的中部。
- bottom 把标签的底端与行中最低的标签底端对齐。

图片间隙解决

去除图片下间隙的办法有很多，常用的有4种：
- 设置父标签字号为 0
  - ```
  .wrap{
     font-size: 0;  
  }
```
- 改变图片的 display
  - ```
  img{
     display: block;  
  }        
```
- 给图片设置垂直对齐方式(只解决图片上下方间隙)
  - ```
  img{
     vertical-align: middle;// 设置为任意不为 baseline 的值都可以 
   }
```
- 设置父标签行高为 0(只解决图片上下方间隙)
  - ```
  img{
     line-height:0;
   }
```

文本框与按钮对不齐现象

解决方案：文本域设置高度 20px，按钮高度需要设置 24px。给 input 和 button 增加边框 border，覆盖原来的样式，input 设置左浮动 (float:left)。

    <style>
        .text1 {
            border: 1px solid #ccc;
            height: 20px;
            float: left;
        }

        .button {
            border: 1px solid #ccc;
            height: 24px;
        }
    </style>
</head>
<body>
    <input type="text" class="text1">
    <input type="submit" class="button">
</body>

显示与隐藏

盒子显示：
- display:block;
盒子隐藏：
- display:none：隐藏该元素并且该元素所占的空间也不存在了。
- visibility:hidden ：隐藏该元素但是该元素所占的内存空间还存在。
overflow 属性
- overflow 属性规定当内容溢出标签框时的显示方式，包括水平方向和垂直方向。
- overflow-x 只包括水平方向。
- overflow-y 只包括垂直方向。
  - visible 默认值。内容不会被修剪，会呈现在标签框之外。
  - hidden 内容会被修剪，并且其余内容是不可见的。
  - scroll 需要不需要都产生滚动条
  - auto 需要的时候出现滚动条，不需要就不出现
list-style
- list-style-type
  - none 无标记
  - disc 默认，标记是实心圆
  - circle 标记是空心圆
  - square 标记是实心方块
  - decimal 标记是数字
  - decimal-leading-zero 0开头的数字标记
  - lower-roman 小写罗马数字
  - upper-roman 大写罗马数字
  - lower-alpha 小写英文字母
  - upper-alpha 大写英文字母
- list-style-position
  - inside 文本内部，文本根据标记对齐
  - outside 文本左侧，文本不根据标记对齐
- list-style-image
  - 改变标记为指定的图片，但是图片的大小不能改变
- 背景属性设置列表标记
  - ```
  		ul {
              list-style-type: none;
          }
          li {
              background-image: url(01.jpg);
              background-repeat: no-repeat;
              background-size: 10px 10px;
              background-position: 0 6px;
              padding-left: 20px;
          }
```

透明度属性 (opacity,rgba())，透明度兼容

opacity
- 兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。
- 使用说明：设置 opacity 元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度。
rgba()
- 兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。
- 使用说明：设置颜色的不透明度，一般用于调整 background-color、color 等的不透明度
IE 专属滤镜 filter:Alpha(opacity=x)
- 兼容性：仅支持 IE6、7、8、9，在 IE10 版本被废除。
- 使用说明：IE 浏览器专属，x值为0-100
- IE浏览器，当子标签加相对定位，会失去透明效果

@西楚霸王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见问题以及属性、浮动和定位对比、透明度属性（兼容）、盒模型特点

布局技巧盒模型特点所有的子标签和文字都在内容区域默认标签的宽高描述的是内容区域（content-box）边框由三部分组成：宽度，样式，颜色内边距是内容到边框的距离，外边距是盒子外部的空间默认内边距拥有背景色，外边距没有背景色浮动和定位对比CSS 中能够使标签脱离文档流的属性有：float:left;float:right;postion:absolute;position:fixed;对于使用 float 脱离文档流时，其他盒子会无视这个标签，但其他盒子内的文本、图片、
复制链接

扫一扫

专栏目录