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使用@AspectJ开发AOP（零配置文件）
前言: AOP并不是Spring框架特有的.Spring只是支持AOP编程 (面向切面编程) 的框架之一. 概念: 1.切面(Aspect) 一系列Advice + Pointcut 的集合. 2.通 ...
安装nodejs与使用
nodejs 官方下载地址:https://nodejs.org/en/ 下载完成后,双击打开安装程序然后: 然后点击install,等待安装安装完成后的目录如下: 检测是否真的安装成功.打开cm ...
【leetcode】740. Delete and Earn
题目如下: Given an array nums of integers, you can perform operations on the array. In each operation, y ...
win服务器安装sftp服务端
工作环境中常常会用要下载数据或者是让对端推送数据到本地服务器上,当传输的数据比较重要时,可以使用基于安全文件传输协议(sftp)来实现需求. 本人在工作环境中就遇到这样的情况,局方给我们推送数据,要求 ...
sh_03_列表的数据统计
sh_03_列表的数据统计 name_list = ["张三", "李四", "王五", "王小二", "张三 ...
Linux 打印简单日志（一）
简单日志输出: #include<stdio.h> #include<string.h> #include<stdlib.h> void write(char* f ...
Compress Words
E. Compress Words 直接套 KMP 即可(那为什么打 cf 的时候没有想到...),求出后一个单词(word)的前缀数组,然后从前面已得的字符串的末尾 - word. length ( ...
对象转JSON字符串与json字符串转对象方法
JSON.stringify()[从一个对象中解析出字符串] JSON.parse()[从一个json字符串中解析出对象] var data = {"nums": 1, " ...
ltelliJ IDEA 创建Maven web项目无src目录的解决方案
https://blog.csdn.net/xiaoke815/article/details/72810976 一.缘由这几天闲来无事,突然想试试IDEA这个编译器,之前一直都在用Eclipse ...
Redis Cluster Cache with SpringBoot
前提: 根据 https://www.cnblogs.com/luffystory/p/12081074.html 创建好Redis集群 <project xmlns="http:/ ...

CSS进阶学习

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

随机推荐

热门专题