交作业
WEB前端知识点记录（46-71、78-83集）
- 第四十六集-标签群组配套等选择器
- 第四十七集-层次选择器
- 第四十八集-属性选择器
- 第四十九集-hover等伪类选择器
- 第五十集-after等伪类选择器
- 第五十一集-结构伪类选择器
- 第五十二集-css样式的继承
- 第五十三集-单一样式的优先级
- 第五十四集-important群组等优先级
- 第五十五集-层次的优先级
- 第五十六集-css盒子模型
- 第五十七集-boxsizing改变盒模型
- 第五十八集-margin叠加问题
- 第五十九集-margin传递问题
- 第六十集-css盒子模型之扩展
- 第六十一集-盒子模型的嵌套练习
- 第六十二集-按类型划分标签
- 第六十三集-按内容划分标签
- 第六十四集-按显示划分标签
- 第六十五集-display显示框类型
- 第六十六集-标签嵌套规范
- 第六十七集-overflow溢出隐藏
- 第六十八集-透明度与手势
- 第六十九集-最大最小宽高
- 第七十级-css默认样式
- 第七十一集-css重置样式
- 第七十八集-float浮动概念及原理
- 第七十九集-float注意点整理
- 第八十、八十一集-清除float浮动
- 第八十二、八十三集-float制作页面小结构
第四十六集-标签群组配套等选择器
- 标签选择器：div{ }
使用场景：a.去掉某些标签的默认样式
b.复杂的选择器中，如层次选择器 - 群组选择器（分组选择器）：可以通过逗号的方式，给多个不同的样式添加统一的css样式，来达到代码的复用
- 通配选择器（尽量避免使用，会给所有标签添加样式，慎用）：*{ }
使用场景：a.去掉所有标签的默认样式
第四十七集-层次选择器
- 后代：M N{ }
父子：M > N{ }
兄弟：M ~ N{ }（当前M下的所有N标签）
相邻：M + N{ }（当前M下面相邻的N标签）
第四十八集-属性选择器
- M[attr] {}
=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[] [] []：组合匹配
第四十九集-hover等伪类选择器
- M：伪类{ }
:link访问前样式(a标签); :visited访问后样式(a标签); :hover鼠标移入时的样式(所有标签); :active鼠标按下时的样式(所有标签); - 如果四个伪类都生效，一定要注意顺序：L V H A
- 一般网站只这样去设置：a{ } a:hover{ }
第五十集-after等伪类选择器
- :after; :before：通过伪类的方式给元素添加一段文本内容（使用content属性）
- :checked; :disabled; :focus：都是针对表单元素的
第五十一集-结构伪类选择器
- nth-of-type( )
nth-child( )
n值表示0到无穷大
区别：nth-of-type为标签计数；nth-child为总标签数计数 - first-of-type
last-of-type
only-of-type
第五十二集-css样式的继承
- 文字相关的格式可以被继承
布局相关的格式不能被继承（默认是不能继承的，但是可以设置继承属性：inherit值）
第五十三集-单一样式的优先级
- 相同样式优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
- 内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
- 单一样式优先级：style行间>id>class>tag>*>继承
第五十四集-important群组等优先级
- !important：提升样式优先级，非官方方法，不推荐使用（不能针对继承的属性进行优先级的提升）
- 标签+类与单类:标签+类>单类
- 群组选择器靠后写的优先级高
第五十五集-层次的优先级
- 权重比较
- 约分比较
第五十六集-css盒子模型
- 组成：content>padding>border>margin
- content:内容区域，由height和width组成
- padding:内边距（内填充）：number:30px、30px 40px（上下和左右）、30px 40px 50px 60px（上右下左）
- margin：外边距（外填充）
- 单一样式结构：-top、-left、-right、-bottom
- 注：背景色填充到margin以内的区域（不包括margin区域）
文字在content区域添加
padding不能为负数，而margin可以为负数
第五十七集-boxsizing改变盒模型
- boxsizing：可以改变盒子模型的展示形态
默认值：content-box:width、height(content)
border-box:width、height(content、padding、border) - 使用场景：不用再去计算一些值
解决一些100%的问题
第五十八集-margin叠加问题
- 盒子模型的一些问题：margin叠加问题（出现在上下margin同时存在的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的）
- 解决方案：BFC规范、想办法只给异格元素添加间距
第五十九集-margin传递问题
- 盒子模型的一些问题：margin的传递问题（出现在嵌套的结构中，只是针对margin-top的问题）
- 解决方案：BFC规范、给父容器加边框、margin改成padding
第六十集-css盒子模型之扩展
- margin左右自适应是可以的，但是上下自适应是不行的（上下在第二大部分进行学习）
- width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码
第六十一集-盒子模型的嵌套练习
课堂练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{width:350px;height:350px;border:1px black dashed;padding:37px;}
#box2{border:5px #d7effe solid;padding:20px;}
#box3{background: #ffa0df;padding:40px;}
#box4{border:1px white dashed;padding:3px;}
#box5{border:1px white dashed;padding:50px;}
#box6{width:100px;height:100px;background:#96ff38;border:#fcff00 5px solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
第六十二集-按类型划分标签
- 按类型：a.block:div、p、ul、li、h1~h6…
特点：1.独占一行；2.支持所有样式；3.不写宽的时候，和父元素的宽相同；4.所占区域是一个矩形；
b.inline:span、a、em、strong、img…
特点：1.挨在一起；2.有些样式不支持；3.不写宽的时候，宽度由内容决定；4.所占区域不一定是矩形；5.内联标签之间会有空隙，原因是由于换行产生的；
c.inline-block:input、select…
特点：1.挨在一起，但是支持宽高；2.内联标签之间会有空隙，原因是由于换行产生的；3.所占区域是一个矩形；
注：布局一般用块标签，修饰文本一般用内联标签
第六十三集-按内容划分标签
1.flow：流内容、metadate：元数据、sectioning：分区、heading：标题、phrasing：措辞、embedded：嵌入的、interactive：互动的
第六十四集-按显示划分标签
1.替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容（img、input…）
2.非替换元素：将内容直接告诉浏览器，将其显示出来（div、h1、p）
第六十五集-display显示框类型
- display：block、inline、inline-block、none…
- display=none：不占空间的隐藏
visibility：hidden：占空间的隐藏
第六十六集-标签嵌套规范
- 块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签（a链接是个例外）
第六十七集-overflow溢出隐藏
- overflow:visible（默认）、hidden、scroll、auto、x轴y轴（overflow-x、overflow-y）
第六十八集-透明度与手势
- 透明度与手势：opacity(0透明~1不透明)；注：占空间，所有的子内容也会透明
rgba：0~1(可以让指定的样式透明，而不影响其他样式) - cursor手势：defalt(默认);自定义鼠标样式(要实现自定义手势：准备图片.cur；.ico)
例：cursor:url(./xxxx/xxxx),auto;
第六十九集-最大最小宽高
- min-width、max-width、min-height、max-height
- %单位：换算（以父容器大小换算）
一个容器怎么适应屏幕的高：容器加height:100%; body:100%; html:100%
html,body{ height:100%; }
.contrainer{ height:100%; }
第七十级-css默认样式
- 没有默认样式的：div、span
- 有默认样式的：body(margin:8px)、h1(margin上下21.440px、font-weight:blod)、p(margin上下16px)、ul(margin上下1px、padding左40px、默认点：list-style:disc)、a(text-decoration:underline)
第七十一集-css重置样式
- 简单的CSSreset：*{margin:0;padding:0;}优点：不用考虑哪些标签有默认的margin和padding；缺点：稍微影响性能；body,p,h1,ul{margin:0;padding:0;}
ul{list-style:none;}
a{test-decoration:none;color:#666;}
img{display:block;}现象：图片和容器底部有一些空隙（内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的）原因：vertical-align:baseline;基线对齐方式，默认值；解决方式：img{vertical-align:bottom;}或者转成块img{display:block;} - 写一个页面或一个布局效果的时候：a.写结构；b.css重置样式；c.写具体样式
第七十八集-float浮动概念及原理
- 文档流：文档流是文档中可显示对象在排列时所占用的位置
- float特性：加浮动的元素，会脱离文档流会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
- float取值：left、right、none(默认)
第七十九集-float注意点整理
- float注意点：a.只会影响后面的元素；b.内容默认提升半层；c.默认宽根据内容决定；d.换行排列；e.主要给块元素添加，但也可以给内联元素添加
第八十、八十一集-清除float浮动
- 如何清除浮动：上下排列：clear属性，表示清除浮动的(left、right、both)
- 嵌套排列：固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器浮点也会影响到后面的元素
overflow：hidden(BFC规范)，如果有子元素想溢出，那么会收到影响
display:inling-block(BFC规范)，不推荐，父容器会影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法
第八十二、八十三集-float制作页面小结构
课堂作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul{list-style: none;}
img{display:block;}
a{text-decoration: none;color: #666;}
.l{float:left;}
.r{float:right;}
.clear::after{content:"";display:block;clear:both;}
#main{width:366px;margin:20px auto;}
#main .title{height:23px;line-height:23px;font-size:12px;padding-left:30px;background:6px 4px url(./) no-repeat,url(./) repeat-x;}
#main ul{overflow: hidden;margin-top: 13px;}
#main li{ margin-bottom: 22px;}
#main .pic{ width:100px;height:1px solid #666;margin-left: 5px;}
#main .pic img{margin:2px;}
#main .content{width:240px;margin-left: 13px;}
#main .content h2{font-size: 12px;line-height: 24px;}
#main .content p{font-size: 12px;line-height: 20px;}
</style>
</head>
<body>
<div id="main">
<h2>标题</h2>
<ul>
<li class="clear">
<div class="pic">
<a href="">
<img src="" alt="">
</a>
</div>
<div class="content">
<h2></h2>
<p><a href="">[详情]</a></p>
</div>
</li>
</ul>
<ul>
<li class="clear">
<div class="pic">
<a href="">
<img src="" alt="">
</a>
</div>
<div class="content">
<h2></h2>
<p><a href="">[详情]</a></p>
</div>
</li>
</ul> <ul>
<li class="clear">
<div class="pic">
<a href="">
<img src="" alt="">
</a>
</div>
<div class="content">
<h2></h2>
<p><a href="">[详情]</a></p>
</div>
</li>
</ul>
</div>
</body>
</html>
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
