Hexo

标签：ref   依次   icon   display   图片   padding   ie7   box   osi   

块级元素的特点

• 独占一行，在所在父元素内依次向下排列，从左上角开始
• 宽度和高度在不设置的情况下，宽度继承父级元素内容的宽，高度有本身内容决定
• 可以直接设置盒子模型的所有属性（width height padding border margin）
• 可以嵌套其他元素
  • p，dt，h1-h6不能嵌套块级

行内元素和行内块级元素

• 在一行显示，从左到右，达到父级元素最大宽度的时候，会自动折行
• 在编辑代码时，元素之间有回车或者空格，在页面显示的时候，盒子和盒子之间会有间隙
• 默认是基线对齐
• 默认不设置宽度的时候，宽高都是由本身内容决定的

##行内元素

• 宽度和高度不能设置
• 可以设置pading和margin的左右值

行内块级元素

• 可以设置盒子模型的所有属性

在布局中如何使用css属性将块级元素放到一行排布

• float:left/right
  • 盒子可以从左向右 或者 从右向左
• display : inline / inline-block / table
  • inline 盒子就不能设置宽度和高度
  • inline-block 可以设置宽高 但是只能从左到右
  • table 可以设置宽高 但是只能从左到右
    • 给父级元素设置 display:table;
    • 给子级元素设置display:table-cell;(单元格)

测试

• 自测
• UI
• 测试（功能）
• 试运行
• 正式上线

background 背景

背景和内容的关系，背景永远在内容之后
background-image: url(“”); –> 引入背景图片
background-repeat:no-repeat; –> 背景图片填充方式 不平铺
background-color:red; –> 设置背景颜色（会在背景图片的后面）
background-position: 3px 5px;

如何让图片的中心点和盒子的中心重合
background-position: center center;

background-origin: content-box; –> 规定背景图片定位的

1
2
3
4
5

height: 300px;background-color: yellow;
            background-image: url("导航头部/images/icon.png"),url("导航头部/images/logo.png");
            background-repeat: no-repeat;
            background-position: top center,right bottom;
            /*ie 678 （低版本浏览器） 不兼容*/

1
2

background: yellow url("导航头部/images/icon.png") no-repeat 10px 20px;
background-size:100% auto;

绝对定位

• 想让盒子在父级盒子的那个位置，就在哪个位置
• 脱离文档流（父级盒子找不到这个定位子级盒子的宽度和高度了）
• 必须有一个参照物，这个参照物只能是这个定位盒子的父级元素（只要是包含的就可以），父级元素还必须带有定位属性
• 定位的元素层级高于普通元素

当行内元素或行内块级元素设置line-height不生效的时候，可以将这个元素display属性值设置为block
块级元素通过display:inline-block;转化后，ie7不会识别，所以要在display:inline-block;之后添加一个*display:inline;

1 2	display: inline-block; *display:inline;

第二种解决方式是将这个元素直接设置为float浮动的元素

在ie7中，如果结构

1 2 3 4 5 6

<style> b{float:right;} </style> <h3>文字 <b></b></h3> b元素会跑到h3元素的下方 将“文字”用一个元素包起来，将这个元素float:left;即可

选择器 格式 用法
小例子 敲三遍

Hexo

标签：ref   依次   icon   display   图片   padding   ie7   box   osi   

原文地址：https://www.cnblogs.com/lijianming180/p/12268038.html