CSS进阶学习

5种主流浏览器及内核

IE trident

Chrome webkit/blink

Firefox gecko

Opera presto 3%-5%

Safari webkit

css引入三种方式

行间样式

页面级

外部css文件

同步：顺序进行。一件事做完做另一件事。

异步：同时进行。两件不同的事同时做。

CSS权重（进制256进制）

！Important infinity

行间样式 1000

Id 100

Class|属性|伪类 10

标签|伪元素 1

通配符 0

常用复杂选择器

div span {} div下的所有span标签样式

div > span {} div下的所有子标签span标签样式

div.demo{} 并列选择器，通过多种条件查询一个元素，（没有逗号）

em,span,div{} 分组选择器，共用代码块

* 浏览器遍历父子结构标签向左的顺序。

font-weight:100-900 加粗字体效果

Normal:400 bold:700 bolder:特粗体 lighter:细体

文字水平垂直居中

文本高度=容器高度 line-height=height

首行缩进2个字符

text-indent:2em //开头缩进两个字符。

em: 相对单位， em=1*font-size.

文字行高是1.2倍行高：line-height=1.2em;

行级元素：span strong em a del 内容决定大小，css不可修改宽高

块级元素：div p ul li ol form adress 独占一行，css可修改宽高

行级块元素：img 内容决定大小，css可修改宽高

盒模型

border:10px solid black; //盒子大小不变，外边加变宽10px边框

Padding:10px //盒子四周全都增加10px;

Margin:10px; //距离外部10px;

Padding:100px 100px 100px 100px;

　　　　　上右下左

Padding:100px 100px 100px

　　　　上左，右下

Padding: 100px 100px

上下左右

Padding: 100px

上下左右

body天生具有margin:8px;

定位

Left:100px; 盒子左边线距左侧100px;

层模型：

Position:absolute: 脱离原来位置定位，每个定位的盒子在不同层，比如楼房上下层用户。

Position:relative: 保留原来位置定位，本来的位置不许其他盒子占用。

absolute定位相当于最近的有定位的父级进行定位；如果没有，那么相对于文档定位。

relative定位相当于自己原来位置进行定位。

fix定位，（广告定位）相当于屏幕定位，在屏幕某个位置始终不变。

一般用法：父级用relative定位(保留原来位置，不影响后序标签位置)，盒子用absolute定位。

广告定位：始终在屏幕中心；

五环居中，随窗口改变而改变

<!DOCTYPE html>

<head>

<style>

.wrapper{

width:400px;

height:180px;

position: fixed;

left: 50%;

top: 50%;

margin-left: -200px;

margin-top: -90px;

}

.circle1,

.circle2,

.circle3,

.circle4,

.circle5{

width: 100px;

height: 100px;

border: 10px solid blue;

border-radius: 50%;

position: absolute;

}

.circle2{

left: 140px;

border-color: #000;

z-index: 3;

}

.circle3{

left: 280px;

border-color: red;

z-index: 5;

}

.circle4{

left: 70px;

top:60px;

border-color: yellow;

}

.circle5{

left: 210px;

top:60px;

border-color: green;

z-index: 4;

}

</style>

</head>

<body>

</div>

</body>

</html>

margin 塌陷bug

父子结构盒子，垂直方向上，父级margin-top与子级margin-top取最大值。

如果父级margin-top较大，子级margin-top将失去效果。

如果父级margin-top较小，子级将和父级一起使用margin-top最大值

<!DOCTYPE html>

<head>

<title>Document</title>

.wrapper{

width: 100px;

height: 100px;

margin-top: 100px;

解决方案3种；

1、overflow: hidden;

2、position: absolute;

3、display: inline-block; */

}

.content{

width: 50px;

height: 50px;

margin-top: 170px;

background-color: blue;

}

</style>

</head>

<body>

</div>

</body>

</html>

弥补方案：

1、给父级加上overflow: hidden;

2、给父级加上position: absolute;

3、给父级加上display: inline-block;

margin 合并bug

兄弟盒子，margin-top不能实现累加。

<!DOCTYPE html>

<head>

<title>Document</title>

.demo1{

background: red;

height: 10px;

margin-bottom: 100px;

}

.demo2{

background: green;

height: 10px;

margin-top: 100px;

}

.wrapper{

overflow: hidden;

}

</style>

</head>

<body>

<!-- 解决方案：加一层包裹

</div>

</div> -->

</body>

