CSS的其他属性
display属性
-
display：设置目标元素的显示，其常见的值有如下：-
none：隐藏目标元素，目标元素不会再占用原来的位置； -
block：显示目标元素，且将目标元素转成块级元素，使得目标元素具有块级元素的性质； -
inline：将目标元素转成行内元素，使得目标元素具有行内元素的性质； -
inline-block：将目标元素转成行内块元素，使得目标元素具有行内块元素的性质； -
flex：设置为弹性布局；
-
visibility元素可见属性
-
visibility：设置目标元素是否可见，其值如下：-
visible：目标元素可见； -
hidden：目标元素隐藏，依然会占用原来的位置；
-
overflow属性
-
overflow：规定当内容溢出元素框时，溢出的内容会如何处理，其值有如下：-
visible：默认值，溢出的内容不会被修剪，会呈现在元素框之外； -
hidden：溢出的内容会被修剪，不可见； -
scroll：溢出的内容会被修剪，会显示滚动条以便查看溢出的内容，会出现水平和垂直方向上的两个非滚动条； -
auto：溢出的内容会被修剪，会显示滚动条以便查看溢出的内容，在需要的方向上添加滚动条，这是与scroll的主要区别；
-
-
overflow属性在嵌套元素的外边距合并也有应用，给父元素设置overflow: hidden，可解决父元素外边距塌陷问题；
cursor鼠标属性
-
cursor：设置鼠标指针放在一个元素边界范围内时所用的光标形状，常见值如下：-
auto：默认值； -
default：通常是一个箭头； -
pointer：一只小手； -
crosshair：十字架； -
move：可移动的十字架；
-
outline轮廓属性
-
outline：设置目标元素的轮廓，其位于边框的外围紧贴着边框，与边框十分类似；-
outline-width：设置轮廓宽度； -
outline-color：设置轮廓颜色； -
outline-style：设置轮廓样式； -
outline: 10px red solid：设置轮廓的复合写法；
-
-
outline: none或者outline: 0：可以去掉某些标签默认的蓝色边框，例如input标签；
vertical-align垂直居中
- vertical-align属性可控制行内元素或者行内块元素在垂直方向上的布局，对于块级元素无效；
- 目标元素的vertical-align属性与父元素的基线baseline有这莫大关联，如下图所示：
image.png
image.png
-
基线baseline：单行内容框，紧贴小写字母x的底部横线就是此当前行的基线； -
中线middle：在基线的基础上向上偏移x-height高度一半的位置属于中线middleline； -
行高line-height：上下两行基线之间的间距就是行高； -
x-height：小写字母x的字体高度； -
行框：指单行内容框； -
行内框：指单行内不同的行内元素的块状显示；
image.png - vertical-align属性的常见值有如下：
image.png
<style>
.block {
font-size: 50px;
background-color: pink;
border: 2px red solid;
}
.child {
display: inline-block;
width: 40px;
height: 80px;
margin-top: 20px;
background-color: rebeccapurple;
padding-top: 10px;
border: 10px blue solid;
}
.top {
vertical-align: top;
background-color: brown;
}
.child1 {
display: inline-block;
margin-bottom: 20px;
}
</style>
<div class="block">
<span class="child"></span>
<span class="top">子元素1yzx</span>
<span class="child1">gamexxx</span>
</div>
image.png
Flex布局
- Flex称为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局；
- 当我们为父盒子设置为Flex布局之后，
子元素的float，clear和vertical-align属性将会失效； - 采用Flex布局的元素，称为
Flex容器，它的所有子元素自动成为容器的成员，称为Flex项目； - Flex布局的原理：通过给
父盒子添加flex属性，来控制子盒子的位置和排列方式；
Flex布局的父元素的常见属性
-
flex-direction：设置主轴的方向，方向有主轴与交叉轴，其值有以下四种：-
row：默认值，主轴为水平方向，子元素在水平方向上，从左到右依次排列； -
row-reverse：主轴为水平方向，子元素在水平方向上，从右到左依次排列； -
column：主轴为垂直方向，子元素在垂直方向上，从上到下依次排列； -
column-reverse：主轴为垂直方向，子元素在垂直方向上，从下到上依次排列；
-
image.png
-
justify-content：设置子元素在主轴方向上的对齐方式，具体的对齐方式与主轴的方向有关，其值有以下五种，假设主轴的方向为主轴为从左到右；-
flex-start：默认值，子元素左对齐； -
flex-end：子元素右对齐； -
center：子元素居中； -
space-between：子元素两端对齐，子元素之间的间隔都相等； -
space-around：子元素之间的间隔是，两端子元素到边框的间隔的两倍；
-
-
align-items：设置子元素在交叉轴方向上的对齐方式，具体的对齐方式与交叉轴的方向有关，其值有以下五种，假设主轴的方向为主轴为从上到下；-
flex-start：子元素与交叉轴的起点对齐； -
flex-end：子元素与交叉轴的终点对齐； -
center：子元素与交叉轴的中点对齐； -
baseline：子元素的第一行文本与基线对齐； -
stretch：默认值，如果子元素未设置高度或设为auto，将占满整个容器的高度；
-
-
flex-wrap：默认情况下，子元素都排在一条线（又称"轴线"）上，其值有如下三种：-
nowrap：默认值：不换行； -
wrap：换行，第一行在上方； -
wrap-reverse：换行，第一行在下方；
-
Flex布局的子元素的常见属性
-
flex-grow：子元素占据父元素剩余空间的比例系数；
CSS的三大特性
- CSS的三大特性分别为：层叠性，继承性与优先级；
层叠性
-
层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式；- 样式冲突，遵循的原则是
就近原则，哪个样式离结构越近，就执行哪个样式； - 样式不冲突，不会发生层叠；
- 样式冲突，遵循的原则是
继承性
-
继承性：子标签会继承获取父标签的样式属性，具体情形如下： - 所有子元素都能继承的属性有：
visibility，cursor； - 大部分子元素都可以继承的属性有：
-
font，font-size，font-weight，font-style，font-family等字体属性； -
color，text-align，text-decoration，text-indent，line-height，text-shadow，letter-spacing，word-spacing，white-space等文本属性； -
a标签不能继承父标签的color属性，必须自定义才能改变文本颜色； -
块级元素可以继承父标签的width宽度；
-
- 子元素不能继承的属性有：
-
height，min-width，max-width，min-height，max-height； -
background背景属性； -
margin，padding，border等盒子模型属性； -
float，position； -
display，overflow，vertical-align，transition等其他属性；
-
优先级
-
优先级：当同一个元素标签指定多个选择器，就会有优先级的产生；- 选择器相同，则执行层叠性；
- 选择器不同，则根据
选择器的权重执行， - 选择器的权重如下所示：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器 */
div {
width: 100px;
height: 200px;
background-color: red;
}
/* 类选择器 */
.div-box {
background-color: aqua;
}
/* id选择器 */
#box {
background-color: blueviolet;
}
</style>
</head>
<body>
<!-- 行内样式表 -->
<div class="div-box" id="box" style="background-color: blue;"></div>
</body>
</html>
- 由于针对同一个元素的选择器优先级为：行内样式表 > id > class > 标签，所以div最终显示蓝色；
-
权重叠加：复合选择器会有权重叠加的问题，需要计算权重； -
div ul li：0003； -
.nav ul li：0012； -
a:hover：0011，a是元素选择器，hover是伪类选择器； -
.nav a：0011；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/** li的权重为0001 */
li {
color: red;
}
/** ul中的li的权重为 0001+0001=0002 */
ul li {
color: green;
}
/** ul中的li的权重为 0010+0001=0011 */
.nav li {
color: hotpink;
}
</style>
</head>
<body>
</body>
<ul class="nav">
<li>似懂非懂上课</li>
<li>风打底衫</li>
<li>行高水淀粉</li>
<li>返回都看过的</li>
<li>黄金分割了科菲迪斯</li>
</ul>
</html>
CSS属性的书写顺序：
image.png
