css

CSS (层叠样式表)

作用：用于对HTML页面进行系统的样式外观修饰

基本语法：

选择器{属性1：值；属性2：值.....}

Css设计在页面的<Style>标签中进行，以外接的方式进行样式的渲染

对指定标签通过自身的style属性进行样式设计

通过引入外部.css文件的方式，进行样式设计，通常使用的标记为link

外接样式的作用范围：当前页面的所有标记

内接样式的作用范围：特定标签元素本身

外链样式作用范围：所有引入此资源的页面样式都可以通过外链样式表进行设计。

（1）内接样式优先于外接和外链

（2）外接样式和外链样式，后编写（后引入的）资源覆盖先编写（先引入）的资源

多个页面统一风格，引入外链样式统一设置，有一个页面的部分样式区别于其他页面，在该页面引入外链样式的下面编写外接样式，批量调整，有个别样式需要调整，但单独使用内接样式进行设置。

本质可以理解为“作用范围”

常用的第选择器：

使用#进行选择

Id与name都可以定位元素，区别在于id属性全局唯一，name属性可以重复

使用class属性进行选择 ，使用方式为.classname；

Class选择器可以累加，搭配组合使用

使用标签名字进行选择

Hhml5与css3可以使用自定义属性与默认属性

#id>.类选择器（属性选择器）>标记选择器

层叠选择器：在指定的范围内进行进一步筛选

（1）父标记（选择器） 子标记（选择器）：父标记下的直接或间接子标记都在选择范围内

（2）父标记（选择器）>子标记（选择器）：父标记下的直接子标记进入选择范围

多层嵌套选择器优先级看最左侧（第一层父标记）的优先级

通过超级链接的href的属性值为当前页面组件的id值，以#指定id值，进行设置，点击超链后，让指定id的组件获取焦点进行页面显示。

常用样式及属性详见表格：

当元素设置float属性为left或right时，元素本身将脱离文档层（默认布局方式），以类似漂浮的效果向左侧或右侧移动，直到碰到父节点边框或另外一个浮动的元素为止

高度塌陷

在外部元素未设置height属性的前提下，外部div的高度是弹性变化的，当内部元素设置为float值非none时，外部元素的height不再随着内部元素弹性变化，称为外部元素的高度塌陷

可以设置外部元素overflow=auto 来解决

display属性：设置元素的布局方式

block阻塞，与width视觉效果无关，元素前后带有换行符

inline：元素现实为内联元素

元素本身紧贴内部元素之上，width、height无效

当元素内部尺寸很大时，自动溢出，但inline不会弹性变化

常见的inline标签：lable、span

inline-block：不阻塞、并且width、height有效，弹性高度，有默认间距

常见元素包括button、input等

none：元素隐藏不显示，注意和visbility的比较

position：定位控制，强调三维层次

元素不加设置，position默认为static，可以理解为处于第0曾

元素设置position为absolute、relative时，元素脱离第0曾

元素在position属性不为static的前提下，通过z-index可以进行层次设置

元素在position属性部位static的前提下，通过left、top等属性设置元素的x轴y轴偏移量

当元素的position值不是static时，它的位置父节点和结构父节点可以不一致 元素的结构父节点如果也设置position为非static，此时二者一致，否则元素的位置父节点上移至其父节点直接或间接存在非static的节点