盒子模型
盒子模型的概念
高和宽的设置
边框的设置
内边距的设置
外边距的设置
盒子的计算
元素显示的方式
image.PNG
盒子模型:
border 边框, margin 外边距, padding 内部距, content 内容, width 宽度.
高度:
height: 长度值 | 百分比 | auto
最大高度:
max-height: 长度值 | 百分比 | auto
最小高度:
min-height: 长度值 | 百分比 | auto
image.PNG
image.PNG
边框的属性:
边框宽度: border-width
边框颜色: border-color
边框样式: border-style
image.PNG
image.PNG
边框属性:
- border- left | right | top | bottom -width
- border ... -color
- border ... -style
image.PNG
image.PNG
image.PNG
image.PNG
image.PNG
content+padding = IE
image.PNG
doctype html 声明
display 属性
inline 显示内联元素, 元素前后没有换行符
block 显示块级元素, 元素前后有换行符
内联元素使用 width 和 height 属性有效.
inline-block 行内块元素.
IE 盒子模型和标准 w3c 盒子模型
inline-block 行内块元素, 元素呈现为 inline, 具有 block 相依特性, none 元素不会被显示.
CSS 文本样式:
text-align 设置元素内文本的水平对齐方式.
- text-align:
- left|right|center|justify
- style="text-align:left;"
- div{
- text-align:center;
- } <div><img src=""/></div>
image.PNG
文字基线:
image.PNG
image.PNG
line-height 属性
设置元素中文本行高
语法:
line-height: 长度值 | 百分比
浏览器有默认的行高, 不同浏览器默认行高不一样.
Word-spacing 设置元素内单词之间的间距
letter-spacing 设置元素内字母之间的间距
image.PNG
image.PNG
image.PNG
文字样式: 字体, font-family 和 font-size.
image.PNG
image.PNG
文字粗细:
font-weight:normal|bold|bolder|lighter|100 到 900
文字样式:
font-style:normal|italic|oblique
水平对齐:
text-align: left|right|center|justify
背景, 列表
image.PNG
背景图片重复问题:
设置元素的背景图片重复方式:
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景图片显示方式:
设置元素的背景图片的显示方式:
background-attachment: scroll | fixed
scroll: 默认值, 背景图片随滚动条滚动
fixed: 当页面的其余部分滚动时, 背景图片不会移动
背景图片定位:
设置元素的背景图片的位置:
background-position: 百分比 | 值 | top|right|bottom|left|center
image.PNG
image.PNG
列表:
image.PNG
list-style-position: inside | outside
image.PNG
CSS 中的 float
- float:left;
- float:right;
- float:none;
- float:inherit;
浮动变块状元素, 浮动能环绕效果.
image.PNG
定位 CSS
标准流, 定位, 浮动
浮动的问题如何解决
手动给父元素添加高度
通过 clear 清除内部和外部浮动
给父元素添加 overfloat 属性并结合 zoom:1 使用
给父元素添加浮动
CSS 中的 position
image.PNG
CSS 背景与列表
CSS 背景样式
background-color: 设置元素的背景颜色
background-image: 把图像设置为背景
background-position: 设置背景图像的起始位置
background-attachment: 背景图像是否固定或者随着页面的其余部分滚动
background-repeat: 设置背景图像是否重复以及如何重复
background: 背景属性设置
CSS 列表样式
list-style-type: 设置列表项标志的类型
list-style-image: 将图像设置为列表项标志
list-style-position: 设置列表中列表项标志的位置
list-style: 简写
背景样式
设置背景颜色和背景图片
背景颜色, 设置元素的背景颜色
background-color: 颜色 | transparent
背景图片
设置元素的背景图片
background-image: url | none
背景图片重复
background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景图片显示的方式
设置元素的背景图片的显示方式
background-attachment: scroll | fixed
scroll: 随着滚动条滚动, fixed: 背景图片不会移动
背景图片定位
background-position: 百分比 | 值 | top | right | bottom | left | center
background: background-color background-image background-repeat background-attachment background-postion
列表项, list-style-type: 关键字 | none
- list-style-image: url | none
- list-style-position : inside | outside
- list-style: list-style-type list-style-position list-style-image
div, ul, li, dl, dt, dd, img
HTML,CSS,JavaScript 关系
HTML 是网页内容的载体, CSS 样式是表现, JavaScript 是行为.
CSS 优先级
行内样式 > 内部 > 外部
CSS 选择器
标签选择器, 全局选择器, 类选择器, 群组选择器, id 选择器, 后代选择器
群组选择器
image.PNG
image.PNG
链接伪类
:link 未访问
:visited 已经访问
:hover 鼠标悬停
:active 激活
CSS 继承和层叠
从父元素那继承部分 CSS 属性
CSS 层叠可以定义多个样式
选择器的权重
标签选择器 1
类和伪类 10
id 选择器 100
通配符 0
行内样式 1000
image.PNG
这种声明高
image.PNG
id 不要滥用, 适当使用 class
CSS 导入式 @import 外部 CSS 样式
CSS 字体和文本样式
文字: 字体, 字体大小, 颜色, 加粗等
文本: 行高, 对齐方式, 文本修饰等
字体: font-family
文字大小: font-size
文字颜色: font-color
文字粗细: font-weight
文字样式: font-style: normal | italic | oblique
水平对齐:
text-align: left | right | center | justify
CSS 中的浮动
float: left | right | none | inherit 继承
CSS 中的 position
position: static | relative | absolute | fixed | inherit
使用 z-index 要有 position: absolute
盒子模型:
盒子模型概念, 内边距设置, 高和宽的设置, 边框的设置, 外边距设置, 盒子的计算, 元素显示的方式.
border-width: thin | medium | thick
border-color: 颜色 | transparent
display: inline | block | inline-block | none
结言
好了, 欢迎在留言区留言, 与大家分享你的经验和心得.
感谢你学习今天的内容, 如果你觉得这篇文章对你有帮助的话, 也欢迎把它分享给更多的朋友, 感谢.
来源: http://www.jianshu.com/p/aa199d7e47fe