css,html问题

移动端适配方案

1、viewport配置width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no。
2、使用rem,dpr默认为1

css

垂直居中：

<div class="wrap">
    <div class="cell">
        <p>哈哈哈</p>
    </div>
</div>

方法1：设置为表格：可以用vertical-align，优点：

.wrap{
    display: table
}
.call{
    display: table-cell;
    vertical-align: middle;
}

方法2：使用绝对定位：(水平同理)

.wrap{
    position:relative;
}
.cell{
    position: absolute;
    height: 240px;
    top: 50%;
    margin-top: -120px;
}

方法3：这个不是很能理解哦：

.wrap{
    float:left;
    height: 50%;
    margin-bottom: -120px;
}
.cell{
    clear:both;
    height: 240px;
    position: relative;

方法4：

.wrap{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
}

垂直水平居中：

方法1：

.wrap{
    position: relative;
}
.centent{
    width: 100px;
    height:100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

方法2：

.wrap{
    position:relative
}
.content{
    width: 100px;
    height: 100px;
    position: absolute;
    top:50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

方法3：???

.wrap{
    position: relative;
}
.content{
    position: absolute;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

方法4：

扫描二维码关注公众号，回复： 2147468 查看本文章

.wrap{
    display: flex;
    justify-content: center;
    aligh-item: center;
}

div中的文字内容居中(div有高度宽度)：

<div class="box">我要居中</div>

.box{
    width: 200px;
    height:200px;
    line-height: 200px;
    text-align: center;

}

清除浮動

.clearfix:after{
  content:"";
  height:0;
  line-height:0;
  display:block;
  visibility:hidden;
  clear:both
}
.clearfix{
  zoom:1;
}

选择器优先级

1.总结排序：

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS3新特性

CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。

2）E:nth-child(n)匹配父元素的第n个子元素E。

3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E
圆角:border-radius
阴影：text-shadow: 5px 2px 6px rgba(64,64,64,0.5)
css弹性盒子模型:

.boxcontainer {   
    width: 1000px;   
    display: -webkit-box;   
    display: -moz-box;   
    -webkit-box-orient: horizontal;   
    -moz-box-orient: horizontal;   
}   

 .item {   
    background: #357c96;   
    font-weight: bold;   
    margin: 2px;   
    padding: 20px;   
    color: #fff;   
    font-family: Arial, sans-serif;   
}

弹性盒子常用属性：

 justify-content：横轴上的对齐方式
 align-items:纵轴上的对齐方式
 flex:

媒体查询：@media

BFC规范

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
有道友对它做了分解，我们直接拿来：
1. 内部的Box会在垂直方向上一个接一个的放置
2. 垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
  
  　看到以上的几条约束，让我想起学习css时的几条规则：
  - Block元素会扩展到与父元素同宽，所以block元素会垂直排列
  - 垂直方向上的两个相邻DIV的margin会重叠，而水平方向不会(此规则并不完全正确)
  - 浮动元素会尽量接近往左上方（或右上方）
  - 为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素
    ……

移动端适配方案

css

清除浮動

选择器优先级

CSS3新特性

BFC规范

猜你喜欢