布局

对象属性

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

Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制的更多相关文章

  1. CSS布局:让页底内容永远固定在底部

    我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...

  2. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  3. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  4. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  5. 典型的DIV+CSS布局——左中右版式

    [效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Def ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. 深度理解div+css布局嵌套盒子

    1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...

  8. CSS布局总结及实际应用中产生的问题

    布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...

  9. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

随机推荐

  1. Gradle基本操作入手

    Gradle本身的领域对象主要由Project和Task.Project为Task提供了执行上下文,所有的Plugin要么向Project中添加用于配置Property,要么向Project中添加不同 ...

  2. python 切片索引

  3. 洛谷 P1858 多人背包 DP

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 洛谷 P1858 多人背包 题目描述 求01背包前k优解的价值 ...

  4. Kernal Panic - Not syncing : VFS: unable to mount root fs on unknown-block

    升级了一下centos6.5 执行了 yum -y update reboot 出现了以下问题: Kernal Panic - Not syncing : VFS: unable to mount r ...

  5. Lib1vent:10链接监听器接受TCP链接

    evconnlistener机制提供了监听并接受TCP链接的方法.除非特别注明,本章的所有函数和类型都在event2/listener.h中声明. 一:创建或释放evconnlistener stru ...

  6. php配置文件php.ini中文详解

    转自:http://www.cnblogs.com/hbl/archive/2008/02/15/1069367.html [PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而p ...

  7. HZOJ 毛一琛

    直接暴搜是$3^n$的,无法接受. 正解是$meet \ in \ the \ middle$,暴搜前n/2个数,每个数的状态有三种:都不选,选为A集合,选为B集合.那么我们可以维护两个集合的差. 设 ...

  8. XAML 特效

    <Window x:Class="WpfApp5.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...

  9. Flask学习之六 个人资料和头像

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-vi-profile-page-and-avatars ...

  10. Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

    在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...