CSS|CSS 基础进阶 CSS基础进阶

文章图片
CSS2

引言：学习前端基础知识。第二课 CSS。
时间：2017年11月23日
作者：JustDo23

文章图片
html_css_js 01. 三种布局模型

流动模型 Flow
- 默认的网页布局模式
- 块级元素以行的形式，自上而下按顺序垂直延伸分布
- 内联元素从左至右水平分布
浮动模型 Float

div { width: 70px; height: 30px; border: 10px solid red; }.divLeft { float: left; /*两个并排且靠左*/ }.divRight { float: right; /*两个并排且靠右*/ } 靠左悬浮靠右悬浮
- 实现了两个块级元素在流动模型中并排一个靠左一个靠右的浮动模型
文章图片
css_float
层模型 Layer
层模型类似 PhotoShop 中的图层
层模型三种定位方式：
- 绝对定位 position: absolute
- 相对定位 position: relative
- 固定定位 position: fixed
层模型之绝对定位

.divHead { width: 300px; height: 2000px; border: 2px solid blue; }.divAbsolute { width: 50px; height: 50px; position: absolute; /*绝对定位*/ border: 5px solid green; left: 50px; bottom: 10px; } 左下角
- 将元素从文档流中拖出来，然后使用left right top bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
- 如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
- 元素将随body大小位置变化而改变。
- 同时，元素会随这网页内容滑动而滑动。
文章图片
css_absolute
层模型之相对定位

.divHead { width: 300px; height: 2000px; border: 2px solid blue; }.divRelative { width: 50px; height: 50px; border: 5px solid green; position: relative; /*相对定位*/ left: 200px; top: 30px; } 偏移后
- 相对定位完成过程：首先将元素按 float 浮起来，然后使用left right top bottom属性确定元素在浮起位置的偏移位置。
- 偏移前的位置保留不动，即后边元素相对偏移前的元素进行定位。
- 元素将随着网页内容的滑动而滑动。
文章图片
css_relative
层模型之固定定位

.divFixed { width: 50px; height: 50px; border: 3px solid blue; position: fixed; /*固定定位*/ right: 10px; bottom: 10px; } 悬浮在右下角
- 固定定位相对于浏览器窗口，不随网页内容滑动而改变，受浏览器窗口大小及位置影响。
文章图片
css_fixed
层模型之小结
- absolute 相对于浏览器页面的绝对移动，不仅影响自身元素，还影响后续元素。
- relative 相对于自己原先位置移动，影响自身元素，但不影响后续元素，可能会和后续元素重叠。
- fixed 相对于浏览器窗口固定，用户滚动窗口时保持位置不变。

02. 相对某元素定位

.divFather { width: 200px; height: 100px; border: 1px solid red; position: relative; /*父元素必须使用 relative */ }.divChild { width: 90%; border: 1px solid blue; position: absolute; /*子元素必须使用 absolute */ left: 5%; bottom: 5px; }相对于父元素进行定位。定位在父元素底部。

文章图片
css_examples 03. 开发技巧

缩写

p { margin: 5px; /*上右下左边距*/ padding: 10px 20px; /*上下相等左右相等*/ margin: 35px 45px 55px; /*上右下边距左等于右*/font-size: 12px; /*字体尺寸*/ line-height: 1.5em; /*字体行高*/ font: 12px/1.5em; /*两者简写*/color: red; /*颜色*/ color: rgb(10, 200, 55); /*颜色RGB*/ color: rgb(10%, 20%, 30%); /*百分比单位*/ color: #336699; /*颜色十六进制*/ color: #369; /*颜色十六进制简写*/ }
- 字体及边框及背景等的缩写类比
水平居中

.contentCenter {/*行内元素居中*/ text-align: center; }.divCenter {/*定宽块级元素居中*/ border: green solid 2px; width: 30%; margin-left: auto; margin-right: auto; }table {/*定宽块级*/ margin: 0 auto; }.contentCenter div {/*不定宽度块级*/ display: inline; }.divFather {/*不定宽度块级*/ float: left; position: relative; left: 50%; } .divChild { position: relative; left: -50%; background: #CCC; } 行内元素要居中定宽块级元素要居中不定宽度块级元素利用 table 实现居中不定宽度块级元素变身行内元素并居中不定宽度块级元素通过悬浮和相对位置实现居中

文章图片
css_horizontal_center
垂直居中

.verticalCenter { width: 300px; border: purple solid 2px; height: 60px; line-height: 60px; }table td { height: 60px; background: #ccc; } 父元素高度确定单行文本垂直居中父元素高度确定多行文本利用table标签默认属性"vertical-align:middle"实现垂直居中

文章图片
css_vertical_center
隐性改变 display 类型
【CSS|CSS 基础进阶】设置元素布局模型 position:absolute 或 float:left|right 两者只要出现一个，元素的显示类型会自动变为 display:inline-block ，同时可以设置元素宽度，且宽度默认不占满符元素。