前端入门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

    
    子元素1yzx
    gamexxx

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

• 由于针对同一个元素的选择器优先级为：行内样式表 > id > class > 标签，所以div最终显示蓝色；
• 权重叠加：复合选择器会有权重叠加的问题，需要计算权重；
• div ul li：0003；
• .nav ul li：0012；
• a:hover：0011，a是元素选择器，hover是伪类选择器；
• .nav a：0011；

    
    
    
    

    





    
似懂非懂上课
    
风打底衫
    
行高水淀粉
    
返回都看过的
    
黄金分割了科菲迪斯

CSS属性的书写顺序：

image.png