背景属性及盒子居中技巧

背景属性

• background-color : red

• background-image: url(./img/bg.jpg)

• background-repeat: no-repeat

• background-size: 像素值或者百分比

• background-position:百分比或者位置英文单词或者像素值

• 简写：background:red url(./img/bg.jpg) no-repeat top

标签的嵌套规则

• • h标签和p标签只能嵌套其他行内标签或者文字

  • h标签和p标签不能嵌套其他块级标签，包括自己

  • a标签属于行内标签，但是比较特殊，可以嵌套任何标签，除了a标签

  • 其他行内标签只能嵌套文字，或者行内标签

  • ul和ol子标签必须是li

标签显示模式转换 display

• 块级标签

• • div h1-h6 p ul li ol li dl dt dd

  • 独立成行

  • 高度、行高、外边距以及内边距都可以控制

  • 宽度默认是容器的100%

  • 可以容纳内联标签和其他块级标签

• 行内标签

• • strong b em i del s span

  • 在一行排列，超出才会折行

  • 高、宽无效，但水平方向的margin可以设置，垂直方向的margin无效

  • 默认宽度就是它本身内容的宽度

  • 行内标签只能容纳文本或者其他行内标签

• 行内块标签

• • img input td

  • 和相邻的行内块标签在一行，但之间会有白色缝隙

  • 默认宽度就是它本身内容的宽度

  • 高度、行高、外边距以及内边距都可以控制

• 转换 display

• • 块转行内：display : inline;

  • 行内转块 ： display : block;

  • 块、行内转行内块 ： display : inline-block;

行内块标签一些特殊用法

1.居中

行内块居中需要给父元素添加text-align:center; 给自身添加margin:0 auto无效

2.行内块下多出的空白间隙

• 解决方法：

  1、 把图片转换成块级

  2、 给行内块父级设置font-size:0;line-height:0;

  3、 给行内块设置vertical-align:middle; 设置为任意不为 baseline 的值都可以

其他属性

1、垂直对齐方式

vertical-align:baseline; 基线对齐

middle; 中间对齐

top; 顶部对齐

bottom; 底部对齐

2、行内块之间的空白问题

• 因为标签之间的换行符会识别成一个空格

解决方法：

• 给父元素添加font-size:0;

3、显示和隐藏

display:none; 隐藏,不占位

display:block/inline/inline-block; 显示

visibility:visible; 可见

visibility:hidden; 不可见，占位

盒子居中技巧

• margin:0 auto

      * {
        margin: 0;
        padding: 0;
      }
  ​
      div {
        width: 600px;
        height: 600px;
        border: 1px solid;
      }
  ​
      p {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 盒子居中 */
        margin: 200px auto;
      }

css三大特性

• 层叠性

• • 样式冲突就近原则，也就是后引入生效

  • 样式不冲突的代码不会受影响

• 继承性

• • 子标签继承父标签的样式

• • 文本字体属性都会继承，text-, line- ,font-, color

• 优先级

选择器类型	权值
通配符选择器	0
标签选择器	1
类选择器，伪类选择器	10
ID选择器	100

• 复合选择器的权值计算方式：组成其所有单一选择器的权值之和 ul>li .red 1+1+10=12

• 行内样式优先：权值1000

• ！important 无限权重

• 继承样式的权值为最低，甚至比通配符选择器还低

• 注意：无数个class比不上一个id,无数个标签比不上一个类 复合选择器权值等于组成所有单一选择器之和，不包括群组

overflow 属性

• • overflow 属性规定当内容溢出标签框时的显示方式，包括水平方向和垂直方向。

  • overflow-x 只包括水平方向。

  • overflow-y 只包括垂直方向。

• • • visible 默认值。内容不会被修剪，会呈现在标签框之外。

    • hidden 内容会被修剪，并且其余内容是不可见的。

    • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

    • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。