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

随机推荐

Spring MVC HandlerMapping
http://www.cnblogs.com/tengyunhao/p/7658952.html http://www.cnblogs.com/tengyunhao/p/7518481.html Sp ...
GoAccess安装及分析nginx实时日志
GoAccess是一个基于终端的快速日志分析器.其核心思想是实时快速分析和查看Web服务器统计信息,而无需使用您的浏览器(如果您希望通过SSH快速分析访问日志,或者只是喜欢在终端中工作),终端输出是默 ...
k8sService资源
一.service资源及其实现模型通过规则定义出由多个pod对象组合而成的逻辑集合,以及访问这组pod的策略.service关联pod资源的规则要借助于标签选择器来完成 1.service资源概述 ...
加密web.config数据库连接
加密cd C:\Windows\Microsoft.NET\Framework64\v4.0.30319aspnet_regiis.exe -pef "connectionStrings&q ...
Linux使用技巧汇总
Debian是我日常使用的桌面系统,这里记录了我在使用Debian和其他Linux时所有的问题和解决办法,以及一些其他的心得体会. 向Debian致敬! 找回桌面系统关机按钮在/etc/polkit ...
在echart组件下用canvans画三角形
//使用的canvans绘制的三角形 drawArrow(){ var canvas = document.createElement('canvas');//创建一个元素 canvas.width ...
openwrt boot 启动出现的问题
一.boot启动出现JFFS2挂载文件系统错误问题排查: 1.固件问题. 2.刷机,写进去不完整. 3.flash有问题. 二.openwrt 进入web页面出错解决方法: 1.SSH进去,先恢复 ...
SQL中模糊查询的模式匹配
SQL模糊查询的语法为: “Select column FROM table Where column LIKE 'pattern'”. SQL提供了四种匹配模式: 1. % 表示任意0个或多个字符. ...
Java内存模型之可见性问题
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门前言之前的文章中讲到,JMM是内存模型规范在Java语 ...
mysql 日期辅助表
MySQL 生成日期表 #.创建一个num表,用来存储数字0 CREATE TABLE num (i int); #.在num表中生成0 ), (), (), (), (), (), (), (), ...

CSS进阶学习

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

随机推荐

热门专题