前端入门06 -- CSS的其他属性与CSS的三大特性

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

推荐阅读更多精彩内容