一 单位

1.px 就是一个基本的单位 像素

2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字。如果父级没有就继承上一个父级直到body,如果body没有那就默认是16px。

3.rem 也是一个单位,只跟根节点<html>的字体大小有关,如果没有默认是16px。

4.line-height 行高 line-height:2; 行高值 是当前数字2乘以元素字体大小。

二 浏览器

浏览器和浏览器之间是由差距的,这个差距是由浏览器自身的内核决定的。

每个浏览器都有自己的前缀,主要解决css3中的兼容问题。

Chrome(谷歌) 的前缀 -webkit-

Firefox(火狐)  的前缀 -moz-

Ie 的前缀  -ms-

Opera(欧朋)  的前缀  -o-

国内的浏览器的内核是谷歌。

三 布局

  1. 流式布局  float+margin
  2. 定位
  3. 双飞翼
  4. 圣杯
  5. 弹性盒子布局 移动端布局

    全称叫弹性和模型:是由父级的弹性容器和子级的弹性子元素两者构造。

    display:flex;这个属性决定谁是弹性容器,他里面的子元素就是弹性子元素。

    flex 是弹性子元素在弹性容器中所占的份数。属性值是数字

6.表格布局

  1. 7.box-sizing:border-box;这个属性 让元素的实际宽度就等于设置width,即便有了padding和border只会向内挤压,元素的可利用空间变小。

css的再深入9(更新中···)的更多相关文章

  1. CSS的再深入(更新中···)

    在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签 元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特 ...

  2. CSS的初了解(更新中···)

    在前面,我们学习了html的结构.基本骨架.起名方式和选择器,接下来,我们就要学习CSS了. 首先,我们要知道CSS是什么. CSS 全称叫层叠样式表,作用是给html添加样式style,添加属性. ...

  3. less.css基础学习,陆续更新中

    //基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...

  4. JS基础知识再整理..........不断更新中

    1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...

  5. CSS效果集锦(持续更新中)

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  6. css:使用笔记(不断更新中...)

    1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高 但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置 ...

  7. CSS的进一步深入(更新中···)

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  8. HTML + CSS (下)【更新中】

    弹性盒子: 定义:弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案. 主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧 ...

  9. CSS相关知识(持续更新中)

    1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...

  10. html2canvas - 项目中遇到的那些坑点汇总(更新中...)

    截图模糊    原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...

随机推荐

  1. poj 1556

    哦天哪这个萨比提又浪费了我好几个小时. 我们在check的时候只考虑严格相交就行了,想了很久才注意到这一点. 然后就建图跑最短路,over. #include <cstdio> #incl ...

  2. PHP中通过bypass disable functions执行系统命令的几种方式

    原文:http://www.freebuf.com/articles/web/169156.html 一.为什么要bypass disable functions 为了安全起见,很多运维人员会禁用PH ...

  3. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  4. HttpClient学习记录-系列2(源码学习)

    如何阅读第三方工具源码? 存在多个入口,而且整个类图存在很多孤岛,自上而下的分析策略貌似不行,还是从use case入手,针对单个面分析.难点是如何做范围界定?不至于陷入黑洞 HttpGet   -- ...

  5. 文件内容统计:对任意给定的.txt文件进行内容的字符数、行数、单词数进行统计

    项目源码地址:https://gitee.com/xjtsh/projects 功能实现: wc.exe -c file.c     //返回文件 file.c 的字符数 wc.exe -w file ...

  6. 求最短路的三种方法:dijkstra,spfa,floyd

    dijkstra是一种单源最短路算法.在没有负权值的图上,vi..vj..vk是vi到vk最短路的话,一定要走vi到vj的最短路.所以每次取出到起点距离最小的点,从该点出发更新邻接的点的距离,如果更新 ...

  7. Python中time模块详解(转)

    在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime以及calendar.这篇文章,主要讲解time模块. 在开始之前,首先要说明这几点: ...

  8. DataGrid表格某单元格数据填入是否正确的验证---MiniUI使用

    示例: <div id="datagrid1" class="mini-datagrid" oncellvalidation="onCellVa ...

  9. Java 关于密码处理的工具类[MD5编码][AES加密/解密]

    项目中又遇到了加密问题,又去翻了半天,然后做测试,干脆就把常用的两类小结一下. 1.第一种所谓的MD5加密 其实也不算加密,只是基于Hash算法的不可逆编码而已,等于说,一旦经过MD5处理,是不可能从 ...

  10. MAC OS X&Vmware

    推出共享文件恢复解决办法: 将/Volumes/VMware shared Folders 文件删除(此时这个文件中的内容为乱码) ,生成一个 VMware shared Folders文件夹,重新设 ...