</html>

解决方案：加一层wrapper.(开发中一般不解决。)

浮动：

只有块级元素看不到浮动元素。当块级元素变成bfc元素时，可以看到浮动元素。

块级元素变成bfc元素三种方式：

1、overflow: hidden;

2、position: absolute;

3、display: inline-block;

如何清除浮动流。

1、父级元素变成bfc元素

2、父级使用伪元素::after{content: "";clear: both;display: block;}

*使用position 和 float 元素自动变成inline-block。

单行文本溢出部分打点显示

white-space: nowrap;

overflow: hidden;

text-overflow:ellipsis;

<!DOCTYPE html>

<head>

<title>Document</title>

width: 200px;

border: 1px solid #000;

/* 三件套 */

white-space: nowrap;

overflow: hidden;

text-overflow:ellipsis;

}

</style>

</head>

<body>

<p>打电话带大客户的卡大号带画uu的哈互贷的</p>

</body>

</html>

多行文本溢出：只做截断不做打点。

文字对齐方式

当一个行级块元素后面加一段文字，文字与行级块元素底对齐。当行级块元素内部有文字时，外面文字与内部文字底对齐。

CSS进阶学习的更多相关文章

Css 进阶学习
以下样式,表示css对第一个li标签无效,第一个以后的样式有效. .nav-pills>li+li { margin-left: 2px } <ul class="nav-pil ...
【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
CSS进阶之SASS入门指南
CSS进阶之SASS入门指南随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...
webpack快速入门——CSS进阶：自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
webpack快速入门——CSS进阶，Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
webpack快速入门——CSS进阶：SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
webpack快速入门——CSS进阶：消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...
（6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
CSS进阶之路
下面主要引用http://www.cnblogs.com/wangfupeng1988/tag/css知多少/ CSS进阶笔记: 一.学习CSS的三个突破点 1.浏览器如何加载和解析CSS——CSS的 ...

随机推荐

利用pipework为docker容器设置固定IP
今天介绍如何在redhat/centos7系列机器上使用pipework为docker启动的容器指定一个固定ip,我们知道默认情况下,docker会使用 bridge网络模式为每一个启动的容器动态分配 ...
C++ 编码导致编译错误
记录一个问题平时经常用Notepad++写C++,然后g++编译最近出现一个莫名其妙的问题原来是编译时遇到了非法字符用Notepad++一看,原来文件的编码出现的变化不是UTF-8或者其他对 ...
HDU4456-Crowd （坐标旋转处理+hash处理+二维树状数组）
题意: 给出一个矩阵,初始每个位置上的值都为0,然后有两种操作一种是更改某个位置上的值另一种是求某个位置附近曼哈顿距离不大于K的所有位置的值的总和技巧: 坐标旋转,使得操作之后菱形变成方方正正的 ...
数组转list
例如String数组转成Integer泛型的List String [] pathArr = deptPath.split(","); Lit<Integer> dep ...
re模块的小练习
1.匹配标签 1 import re 2 ret = re.search('<(?P<tag_name>\w+)>\w+</(?P=tag_name)>','< ...
orm中的聚合函数，分组，F/Q查询，字段类，事务
目录一.聚合函数 1. 基础语法 2. Max Min Sum Avg Count用法 (1) Max()/Min() (2)Avg() (3)Count() (4)聚合函数联用二.分组查询 1. ...
AcWing：139. 回文子串的最大长度（字符串Hash + 前缀和 + 后缀和 + 二分）
如果一个字符串正着读和倒着读是一样的,则称它是回文的. 给定一个长度为N的字符串S,求他的最长回文子串的长度是多少. 输入格式输入将包含最多30个测试用例,每个测试用例占一行,以最多1000000个 ...
python学习之路（8）
定义函数在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 我们以自定义一个求绝对值的my_ ...
is == 编码与解码
is 和 == 主要是数字和字符串的比较 1 区别: ==比较的是两边的值 is比较的是两边值的id id获取的方法 id() 2 小数据池: -5~256 3 字符串中特殊字符有id ...
Static class 与non static class的区别
内部静态类不需要有指向外部类的引用.但非静态内部类需要持有对外部类的引用.非静态内部类能够访问外部类的静态和非静态成员.静态类不能访问外部类的非静态成员.他只能访问外部类的静态成员.一个非静态内部类不 ...

CSS进阶学习

CSS进阶学习的更多相关文章

随机推荐

热门专题