css小白总结

什么是css?

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

css的主要作用

1. 布局：盒子模型设置 浮动设置 定位设置
2. 美化： 文本设置 列表设置 表格设置

一、美化
字体设置

1.font-style:设置字体是否倾斜 normal italic emfont-style:normal。
2. font-weight:设置字体是否加粗 normal(正常) bold(加粗)bolder(变细)font-weight:bold 用的比较多 。
3.font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的12px 和 14px 可以非常大 不能非常小 最小是12px。
4.font-family: 设置字体类型 和用户电脑上设置的字体也有关系。
5.font:上面的几个属性的复合属性 font:font-style font-weight 。font-size/line-height font-family font-style font-weight。
6.color:设置字体颜色 对于a标签来说，需要选中a标签 。

文本设置

1. text-decoration: 用来设置文本的装饰线 下划线 .下划线 删除线 underline 下划线 应用：把a标签的默认的下划线去掉 hover时，加上下划线
2. ine-through 删除线 偶尔用一下
3.text-indent: 首行空两格 2em 空两个汉字的宽度 -1000em 把隐藏一个盒子中的文本
4.text-align: 1）让盒子中的文本居中 2）让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本
5.line-height:设置行高
1）如果是子标签是男标签，行高可以撑起子标签的高度
2）如果是子标签是女标签，行高不能撑起子标签的高度

二、布局

盒子模型

盒子分类
1.男盒子：男标签、块级元素
2.女盒子：女标签，行内元素 行内元素： 完全行内元素： 行内块块元素：img input 除了可以并排显示 其它特点和男盒子一样

盒子模型相关属性

1.内容区域 width 和 height 对于男盒子来说，表示内容区域 对于女盒子，width和height不起作用
注意点
1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。

2.边框 border边框的粗细 border-widht 边框的样式 border-style 边框的颜色 border-color 一般情况下，不会单独设置 border是一个复合属性
注意点
1）border:1px solid red; border后面的属性是没有顺序的，但是一般都是先写border-width,然后是border-style，最后是border-color。
2）粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细是不一样的
3）边框的样式也非常多 用的非常多的有这几个：solid 实线 dotted 点画线 dashed 虚线 none 没有线 …
4）边框的颜色设置 单词 用的最多还是16进制 也可以使用rgb函数 5）也可以单独设置某一个方向上的border border-top:1px solid red; 用的也比较多

3.内填充区域 padding 用来设置内填充，也叫补白 表示内容区域和边框之间的距离 四个方向： 用的也比较多的 padding-top: padding-right: padding-bottom: padding-left: padding后面也可以跟一个值，二个值，三个值，四个值： 一个值：padding:10px 四个方向的padding都是10px 二个值：padding:10px 20px; 上下是10px 左右是20px 三个值：padding:10px 20px 30px; 上是10px 左右是20px 下是30px 四个值：padding:10px 20px 30px 40px; 上 右 下 左
注意点
1）有些标签是有默认的padding 如ul ol… 等 一刀切 *{ padding:0; }
2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
3）对于块级元素来说，上下padding可以撑起男盒子的高度。

4.外填充区域 margin 表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的 四有个方向： margin-top margin-right margin-bottom margin-left margin后面也可以跟一个值，二个值，三个值，四个值： 一个值：margin:10px 四个方向的margin都是10px 二个值：margin:10px 20px; 上下是10px 左右是20px 三个值：margin:10px 20px 30px; 上是10px 左右是20px 下是30px 四个值：margin:10px 20px 30px 40px; 上 右 下 左
注意点
1）有此标签有默认的margin 一刀切 *{ margin:0; padding:0; }
2）对于行内元素来说，margin在垂直方向上是无效的
3）margin可以设置auto。 表示尽可以大 div{ margin:0 auto; }
4）margin可以设置负值
5）对于块级元素来说，margin有重叠问题（塌陷问题） 对于块级元素来说，margin有重叠问题（塌陷问题）： 1）兄弟元素之间的重叠问题 2）父子元素之间的重叠问题 兄弟元素之间的重叠问题：

5.background
1）background background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充
2）border background-image:设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图
3）background-repeat: 控制是否平铺　　repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 no-repeat x和y轴都不平铺
4）background-position:一个小盒子中放一个大的背景图，可以使用background-position定位。一个大盒子中放一个小的背景图，也可以使用background-position定位。
5） background-attachment:如何设置固定的背景图像

浮动（重点)

float:
left:元素向左浮动。
right:元素向右浮动。
none:默认值。
inherit:从父元素继承float属性。

消除浮动造成的影响的方法

一、在父元素的样式中加入overflow：hidden属性。目的是父元素包住这个脱离了文档流的浮动元素。
"overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。
"overflow:hidden"还有另外一个特殊的用途清除包含块内子元素的浮动。
二、最专业的：clear: left/right/both clear:both 记住了：clear:both只能写在第1个受影响的元素上，写在父元素上没有什么用。 clear属性应该写在什么地方？ 答：写在第1个受影响的元素上的。