CSS基础知识筑基( 三 ) _生活百科

<div>div<p>pppp</p></div><style>div {border: 2px solid red;color: #368cee;/* 所有子元素都会默认继承color */}div p {border: inherit;/* 子元素默认不会继承父元素的border，可以显示的强制继承 */}/* 在一些浏览器中，表单元素默认不会继承父级字体样式，因为他们有自己的浏览器内置样式，需要主动申明字体样式的继承。*/button, input, select, textarea {font-family : inherit;font-size : 100%; }</style>2.5、@规则@符号开头的特殊语法规则。
@规则描述示例/备注@charset定义样式表的字符集，必须是样式表中的第一个元素@charset "UTF-8";不支持HTML中使用@import引入一个外部样式表，必须先于所有其他类型的规则，@charset 除外。支持媒体查询。@import url("fineprint.css")@import url _list-of-media-queries_;@namespace用来定义使用在 CSS 样式表中的 XML 命名空间的 @规则@media定义媒介查询规则，用于响应式样式设计@media screen and (min-width: 900px){}@page@page 规则用于在打印文档时修改某些 CSS 属性@supports IE特性查询，判断当前浏览器环境是否支持某些特性，js中可通过 CSSSupportsRule 来访问 @supports支持not、and、or嵌套多个表达式@font-face定义下载的外部的网络字体@font-face {font-family:"fname";src: url()}@keyframesCSS 动画的关键帧@charset "UTF-8";@supports (display: grid) {div {display: grid;}}@supports not (display: grid) {/* 如果不支持grid布局，则使用float布局 */div {float: right;}}@supports (--foo: green) {/* 测试是否支持自定义属性 */body {color: var(--foo);}}03、值与单位3.1、尺寸单位（长度/大小）绝对长度：

cm：厘米
px：像素

相对长度：

em，相对于父元素字体或自身字体的大小（倍数）。
rem，相对于根元素<html>字体大小（倍数）。如果用em、rem作为单位，建议根元素设置10px，便于计算。
vh/vw：视窗（浏览器可视窗口）高度、宽度的1%，可以把一些东西做得随浏览器的视口改变大小。

width: 20em; /* 20个字符宽度 */font-size: 2em; /* 2倍大小 */font-size: 200%; /* 2倍大小，同2em */height: 5vh; /* 浏览器页面窗口高度的5% */

百分比：相对于其他值（大多是父元素）的比例。

字体大小设置百分比，就是相当于父元素字体大小的比例。
宽度百分比，父元素宽度比例。

3.2、min/max-width尺寸边界设置元素高宽的边界。
属性描述min-height设置元素的最小高度，默认auto，当大于height会覆盖height的值max-height设置元素的最大高度，当小于height会覆盖height的值min-width设置最小宽度，默认auto，如果大于width会覆盖width的值max-width设置最大宽度值，如果小于width会覆盖width的值对于替换元素（图像和视频），他们有自己的大小，这会影响布局，可以通过设置max-width:100%来控制其大小范围。虽然设置width: 100%;也可以控制大小，但会拉伸图片。
3.3、color颜色值【CSS基础知识筑基】RGB颜色是基于R（red）、G（green）、B（blue）三个颜色通道组合而成，每个颜色通道值0到255，16进制就是00到FF 。
颜色值描述颜色关键词：red预定义的颜色值，如red、green、blue、transparent （透明色），完整列表16进制值RGB：#FF12AA#开头，6位16进制数值16进制RGBA：#FF12AAFF#开头，8位16进制数值，多了透明度A（alpha 通道）RGB函数：rgb(2, 121, 139)rgb三个值作为参数（10进制，0-255）函数RGBA：