Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (选择器 (理解“层叠” (p{} 写共性 .box2 p{} 写特性, 完成 理解层叠练习题（Notion中附图） …
CSS
选择器
理解“层叠”
p{} 写共性
.box2 p{} 写特性
完成 理解层叠练习题（Notion中附图）
怎么调img的大小？不能调li啊？？ -要调ul li img{} 才行
注意：类一般加给ul li 不给里面的img其他子元素；
类要写全：ul li.favorite img{ 调大小 }
id选择器
几乎全部公司都禁用，因为id是给js用的，不是给CSS用的。
<div id="box"> #box{ }
注意：id不能重名
class选择器
一个class可以给多个HTML使用；
一个HTML可以使用多个class。
案例：红绿灯三个方块，先给一个方块类，再给三个颜色类
遇到重复的东西，要想着拆分为"原子类"
→工作的时候用less自动生成很多原子类
→可以网上搜索常用原子类，作为参考
标签选择器
设置某一种选择器，如：div{width:60px...}
一般负责设置通用默认样式
常用的有：
ul list-style:none 去掉小圆点
a text-decoration:none 超链接去掉下划线
em font-style:normal 字不倾斜
h1,h2,h3,h4,h5,h6{ font-weight: normal} 字不加粗
table,tr,td {border-collapse: collapse;} 表格单线
交集/并集选择器
div.spec{}
这样又是div，又是spec类的才会应用
h1,h2{} 逗号表示并集
后代选择器
.box2 p{} 中间空格
box2里面的p才会生效，儿子或孙子都可以
盒模型（重点）
→CSS三大重点：盒模型，浮动，定位
认识padding
会看审查无素中的盒模型图
写一个案例：一个box是200*200px，添加文字在里面会发现文字是贴着内壁的，此时加属性padding:10px，他会产生一个10px的边距，但这个边距是往外的，于是这个盒子现在是220px， 等于说200宽高是指内容盒子的宽高
padding: 10px 20px 20px 10px 表示 上右下左
padding: 10px 20px 10px 表示 上，左右，下
padding: 10px 20px 表示 上下，左右
认识border
border: 10px solid red
宽度，线形，颜色。单独写10px是没有效果。 这个也是外扩的
父子盒模型
儿子可以快速知道父亲的可用面积
只要儿子的width相加小于等于父亲的width就一定能放下
精确还原盒子练习
做网易小盒子练习（Notion)
注意：量盒子尺寸时要把电脑显示调为100%
网易小盒子练习讲解
*{margin:0;
padding:0;}
有一些标签如p天生有margin，一上来先把全部给去掉.
第二步，立稳最大的div的尺寸
小知识补充：盒子边框如果相邻的两条边颜色不一样，角落处会出现“楔形”。此处制作小案例说明。
没有写样式的div是无公害的，更多的是语义意义
text-align: center 文本居中
line-height:37px 这个行高用来上下居中
行高的测量是从上一行底到这一行底
做完网易小盒子做一个腾讯体育的盒子
完成这两份作业之后的心得：
学会了div拆版；
并排用浮动，两者都要浮动，父盒子要设置高度
部件与部件之间用margin做间隙，边框和文字之间用padding用间隙；
文字用行高来调间距更方便
完了再做一个CCTV官网的盒子，完了再看这一节讲解，在CSS第三天第1节
CSS简介
选择器
class="box1" 类必须是英文字母开头
.box1{}称为选择器
最重要的属性前三名：width, height, background
在IDE中的快捷输入为 w + Tab， h+Tab, bg+Tab
Cascading sytle sheet层叠式样式表
整体感知：写一个小带box1,2,3的小案例
写在head里面的 style 标签对中
<style type="text/css"> </style>
现在一般不用写type属性
绝对定位
子绝父相
在父亲里 position:relative; 相对定位，儿子将以自己定位，如果不写儿子以浏览器定位
做两个案例：bilibili和百度新闻的盒子，请看绝对定位案例2和3
→ 半透明是background-color: rgba(0,0,0,.6) 这是标准写法
作业讲解课
制作腾讯一个页面请看Notion
绝对定位可以让元素自由地排版
制作案例：有一些p段落，然后对最后一个div进行绝对定位position:absolute
top:100px; right:100px
类似word里面的插入文本框
使用了Position:absolute的盒子，不影响标准文档流
top bottom left right 出场2个来定位
认识浮动
三点注意事项
1. 浮动的元素 必须是同一级别的兄弟
2. 兄弟中有一人浮动，其他人必须浮动
3. 父元素必须有足够的宽度容纳兄弟们的并排
右浮动
小知识点：居中显示 margin: 0 auto
float:right;
练习：按提供的示意图制作
整理感知：给父盒子和两个子盒子都设置宽度高度 背景，就会发现：
div盒子天生有一个性质：竖直排列
使用 float:left; 可使两个盒子向左贴边。
标准文档流
把一个网页看作一个word文档，因为网页也是有“光标”存在的，此时网页的内容必须从上到下，从左到右进行排列。这样的特性称为 标准文档流
块级元素和行内元素
块级元素：div, p, h, ul, li 等
行内元素：span, a, em, b, u, i 等
其他元素：img, input 等
块级元素可以设置width, height，天生换行显示；
行内元素不允许设置width, height, 天生并排显示，这里写一个对比案例
两种元素的相互转换
写一个a标签，设置宽高是无效的，此时加一个display: block;（转化成块级元素） 就可以生效了！
同理将一个box 的display: inline;（转化成行内元素） 此时设置宽高就无效。
display:block - 工作中非常有用
display:inline - 工作中没有用
（重要案例）导航条的制作（看Notion示意图）
重点：a标签必须得转化成block才能设置宽高 !
a:hover 表示鼠标悬停时
制作案例：龙禧网站导航条（notion配图）
复杂布局练习
使用到的新属性：
向下的外边距 marginf-bottom: 8px 快捷输入 mgb
→ 中间的4个块其中有3个是左浮动，第4个是右浮动，它会掉下去，这个后面讲为什么。
注意：每定义一个大div 马上就要写宽高，即使他不显示都要写好先。