前端基础知识复习（二）

选择器及各样式

语法：

选择器	说明	例子
Class 类选择器	.+Class类的名称；类名是区分大小写。	.postTitle {background-color: Green;}
元素(标签)名称选择器	元素的名称不区分大小写。	h2 {background-color:Green;}
复合选择器	元素名称1,元素名称2,#id,.ClassName ：可以根据元素的名称、id、类名，使符合条件的元素共同拥有样式;各选择器条件要以分号(,)隔开。	h2 , #subid , .subclass {background-color:Green;}
层次选择器	父选择器 子选择器 ：满足父选择器下的子选择器条件；两者中间用空格隔开。	div input{background-color:Green} /* 表示div下的input子元素*/ .showInfo_tabel tr{height:20px;} /* 表示table的class为showInfo_tabel时，下面的tr元素height属性为20px */
伪类选择器(类似状态)	①a:link 选择所有未被访问的链接 ②a:visited 选择所有已被访问的链接 ③a:active 选择活动链接 ④input:hover 鼠标悬停上方的元素 ⑤input:focus 获取到焦点的元素	a :link,:visited{color:Blue;} .btn_login:hover {background-color: #218fd5;}
属性选择器	元素选择器[属性名称="属性值"] 可在其他选择器上，再添加对属性的匹配。 若要元素同时满足多个属性，可在属性选择器后面进行追加：元素选择器[属性名称1="属性值"][属性名称2="属性值"]	textarea[readonly="readonly"]{ background-color: #EBEBEB;} .readOnlyBg input[type="text"][readonly="readonly"]{ background-color: #EBEBEB;}

样式调用方式：

1. 外部样式表
2. 内部样表
3. 内联样式

样式的优先级：

当一个元素附加许多级样式时，比如：外联样式包含此元素、内联样式也包含此元素等，样式采用的是并集方式。

若有交集的元素，将按以下的情况决定采用哪个样式属性

• 非同级引用：外部样式表、内部样式表、内联样式都设置了此元素的某个相同样式属性。
  • 内联样式 > 内部样式表 > 外部样式表
• 同级引用：在外部样式表 或 内部样式表里 多个样式选择器包含了此元素
  • 外部样式表、内部样式表 情况下：Id选择器 > class 类选择器 >元素选择器。
  • 内联样式情况下：采用后面同属性样式的值。

CSS HTML元素布局及Display属性

HTML元素大题可分为内联(inline)元素和块(block)元素。

元素类型	区别
内联元素(inline)	①元素显示方式："文本方式"，1个挨着1个，不独自占有1行； ②内嵌的元素也必须是内联元素：如<a></a>,不能在里面嵌入<div></div>等块级元素； ③包含的标签有：<a>、<input>、<label>、<img> 等等；
块元素(block)	①元素显示方式：每个元素独自占有1行，相当于前后都带有换行符； ②内嵌的元素可以是内联或块级元素； ③包含的元素有：<h1>~<h6>、<div>、<hr>等等；

HTML 元素布局

原则：

• HTML元素在浏览器展示的方式是：从上到下，从左到右。
• 内联元素，是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够，就会换至下一行。
• 块级元素，根据内联元素的展示方式展示大概区域；当浏览器的宽度减少时，会自动扩充块级元素的height属性的值，以容纳内嵌元素的展示。

默认展示(未添加width和height属性)改变浏览器高度展示页面：

块级元素(div)增加了width属性，改变浏览器宽度展示页面：

①当块级元素没设置width属性时，浏览器宽度的变更，会压缩块元素内嵌元素的排版。
②设置块级元素的width属性时，浏览器的width属性值变更，不会影响到块级元素里的内嵌元素的布局，他们(内嵌元素)受父级块级元素的影响。
适用范围：导航条(导航条里有多个a标签，可放在一个div里，并给div附加width属性；以免浏览器缩小，造成导航排版乱掉)；

CSS display

1. none ：此元素不被显示；
2. block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
3. inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素

样式	例子
display:block
display:inline

CSS Position 定位属性

Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。

③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。

④static ：默认值；默认布局。

布局方式	解释	实例
absolute	绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
relative	相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
fixed	固定定位；类似于absolute，但不随着滚动条的移动而改变位置。 ①登录框覆盖层：如dz论坛的登录。 ②虚假QQ消息广告。
static	默认值

• 滚动条是否出现:当含有position属性的元素为最边缘元素时：
  • absolute 和 relative ：含有此2个值的边缘元素，浏览器缩小到此元素不可见时，会出现滚动条。
  • fixed ：含有此值的边缘元素，浏览器缩小到此元素不可见时，不会出现滚动条。