CSS入门基础学习二

我们下午继续学习CSS的入门基础，搬上你的小板凳赶快进入吧！

一、背景（background）

　　Background-color：背景颜色

　　background-image （背景图片）

　　background-repeat（设置背景平铺）

　　　 repeat （默认值）

　　　　no-repeat （不平铺）

　　　　repeat-x （横向平铺）

　　　　repeat-y （纵向平铺）

　　background-position （设置背景位置）

　　　　设置具体值： left| right| top| bottom| cneter，设置具体值的时候不区分先后顺序，设置具体数字的时候，第一个值代表水平方向，第二个值代表垂直方向

　　　　background-attachment （设置背景是否固定）

二、行高line-height

　　行高：行高指的是文本基线与基线的距离。

　　行高的作用：当文字行高与父容器的高度一样的时候，文字垂直居中对齐。

　　行高单位问题：

　　　　行高单位　　赋值　　文字大小　　行高值
　　　　PX 　　　　30px 　　20px 　　　　30px
　　　　em　　　　 3em 　　20px　　　　 60px
　　　　% 　　　　150% 　　20px 　　　　30px
　　　　不带单位　　2 　　　20px 　　　　60px

　　总结：当给父元素设置行高的时候，除了以PX为单位以外，其他的值都与文字大小有关，是与文字大小的乘积。

　　行高是可以继承的：

　　行高单位　　设置行高　　父文字　　子文字　　行高

　　px 　　　　　　40px 　　　　20px 　　30px 　　40px
　　em 　　　　　 2em 　　　　20px 　　30px 　　40px
　　% 　　　　　　120% 　　　20px 　　30px 　　24px
　　不带单位　　　　　　2 　　　　20px　　 30px 　　60px

　　总结：当父元素设置的行高值除了不带单位的情况下，都是先与父元素文字大小相乘，然后再被子元素继承。

　　浏览器默认文字大小为16px，行高=文字大小+上边距+下边距

三、盒子模型

　　Border

border-width:       边框的粗细

border-style:        边框的风格

dotted               点线

dashed               虚线

solid                实线

Border-color:   边框的颜色

　　边框的连写：

　　　　连写的时候后边的值不分前后顺序。

　　　　例如：border：1px solid red  等价于

        　　border:red solid  5px

　　表格单元格合并：border-collapse:collapse; 表格单元格边框合并。

　　内边距(padding)

Padding-left    左内边距

Padding-right   右内边距

Padding-top       上内边距

Padding-bottom     底内边距

内边距简写：

Padding:10px; 四个方向内边距都为10px

Padding: 10px 20px;  上下内边距为10px  左右内边距为20px

Padding: 10px 20px 30px; 上内边距为10px  左右内边距为20px  下内边距为30px

padding:10px 20px 30px 40px;  依次方向为上右下左

　　盒子宽度问题：

　　　　影响盒子宽度因素：
　　　　※盒子边框影响盒子宽度
　　　　※定义的内边距的宽度
　　　　盒子的宽度=定义的宽度+边框+内边距
　　　　注意：以后进行页面盒子布局的实现，如果给盒子设置了内边距和边框，对应的要将定义宽度或者高度减去定义的内边距和边框的值。

　　盒子大小影响特殊地方：继承的盒子再父盒子宽度范围内，padding值不会影响该盒子大小。

四、外边距（margin）

　　　　解决外边塌陷的问题（当2个盒子发生嵌套关系时，给子元素定义外边距的时候，值会赋给外边的大盒子。）：给大盒子定义边框、给外边大盒子设置:overflow:hidden、Bfc 给外边父集元素设置overflow:hidden，会触动bfc.

五、文档流的特点

　　　　块元素独占一行、团队成员行内元素在一行上显示、自上而下

六、浮动(float)

　　　　用法:float:left|right

　　　　特点：浮动起来、不占位置（脱标）、如果多个盒子都使用了浮动，会在一行上显示、给行内元素使用浮动，可将行内元素转换成行内块、尽量用display转换行内块。

