Be a better web developer：day6

一、CSS布局方式

　　设置元素在网页中排列方式及显示效果

1.标准流布局（文档流，普通流，静态流）　　默认的布局方式

特点：将元素按照书写顺序及元素类型，从上至下，从左至右排列

2.浮动布局　　设置元素浮动　　float：left、right、none（默认值）

特点：脱离文档流，在文档中不再占位，后面正常的元素会向前占位，浮动元素会“漂浮”在文档流上方

　　多个元素同时左浮或右浮，浮动元素会一次停靠在前一个浮动元素的边缘，中间没有缝隙

　　浮动元素会在父元素的尺寸范围内浮动，多个浮动无法并排显示时会自动换行，停靠在其他浮动元素边缘

　　任何元素只要设置浮动，就具有块元素的特征，可以手动调整宽高

浮动引发的特殊效果：浮动元素脱流，在文档中不占位，后面正常元素会向前占位，可能被浮动元素遮挡。但是浮动元素只会遮挡正常元素的尺寸区域，不会这方正常文本内容。文本会围绕在浮动元素周围显示。

元素浮动引起的问题：子元素如果全部设置浮动，在文档中不占位，父元素高度为0，父元素的背景图片和背景颜色无法显示，父元素后面的正常元素会上移，影响布局

解决办法：为父元素指定高度

　设置父元素 overflow：hidden；

　清除浮动的影响 clear：left、right、both　　为正常元素添加cleat属性，清除浮动元素带来的影响，表示不受右、左和两边浮动元素的影响

　解决父元素高度为0的问题：为父元素末尾添加空的块元素，为空的块元素设置clear：both；

3.定位布局　　通过调整元素的位置，实现网页布局　　属性position　　

取值：static：默认值，使用文档流布局

　　relative：相对定位

　　absolute：绝对定位

　　fixed：固定定位

注意：只有元素设置position属性为三种定位之一才认为元素是“已定位的元素”

偏移属性：使用top、bottom、left、right偏移属性，调整已定位元素的位置

　　top：取像素值，正值表示向下移动，负值向上

　　bottom：正值表示元素向上移动，负值向下

　　left：正值表示元素向右移动，负值向左

　　right：正值表示元素向左，负值向右移动

相对定位：元素设置相对定位之后，可以使用偏移属性调整元素位置，相对定位的元素是参照元素在文档中的原始位置进行偏移

　　特点：相对定位的元素不会脱离文档流，在文档中始终保留它的原始位置

绝对定位：绝对定位的元素会脱硫文档流，类似于浮动；绝对定位的元素会参照一个离他最近的已定位的祖先元素进行偏移，如果没有已定位的祖先元素，会参照浏览器窗口的（0,0）点偏移

使用：采用“父相子绝”的方式实现元素绝对定位，父元素采用相对定位，子元素使用绝对定位，实现子元素参照父元素的（0,0）点偏移

固定定位：永远都参照浏览器窗口进行偏移，固定定位的元素会被定位在窗口的某个位置，不会跟随网页滚动而滚动

调整已定位元素的堆叠次序：　　z-index

取值：无单位的数值，默认为0，数值越大，元素越靠上显示

注意：z-index只能在已定位的元素中使用

　　兄弟元素之间可以通过z-index的数值大小来调整堆叠次序

　　父子元素之间，永远是子元素在上

　　如果兄弟元素的z-index取值相同，后来者居上

 

二、元素显示效果

1.display

2.visibility

3.透明度设置　　属性 opacity：取值0（透明）-  1（不透明）

注意：元素使用opacity设置半透明，所有显示的内容（背景颜色，文本颜色等）都会呈现半透明效果

　　opacity是对元素整体透明度的设置，包含元素自身和内部的子元素

　　子元素同时设置透明度，最终的透明度值是在父元素opacity取值的基础上再次进行透明度设置

4.行内块元素的垂直对齐方式　　调整行内块元素左右元素与其自身的垂直对齐方式

行内块元素：img　input　buton

属性：vertical-align　　取值：top、middle、bottom

5.设置鼠标形状　　属性：cursor　　

　　取值：default默认值

　　pointer　　鼠标在元素上展现为手指的样式

　　text　　鼠标展示为 “I”，表示普通文本info

　　corsshair　　鼠标展示为“+”

 

三、列表相关属性

列表自带内外边距和项目符号

1.list-style-type　　设置项目符号

取值：none（取消项目符号，最常用）

　　disc　　实心圆点

　　circle　　空心圆点

　　square　　实心方块

2.list-style-image　　指定图片作为项目符号　　取值：url（）

3.list-style-position　　指定项目符号的显示位置　　默认项目符号显示在内容外部，在左边的padding中展现

取值：outside默认值　　　　inside设置项目符号显示在内容区域

4.属性简写　　属性list-style

取值：type/image position

常用：list-style：none；取消项目符号　　

 

转载于:https://www.cnblogs.com/jiangchunyu/p/9794442.html