目录
一、前言
我们知道，CSS 属性有可继承和不可继承之分，例如 height 和 width 就 是CSS 中典型的不可继承属性，color 和 font-size 是典型的可继承属性。CSS 可继承属性意味着后代元素的样式会继承祖先元素样式，例如一个父元素的 color 是 red，那么如果它的子孙元素自己没有设置 color 值，就会取自父元素的 color 值。同样的条件，CSS 属性由 color 改为 height，由于默认是不可继承属性，其子孙元素不会继承父元素的 height 值。
这就是 CSS 中的继承与非继承属性的区别，区别在于某一元素的某类样式值，会不会被其子孙元素继承，也就是其子孙元素的样式值会不会取自父元素。
css 中有三个概念对于理解 CSS 是如何工作的十分重要，他们分别是“层叠”、“优先级”和“继承”。
Mozilla 上关于 CSS 继承概念的解释： 在 CSS 中，每个 CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。
二、控制继承
CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。 这意味着，就像 css 盒子模型可以通过改变 box-sizing 的值 （border-box 和 content-box）来改变。 css 属性的继承情况也是可以控制的，例如通过设置值 inherit、initial、unset 和 revert 来控制。
1.开启继承
height 在 CSS 原生上不可继承属性，子元素不会继承父元素的 height， 但是这种现状是可以改变的，当子孙元素的 height 设置 为 inherit， 该子孙元素就会的 height 值就会取其父元素的 height 值，就像是子元素继承了父元素的高度。
如果你希望子元素的高度一直保持和父元素一直，那么设置子元素的 height 为 inherit，最合适不过了。
inherit：设置该属性会使子元素属性和父元素相同。实际上，就是 "开启继承"。这个值可以被几乎 CSS 所有属性 使用，也就是 width 等其他属性也可以开启继承。
下面是一个给子元素的 height 开启继承的示例：
这是一个普通的段落
div{
height: 200px;
color: red;
border: 1px solid red;
font-size: 25px;
}
p{
border: 1px solid #1e87f0;
height: inherit; /*开启继承后，自动继承了父元素的高度*/
margin: 0;
}
2.重设几乎所有属性值
all 结合 unset，重置几乎所有样式，这也可以看成是一种对原始继承的控制改变， all 属性，将这种改变的有效范围放大了，因为 unset 几乎可以重置所有属性的值。 这里的重置通常是指将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样。
CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个，应用于（几乎）所有属性。 它的值可以是其中任意一个(inherit, initial, unset, or revert)。 这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
例如像下面这样：例子中有两个 div，第一个 div 应用了样式选择器 div 的样式， 第二个通过 类选择器 unset-all 设置 all 为 unset，重置了几乎所有样式。 例如 color、background-color 和 border 都被重置为浏览器默认样式了，原本两个段落的样式应该是一致的。
这是一段文字
这是另一段文字，它将被充值样式
div {
color: red;
background-color: red;
border: 2px solid green;
}
.unset-all {
all: unset;
}
下面是一张测试样式重置的效果图：
三、拓展：常见继承属性与非继承属性1.常见可继承属性2.常见不可继承属性四、总结
所以，通过将子元素的 height 值设置 inherit，可以继承父元素的高度，这会使得子元素的高度始终保持一致，这有时会很便利。 当然 width 等大多数属性都可以这样开启继承。
到此这篇关于CSS控制继承中的height能变为可继承吗的文章就介绍到这了,更多相关CSS继承 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
使用 Vue.js 和 Semantic-UI 做一个简单的愿望清单
↑↑↑关注后"星标"简说Python
人人都可以简单入门Python、爬虫、数据分析 简说Python推荐 来源：简说Python 作者：叶庭云
❝
作者简介：叶庭云，发现求知的乐趣，在不断总结和学习中进步，相信热爱可抵岁月漫长。
❞
一、前言❝
2021年第一个周末，祝各位读者朋友平安顺利。
以前读过一句话：“当你穿过暴风雨的时候，你就不是原来那个人了。”
但他没有说，我们要如何穿过暴风雨。
2020刚开始的时候，我曾觉得冬天无比漫长，似乎没有尽头。到了六月的时候，才发觉时间过得比想象更快。而现在，2020年已经过去了，想来总觉得有些恍惚，那些时间那些岁月到底是怎么流逝的呢？那么，我们到底是如何穿过暴风雨的呢？
只有在这么一个时刻，才能明白，让我们穿越暴风雨的，不过是每一天的平凡生活。
当我们的生活日夜旋转不休，眼前的景象朦胧一片时，我们唯一能做的只是努力看清了脚底下的路，并且决定一步步慢慢前行。
我想是这样的，从没有一蹴而就的事，只有每一天努力前行。
直到某天乌云散去，回过头看，才能知道自己走了多远。
因为人生没有白走的路，每一步都算数。
❞
周末用 Vue.js 和 Semantic-UI 做了一个简单的愿望清单，记录以后想和喜欢的人一起做的事，疲惫的生活里总要有些温柔的梦想吧。
本文相关源码及文件，可以在公众号 简说Python 回复：愿望清单获取。
二、Vue.js介绍
官方文档传送门：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
仿照官网案例的项目，主要为了熟悉 Vue.js 的基本用法，通过这个案例能吸收到基本的 Vue.js 操作
重构此项目可以学到以下知识点：
额外还能学习到 LocalStorage 的简单用法，可以说通过详细学习此例子可以完成 Vue.js 最基本的入门操作， 完全熟悉不太容易， 主要是感受下 Vue.js 的强大和基本的使用，那么好的框架当然是越学越香，更多详细使用可以参考官方文档。
三、Semantic UI介绍
官方文档传送门：
在 HTML 中包含 (Include in Your HTML)：运行 gulp 构建工具将会在你的项目中编译出 CSS 和 Javascript 文件。把编译出的文件和最新的 jQuery 一起包含到 HTML 中就可以使用 Semantic UI了，更多详细使用可以参考官方文档。
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">script>
<script src="semantic/dist/semantic.min.js">script>
四、实现愿望清单界面
「index.html」
<html data-framework="vue">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>TODOS - A wish listtitle>
<link href="static/semantic.min.css" rel="stylesheet">
<link href="static/style.css" rel="stylesheet">
head>
<body>
<div id="todos" class="ui text container" style="background: #F3F3F4;padding: 0 14px; min-height: 100%;">
<h1 class="ui centered grey header" style="font-size: 5em;">
<span class="pink text">A Wish Listspan>
h1>
<div class="ui stacked segment" style="padding: 14px;">
<div class="ui fluid right action input">
<input type="text" placeholder="想和喜欢的人一起做点什么？"
v-model="newTitle"
autofocus autocomplete="off"
@keyup.enter="addTask">
<button class="ui teal icon button"
@click="addTask">
<i class="plus icon">i>
button>
div>
<div class="ui huge middle aligned divided selection list">
<div class="item" v-for="task in filterTasks" :class="{ editing: task == editedTask }">
<div class="right floated content">
<i class="red remove icon" @click='removeTask(task);'>i>
div>
<div class="content" @dblclick="editTask(task)">
<div class="ui checkbox" >
<input type="checkbox" name="example" v-model="task.completed">
<label class="header"><span class="grey text">{{ task.title }}span>label>
div>
<div class="ui mini transparent input">
<input class="edit" type="text"
v-model="task.title"
v-task-focus="task == editedTask"
@blur="saveEdit(task)"
@keyup.enter="saveEdit(task)"
@keyup.esc="cancelEdit(task)" >
div>
div>
div>
div>
<div class="ui green divider" v-show="tasks.length">div>
<div class="ui grid" v-show="tasks.length">
<div class="three wide column">
<span class="grey text">
<span class="green text" v-text="remaining"> span><span class="grey text"> Left span>
span>
div>
<div class="eight wide column" style="padding: 0px;">
<div class="ui mini secondary menu" style="margin-top: 8px;">
<a @click="filterTask('all')" class="item" :class="{ active: visibility == 'all' }"><span class="pink text"> All span>a>
<a @click="filterTask('active')" class="item" :class="{ active: visibility == 'active' }"><span class="pink text"> Wait span>a>
<a @click="filterTask('completed')" class="item" :class="{ active: visibility == 'completed' }"><span class="pink text"> Completed span>a>
div>
div>
<div class="five wide column">
<a class="clear" href="#" @click="removeCompleted($event)"><span class="red text">Clearspan>a>
div>
div>
div>
<div class="intro">
<span class="black text">A wish list of things you want to do with the people you lovespan>
<br>
<br>
<span class="black text">Based on <a href="https://cn.vuejs.org/v2/guide/" target='_blank'><span class="red text">Vue.jsspan>a> + <a href="https://zijieke.com/semantic-ui/" target='_blank'><span class="red text">Semantic-UIspan>a>span>
<br>
<br>
<span class="black text">叶庭云@CSDN：<a href="https://yetingyun.blog.csdn.net/" target='_blank'><span class="green text">https://yetingyun.blog.csdn.net/span>a>span>
div>
div>
<span class="text"> span>
<br>
<br>
body>
<script src="static/js/vue.js">script>
<script src="static/app.js">script>
html>
「引用资源」
「运行效果如下：」
使用 Vue.js 和 Semantic-UI 做了一个简单的愿望清单，实现了页面和用户的交互，在输入框中写入想和喜欢的人一起做的事，然后按 Enter 键或者点击右边的 "+"，即可将数据添加进去，下方 3 Left 表示还有 3 个愿望未实现，点击 All 查看所有的愿望清单，点击 Wait 查看未实现的愿望，点击 Completed 查看已实现的愿望，错误添加进去的内容可以先选定，然后使用 Clear 清除掉再重新添加，或者鼠标悬停在那一条内容上，出现❌然后点击删除再重新添加，界面简洁美观，使用方便。
也可以使用 selenium 来打开本地 html 文件自动化添加
# -*- coding: UTF-8 -*-
"""
@File ：demo.py
@Author ：叶庭云
@CSDN ：https://yetingyun.blog.csdn.net/
"""
from selenium import webdriver
import time
from selenium.webdriver.common.keys import Keys
import selenium
print(selenium.__version__) # 查看selenium版本
# 读取txt中数据 获取每一行
with open('things.txt', encoding='utf-8') as f:
words = f.read().split('\n')
# 初始化 webdriver.Chrome()
chrome_driver = r'D:\python\pycharm2020\chromedriver.exe' # chromedriver的路径
options = webdriver.ChromeOptions()
# 关闭左上方 Chrome 正受到自动测试软件的控制的提示
options.add_experimental_option('useAutomationExtension', False)
options.add_experimental_option("excludeSwitches", ['enable-automation'])
# 开启浏览器对象
browser = webdriver.Chrome(options=options, executable_path=chrome_driver)
# 得用绝对路径 相对路径会报错
browser.get(r'D:\python\pycharm2020\program\叶庭云 个人自娱\愿望清单 想和喜欢的人一起做的事\index.html')
# Xpath定位到输入框
browser.find_element_by_xpath('//*[@id="todos"]/div[1]/div[1]/input').click()
for word in words:
# 写进每一条数据 然后按Enter键
browser.find_element_by_xpath('//*[@id="todos"]/div[1]/div[1]/input').send_keys(word)
browser.find_element_by_xpath('//*[@id="todos"]/div[1]/div[1]/input').send_keys(Keys.ENTER)
time.sleep(1) # 短暂休眠
「注意」：selenium 打开本地 html 文件，路径需用绝对路径，用相对路径会报错
「运行效果如下：」
本文相关源码及文件，可以在公众号 简说Python 回复：愿望清单 获取。
【最新投稿福利】
1>投稿规则：Java、前端、Python等方向的技术文章；内容不少于500字；可以是实战，也可以是欢快程序员类型，也可以是知识点科普；需要是首次发布在微信公众号平台，以原创发布，会注明作者及相关作者简介。
2>福利：按文章质量每1000字（不含代码）激励50-100元不等，投稿被采纳4次及以上者，可以另外获得赠书和简说编程专栏勋章，投稿越多，激励越多。
扫码，备注：投稿
长按扫码关注，一起学Python
