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

一、背景(background)

  Background-color:背景颜色

  background-image (背景图片)

  background-repeat(设置背景平铺)

     repeat (默认值)

    no-repeat (不平铺)

    repeat-x  (横向平铺)

    repeat-y (纵向平铺)

  background-position (设置背景位置)

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

    background-attachment (设置背景是否固定)

    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入门基础学习二的更多相关文章

  1. Python入门基础学习 二

    Python入门基础学习 二 猜数字小游戏进阶版 修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案 ...

  2. CSS入门基础学习一

    一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...

  3. 第六十九节,css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  4. Python入门基础学习 三

    Python入门基础学习 三 数据类型 Python区分整型和浮点型依靠的是小数点,有小数点就是浮点型. e记法:e就是10的意思,是一种科学的计数法,15000=1.5e4 布尔类型是一种特殊的整形 ...

  5. Python入门基础学习 一

    Python入门基础学习 一 Python下载及安装 下载地址:https://www.python.org/,选择最新的版本下载 稍等一会,安装完成. 简单语句 从idle启动Python:IDLE ...

  6. Python基础学习二

    Python基础学习二 1.编码 utf-8编码:自动将英文保存为1个字符,中文3个字符.ASCll编码被囊括在内. unicode:将所有字符保存为2给字符,容纳了世界上所有的编码. 2.字符串内置 ...

  7. Go基础学习(二)

    数组[array] 数组定义[定义后长度不可变] 12 symbol := [...]string{USD: "$", EUR: "€", GBP: " ...

  8. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  9. 精通CSS+DIV基础总结(二)

    上一篇我们已经总结了部分CSS+DIV相关知识,这篇我们接着总结,从下边几个方面学习一下: 一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置: 颜色的设置非常 ...

随机推荐

  1. import * as 用法

  2. Win32InputBox,C接口的,实现类似VB的InputBox的功能

    #ifndef __03022006__WIN32INPUTBOX__ #define __03022006__WIN32INPUTBOX__ /* This library is (c) Elias ...

  3. [转载]借助openssl解析ECC公钥

    void GetPubKey(const char* FilePath, char* PubKey) { unsigned ]; unsigned char *pTmp = NULL; FILE *f ...

  4. 浅谈Java反射机制 之 使用类的 属性、方法和构造函数

    前面两篇我们总结了Java反射机制如何获取类的字节码,如何获取构造函数,属性和方法, 这篇我们将进一步验证如何使用我们获取到的属性.方法以及构造函数 1.使用 反射 获取到的 属性 import ja ...

  5. Java中StringHelp

    import java.util.Collection; import java.util.Map; import java.util.UUID; public class StringHelper ...

  6. js json中的时间转换格式

    //根据json中的日期格式,转换成yyyy-mm-dd HH:mm:ss function ChangeDateFormat(cellval) { var date = new Date(parse ...

  7. Java 实现Excel的简单读取操作

    JAVA实现Excel表单的简单读取操作 实现Excel表单的简单读取操作,首先要导入相关的jar包: 如图所示: 此处贴上代码: public static List<List<Stri ...

  8. ElasticSearch 基础 2

    ================================== 高级查询 =========================== ========== 子条件查询 =========== _sc ...

  9. Netty内存池ByteBuf 内存回收

    内存池ByteBuf 内存回收: 在前面的章节中我们有提到, 堆外内存是不受JVM 垃圾回收机制控制的, 所以我们分配一块堆外内存进行ByteBuf 操作时, 使用完毕要对对象进行回收, 本节就以Po ...

  10. Leetcode Lect7 哈希表

    传统的哈希表 对于长度为n的哈希表,它的存储过程如下: 根据 key 计算出它的哈希值 h=hash(key) 假设箱子的个数为 n,那么这个键值对应该放在第 (h % n) 个箱子中 如果该箱子中已 ...