第二周周报
为网页添加样式
…
h1{
color:red;
background-color: blue;
text-align:center;
}
…
css规则 = 选择器（大括号前面的） + 声明块
选择器
其作用为选中元素
1.id选择器：选定确定的id的元素
2.元素选择器：直接选定某类元素
3.类选择器：使用class属性，每一类均有不一样的名称，在style中，以.+名称表示那个选择器，如果想同时使用两个类选择器，只需要在class的“”里面用空格隔开
声明块
即大括号里面的内容
css代码书写位置
- 内部样式表
书写到style元素中
- 内联样式表
直接把属性写在元素的style中
- 外部样式表
将样式书写在独立的css文件中，在head中使用link元素，然后在href中添加css文件的路径。
1).外部样式可以解决多页面样式重复的问题
2).有利于浏览器缓存，从而提高页面的响应速度
3).有利于代码分离，更容易阅读和维护
常见样式声明
1.color 可以被继承
元素内部的文字颜色
预设值：定义好的单词
三原色、色值：即红绿蓝，每个元素用0~255的之间的数字表达。
存在两种表示法
- rgb表示法：（x,x,x）x属于0~255，分别代表红绿蓝三个颜色。
- hex表示法：即把数字换成两位十六进制的数，#xxxxxx，每两位代表一个颜色，如果是#aabbcc,则也可以表示为#abc
2.background-color 不能被继承
和color一样
3.font-size 可以被继承
元素内部文字的尺寸大小
1)px:像素，绝对单位，即文字的高度用多少个像素点
2)em:相对单位，相对父元素的字体大小（每个元素必须有基准字号，如果使用父元素的字体大小，则直接使用父元素的字体大小，如果没有父元素，则使用浏览器默认的基准字号）
4.font-wight 可以被继承
文字粗细程度，可以取值数字，也可以取值为预设值（400）
strong元素，默认加粗
- strong元素：表示重要的，不能忽略的元素
5.font-family 可以被继承
文字类型（必须用户计算机中存在的字体）
一般会使用多个字体，用于匹配不同环境
最后会使用sans-serif,默认的非衬线字体，防止最后显示不出来文字
6.font-style 可以被继承
字体样式，通常用他设置斜体
i元素、em元素，默认倾斜字体
- em元素：表示强调的内容
- i元素：用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
7.text-decoration 不能继承
文本修饰，给文本加线。（line-through,overline,underline）
a元素：默认下划线
del元素：表示错误的内容，默认line-through
s元素：表示过期的内容，默认line-through
8.text-indent 可以被继承
表示首行文本缩进
9.line-height 可以被继承
表示每行文本的高度，该值越大，表示每行文本的距离越大。
设置行高为容器的高度，可以让单行文本垂直居中
行高也可以设置为纯数字，表示对于当前元素的字体大小
10.width 不能继承
表示宽度
11.height 不能继承
表示高度
12.letter-space 可以被继承
表示文字间隙
13.text-align 可以被继承
表示内部文字的水平排列方式(left,right,center)
选择器
选择器：帮助你精准的选中你想要的元素
简单选择器
1.id选择器：选定确定的id的元素
#test {
text-indent: 2em;
line-height: 2;
}
<p id="test">Lorem ipsum dolorp>
2.元素选择器：直接选定某类元素
a {
color: blue;
}
3.类选择器：使用class属性(仅为类选择器服务)，每一类均有不一样的名称，在style中，以.+名称表示那个选择器，如果想同时使用两个类选择器，只需要在class的“”里面用空格隔开
<p class="red">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id sit fugit officiis ullam aut quisquam quis, labore itaque veniam laborum officia, soluta odio nostrum sequi hic non architecto harum! Similique.
p>
.red {
color:red;
}
- 通配符选择器
*，表示选中所有元素
- 属性选择器
根据属性名和属性值选中元素
选中所有具有某个属性的元素
[href]{
color: brown;
}
单独选中可以这样做
[href="https://sina.com"]{
color: crimson;
}
- 伪类选择器（一般与a元素相关）
选中某些元素的某种状态
link：超链接未访问时的状态
visited:超链接访问过后的状态
hover:表示鼠标移动上去的状态，一般与其他选择器连用
/* 表示选中鼠标悬停时的a元素变色 */
a:hover{
color: red;
}
active:表示鼠标点击时的状态
- 伪元素选择器
通常生成并选中某个元素内部的第一个子元素或最后一个子元素
使用时要有两个==::==
before，after使用时相当于在元素前面和后面加了一个新的子元素，存在他们独有的属性content，该属性表示子元素的文本内容。
如例子
span::before{
content:"《";
}
span::before{
content:"》";
}
选择器的组合
- 并且
- 后代元素 —— 空格
.red .ax{
color:red;
}
<div class="red">
<ul>
<li>Cumque.li>
<li class="ax">Suscipit.li>
<li>Magni.li>
<li>Assumenda!li>
<li>Nostrum.li>
ul>
div>
- 子元素 —— >
只能选中子元素。
- 相邻兄弟元素 —— +
选中前面元素的后一个元素。只能选中后面的，不能选中前面的。
- 兄弟元素 —— ~
选中前面元素后面出现的所有兄弟元素。
选择器的并列
使用多个选择器，用逗号分隔。本质上就是分开书写，仅仅为了方便书写。
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理。
- 比较重要性
重要性从高到低：
作者样式表：开发者书写的样式表。
- 作者样式表中的!important样式 一般不建议加!important.
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
- 比较特殊性
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个四位数（xxxx）
- 千位：如果是内联样式，记1，否则记0
- 百位：等于选择器中所有id选择器的数量
- 十位：等于所有选择器中所有类选择器，伪类选择器的数量
- 个位：等于选择器中所有元素选择器，伪元素选择器的数量
内联样式：直接在标签添加样式
<a href="" style="color: #ccc;">Lorem.a>
内部样式表：在head标签里定义
<head>
<style>
a {
color:red,!important;
}
.act {
color:blue;
}
style>
head>
外部样式表：引用外部文件
<link rel="stylesheet" href="./css/text1.css">
- 比较源次序
代码靠后的胜出
应用
- 重置样式表
书写一些作者样式表，覆盖浏览器的默认样式
常见的重置样式表：
- link > visited > active> hover
继承
子元素会继承父元素的某些css属性
通常，跟文字内容相关的属性都能被继承
属性值的计算过程
渲染页面是一个一个一次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提是:该元素的所有css属性必须有值
-
确定声明值：参考样式表(包括作者样式表、浏览器默认样式表等)中没有冲突的声明，作为css的属性值
-
层叠冲突：对样式表中有冲突的声明使用层叠规则，确定css属性值
-
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
-
使用默认值：对仍然没有值的属性，使用默认值
inherit
可以让某个元素强制进行继承,让该元素强制应用父元素的值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EwgahM4m-1606144938748)(1.png)]
initial
将该属性设置为默认值
- transparent关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。
-
盒模型
box：每个元素在页面中都会生成一个矩形区域即盒子
盒子类型
- 行盒：display等于inline的元素
- 块盒：display等于block的元素
行盒在页面中不换行，块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
行盒：span、a、img、video、audio
盒子的组成部分(块盒)
- 内容 content 盒子的具体内容
width,height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充(内边距) padding 盒子边框到盒子内容的距离
padding-left，padding-right，padding-top，padding-bottom
padding:简写属性
padding：就是上 右 下 左
如果上和下，左和右的值分别相等，那就只需要书写两组像素值，第一组代表上和下，第二组代表左和右；若四个值都相当，那就可以只书写一个值
填充区 + 内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式(border-style) + 边框宽度(border-width) + 边框颜色(border-color)
solid表示粗实线 dashed表示虚线
border-style、border-width、border-color也是简写属性
边框 = 填充区 + 内容区 = 边框盒 border-box
- 外边距 margin 边框与其他盒子的距离
和padding一样
盒模型的应用
改变宽高范围
默认情况下，width和height设置的是内容盒宽高。
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height实际上是内容盒的尺寸
- 精确计算：用量取的实际数据减去边框盒和填充盒的宽高为内容盒的宽高。
- css3：通过box-sizing属性更改width和height为content-box、border-box的宽高。
box-sizing:border-box;
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改，具体和box-sizing类似
溢出处理
溢出内容在默认情况下是可见的
默认情况下
overflow: visible;
表示溢出部分隐藏
overflow: hidden;
表示生成滚动条，overflow-x,overflow-y,分别表示生成横向滚动条和纵向滚动条
overflow: scroll;
auto,表示自动，当你需要的时候，滚动条才会出现。
断词规则
用处不大,了解即可
在盒子不够大，需要进行换行时，从哪里断词的规则
word-break,会影响文字在什么位置被截断换行
normal:普通，CJK字符(中文，日文，韩文)文字位置截断，非CJK字符(如英文)，在单词位置截断。
break-all:截断所有，所有字符都在文字处截断
keep-all:保持所有，所有文字都在单词之间截断
空白处理
white-space:nowrap;
表示溢出部分做不换行处理 即空白折叠仍会发生，但不会换行
text-overflow: ellipsis;
表示文本溢出后，对溢出部分用三个点表示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BOlrveAX-1606144966628)(1.png)]
white-space:pre;
这个属性所选中的不会进行空白折叠
行盒的盒模型
常见的行盒:包含具体内容的元素
span,strong,em,i,img,video,audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高应该使用字体大小，行高，字体类型间接提高行盒的宽高。
- 内边距（填充区）
水平方向有效，垂直方向仅会影响背景，不会实际占据空间
- 边框
和内边距一样。
- 外边距
和内边距一样。
行块盒
display：inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间。
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img，video,audio
绝大部分可替换元素均为行盒。类似于行块盒，盒模型中的所有尺寸都有效。
常规流
盒模型：规定单个盒子的规则
视觉格式化模型(布局规则)：页面中的多个盒子的排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流，文档流，普通文档流，常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则: 块盒独占一行，行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大部分情况下:盒子的包含块，为其父元素的内容盒。
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值为auto
margin的取值也可以是auto，默认值为0
auto:将剩余空间吸收掉
width的吸收能力强于margin
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收。
在常规流中，块盒在其包含块中，可以定宽，然后左右margin设为auto。
当在把margin再次改变成如下所示
代表宽度的像素值的和是固定的
- 每个块盒垂直方向上的auto值
height:auto,此时表示适应内容的高度即盒子的高度会被内容撑开
margin:auto,表示0
- 百分比取值
padding,margin,宽可以取值为百分比
以上所有的百分比相对于包含块的宽度。
高度的百分比:
1). 包含块的高度取决于子元素的高度，设置百分比无效
2). 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。即相邻margin区域会进行合并。合并之后取margin的最大值
只要相邻就会合并
不想进行合并可以添加一个border,只要存在一个东西把两个元素分开，就不会进行合并，也可以把子元素的margin-top更换成父元素的padding-top
浮动
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性值为：
- left: 左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
不修改时，float的默认值为none，即为常规流
- 当一个元素浮动后，元素必定为块盒(display属性会被强制更改为block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
- 宽度为auto时，表示适应内容宽度，要是没有内容，就是0
- 在任何情况下高度为auto时，适应内容的高度
- margin设为auto时，在浮动里面没有吸收能力，即值为0
- 边框，内边距，百分比设置与常规流一样。
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子，会造成文字环绕效果
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
一个小处理
要是想让图片和文字分开一点距离，应该采用什么样式声明？
这是对p元素，即有文字内容的元素进行设置
margin-left: 30px;
对图片元素进行设置
margin-right: 30px;
高度坍塌
这个称为浮动坍塌
高度坍塌的根源是：常规流盒子的自动高度在计算时，不会考虑浮动盒子
解决方法：清除浮动，涉及css属性clear
- 默认值：none
- left:清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
利用常规流盒子设置clear属性，将父元素撑开
也可以利用伪元素选择器,记得修改displaya属性(默认inline)，改为block