html: 结构
css:层叠样式表 用于html的外观显示
-
文本内容
-
图片的外形
-
版面的布局
3种样式
image
- 行内样式 | 书写方便 | 没有实现样式和结构相分离 | 使用较少|控制一个标签
- 内部样式 | 部分结构与样式相分享 | 没有彻底分离 | 较多 | 控制一个页面
- 外部样式| 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制整个站点
font-size:设置字号可以使用相对长度单位也可以使用绝对长度单位
长度单位
- font-family:设置字体
p{ font-family:"微软雅⿊";}
可以同时指定多个字体中间以逗号隔开,表示浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体.
1. 现在⽹网⻚页中普遍使⽤用14px+。
2. 尽量量使⽤用偶数的数字字号。ie6等⽼老老式浏览器器⽀支持奇数会有bug。
3. 各种字体之间必须使⽤用英⽂文状态下的逗号隔开。
4. 中⽂文字体需要加英⽂文状态下的引号，英⽂文字体⼀一般不不需要加引号。当需要设置英⽂文字体时，英⽂文字体名必须位于中⽂文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英⽂文状态下的单引号或双引号，例例如font-
family: "Times New Roman";。
6. 尽量量使⽤用系统默认字体，保证在任何⽤用户的浏览器器中都能正确显示。
CSS Unicode字体
在 CSS 中设置字体名称，直接写中⽂文是可以的。但是在⽂文件编码(GB2312、UTF-8 等)不不匹配时会
产⽣生乱码的错误。xp 系统不不⽀支持 类似微软雅⿊的中⽂
方案一: 你可以使⽤用英⽂文来替代。 ⽐比如 font-family:"Microsoft Yahei"。
方案二: 在 CSS 直接使⽤用 Unicode 编码来写字体名称可以避免这些错误。使⽤用 Unicode 写中⽂文字体 名称，浏览器器是可以正确的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软 雅⿊”。
字体
font:综合设置字体样式
选择器器{font: font-style font-weight font-size/line-height font-family;}
line-height
块级元素(block-level)
每个块元素通常都会独自占据一整行,可以对其设置宽度,高度,对齐等属性,常用用网页布局和网页结构的搭建.
常⻅见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点
- 总是从新行开始
- 宽度,高度,行高,外边距以及内边距都可以控制
- 宽度默认是父容器的100%
- 可以容纳内联元素和其它块元素
行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度,高度,对齐等属性,常用于控制页面中文本的样式.
常⻅的⾏内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素(inline-level)的特点
- 和相邻行内元素在一行上
- 宽,高无效,但水平方向的padding和margin可以设置,垂直方向的无效.
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其它行内元素.(a 特殊a 里面可以放块级元素)
注意
1.只有文字才能组成段落因此p里面不能放块级元素,同理还有这些标签h1~h6,dt,它们都是文字类块级标签,里面不能放其他块级元素.
2. 链接里面不能再放链接
3.a 里面可以放块级元素
行内块元素
CSS 三大特性
- CSS层叠性
多种CSS样式的叠加-
是浏览器处理冲突的一个能力 [就近原则]
1.样式冲突,遵循的原则是就近原则.哪个样式离着结构近,就执行哪个样式
2.样式不冲突不会层叠
- CSS继承性
子承父业 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-， font-，line-这些元素开头的都可以继承，以及color属性)
- CSS优先级
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为 0，也就是说子元素定义的样式会覆盖继承来的样式。⾏内样式优先。应用style属性的元素，其行内样式的权重⾮常高(1,0,0,0)。总之，他拥有比上面提到的选择器都大的优先级。权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最⼤的优先级，或者说排在最后的样式优先级最大。CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最⼤优先级。
权重是可以叠加的
水平居中
- 文字水平居中
text-align: center - 盒子水平居中左右margin改为auto
- 必须是块级元素,盒子必须指定宽度,用
margin: auto;或margin: 0 auto;
- 必须是块级元素,盒子必须指定宽度,用
外边距合并问题
- 相邻块元素垂直外边距的合并(也称外边距塌陷)
- 嵌套块元素垂直外边距的合并
1.可以为⽗父元素定义1像素的上边框或上内边距。
2.可以为⽗父元素添加overflow:hidden。
0E3913AF-2976-4882-8FFF-232BFF59F62F.png
浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素指定的位置的过程.`浮动的主要目的是 让多个块级元素一⾏显示`
清除浮动本质
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到⾥面，让父盒子闭合出口和 入口不让他们出来影响其他元素。
元素的定位
元素的定位属性主要包括`定位模式`和`边偏移`两部分。
1、边偏移 top bottom left right
2、定位模式(定位的分类)
- 静态定位(static): `就是网页中所有元素都默认的是静态定位哦! 其实就是标准流的特性。`
- 相对定位relative(自恋型): `相对定位是将元素相对于它在标准流中的位置进⾏定位，当position属性的取值为relative时，可以将元素定位于相对位置`
1. 相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
2. 其次，每次移动的位置，是以自己的左上角为基点移动(相对于⾃⼰来移动位置)
- 绝对定位absolute (拼爹型): `绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。`
子绝⽗相
- 固定定位fixed(认死理理型)
1. 固定定位的元素跟父亲没有任何关系，只认浏览器器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。
3.叠放次序
当对多个元素同时设置定位时，定位元素之间有可能会发⽣重叠。在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应⽤用z-index层叠等级属性，其取值可为正整数、负整数和0。
注意:
1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后⾯数字一定不能加单位
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
定位模式转换
跟浮动一样,元素添加了绝对定位和固定定位之后,元素模式也发生转换,都转换为行内块模式, 因此比如行内元素 如果添加了绝对定位或者固定位后浮动后可以不用转换模式，直接给⾼度和宽度就可以了。
元素的显示与隐藏
-
display显示
display:none 隐藏对象 display:block 转换为块级元素同时还显示元素 特点: 隐藏之后,不再保留位置 -
visibility可见性
visible: 对象可视 hidden: 对象隐藏 特点: 隐藏之后,继续保留原有位置.(停职留薪) -
overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 visible : 不剪切内容也不添加滚动条。 auto : 超出⾃动显示滚动条，不超出不显示滚动条 hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 不管超出内容否，总是显示滚动条
HTML转义符
