关于css的理解
- css的含义及作用
“css”的中文名字叫做层叠样式表,英文“Cascading Style Sheet",其实"css"在写网页的过程中就是一个选择器。
作用:它的作用有布局和美化作用。
布局
- 盒子模型
它是写网页时最常用到的,它有六大属性:内容区域(width heigh)
外填充区域(margin)、内填充区域(padding)、边框(border)、背景(background)
- 内容区域:也就是盒子的高度和宽度。一般来说,盒子的高度是由它里面的内容撑起来的,但是在里面内容都浮动的情况下,它的高度会崩溃,需要自己设定一个高度,或者用“overflow:hidden"等消除影响。
- 内填充区域:这是里面内容与边框之间的间隙。有五个标签:padding-left(表示距离左边框的距离)、padding-right(距离有边框的距离)、padding-bottom(距离下边框的距离)、padding-top(距离上边框的距离)。还有"padding"是 复合标签,顺序是上、右、下、左。顺序不能改变,当上和下、左和右的距离一样时,可以简写:上下、左右。
- 边框:顾名思义,就是盒子的边框,标签是"border",它也是一个复合标签,通常用它表示边框的粗细、样式和颜色。
- 外填充区域:是边框之外的区域。用标签"magron"表示。和“padding"一样是复合标签。
- 背景:它分为背景图(background-image)和背景颜色(background-color)
- 块级元素并排显示
- 浮动:一般用"overflow-hidden"标签表示,可以让男盒子并排显示,如果盒子宽度不够,还是会分行;如果男盒子全部浮动,会让父元素的高度塌陷。
- 定位:这是完全出国,是完全脱离标准文档流。
美化
- 字体设置
font-size:设置字体大小。一般在谷歌浏览器默认字体是12px或14px
font-style:设置字体是否倾斜;“talic”表示倾斜 “nomal”表示不倾斜
font-weight:设置字体是否加粗;“bold”表示加粗 “normal”表示不加粗
font-family:设置字体类型;比如:“宋体”,“黑体”等
这些标签具有继承性:给父元素设置之后,子元素也会继承到。
- 文本设置
text-decoration:用来设置文本的装饰线;有:下划线(underline)、删除线(line-through)
txt-indent:首行缩进;2em表示首行空2格。
text-align:让盒子中的文本居中。
line-height:设置行高
1)如果是子标签是男标签,行高可以撑起子标签的高度
2)如果是子标签是女标签,行高不能撑起子标签的高度
浮动元素的特点
1) 贴靠性: 如果都向同一个方向浮动,这两个浮动的元素会紧紧的贴在一起,如果父元素的宽度不够,它会自动换行。
2) 包裹性: 如果是一个男盒子,在没有设置宽度的情况下,只要它浮动了,那么它的宽度会尽可能小
3) 一个元素内部所有元素都浮动了,如果父元素在没有设置高度的情况下,它的高度会变成0,也就说父元素的高度塌陷了。
4) 如果一个女盒子浮动了,就可以设置宽度和高度,说白了,女盒子就变成男盒子。
- 元素浮动会造成影响:
- 对父元素造成的影响
- 如果子元素都浮动,会造成父元素的高度塌陷。
- 对后面的兄弟元素影响
- 会造成重叠,margin取大原则。
- 我们需要清除浮动所造成的的影响,也叫清除浮动:
- overflow:hidden
- 加高法(就是给父元素设置一个高度)
- 内容区域:width 和 height
对于男盒子来说,表示内容区域
对于女盒子,width和height不起作用
注意点:
1)不设置有默认值,宽度默认值是auto,对于块级元素来说,auto表示尽可能大,对于行内元素来说,auto表示尽可能小。
2)不设置高度,男盒子的高度是内容的高度,也就是说高度是由内容撑起来的,对于女盒子来说,也是由内容撑起来的,但是和font-size也有关系。
3)宽度和高度可以设置百分比,是父元素的百分比的,一般情况下在移动端开发时用的多一点。
- 边框: border
边框的样式 border-style
边框的粗细 border-widht
边框的颜色 border-color
一般情况下,不会单独设置 border是一个复合属性
注意点:
1)border:1px solid red; border后面的属性是没有顺序的,但是一般都是先写border-width,然后是border-style,最后是border-color。
2)粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细是不一样的
3)边框的样式也非常多 用的非常多的有这几个:solid 实线 dotted 点画线 dashed 虚线 none 没有线 .....
4)边框的颜色设置 单词 用的最多是#+数字 也可以使用rgb函数
5)也可以单独设置某一个方向上的border border-top:1px solid red; 用的也比较多