css基础3

１ 温习知识

１.1  Css书写位置

      ☞内嵌写法

       ☞外链式写法

 <link  href=”1.css” rel=”stylesheet”>

  完全实现了css与html结构的分离

☞行内式写法

  Style属性

１.2 Html标签分类

     按照显示模式进行分类

１.2.1   块级元素

  ☞元素自己独占一行显示（默认有宽度）

  ☞可以设置宽度和高度

  ☞子元素的宽度与父元素的宽度一样（嵌套关系）

１.2.2   行内元素

  ☞所有元素在一行上显示

  ☞不能直接设置宽度和高度

 

１.2.3   行内块元素

        ☞所有元素在一行上显示

         ☞可以直接设置宽度和高度

 

１.3 元素模式之间的相互转化

      Display: block;   中文:显示:块       转化为块级元素

      Display: inline-block;    转化为行内块元素   行内元素转为块元素

      Display: inline            转化为行内元素

１.4伪类介绍

    a:link{}      a{}

    a:visited{}    访问过后的样式

    a:hover{}     鼠标移动到超链接上的样式（用的最多）

    a:active{}     超链接激活状态下的样式

    :focus            获取焦点的样式

１.5背景（background）

１.5.1   Background-color

１.5.2   Background-image:url(“”)

１.5.3   Background-repeat:

       ☞repeat  

      ☞no-repeat

      ☞repeat-x

      ☞repeat-y

１.5.4   Background-position

 ☞具体的方位名称（left,right,top,bottom,center）

 ☞第一个值水平方向  第二个值垂直

１.5.5   Background-attachment   //设置背景固定的属性

    ☞ scroll

    ☞ fixed（背景固定）

 

２.1浏览器默认文字大小

    浏览器默认文字大小 16px

    默认行高： 18px（inlne-height）

 行高=文字大小+2

２.2行高的作用

 当行高值为父容器的高度时，可以让父容器中的文字垂直显示

２.3   行高单位问题

单独给一个元素设置行高

行高单位	赋值	文字大小	行高值
px	20px	20px	20px
em	2em	20px	40px
%	120%	20px	24px
不带单位	2	20px	40px

总结：

 当给一个独立的元素设置行高值的时候，除了以px为单位的行高值与文字大小无关，其他都与文字大小有关（与文字大小的积）

 

盒子嵌套，给父元素设置行高值，子元素的行高问题

行高单位	设置行高	父文字	子文字	行高
Px	20px	20px	30px	20px
em	2em	20px	30px	40px
%	120%	20px	30px	24px
不带单位	2	20px	30px	60px

 

行高可以实现继承！！

 

总结：

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

 

３ 盒子模型（box）

３.1 作用

   进行网页布局

３.2 网页中盒子的组成

 ☞border(边框)

 ☞内边距（padding）

 ☞外边距（margin）

３.3Border（边框）

  ☞Border-width:   边框宽度

  ☞border-style:    边框样式

 ◆solid      边框为实线

 ◆dotted     点线

 ◆dashed     虚线

     ☞border-color:           边框颜色

   ☞border另外一种写法

  

单独设置边框样式：

 ☞border属性联写

 

注意：

  属性联写的时候没有先后顺序限制，边框颜色可以不写，边框宽度可以不写

 

３.4Padding（内边距） (顺序从上开始 顺时针)

    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;  上， 右， 下， 左

  内边距：设置内容距离盒子边框之间的距离

３.5 盒子大小计算

     ☞边框可以影响盒子大小

     ☞内边距影响盒子大小

  

   宽度=内容宽度+左右边框+左右内边距 

  注意：

  以后进行页面盒子布局的实现，如果给盒子设置了内边距，对应的要将内容宽度或者高度减去相应的值。

 

３.6盒子大小影响特殊地方

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

 

４ 外边距（margin）

  设置盒子与盒子之间的距离

  Margin-left：

  Margin-right：

  Margin-top：

  Margin-bottom：

 

 

  Margin: 10px  上 右  下 左 10px

  Margin:10px  20px     上下10px    左右20px

  Margin: 10px  20px  30px    上10px    左右20px   下30px

  Margin: 10px  20px   30px   40px  上右下左

 

  ☞当两个盒子垂直显示的时候，外边距以设置的最大值为准（外边距合并的第一种情况）

  ☞外边距塌陷（有难问题）

      ◆给父盒子设置边框

      ◆给父盒子设置overflow:hidden;

 

  给父元素设置了overflow：hiddenh会触发bfc

     Bfc  “格式化上下文”