CSS回顾

最新推荐文章于 2024-07-19 12:58:53 发布

make yourself good

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量389

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_46099570/article/details/121529060

版权

CSS回顾

1.主流浏览器及其内核：（很重要！！！！！）

Google chrome                 Webkit/blink
IE                                       trident
Safari                                 Webkit
Opera                                 presto
Firefox                                Gecko
新版本的Opera（Opera13、Opera14）的内核也是webkit

2.引入css

①行间样式

<body>
	<div style="width: 100px;height: 100px; background-color: red;"></div>
</body>

②页面级css

<head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div></div>
</body>

③外部css文件
html文件：

<head>
	<link type="text/css" rel="stylesheet" href="out.css"><!-- css文件与该html文件是相对地址 -->
</head>
<body>
	<div></div>
</body>

out.css文件：

div{
	width: 100px;
	height: 100px;
	background-color: green;
}

3.选择器

①id选择器：#
id的唯一性体现在JS上！！！
②class选择器：.

<div class="demo demo1"></div>//两个class值（demo demo1）选中该元素（div）时，之间用空格

③标签选择器：相应的标签（例，div）
④通配符选择器：*{}

* {
}

⑤属性选择器：[]（中括号里要么填，属性名；要么填，属性名=“属性值”，不能只填属性值）
html：

<div id="only" class="demo">123</div>

css：

[id] {/* 选出属性名有id的所有元素 */
}

或

[id="only"] {/* 选出属性名有id且相应的属性值为“only”的所有元素 */
}

⑥!important
css:

div {
background-color:red;!important;
}

4.选择器优先级

!important > 行间样式 > id > class | 属性选择器 > 标签选择器 > 通配符

css权重:
!important                    Infinity(正无穷) （开发中不用使用，别人无法修改）
行间样式                      1000（基本也不用，但js代码可以作用到行间样式）
id                                  100（不要在id下设置样式，但可以给js用，方便选择唯一的元素）
class | 属性 | 伪类         10（最多的设置样式）
标签选择器 | 伪元素      1（比较多）
通配符                           0（比较多）
以上权重值的进制为256。
在css中，正无穷+1比正无穷大1。

5.复合的选择器

①父子选择器/派生选择器：（空格连接）父子选择器每一层级都没有必要必须用标签选择器。
浏览器遍历父子选择器的时候是从右向左（因为这样是最快的）。
html:

<div>
	<span>123</span>
</div>
<span>234</span>

css:

div span{/* 会选中div下的span，即123的背景颜色变为红色 */
	background-color: red;
}

②直接子元素选择器： >
html：

<div>
	<em>1</em>
	<strong>
		<em>2</em>
	</strong>
</div>

css：

div > em{/* 选中div下的直接子元素em，即1的背景颜色变为绿色 */
background-color: green；
}

③并列选择器：直接连着写
html：

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

css：

div.class{/* 选中出class为dome的div，即2 */
}

④分组选择器** , **
每一组可以用多种选择器进行表达。
html：

<em>1</em>
<strong>2</strong>
<span>3</span>

css：

em, 
strong, 
span{/* 同时选中em，strong，span，即1，2，3的背景颜色均变为红色 */
/* 一般都分行写，每一行可以写多个复杂的选择器  */
	background-color: red;
}

6.css基础属性

①css设置字体大小，设置的是字体的高。
②css参考手册：
http://css.doyoe.com/
③默认文字高度是16px;

font-size:30px;/* 字体大小  */
font-style:italic;/* 斜体 ： normal  */
font-weight:bold;/* 字体粗细 ： normal  */
font-family:arial;/* 字体  */
color:red;/* 字体颜色 ： rgb(0~255,0~255,0~255)（十进制） 、  #ff4400(#f40) 、 #ff1010(每两位的范围都为00~ff，这三组两位分别代表红、绿、蓝的程度)  */

④border

border:1px solid black;
border-width:1px;
border-style:solid;/* dotted 、dashed */
border-color:black;
border-left:1px solid black;
border-left-width:1px;
border-left-style:solid;
border-left-color:black;/* 左边框颜色 : transparent透明色  */
border-radius:10px;/* 边框圆角 */

ul{/* 以下三个属性是ul上的，不是li上的，尤其是margin和padding！！！消除的是ul的margin和padding。*/
list-style:none;/*没有圆点了*/
	margin:0;
	padding:0;
}

*{
	margin:0;
	padding:0;
}

利用border画三角形！！！！！
html：

<div></div>

css：

div{
height:0;
width:0;
border:100px solid black;
border-top-color:transparent;
border-right-color:transparent;
}

可以通过改变上下左右边框的颜色，画不同的三角形。