　　　　作用：文本绕图、制作导航栏、网页布局

七、清除浮动

　　　　额外标签法：在浮动元素后边加一个标签，清除浮动。

　　　　Overflow:hidden：在外边的父盒子上使用：overflow:hidden;如果有内容在盒子外，会被裁掉。

　　　　伪元素清除浮动

.clearfix:after{

Content:”.”;

Display:block;

Height:;

Visibility:hidden;

Clear；both;

}

.clearfix{

Zoom:;

}

八、Overflow　

　　　　Overflow:hidden　　会将出了盒子的内容裁掉

　　　　Overflow：auto　　当内容出了盒子之外，会自动生成滚动条，如果没有内容之外，则不生成滚动条。

　　　　Overflow:scroll;　　不管内容有没有出盒子，都会生成滚动条。

　　　　Overflow: visible;　　内容出了盒子会显示，不生成滚动条。

九、定位

　　　　静态定位(Position:static;) 静态定位就是标准流。

　　　　绝对定位（position:absolute;）

　　　　　特点：

　　　　　　　　※ 给元素设置绝对定位，从浏览器左上角出发设置位置。
　　　　　　　　※ 给元素设置了绝对定位，元素会不占位置（脱标）
　　　　　　　　※ 当盒子发生嵌套关系时，如果父集元素没有设置定位，子盒子设置了绝对定位并赋值，子盒子的位置从浏览器左上角出发。
　　　　　　　　※ 当盒子发生嵌套关系时，如果父集元素设置了绝对定位，子盒子设置了绝对定位并赋值，子盒子的位置从父集元素左上角出发。
　　　　　　　　※ 绝对定位会将行内元素，转换为行内块。

　　　　相对定位(position:relative;)

　　　　　特点：

　　　　　　　　※ 给元素设置了相对定位，位置是从自身位置出发。
　　　　　　　　※ 给元素设置了相对定位，还占据原来的位置（不脱标）。
　　　　　　　　※ 子绝父相（工作中使用最多），子元素绝对定位，父元素相对定位。
　　　　　　　　※ 给元素设置相对定位，不能将行内元素转换为行内块元素。

　　　　固定定位（position:fixed;）

　　　　　　特点:

　　　　　　　　※ 固定定位不占据原来的位置，会脱标。
　　　　　　　　※ 给元素设置固定定位之后，元素位置从浏览器左上角出发。
　　　　　　　　※ 可以将行内元素转换为行内块元素。

十、盒子居中显示

　　　　margin:0 auto; 只能让标准流的盒子居中显示。

　　　　定位的盒子居中显示

　　　　　　写法：先向左走父集元素的一半，再向右走（margin-left用负值）自己的一半。

十一、标签包含规范　　　　

　　　　※ div可以包含所有的标签。
　　　　※ p标签不能包含div、标题标签、列表标签。
　　　　※ h1可以包含其他标签。
　　　　※ 不推荐在行内元素中放其他元素。

十二、规避脱标流

　　　　使用margin-left（right）:auto;可以将盒子冲到父盒子的右边(左边)。

十三、内容移除文字（logo优化）

　　　　用text-indent:-2000px;用padding撑开盒子，使用overflow将文字隐藏。

十四、图片与文字垂直对齐

　　　　Inline-block vertical-align默认为Vertical-align:baseline;

十五、Css可见性

overflow:hidden;   将元素盒子之外的部分隐藏。

display:none;      将元素直接隐藏

Display:block;    将元素显示   (配合JS使用）

visibility:hidden;    将元素隐藏

Display:none;隐藏之后不占位置。

Visibility:hidden; 隐藏之后还占位置。

十六、CSS精灵图

　　Css精灵是一种处理背景图像的方式，可以加快网页的加载速度，降低服务器发送请求的次数

　　浏览器坐标：
　　从浏览器左上角出发，向右为正，向下为正。
　　Css精灵图配合background-position背景位置结合使用。

巴特西

CSS入门基础学习二

最新文章

热门文章