Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制

布局

对象属性

  new Person('')      

原型链

(创建对象.使用对象中的属性，如果没有那么就去原型找)

new Person()      Person{   name:'', getname(){   }}     定义一个构造函数 __Prototype__  {setName（）}           p = new Person().setName()

移动端设备适配

移动端布局  设置盒子单位 为 1rem,屏幕 == 100% == 1rem

移动端设备适配
移动端布局  设置盒子单位 为 1rem,屏幕 == 100% == 1rem

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 16rem;
            height: 16rem;
            background: deeppink;
        }
    </style>


<div id="box">
 <p>设置文字的font-size</p >
</div>

js  代码：
<script type="text/javascript">
    //获取屏幕宽度
    var width = document.documentElement.clientWidth;

    //获取html
    var htmlNode = document.querySelector('html');

    //设置html字体大小
    htmlNode.style.fontSize = width/16+ 'px';

</script>

css样式设置 16rem  就是 适应设备的100%

 

垂直居中的4种方式

　　1.父亲盒子有宽度 margin 0 auto 

　　2.定位  50%  + margin-left='-盒子的一般宽度'

　　3.flex  display:flex;       display: flex;       justify-content:center;       align-items:center;

　　4.定位 50%   Css3:transfrom:translate(-50%,-50%)

实现倒三角形

　　div   高度0px   上边框50px   剩下三个边框一样的宽度 设置为 边框背景色透明    transparent

 

1.让表单标签没有框
outline-style:none; input

2.引入网页图标
<link rel=“icon”rel="/img.ico"/>

3.禁止文本框的拖拽
resize:none;
font-style:normal;
font-weight:normal;

4.字体样式
font：12px/150% Arial,Verdana,"\5\"
font-family:'微软雅黑'；

5. 去掉图片之间的默间距
vertical-algin:midden;

6.浮动的盒子要给宽度，不然会掉下来

7.谷歌不支持 12px 以下的字体

8.清楚浮动代码块
.clearfix{
    clear:both;
    over-flow:hidden;
    display:block;
    content:"";

}
9.清除浮动

父盒子没高度 子盒子进行了浮动就会 放到兄弟盒子的上面

10.一个是布局的重要性，尺寸得一致
布局的盒子不给宽高，子级盒子设置宽高，撑起来
.wrap 默认布局中心

轮播图为例：
布局盒子给宽高，内盒子 设置无限大，里面的元素设置float 定位，不影响布局超出 hidden隐藏

11.设置盒子 放入背景图片居中
background-size:contain;
12.垂直居中的4种方式

　　1.父亲盒子有宽度 margin 0 auto

　　2.定位 50% + margin-left='-盒子的一般宽度'

　　3.flex display:flex; display: flex; justify-content:center; align-items:center;

　　4.定位 50% Css3:transfrom:translate(-50%,-50%)

盒模型：
width/height/padding/boder/margin

常用布局 ：

     响应式布局   flex布局    流式布局   网格布局    

     口诀： 宽度百分比  高度写死，使用reset重置    字体：62.5%

 

css选择器： 类 id 属性 伪类 多重 迭代

层叠上下文： z-index

常见页面布局：单列布局，双列布局 三列布局 剩下的偏小众的网站，动态效果多一点

 

设置文本超出 ...

box多行文本 ...
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

响应式布局并排盒子
           父亲 display:flex， flex-wrao:wrap;
           儿子：width:25%;

比如说设置了一个padding值，称开了
box-sizing:border-box;
注释：盒子的宽度等于 盒子本身的宽度 盒子宽度 + padding + border

头部

height：4.4rem
line-height:4.4rem

background:gray;

text-align:center;

padding:0 2 rem;

 

news:

li{
height:3.4rem
lin-height:3.4rem
border-bottom:1px solid #eee;
font-size:1.6rem
a{

}
}

 

详情页面 会左右滑动
padding:1rem   10%  

flex  内容居中  盒子内容居中
   display:flex;
   justify-content:center
   align-items:center

 

盒子背景图   

居中显示：   比例显示   （设置高度）  background-size:contain;   填满    100% 100%;