2019-06-16-CSS入门
2019-06-16 本文已影响0人
_Wizard
要求
本周学习了那些技术概念？请至少列出10个
解释每个概念的意思、作用和重要性
每周做了哪些相对印象深刻的练习？列举3个
这三个练习的目的是什么？你分别从中学到了什么？
在本周的学习中，你还有什么需要被解答的问题？
技术概念及意思、作用和重要性
CSS基础
一切皆盒子
在这里插入图片描述
-
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
-
css 样式由选择符和声明组成，而声明又由属性和值组成
- 选择符：又称选择器，指明网页中要应用样式规则的元素
- 声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
注意：
- 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
- 为了使用样式更加容易阅读，可以将每条代码写在一个新行内
-
想要在HTML文档中应用CSS，有三种方法：
- 内联：
<p style="margin:1em 0">Example Content</p> - 外链：
<link rel="stylesheet" href="/path/to/style.css">
在<head>内（不是在<style>标签内） - 嵌入：
-
type="text/css"的用处
用处是告诉浏览器，这段标签内包含的内容是css或text，也就是说如果某种浏览器（特别是wap等手机浏览器械、）不能识别css的，会将代码认为text，从而不显示也不报错。
-
- 内联：
<style type="text/css">
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
- 选择器
- id选择器
- 类选择器
- 亲子选择器和后代选择器:
区别：后代选择器可以选中嵌套在标签内部任意层级的标签元素，而亲子选择器只能选中当前标签向内一层的元素，即亲子选择器只能匹配直接后代，通俗一点，就是只能匹配儿子辈，不能匹配孙子辈 - 通配选择器、标签选择器、ID选择器、类选择器都属于简单选择器，除去简单选择器，还有复杂选择器
- 属性选择器
[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
div[title] {
font-weight: bold;
font:宋体
}
div[title="demo"]{
color: #00539F;
}
div[title*=demo]{
background: red;
}
div[title=zhi] {
color: aquamarine;
}
div[title^=zhi] {
background: burlywood;
}
</style>
</head>
<body>
<div>
<p>无title属性</p>
</div>
<div title="title">
<p>title</p>
</div>
<div title="demo">
<p>demo</p>
</div>
<div title="demonstrate">
<p>demonstrate</p>
</div>
<div title="zhi">
<p>zhi</p>
</div>
<div title="zhihu">
<p>zhihu</p>
</div>
</body>
- margin折叠
在CSS中，两个或多个相邻的普通文档流中的盒子在垂直方向上的外边距会发生叠加，这种情况下形成的外边距称之为margin折叠。
多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期
CSS布局
- 定位模式
- 常规流
除根元素、浮动元素和绝对定位元素外，其它元素都在常规流之内(in-flow)
而根元素、 浮动和绝对定位的元素会脱离常规流(out of flow)
常规流中的盒子，属于块级格式化上下文或行级格式化上下文 - 浮动
- 绝对定位
- 常规流
-
块级格式化上下文（BFC）：
- BFC有哪些主要的作用呢？
- 可以清楚浮动
- 防止发生margin折叠
- 更加方便的进行双栏布局
- BFC有哪些主要的作用呢？
-
浮动 - Float
- 浮动元素从常规流中脱离，被漂浮在容器(包含块)左边或右边
- 浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
- 浮动元素不会影响其后面的流内块级盒
- 但是浮动元素后面的行级盒子会变短以避开浮动元素
CSS调试
我们最常使用的模块是element和console
-
Element
- 我们在DevTools中定位在Element模块，通过鼠标悬浮在某一个DOM节点上，那么在左侧的页面上改元素就会被高亮显示。
- 在Element面板中，我们可以看到还有一个子面板叫Style，在Style面板中，可以看到某一个元素的所有定义的CSS属性，并且我们在Style面板中修改CSS属性可以在页面中即时生效。
-
Console
- 我们在DevTools中定位在Console模块，当前模块可以用来查看和调试当前页面所加载的脚本的源文件。换句话说，我们可以在Console模块中执行JavaScript脚本。
- 若我们的页面中出现了一些错误，我们打开DevTools的Console面板也可以看到在该面板中是有页面的报错的。
本周印象深刻的练习
- CSS调试：
这周我学到了前端网页调试的方法，通过浏览器提供的DEV工具，我能更快的调试代码中的bug或者是修改css以达到预期设计的期望。 - 圣杯布局：
圣杯布局是很经典的三栏式布局，两边两栏宽度固定，中间栏宽度自适应，帮助我更好的理解了浮动、相对定位以及负边距等前端概念。 - 制作个人网站：
根据前几节所有系统的将知识整合，发现了平时做小节训练发现不了的细节问题，能帮助我更深层的思考前端的知识。
待解答的问题
BFC是我觉得有些难理解清晰的概念
