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的 ...

随机推荐

SpringBoot项目多模块打包与部署【pom文件问题】
[bean的pom] [user的pom] 特别注意,user模块因为有返回jsp页面和web相关,所以需要加入web依赖. chapter23 com.yuqiyu 1.0.0 4.0.0 com. ...
spring data mongo API learn(转)
显示操作mongo的语句,log4j里面加入: log4j.logger.org.springframework.data.mongodb.core=DEBUG, mongodb log4j.appe ...
15.DRF学习以及相关源码阅读
1.http请求协议代码很枯燥,结果和奇妙. 1.cbv django.vuews import View classs LoginView(View): def get(self,requset) ...
docker 部署项目
一:我使用的是阿里云的ubuntu16.4系统. 项目数据库: # 数据源 spring: datasource: type: com.zaxxer.hikari.HikariDataSource d ...
Nowcoder Circulant Matrix ( FWT )
题目链接题意 : 给你一个a数组和b数组,构造出A[i][j]矩阵(A[i][j] = a[i xor j]) 给出等式 A * x = b ( mod p ) n等于4的时候有: A[0][0]* ...
javascript中创建对象的方式及优缺点(一)
1. 简单方式创建对象 // 字面量方式创建对象 var person1 = { name: "xyc", age: 23, sayHi: function() { console ...
51nod 1120 机器人走方格V3
1120 机器人走方格 V3 基准时间限制:1 秒空间限制:131072 KB 分值: 80 难度:5级算法题收藏关注 N * N的方格,从左上到右下画一条线.一个机器人从左上走到右下,只 ...
TTTTTTTTTTTTT CF Good Bye 2015 C- New Year and Domino(CF611C) 二维前缀
题目题意:给你一个n*m由.和#组成的矩阵,.代表可以放,#代表不可以,问在左上角(px,py)到(右下角qx,qy)这样的一个矩阵中,放下一个长度为2宽度为1的牌有多少种放法: #include ...
python环境下安装opencv库的方法
注意:安装opencv之前需要先安装numpy,matplotlib等一.安装方法方法一.在线安装 1.先安装opencv-python pip install opencv-python --u ...
[NOIP2014普及组T1]珠心算测验 - NTT
求数组有多少个数,恰好等于集合中另外两个(不同的)数之和? 注意到数集比较小,而且涉及到下标的加法,可以很自然地想到卷积注意减去自己加自己的贡献真是一道NTT练手好题 #include <i ...

CSS进阶学习

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

随机推荐

热门专题