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%;