css基础系列

css基础系列

盒子模型

  1. 盒子模型的概念
  2. 高和宽的设置
  3. 边框的设置
  4. 内边距的设置
  5. 外边距的设置
  6. 盒子的计算
  7. 元素显示的方式

css基础系列

盒子模型:

border边框,margin外边距,padding内部距,content内容,width宽度。

高度:

height: 长度值|百分比|auto

最大高度:

max-height: 长度值|百分比|auto

最小高度:

min-height:长度值|百分比|auto

css基础系列

css基础系列

边框的属性:

边框宽度:border-width

边框颜色:border-color

边框样式:border-style

css基础系列

css基础系列

边框属性:

border- left | right | top | bottom -width

border ... -color

border ... -style

css基础系列

css基础系列

css基础系列

css基础系列

css基础系列

content+padding = ie

css基础系列

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>

css基础系列

文字基线:

css基础系列

css基础系列

line-height属性

设置元素中文本行高

语法:

line-height:长度值|百分比

浏览器有默认的行高,不同浏览器默认行高不一样。

word-spacing 设置元素内单词之间的间距

letter-spacing 设置元素内字母之间的间距

css基础系列

css基础系列

css基础系列

文字样式:字体,font-family和font-size。

css基础系列

css基础系列

文字粗细:

font-weight:normal|bold|bolder|lighter|100到900

文字样式:

font-style:normal|italic|oblique

水平对齐:

text-align: left|right|center|justify

背景,列表

css基础系列

背景图片重复问题:

设置元素的背景图片重复方式:

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片显示方式:

设置元素的背景图片的显示方式:

background-attachment: scroll | fixed

scroll: 默认值,背景图片随滚动条滚动

fixed:当页面的其余部分滚动时,背景图片不会移动

背景图片定位:

设置元素的背景图片的位置:

background-position:百分比|值|top|right|bottom|left|center

css基础系列

css基础系列

列表:

css基础系列

list-style-position: inside | outside

css基础系列

css中的float

float:left;

float:right;

float:none;

float:inherit;

浮动变块状元素,浮动能环绕效果。

css基础系列

定位css

标准流,定位,浮动

浮动的问题如何解决

手动给父元素添加高度

通过clear清除内部和外部浮动

给父元素添加overfloat属性并结合zoom:1使用

给父元素添加浮动

css中的position

css基础系列

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选择器,后代选择器

群组选择器

css基础系列

css基础系列

链接伪类

:link 未访问

:visited 已经访问

:hover 鼠标悬停

:active 激活

css继承和层叠

从父元素那继承部分css属性

css层叠可以定义多个样式

选择器的权重

标签选择器1

类和伪类10

id选择器100

通配符0

行内样式1000

css基础系列

这种声明高

css基础系列

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

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

感谢!承蒙关照!您真诚的赞赏是我前进的最大动力!

这是一个有质量,有态度的公众号

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

css基础系列

css基础系列

上一篇:CSS3的flex布局


下一篇:翻译qmake文档(四) Building Common Project Types