⑤

min-width：1000px;/* 最小宽度：如果再用鼠标拖动缩小的话，就会出现滚动条 */
text-align:left;/* 对齐方式 : center 、 right */
line-height:16px;
text-indent:2em;/* 首行缩进 ： 2个文本的单位 */
text-decoration:line-through;/* 中划线 : none 、 underline 、overline  */
cursor:pointer;

相对单位：em 、 px
1em = 1font-size
单行文本垂直居中：

height:20px;
line-height:20px;

⑥伪类选择器：:hover（写在任意选择器之后即可）

a:hover{
}

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
a:hover的权重 = a[href=‘www.baidu.com’] > a
(标签+伪类 = 标签+属性 > 标签)
(1 + 10 = 1 + 10 > 1 )(均为256进制)
（完）

（补）页面图标

<link rel="Shortcut Icon" href="图标路径" type="image/x-icon" />

7.标签归类

①行级元素、内联元素： inline
feature：内容决定元素所占位置，不可以通过css改变宽高
span、a、em、strong、del
②块级元素： block
feature：独占一行，可以通过css改变宽高
div、p、ul、li、ol、form、address
③行级块元素： inline-block
feature：内容决定元素大小，可以改宽高
img
注：凡是带有inline的元素，都有文字特性

display:inline;/* block 、inline-block */

8.小bug

html：

<img src="xxxx">
<img src="xxxx">
<img src="xxxx">
<img src="xxxx">

css：

img{
	width:100px;
	height:200px;
}

以上四幅图之间的距离为4px。因为img标签是行级块元素，所有有inline属性，回车相当于文字分隔符。
正常解决方式：
html：

<img src="xxxx"><img src="xxxx"><img src="xxxx"><img src="xxxx">

不要用设置margin-left（或margin-right）为负数这个方法，会出错。

9.盒子模型

盒子的三大部分：
盒子的组成部分：

盒子壁 border
内边距 padding
盒子内容 width + height

盒模型：
margin + border + padding + (content = width + height)
如下图1和2（截的别人的图）：
1、
border1

2、
border2

例题：让一个盒子在另一个盒子内居中
html:

<div class="wrapper">
	<div class="content"></div>
</div>

css:

.wrapper{
	height:100px;/* 让里面的盒子和外面盒子的内容content区域一样大 */
	width:100px;
	background-color:red;
	padding:100px;
}
.content{
	height:100px;
	width:100px;
	background-color:black;
}

如图：

padding:100px;
padding:100px 100px 100px 100px;/* 四个方向分别为 上 右 下 左 */
padding:100px 150px 200px 250px;
padding:100px 150px 200px;/* 三个方向分别为 上 右左 下 */
padding:100px 150px;/* 两个方向分别为 上下 右左 */
padding:100px 0 0 0;
padding-top:100px;
padding-right:100px;
padding-left:100px;

border-width:10px 20px 30px 40px;

盒模型的计算：
html:

<div></div>

css:

div{
	width:100px;
	height:100px;
	background-color:red;
	border:10px solid black;
	padding:10px 20px 30px;
	margin:10px 20px;
}

求可视区宽高？
realWidth ：10px + 20px + 100px + 20px = 160px
realHeight ：10px + 10px + 100px + 30px = 160px
(可视区即不包括margin)

10.定位、层模型

position: absolute / relative / fixed
被定位后的元素到另一层上，即形成层模型。
absolute:脱离原来位置进行定位；相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。
relative:保留原来位置进行定位；相对于自己原来的位置进行定位
用relative作为参照物（因为它保留原来位置），用absolute定位

html:

<div></div>

css:

div{
	position:absolute;
	top:100px;
	left:100px;
	width:100px;
	height:100px;
	background-color:red;
	opacity:0.5;/* 透明度 */
}

body标签有一个默认的margin为8px
去掉这个8px的方法：

*{
	margin:0;
	padding:0;
}

始终居中于页面中央的方法
html:

<div></div>

css:

div{
position:absolute;/*相对于文档居中（即不滑动滚动条）；fixed：相对于所有可视区居中（即随便滑动滚动条，该div都居中）*/
top:50%;
left:50%;
width:100px;
height:100px;
background-color:red;
margin-left:-50px;/* -50px：该div宽度（width）的一半 */
margin-top:-50px;/* -50px：该div高度（height）的一半 */
}

注：position为absolute/fixed时，top和left设置为50%，才能页面居中。不能是relative。
（完）

z-index:1;/*设置在第几层，只在有position时有作用*/

11.两栏布局

html:

<!-- 两栏布局 -->
<div class="right"></div>
<div class="left"></div>

css:

*{
	margin: 0;
	padding: 0;
}

