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%;
Css布局常用 1.盒子内容局中 2. 物理一像素 3.倒三角形 绘制的更多相关文章
- CSS布局:让页底内容永远固定在底部
我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- 典型的DIV+CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- 深度理解div+css布局嵌套盒子
1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...
- CSS布局总结及实际应用中产生的问题
布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
随机推荐
- Gradle基本操作入手
Gradle本身的领域对象主要由Project和Task.Project为Task提供了执行上下文,所有的Plugin要么向Project中添加用于配置Property,要么向Project中添加不同 ...
- python 切片索引
- 洛谷 P1858 多人背包 DP
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 洛谷 P1858 多人背包 题目描述 求01背包前k优解的价值 ...
- 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 ...
- Lib1vent:10链接监听器接受TCP链接
evconnlistener机制提供了监听并接受TCP链接的方法.除非特别注明,本章的所有函数和类型都在event2/listener.h中声明. 一:创建或释放evconnlistener stru ...
- php配置文件php.ini中文详解
转自:http://www.cnblogs.com/hbl/archive/2008/02/15/1069367.html [PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而p ...
- HZOJ 毛一琛
直接暴搜是$3^n$的,无法接受. 正解是$meet \ in \ the \ middle$,暴搜前n/2个数,每个数的状态有三种:都不选,选为A集合,选为B集合.那么我们可以维护两个集合的差. 设 ...
- XAML 特效
<Window x:Class="WpfApp5.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...
- Flask学习之六 个人资料和头像
英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-vi-profile-page-and-avatars ...
- Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...