CSS高级技巧(改)

CSS高级技巧

1.盒子模型和background-clip

1.1 盒子模型

• 1.1、什么是盒子模型
  定义：把HTML页面中的元素看作是一个矩形的盒子盛装内容的容器。每个盒子都由元素的内容、内边距( padding)、边框( border)和外边距( margin)组成。通过CSS设置相关的属性达到网页布局、美化等作用。、
• 1.2、盒子模型对应的CSS属性：width、height、padding、border、margin。

1.2 background-clip

• 2.1、background-clip：指定绘图区的背景
• 2.2、语法：background-clip：border-box|padding-box|content-box
• 2.3、background-clip的值

值	说明
border-box	默认值。背景绘制在边框内（剪切成边框方框）
padding-box	背景绘制在衬距方框内（剪切成衬距方框）
content-box	背景绘制在内容方框内（剪切成内容方框）

2.元素隐藏与展示

1.隐藏的三种方法

1.1、第一种 display：none/block;
none：隐藏，block：显示
1.2、第二种 visibility：hidden/visible;
hidden：隐藏、visible：显示
1.3 、第三种 opacity：0/1；
0：隐藏，1显示，0和1中间是半透明

3、轮廓线、防止拖拽

3.1 鼠标样式

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

3.2 防止拖拽文本域resize

语法：

4.vertical-align 垂直对齐

• 有宽度的块级元素水平居中对齐，是margin：0 auto；
• 让元素中的文字居中对齐，是text-align：center
  vertical-align 语法

vertical-align:baseline|top|middle|botton

• 注意：
  vertical-align 不影响块级元素中的内容对齐，他只针对于行内元素或者行内块元素。
  特别是行内块元素，通常用来通常用来控制图片/表单与文字的对齐

4.1 图片、表单和文字对齐

• 默认文字与图片是基线对齐

模式	单词
基线对齐：默认的是文字和图片基线对齐	vertical-align:baseline;
垂直居中	vertical-align:middie;
顶部对齐	vertical-align:top;

4.2 去除图片底侧空白缝隙

• 父盒子由图片撑开，图片下面会多出缝隙
• 原因：
  图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
  就是图片底侧会有一个空白缝隙
• 解决的方法：
  • 给img vertical-align：middie | top | bottom等等，让图片不要和基线对齐
  • 给img添加 display：block；转换为块级元素就不会存在问题了

5 .溢出的文字省略号显示

5.1 white-space

• white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

 white-space:normal;默认处理方式
  white-space:nowrap;强制在同一行内显示文本，直到文本结束或者遇到br标签对象才换行

5.2 text-overflow 文字溢出

• 设置或检查是否使用一个省略标记(…)标示对象内文本的溢出

text-overflow:clip;不显示省略标记(...)而是简单地截切
text-overflow:ellipsis;当对象内文本溢出时显示省略标记(...)

** 注意 ：**
一定要首先强制一行内显示，再次和overflow 属性 搭配使用

6. margin负值

1. 负边距+定位：水平垂直居中
2. 压住盒子相邻边距

7. 三角之美

        div{
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border-top: 10px solid red;
            border-right: 10 solid green;
            border-bottom: 10px solid blue;
            border-left: 10px solid #000;
        }