.right{
	position: absolute;
	right: 0;
	/*opacity: 0.5;*/
	width: 100px;
	height: 50px;
	background-color: green;
}
.left{
	margin-right: 100px;
	height:50px;
	background-color: red;
}

如图：
两栏布局

12.两个bug，BFC

bug1：垂直方向margin的父子元素，只有子元素垂直方向的margin > 父元素垂直方向的margin时，子元素才会移动，且是带着父元素一起移动，即margin塌陷
弥补方法：改变父级渲染规则，让父级变为bfc。
如何触发bfc？
①position:absolute
②display:inline-block;
③float:left/right;
④overflow:hidden;(溢出部分隐藏)
html:

<div class="wrapper">
	<div class="content"></div>
</div>

css:

*{
	margin: 0;
	padding: 0;
}
.wrapper{
	height: 100px;
	width: 100px;
	background-color: black;
	margin-top: 100px;
	margin-left: 100px;
	/*overflow: hidden;*/以下的方法用于弥补margin塌陷。
	/*position: absolute;*/
	display: inline-block;
	/*float: right;*/
	/*float: left;*/
}
.content{
	height: 50px;
	width: 50px;
	background-color: yellowgreen;
	margin-left: 50px;
	margin-top: 50px;
}

bug2：垂直方向margin的兄弟元素，只有垂直方向的margin大的那个起作用，即两个兄弟元素之间的距离为较大的margin值，即margin合并
弥补方法：让其中一个的父级变为bfc，或让各自的父级变为bfc（让两个元素共同的父级变为bfc是没有用的，需要给其中一个元素【或两个元素分别】加上一个bfc父级，如以下代码）。
html：

<!-- margin合并 -->
<div class="wrapper">
	<div class="demo1">1</div>
</div>
<div class="wrapper">
	<div class="demo2">2</div>
</div>

css：

/*margin合并*/

.wrapper{
	overflow: hidden;
}
.demo1{
	background-color: red;
	margin-bottom: 200px;
}
.demo2{
	background-color: greenyellow;
	margin-top: 100px;
}

但是！！！！
一般不会为了改bug而改变html结构，所以就不改，直接设置两个元素的最大margin值即可。

13.伪元素

伪元素存在于任意一个元素（即标签）里面。它天生是行级元素，可以当元素一样进行操作，包括定位，设置大小，改display，加颜色等等。
伪元素只有加了content:"";,才能生效！！！！

<span><span>
-------------
span::before{
	content:"";
}
span::after{
	content:"xx";
}

最后的展示形式中，伪元素中的content和html里span中的内容之间有空格

14.浮动模型

float：left / right;

①浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素

②解决方法一：
清除浮动流(父级元素清除浮动):利用伪元素::after和clear:both;
**clear:both;**所在的元素必须是块级元素才能生效！！
利用伪元素
html:

<!-- 消除浮动流 -->
	<div class="wrapper">
		<div class="content">1</div>
		<div class="content">2</div>
		<div class="content">3</div>
	</div>

css:

 *{
 	margin: 0;
 	padding: 0;
 }
 .wrapper::after{
 	content: "";
 	clear: both;
 	display: block;
 }
 .wrapper{
 	border: 1px solid red;
 	zoom: 1;
 }
 .content{
 	float: left;
 	height: 100px;
 	width: 100px;
 	background-color: black;
 	color: #fff;
 }

如图：
清除浮动流

③解决方法二：
想让父级包裹住所有有浮动流的子级，将父级便为不是块级元素即可，即变为bfc，文本类（inline、inline-block）元素。这些方法形成的效果是紧紧的包住，而不是向上面的那样包住一整行。
(关联以上代码)

 .wrapper{
 	border: 1px solid red;
 	float: left;
 }

原理：
position：absolute；float:left/right;打内部把元素转换成inline-block。
因此宽高会由内容决定，所以是紧紧的包住。
④浮动的作用有：实现文字环绕图片：在css中选中图片元素img，直接flaot:left/right即可。

15.文字溢出处理

溢出容器，要打点展示
（1）单行文本

 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

例子：
html：

<p>我公司致力于 IT 技术人才职业培养,于2016年正式创立“渡一教育”品牌。</p>

css：

p{
 	width: 300px;
 	height: 20px;
 	line-height: 20px;
 	border: 1px solid black;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }

如图：

（2）多行文本
直接计算后手写点点点（…），即多行一般不做打点，做截断。（截断时要计算好容器高和每行文本的高，即整数倍）
例：
html：

<p>我公司致力于 IT 技术人才职业培养,于二零一六年正式创立“渡一教育”品牌。我公司致力于 IT 技术人才职业培养,于二零一六年正式创立“渡一教育”品牌。</p>

