css基础系列

青旅半醒 2021-09-18 22:08 337阅读 0赞

![css基础系列][css]

> 盒子模型

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

![image.png][]

盒子模型：

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

高度：  
height: 长度值|百分比|auto  
最大高度:  
max-height: 长度值|百分比|auto  
最小高度:  
min-height:长度值|百分比|auto

![image.png][image.png 1]

![image.png][image.png 2]

边框的属性：  
边框宽度：border-width  
边框颜色：border-color  
边框样式：border-style

![image.png][image.png 3]

![image.png][image.png 4]

边框属性：

border- left | right | top | bottom -width  
border … -color  
border … -style

![image.png][image.png 5]

![image.png][image.png 6]

![image.png][image.png 7]

![image.png][image.png 8]

![image.png][image.png 9]

content+padding = ie

![image.png][image.png 10]

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 11]

文字基线：

![image.png][image.png 12]

![image.png][image.png 13]

line-height属性  
设置元素中文本行高  
语法：  
line-height:长度值|百分比

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

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

![image.png][image.png 14]

![image.png][image.png 15]

![image.png][image.png 16]

文字样式：字体，font-family和font-size。

![image.png][image.png 17]

![image.png][image.png 18]

文字粗细：  
font-weight:normal|bold|bolder|lighter|100到900

文字样式：  
font-style:normal|italic|oblique

水平对齐：  
text-align: left|right|center|justify

> 背景，列表

![image.png][image.png 19]

背景图片重复问题：  
设置元素的背景图片重复方式：

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

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

background-attachment: scroll | fixed

scroll: 默认值，背景图片随滚动条滚动  
fixed:当页面的其余部分滚动时，背景图片不会移动

背景图片定位：  
设置元素的背景图片的位置：

![image.png][image.png 20]

![image.png][image.png 21]

列表：

![image.png][image.png 22]

list-style-position: inside | outside

![image.png][image.png 23]

> css中的float

float:left;  
float:right;  
float:none;  
float:inherit;

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

![image.png][image.png 24]

> 定位css

标准流，定位，浮动

浮动的问题如何解决

手动给父元素添加高度  
通过clear清除内部和外部浮动  
给父元素添加overfloat属性并结合zoom:1使用  
给父元素添加浮动

> css中的position

![image.png][image.png 25]

> 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: 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 26]

![image.png][image.png 27]

链接伪类  
:link 未访问  
:visited 已经访问  
:hover 鼠标悬停  
:active 激活

> css继承和层叠

从父元素那继承部分css属性  
css层叠可以定义多个样式

> 选择器的权重

标签选择器1  
类和伪类10  
id选择器100

通配符0  
行内样式1000

![image.png][image.png 28]

这种声明高

![image.png][image.png 29]

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

## 结言 ##

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

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

**作者简介**

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

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

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

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

![image][]

![image][image 1]

[css]: /images/20210724/6cfe66426b154735a149372c5a9cc608.png
[image.png]: /images/20210724/4c24f3cc4d5e48c09b2e9e4268178c16.png
[image.png 1]: /images/20210724/2a6b85b9914840508311d08305432a94.png
[image.png 2]: /images/20210724/8564cf3937a84ec3952fea16a7badbcd.png
[image.png 3]: /images/20210724/2beef59170f443f2bfaad333964f6a96.png
[image.png 4]: /images/20210724/6a825b98f82d495f9f2d83bc70155fa0.png
[image.png 5]: /images/20210724/bfda3643972f4352b5f8b56ef254f354.png
[image.png 6]: /images/20210724/0398500ac49c4b3ea491e101c35d49eb.png
[image.png 7]: /images/20210724/afe027b086ae4866b7d57c1677e2ecaf.png
[image.png 8]: /images/20210724/16cb7dc57cc3436ea85343eebd182245.png
[image.png 9]: /images/20210724/d91c13d2775c429bbad2c6a0fd0fb500.png
[image.png 10]: /images/20210724/3ff6b09adc3e45f091f27986c459a23b.png
[image.png 11]: /images/20210724/63d55b2f812549db9952be3bcac9082f.png
[image.png 12]: /images/20210724/f309bdd4c6d64750b6e0781b5ccb20e6.png
[image.png 13]: /images/20210724/026925d154654f1785bd43e44ed5661b.png
[image.png 14]: /images/20210724/c943cdec20c9458ca41865db09ed354b.png
[image.png 15]: /images/20210724/e5740599526d43e5bbb2717fe8e3206e.png
[image.png 16]: /images/20210724/93c1c2d0c7ae4a76887d3c04654458bf.png
[image.png 17]: /images/20210724/5fd878ab23134f7791f1e529327ce029.png
[image.png 18]: /images/20210724/ebd30d0d7cae42e1b04e69be35cd9c77.png
[image.png 19]: /images/20210724/1c80ed1acb0d4da3b36770f30b4f3387.png
[image.png 20]: /images/20210724/a28f42f1efeb4031846fbb039a4e37d2.png
[image.png 21]: /images/20210724/55cb7265501f4e3597c820ecaaee8c9d.png
[image.png 22]: /images/20210724/5abe436d68f14f509af7247c1f56bca6.png
[image.png 23]: /images/20210724/7856a72ee40c40839cd1e0ff5c983c46.png
[image.png 24]: /images/20210724/a7501b9b66ce43f3a1becdd17443c284.png
[image.png 25]: /images/20210724/456abe6e50d34520814250e4c9546aa8.png
[image.png 26]: /images/20210724/bc9000e4a55344058a267d286290b95d.png
[image.png 27]: /images/20210724/360919c0ced64b66adf586c36575b7cd.png
[image.png 28]: /images/20210724/a09f8ea484764137ba44ad59c060e509.png
[image.png 29]: /images/20210724/b097a1fc984d4dae8fba62eb424068e0.png
[image]: /images/20210724/aade9cc59d42430eacb1a2881a3b8dac.png
[image 1]: /images/20210724/a08dc5d033b1481a87877cd07d4ad8cd.png