黑马程序员技术交流社区

标题: 新人技术贴~ [打印本页]

---

作者: 夏夏不吃肉    时间: 2019-3-18 14:49
标题: 新人技术贴~

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距 左右内边距 ；
3个值	padding：上内边距 左右内边距 下内边距；
4个值	padding: 上内边距 右内边距 下内边距 左内边距 ；

清除浮动使用after伪元素清除浮动

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

.clearfix {*zoom: 1;}   /* IE6、7 专有 */

使用双伪元素清除浮动

.clearfix:before,.clearfix:after {

  content:"";

  display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

  *zoom:1;

}

定位的三个概念

是否脱离流

根据什么位置开始移动

1) 相对定位(relative) - 重要

相对定位是元素相对于它 原来在标准流中的位置 来说的。（自恋型）

相对定位的特点：（务必记住）不脱标

相对于 自己原来在标准流中位置来移动的

原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。在实际显示的时候包含外边距。

2) 绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）absolute

父元素没有设置定位，则以浏览器为准定位（Document 文档）。

父元素要有定位

将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：（务必记住）

1.绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置

2.不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

定位口诀 —— 子绝父相子绝父相的由来

由于子元素不占据位置，所以用绝对定位

由于父元素占据位置 不能影响后面盒子的布局显示，所以用相对定位。

级要占有位置，子级要任意摆放，这就是子绝父相的由来

3) 固定定位(fixed) - 重要

固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

1.完全脱标 —— 完全不占位置；

2.只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

①　跟父元素没有任何关系；单独使用的

②　不随滚动条滚动。

设置定位的元素如果没有设置边偏移，则默认以之前标准流中的位置显示。

设置了固定定位，绝对定位和浮动的元素不会造成外边距合并。

选择器

后代

子元素

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

各元素转换及三个概念

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

块转行内：display:inline

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

类样式命名多个单词之间用-进行连接

List-style:none;

Border:0; 去掉边框

T-d：underline;

Text-align 水平居中

Line-height 垂直居中

B加粗

Em i 倾斜

Span不具有语义化

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2