css：

p{
 	width: 300px;
 	height: 40px;/*容器高height是line-height的整数倍*/
 	line-height: 20px;
 	border: 1px solid black;
 	overflow: hidden;/*行只做截断*/
 }

如图：黑框圈出部分

16.背景图片处理

html：

<div></div>

css：

 /*背景图片处理 */
 div{
 	height: 200px;
 	width: 200px;
 	border: 1px solid black;
 	background-image: url(a/smile.jpg);/* 相对地址 */
 	background-size:100px 100px;/* 背景大小：宽 高 ：100% 100%*/
 	background-repeat: no-repeat;/* 背景是否重复：默认repeat、no-repeat、repeat-x（x轴上重复）、repeat-y（y轴上重复） */
 	background-position: center center;/* 背景图片位置：top（center、bottom、left、right、100px、0%、50%...）  top（center、bottom、left、right、100px、0%、50%...） */
 }

logo一般用背景图片，如淘宝网的logo
如图：

17.企业开发经验（淘宝网）

用背景图片作为淘宝网的logo，即使网络不好（只加载的出html，加载不出来css、js），也可以让用户看到未加载出来的图片提供信息。
方法一：

 	text-indent: 190px;/* 缩进数大于等于容器宽度*/
 	white-space: nowrap;
 	overflow: hidden;

实例：
html：

<a href="http://taobao.com" target="_blank">淘宝网</a>

css：

 a{
 	display: inline-block;
 	text-decoration: none;
 	font: #424242;
 	height: 90px;
 	width: 190px;
 	/*border: 1px solid black;*/
 	background-image: url(http://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
 	background-size: 190px 90px;
 	text-indent: 190px;
 	white-space: nowrap;
 	overflow: hidden;
 }

方法二：

height: 0;/* 一定要设置高度为0，因为高度默认不是0 */
padding-top: 90px;/* 将容器撑开到可以正好装下图片，即调成图片的高度 */
overflow: hidden;

实例：
html：

<a href="http://taobao.com" target="_blank">淘宝网</a>

css：

 a{
 	display: inline-block;
 	text-decoration: none;
 	font: #424242;
 	width: 190px;
 	height: 0;/* 一定要设置高度为0，因为高度默然不是0 */
 	border: 1px solid black;
 	padding-top: 90px;/* 将容器撑开到可以正好装下图片，即调成图片的高度 */
 	background-image: url(http://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
 	overflow: hidden;
 	background-size: 190px 90px;
 }

结果如图：
（css可加载出来）
logo

text-taobao

18.特殊点

①行级元素只能嵌套行级元素
②a标签里不能嵌套a标签
③块级元素可以嵌套任何元素，但p标签里不能嵌套块级元素，否则会被块级元素砍成两个p元素

19.css要点补充

①淘宝网两边留白（会随页面的大小而改变大小，但始终等宽，页面大小太小时也会消失）
方法:（父级和子级必须都是块级元素）

margin: 0 auto;

实例：
html：

<div class="wrapper">
	<div class="content"></div>
</div>

css：

 *{
 	margin: 0;
 	padding: 0;
 }
 .wrapper{
 	height: 30px;
 	background-color: skyblue;
 }
.content{
	height: 30px;
	width: 800px;
	background-color: lightyellow;
	margin: 0 auto;
}

如图：从上到下，依次拖动鼠标将页面变小
auto

②文本类元素（带有inline的元素，都有文本类特点）
正常情况下，文本类元素都是底对齐；但一旦文本类元素包含文字了，那外面的文字就会和他里面的文字底对齐。

vertical-align:10px;/* 调对齐线：-1px、1px...middle */

③
透明度css

rgba(255,255,2555,0.8);

伪元素默认是inline元素，所以设置宽高时，要改变display
下图中的左右两个小角标就可以分别写进伪元素::before和::after中：
::before-::after

make yourself good

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS回顾

CSS回顾1.主流浏览器及其内核：（很重要！！！！！）Google chrome                 Webkit/blinkIE                  &
复制链接

扫一扫

CSS回顾

CSS回顾

1.主流浏览器及其内核：（很重要！！！！！）

2.引入css

3.选择器

4.选择器优先级

5.复合的选择器

6.css基础属性

（补）页面图标

7.标签归类

8.小bug

9.盒子模型

10.定位 、层模型

11.两栏布局

12.两个bug，BFC

13.伪元素

14.浮动模型

15.文字溢出处理

16.背景图片处理

17.企业开发经验（淘宝网）

18.特殊点

19.css要点补充

“相关推荐”对你有帮助么？

10.定位、层模型