css学习小结

css学习总结

css:层叠样式表 Cascading Style Sheet
学习CSS就是学习一堆的选择器和属性。

CSS主要作用:

1）布局 2）美化

布局:

1）盒子模型 2）块级元素并排显示
盒子模型6大属性:
1）内容区域 width height
2）内填充区域 padding
3）边框 border
4）外填充区域 margin
5）背景 background 也可以给img添加背景图片
块级元素并排显示:
1）浮动
2）flex
3）定位
4）行内块

美化:

1)字体设置 2)文本设置3)列表设置 4)表格设置
1)字体设置：
font-style:设置字体是否倾斜 normal italic
em: font-style:normal 用的不多
font-weight:设置字体是否加粗 normal bold bolder 100 200 300
h1: font-weight:normal
span: font-weight:bold 用的比较多的
font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的12px 和 14px
可以非常大 不能非常小 最小是12px
font-family: 设置字体类型 和用户电脑上设置的字体也有关系
font-family:A,B,C,D
font:上面的几个属性的复合属性
font:font-style font-weight font-size/line-height font-family
font-style font-weight 可以不写 也可以交换位置
font-size/line-height font-family 必须写 能交换位置
有继承性：给父元素设置了，子元素也可以继承到
经典应用：给body设置字体相关的属性。
color:设置字体颜色
对于a标签来说，需要选中a标签 。

2)文本设置：

text-decoration: 用来设置文本的装饰线 下划线 删除线
underline 下划线
应用：把a标签的默认的下划线去掉 hover时，加上下划线
line-through 删除线 偶尔用一下
text-indent: 首行空两格
2em 空两个汉字的宽度
-1000em 把隐藏一个盒子中的文本
<div class="logo">百度</div>
text-align:
1）让盒子中的文本居中
2）让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本）

盒子模型

男盒子：男标签、块级元素
女盒子：女标签，行内元素
行内元素：span等
完全行内元素：div p 列表相关的标签等
行内块块元素：img input 除了可以并排显示 其它特点和男盒子一样

盒子模型属性：

(1)内容区域：

width 和 height 对于男盒子来说，表示内容区域 对于女盒子，width和height不起作用
–

(2)内填充区域： padding

用来设置内填充，也叫补白 表示内容区域和边框之间的距离
对于行内元素来说，padding在垂直方向上不影响行高
对于块级元素来说，上下padding可以撑起男盒子的高度。
–

(3)边框： border

边框的粗细 border-widht
边框的样式 border-style
边框的颜色 border-color
一般来说直接设置格式为： border:1px solid red;将三个属性值一起设置，单独设置一个没有任何效果
–

(4)外填充区域：margin

表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
–

(5)背景： background

background是一个综合属性：
background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充border

background-image:

设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片

background-position:

一个小盒子中放一个大的背景图，可以使用background-position定位。
一个大盒子中放一个小的背景图，也可以使用background-position定位。

浮动 float

float一开始是为了实现新闻中文字对图片的围绕效果，现在使用浮动一般是为了让块级元素可以并排显示

浮动元素会半脱离标准文档流,浮动元素后边的元素会占据原本属于浮动元素的位置，但是文字不会

1）贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。

2）包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小

3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。

4）如果一个女盒子浮动了，就可以设置宽度和高度

浮动会对父元素和后续兄弟元素造成影响:
清除对父元素造成的影响:
A)overflow:hidden B)加高法，即给父元素加上一个height
清除对后继兄弟元素的影响：
专业清除浮动影响：clear: left/right both 一般直接给第一个后继兄弟元素加上clear:both

切记clear不能作用于父元素，父元素加上之后没有任何效果