css初识

**** css

1 学习了css选择器的使用

学习了标签选择器,

类名选择器,(可以重复被使用)

id选择器(id是独一无二的不能重复使用)

2. 学习了css基础的布局,了解了margin属性的使用

3.学习了css盒模型以及css的一些属性

background-color 背景色

background-image 背景图

background:url路径|repeat是否平铺|position位置

border :粗细(width) 样式(style)(solid dotted dashed) 颜色(color)

插入图片(背景图片和插入图片的区别)

padding:上右下左 内边距(内部),会改变盒子的大小

盒子实际大小 宽高+边距+padding(为了保持盒子本身的大小 需要减去border和padding的值)

margin:上右下左 外边距 不会改变盒子原来的大小

margin存在塌陷问题,两个相邻的盒子margin大的值会起作用,不会叠加

盒模型(宽高\内外边距\边框)

4.简单写了一个首页部分模块

5.学习了css定位

定位:本质就是脱离文档流

position:static(默认值)|relative(相对定位)|absolute(绝对定位)|fixed(固定定位)

absolute(绝对定位) 不保留原来的位置 相对于浏览器的左上角进行偏移

relative(相对定位) 保留原来的位置 相对于原来的位置进行偏移

子绝父相 (子元素设置绝对定位,要给他的父级元素加相对定位,否则会按浏览器的位置偏移)**

6.学习了文档流的基本概念及应用

**文档流是指可显示对象在文档中排列时所占用的位置，html 的文档流指的是页面中的元素依照原始的书写位置从上到下，从左到右一次显示出来的位置。**

标准流 (从上到下，从左到右)

浮动 (脱离文档流)

定位 (脱离文档流)

7.清除浮动

当一个容器不设置高度,并且子元素设置浮动, 那么这个元素的高度就没有了,这时可以清除浮动带来的影响

1. clear:left|right|both

2. .clearfix:after {	

conten:'';

clear:both;

display:block;

height:0;

visibility:hidden;

overflow:hidden;

}

8.学习了块级,行级容器

块级元素:独占一行

行级元素: 宽高无效 默认横向排列

display:block; 1是让html标签显示； 2是把一个行级容器，转换为块级容器；

display:inline， 把一个块级容器，转换为行级容器。

dispaly:inline-block; 转化位行内块

visibility: hidden; 隐藏一个html标签，但是在隐藏的时候， 保留此html标签占用的空间。 overflow: hidden; 溢出隐藏