CSS进阶指南-优快云博客

本文链接：https://blog.youkuaiyun.com/SYX_lh/article/details/127598627

文章目录

一.Css选择器

1.标签选择器：

div{}

<div></div>

使用的场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如：层次选择器

2.群组选择器（分组选择器）：
可以通过逗号的方式，给多个不同的选择器添加统一的Css样式，来达到代码的复用

div,#text,.text{}

3.通配选择器：
*{ } ->所有标签 div,ul,li,p,h1,h2…{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
使用场景：去掉所有标签的默认样式时

4.层次选择器：
a.后代： M N { }

ul li{border:1px red solid;}
<ul></ul>
<li></li>
<li></li>
<li></li>

b.父子：M>N{ }

ul > li{border:1px red solid;}
<ul></ul>
	<li></li>
	<li></li>
		<ul></ul>
			<li></li>
			<li></li>

c.兄弟：M~N{ }

选择div下面所有的h2标签
div~h2{}
<div></div>
<p></p>
<h2></h2>

d.相邻：M+N{ }

当前M下面 相邻的N标签
<div></div>
<h2></h2>

5.属性选择器：
M[attr]{}
=:完全匹配
*=:部分匹配
^=:起始匹配
$=:结束匹配
[][][]：多项匹配

<style>
div[class]{background-color:red;}
</style>
<body>
<div>aaa</div>
<div class="box">bbb</div>
<div class="search">ccc</div>
<div class*="search-botton">ddd</div>
</body>

6.伪类选择器：
M：伪类{}

：link	访问前的样式
：visited	访问后的样式	（前两个只能给a标签加）
：hover	鼠标移入时的样式
：active	鼠标按下时的样式	（后两个可以给所有标签加）
如果四个都生效则一定要注意顺序：L V H A
一般网站只能这样去设置：a{}  (link visited hover active)  a:hover{}

例：

div{width:100px;height:100px;background-color:red;}
div:hover{bakcground-color:blue;}
div:active{bakcground-color:green;}

:after、:before 通过伪类方式给元素添加一个文本内容
，使用comtent属性
:checked、:disabled
:focus
(针对表单元素)

例：

div：after{comtent：内容；color：red；}
<div>内容</div>

结构伪类选择器：
nth-of-type :(数字) nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大
first-of-type
last-of-type
only-of-type
type:类型 child:孩子

二.Css样式继承

文字相关的样式可以继承
布局相关的样式不能被继承（默认设定不能）
注：inherit

p{border:inherit;}

三.Css的优先级

1.相同样式优先级：
当设置相同的样式时，后面的优先级较高，但不要建议出现重复设置样式的情况
2.内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高
3.单一样式优先级：
style行间>id>class>tag>*>继承
注：style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

!important:（对继承不管用）
提升样式优先级，非常规方式，不建议使用

标签+类与单类：标签+类>单类

群组优先级：
群组选择器与单一选择器的优先级相同，靠后写的优先级高

层次优先级：
1.权重比较：
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100
2.约分比较：
ul li .box p input{} →li p input{}
.hello span #elem{} →#elem{}

四.Css盒子模型

组成： content→padding→border→margin
	   物品    填充物   包装盒  盒子与盒子之间的间距
	   content：内容区域，width和height组成的
	   padding：内边距（内填充）
			只写一个值：30px（上下左右）
			写两个值：30px 40px（上下 左右）
			写四个值：30px 40px 50px 60px（上 下 左 右）
			单一样式只写一个值：
			padding-left/right/top/bottom
		margin：外边距（外填充）
			只写一个值：30px（上下左右）
			写两个值：30px 40px（上下 左右）
			写四个值：30px 40px 50px 60px（上 下 左 右）
			单一样式只写一个值：
			margin-left/right/top/bottom

例：

#box{width:100px;height:100px;background-color:red;border:10px blue solid;
padding:30px 50px;
margin:10px
}

注：
1.背景色填充到margin以内的区域（不包过margin区域）
2.文字在content区域添加
3.padding不能为负数，而margin可以为负数

2.
box-sizing：
盒尺寸：可以改变盒子模型的展示形态
默认值：
content-box：width、height->content
border-box：width、height->content padding border
使用场景：
a.不用去计算一些值
b.解决一些百分比的问题

3.
盒子模型的一些问题：
<1>
margin叠加问题:
出现在上下margin同时存在的时候，会取上下中值较大的值
解决方案：
a.BFC方案
b.想办法只给一个元素添加间距

