RGB以及文档流
继承
继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 30px;
}
p{
/*
为一个元素设置样式同样会应用到他的后代元素
继承是发生在祖先元素和后代元素中的
方便我们开发，利用继承可以将一些通用样式统一设置到同一个祖先元素中
并不是所有样式都会继承，比如背景相关和样式相关的
*/
color: red;
background-color: aqua;
}
</style>
</head>
<body>
<p>
<!--P元素中不能放任何块元素 -->
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>我是p元素外面的p元素</span>
</body>
</html>选择器的权重
样式的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
color: blue;
}
div{
color: red;
}
.red{
color: aqua !important;
}
/*
样式冲突，取决于选择器的权重/优先级决定
选择器的权重
内联样式 1000 div里面的style="color:"
id选择器 100
类和为类选择器 10
元素选择器 1
通配选择器 0
继承样式 无优先级
比较优先级时，需要将所有的选择器优先级进行相加计算，最后优先级越高，越先显示
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级相等则优先显示最下方的样式
在开发中!important慎用 能不用就不用
*/
div#box1{
color: brown;
}
div{
font-size: 20px;
}
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="box1" class="red" >我是一个div
<span>我是div中的span</span>
</div>
</body>
</html>像素与百分比以及长度单位em rem
查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 50px;
}
.box1{
/*
长度单位
像素
屏幕实际是由一个一个小方块构成的
不同屏幕的像素大小不一样
像素越小显示的越清晰
同样的300像素在不同的设备下显示效果不一样
百分比
百分比可以设置属性相对父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
em
em是相对自身元素的字体大小计算的
1em=1font-size
em会根据字体大小改变而改变
rem
rem是相对于根元素的字体大小
*/
width: 200px;
height: 200px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
.box3{
font-size: 20px;
width: 10rem;
height: 10rem;
background-color: greenyellow;
}
</style>
</head>
<body>
<!-- 快捷 div.box1或者直接.box1-->
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>RGB
RGB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
/*
颜色单位
CSS中直接使用颜色名字来设置颜色
不方便，所以不常用
主要用的方式为RGB值
RGB值
通过三种颜色的不同浓度来调配颜色
0-255
语法：RGB(红色，绿色，蓝色)
RGBA值
A透明效果
1表示完全不透明
0.5表示半透明
0表示全透明
十六进制RGB
#红绿蓝
00-ff
如果颜色两位两位重复可以进行简写
*/
background-color: red;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0,0.5);
background-color: #ff0000;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>文档流
RGB以及文档流的更多相关文章
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 【H5疑难杂症】脱离文档流时的渲染BUG
BUG重现 最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!! 如图所示,我动态的改变了dom结构, ...
- Html文档流和文档对象模型DOM理解
前言 在理解浮动和定位时,触碰到文档流概念.为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型). 正文 DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构.例如: 根 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- CSS文档流
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- float的元素脱离文档流，但不完全脱离，只是提升了半层；
float的元素脱离文档流,但不完全脱离,只是提升了半层:
- BFC以及文档流
在一个文档流中,盒子模型元素的位置会互相影响. 当一个BFC出现在文档流中时,BFC内部的盒子模型元素同BFC外部的元素之间的位置不会互相影响. 相当于BFC重新创建了一个文档流. 举例: 一个文档流 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 布局转换：文档流->绝对定位
布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大 ...
- html/css 关于脱离文档流的几种情况
所谓的文档流 顾名思义就是按照顺序流下来,指的是html元素从上往下 从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一 ...
随机推荐
- Java基础-运算符、包机制、JavaDoc生成文档
运算符 Java语言支持如下运算符:优先级() 算术运算符:+,-,*,/,%,++,- 赋值运算符:= 关系运算符:>,<,>=,<=,==,!=,instanceof 逻辑 ...
- Python_基础_Print_转义字符和原字符
转义字符和原字符 print('hello\nworld') #转义功能的首字母 n-->newline的首字母表示换行 print('hello\tworld') #\t即表示一个制表位 pr ...
- C#中定时任务被阻塞问题
目录 解决一个C#中定时任务被阻塞问题 1.摘要 2.C#中定时任务的最简方法 3.定时任务阻塞现象 4.阻塞现象原因分析 5.问题解决 1.摘要 本文会介绍一个C#中最简单定时任务的使用方法,以及会 ...
- Python的入门学习Day 19~21——form”夜曲编程“
..Day 19 time:2021.8.16. 很神奇地,编程和数学渐渐有了交集--今天学习了函数,连模样都像 f(x) 的形式.比较有区分度的是,在P里,"x"被称为&qu ...
- 2023-03-01 Error: Invalid hook call.Hooks can only be called inside of the body of a function component.
问题描述:rn项目使用钩子useState,详细报错如下: Error: Invalid hook call. Hooks can only be called inside of the body ...
- vue webpack打包之后 重新修改配置文件接口API路径,无需修改代码后再打包
用vue-cli构建的项目通常是采用前后端分离的开发模式,也就是前端与后台完全分离,此时就需要将后台接口地址打包进项目中,但是有的时候需要修改接口地址,为了避免为了修改接口地址而进行修改代码后再重新打 ...
- 《Rust权威指南》学习笔记——8.通用集合类型
Rust通用集合类型 动态数组Vec 字符串String 和&str 哈希映射HashMap
- 动态规划-1-钢条切割（Dynamic Programming-1-rod cutting）
1 #include <stdio.h> 2 #define LEN 10 3 #define NEGINF -999999 4 struct r_d { 5 int r; //profi ...
- JS二进制：File、Blob、FileReader、ArrayBuffer、Base64
原文链接:https://mp.weixin.qq.com/s/IarZDzv9dLD5suL5zdZNcQ JavaScript 提供了一些 API 来处理文件或原始文件数据,例如:File.Blo ...
- git log 的常用用法
1.最基本的 git log 2.简化版本 git log --oneline 3. 作者筛选 4.时间筛选 git log --since="2022.05.26" --unti ...