首页 > 其他分享> > CSS（:Cascading Style Sheets）层叠样式表学习笔记

CSS（:Cascading Style Sheets）层叠样式表学习笔记

2020-01-16 14:00:11 作者：互联网

5种主流浏览器及内核

IE trident

Chrome webkit/blink

Firefox gecko

Opera presto 3%-5%

Safari webkit

css引入三种方式

行间样式（在标签内直接添加相关的style样式）

页面级（在本html文档head标签内使用上style{}来实现当前页面css样式的调用）

外部css文件（通过在head标签内使用<link rel="stylesheet" type="text/css" href="外部css样式文件.css"> 来实现css样式大的调用。）

（优点在于同一个css样式文件可以通过引用的方式被多个项目使用，避免了重复造轮子使开发更加高效敏捷）

同步加载（synchronous）：顺序进行。一件事做完做另一件事。

异步加载（asynchronous）：同时进行。两件不同的事同时做。

CSS权重（进制256进制）

！Important 　　　　infinity

行间样式　　　　 1000

Id 　　　　 100

Class|属性|伪类　　　10

标签|伪元素　　　　 1

通配符　　　　　 0

需要注意的是css权重并不是常见的十进制，在ie6.0时代经过实测为256进制，因此进行权重计算时要格外注意。

ie7.0时代权重值为65536进制

更高版本的浏览器进一步调高了权重值的进制。

常用复杂选择器

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;

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

常见行级元素：

<span>

<em>

<a>

<del>

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

常见块级元素

<div>

<p>

<ul>

<li>

<form>

行级块元素：内容决定大小，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;

}

</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>

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

文字对齐方式

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

以上内容来自视频教程笔者全程进行记录并实际查询分析得出，感谢视频作者。

标签：定位,Style,父级,top,元素,100px,Cascading,样式表,margin
来源： https://www.cnblogs.com/Dec-chaofan/p/12200738.html