<2>
margin传递问题：
出现在嵌套的结构中，只是针对margin-top的问题
解决方案:
a.BFC规范
b.给父容器加边框（在#box1加border：1px black solid；）
c.margin换成padding（删去#box2里面的margin，给#box1加上padding-top：100px；）
盒子模型

4.扩展：
a.margin左右自适应可以，但是上下自适应不可行
（如果想要实现上下自适应，需要在第二大部分来进行学习）
b.width、height不设置的时候，对于盒子模型来说，会自动去计算容器的大小，节省代码。

五.标签分类

1.按类型：
block：块（div,p,ul,li,h1…）
独占一行
支持所有样式
不写宽的时候和父元素的宽相同
所占区域是一个矩形

inline：内联(span,a,em,strong,img…)
挨在一起
有些样式不支持，例如：width，height，margin，padding
不写宽的时候，宽度有内容决定
所占区域不一定是矩形
内联标签之间会有空隙，由换行产生

<span id="content1">内容</span>
<span id="content2">内容</span>
这便是换行效果
若想去除间隙，则需要在父容器后面加上font-size：0，然后再修饰里面加上font-size：16px

注：布局一般用块标签，修饰文本一般用内联标签

inline-block：内联块(input,select…)
挨在一起，支持宽高
会有空隙，区域为矩形

2.按内容：
Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
按内容分类
3.按显示：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
img,input…
非替换元素：将内容直接告诉浏览器，将其显示出来
div,h1,p…

六.显示框类型

display：
block
inline
inline-block
none

display:none不占空间的隐藏
visibility：hidden占空间的隐藏

七.标签嵌套规范

ul,li
dl,dt,dd
table,tr,td

1.块标签可以嵌套内联标签
2.块标签不一定能嵌套块标签
错误样式：

<p>
<div></div>
</p>

3.内联不能嵌套块
错误样式：

<span>
<div></div>
<span>

正确样式：

<a href="">
<div></div>
</a>

八.溢出隐藏：

overflow
visible：默认
hidden：
scroll：下右都要滚动条
auto：自适应
x轴，y轴

九.透明度与手势：

1.opacity：0（透明）~1（不透明）
0.5（半透明）
注：占空间，所有的子内容也会透明

2.rgba（）：0~1
rgba（255，0，0，0，1）
注：可以让指定的样式透明，而不允许其他样式

3.cursor：手势
default：默认箭头
pointer：手型
要实现自定义手势：
准备图片：.cur .ico
cursor：url（./img/cursor.ico），auto；

十.最大、最小宽高

min-width、max-width
min-height、max-height
注：强化对百分比单位的理解

<style>
    div{width:100px;min-height:100px;border:1px red solid;}
    </style>
</head>
<body>
    <div>
        这是一个块
        这是一个块
        这是一个块
        这是一个块
        这是一个块
        这是一个块
        这是一个块
        这是一个块
        这是一个块
        这是一个块
    </div>
</body>

%单位：换算→以父容器的大小进行换算

一个容器怎么适应屏幕的高：
容器加height：100%；
body：10%；
html：100%

十一.Css

1.Css默认样式：

没有默认样式：
div，span...
有默认样式：
body，h1...h6，p，ul...

body→margin：上下	 8px
h1→margin：上下	 21.440px
p→margin：上下	 16px
ul→margin：shangx	 16px	 padding：左 	40px
		默认值：list-style：disc
a→text-decoration：underline

2.Css reset：

*{margin：0；paddin：0；}
	优点：不用考虑哪些标签有默认的margin，padding
	缺点：稍微的影响性能
	body,p,h1,ul{margin:0;padding:0;}
	
ul{list-style:none;}

a{text-decoration:none;color:#999;}

img{display:block}
	问题的现象：图片跟容器底部有一些空隙
	内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
	vertical-align：baseline 基线对齐方式 默认值
					/bottom 底线

写具体页面的时候或一个布局效果的时候：
1.写结构
2.Css重置样式
3.写具体样式

十二.float浮动

脱离文档流：延迟父容器靠左靠右进行排列
left，right，none（默认）
在<style></style>里进行修饰

注意点：
1.只会影响后面的元素
2.内容默认提升半层
3.默认宽根据内容决定
4.换行排列
5.主要给块元素添加，但也可以给内联元素添加

如何清除浮动：
1.上下排列：clear属性，表示清楚浮动，left，right，both

2.嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器浮动也会影响后面的元素
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法
(clear属性只会操作块标签，对内联标签不起作用)

.clear:after{content:'';clear:both;display:block}