CSS 总结（1）

CSS 总结（1）

1. margin

• margin: 中的atuo值
  用于块级元素在他的父级内水平居中。写给本身。

2. 块级元素水平居中：

• margin： 0 auto;
  用于块级元素在他的父级内水平居中

3. 文本居中：

• text-align: 只针对于块级元素里面的行内元素、行内块元素有效。这个属性写给行内元素、行内块元素的父级标签。只能写给块级元素

4. 垂直居中:

写在块级标签和行内块标签都可以

① 单行文本垂直居中：

1line-height

② 多行文本垂直居中：

1. padding-top(高度-(单行行高*行数))/2; 这个还需要使用box-sizing:border-box

5. 垂直对齐方式：

vertical-align: 是针对于前面和后面的内联元素对齐。

• 该属性只能给内联元素设置，其次该属性并不针对自身。而是针对其前后的内联元素与自身的垂直对齐方式

6. 插入图片和背景图片

• 插入图片：img 直接插入就好
• 插入的是背景图，必须写元素的宽度和高度，从而指定范围

7. 尺⼨⻆度

• img 具有⾃⼰的尺⼨，不设置宽度⾼度，可以直接显示 （如同照⽚） 背景图必须设置宽度和⾼度 （如同打印）
• 增加内容⻆度： img 图⽚上不可以直接写⽂字，除⾮在 img 盒⼦外部定位；背景图是可以在图⽚上写⽂字的，背景图其实和颜⾊⼀样
  功能⻆度。
• img ⼀般⽤于产品展示，可以根据素材更新
• 背景图⼀般左⼤背景或者更新⼩图标 icon

8.标签语义化更强,css更加灵活

9. 去除幽灵空白节点

• 插入图片img会有个缝，称幽灵空白节点：(幽灵空白节点只有行内元素才有)
• 去掉这个缝的2种方法：
  ① 在img这个标签上转换为块级元素: img{ display:block; }
  ② 在img这个标签上设置vertical-align为其他值——vertical-align:top/middle/bottom；
  ③ 保证父元素只有一张图片没有其它元素，可以让父元素的字号为0。（font-size:0;）
  ④ 保证父元素只有一张图片没有其它元素,可以在元素中写上line-height设置为0

其他

1. 内联元素上下内边距没有把地方撑大。只是视觉效果。内联元素上下内、外边距设置无效。但左右内外边距设置有效。

②body的高度。

• 在标准盒子模型中，增加了padding意味着元素变大了，那么要包装元素占位不变大，只能减少宽度来保证内边距的增加不会使元素增大

伪元素用处：

清除外边距:

• 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。

.box::before { content: ""; display: table; }

• 清除浮动

给浮动的父元素加：

.clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        } /*IE/7/6*/

浏览器的私有前缀

• 针对于 CSS3

1. -webkit- 浏览器: chrome、safari/edge
2. -moz- 浏览器：firefox
3. -o- 浏览器：opera
4. -ms- 浏览器 IE

清除外边距4中方法:

• 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象。
• 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距会被浏览器会认为你定义的是其父级元素的边。

解决方案

1. padding-top: **px; 父元素增加 padding-top 缺点：增加了父元素实际高度
2. 增加父元素的边框，缺点：增加了父元素实际高度。border: 1px solid #fff;
3. 父元素增加 overflow: hidden/auto; ，缺点，父元素就不能溢出显示内容了。overflow: hidden/auto;
4. 使用 CSS3 伪元素 ::before 给父元素添加内容,源于增加空 <table></table>。box::before { content: ""; display: table; }

清除盒子浮动float5种方法

• 清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌
• 浮动的影响父元素无高度
• 父元素无高度后，父元素的兄弟元素会向上，发生被遮盖

利用高度解决

弊端：未必知道子元素的高度。

父元素也浮动

父元素也浮动，这样就和子元素在同一层里了。
弊端：会影响父元素的兄弟元素

父元素溢出隐藏

overflow：hidden/auto;

增加clear:both的子元素

clear:both;

可以清除左右两侧的元素浮动后果。
弊端是多一个标签。

用伪元素解决

• 给父元素增加一个在尾部的伪元素

clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        } /*IE/7/6*/