CSS

CSS基本语法及页面引用

CSS基本语法

css定义的方法是：
选择器{属性:值;属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性都有一个或多个值。
示例：

div {width:100px;height:100px;color:red}

css 页面引入的方法

1. 外联式；通过link标签，链接到外部样式表到页面中。

2. 嵌入式；通过style标签，在网页上嵌入的样式表。

  
...

...

2. id选择器
   通过id来选择元素，元素的ID名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id一般给程序使用，所以不推荐id作为选择器

#box{color:red}

...

3. 类选择器
   通过类名来选择元素，一个类可以应用于多个元素，一个元素也可以使用多个类，应用灵活，可以复用，是css中应用最多的一种选择器

...
hello
hello

4. 层级选择器
   主要应用选择父元素的子元素，或者子元素下面的子元素，可以与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突

  

  ...
  ...

5. 伪元素选择器
   常用的伪元素选择器有hover,表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可以通过样式在元素中插入内容。

...
...
...

CSS盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实生活中盒子来做比喻，帮助我们设置元素对应的样式，如下：

image.png

把元素叫做盒子，设置的样式分别为：盒子的边框（border）,盒子内的内容和边框之间的间距（padding）,盒子与盒子之间的间距（margin）

1. 开发中，如果left，right,top,buttom属性相同，我们不用每次都写xxx-top=bala... xxx-right=bala...
   我们可以直接进行简写：

margin相关技巧

1. 设置元素水平居中：margin: x auto
2. margin负值让元素位移以及边框合并

外边距合并

外边距合并是指：当两个垂直外边距相距时，他们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度的较大者。解决方法如下：

1. 使用这种特性
2. 设置一边的边距，一般设置margin-top
3. 将元素浮动或者定位

margin-top塌陷

在两个盒子嵌套的时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决办法如下：

1. 外部盒子设置一个边框
2. 外部盒子设置overflow：hidden
3. 使用伪元素

    .clearfix:before{
        content:' ';
        display: table
    }

盒子的真实尺寸

盒子的宽度：width+左右的padding+左右的border
盒子的高度：height+上下的padding+上下的border

width其实代表的是盒子内容的尺寸，并不是盒子本身的尺寸。
需求：
布局下面的标题：

image.png

实现方式1：

 
新闻标题

注意
微软雅黑字体自带大小，如果不指定line-height会导致布局异常。
实线方式2：
使用text-indent进行首行缩进，不会影响width的长度，设置line-hight=height文字自动居中。

  
  
新闻标题

CSS元素溢出

当子元素的尺寸超过父元素时，需要设置父元素显示溢出子元素的方式，设置方法是通过overflow属性来设置。
overflow的设置项：

1. visable默认值。内容不会被修剪，会呈现在元素框之外。
2. hidden内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能。
3. scroll内容会被修剪，但是浏览器会显示滚动条一边查看其余的内容
4. auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5. inherit规定应该从父元素继承overflow属性的值。

块元素、内联元素、内联块元素

块元素
块元素，也可以称为行元素，布局中常用的标签有：div,p,ul,li,h1~h6,dl,dt,dd等等都是块元素。他在布局中的行为：

• 支持全部样式
• 如果没哟设置宽度，默认宽度为父级宽度100%
• 盒子占据一行，及时设置了宽度

内联元素

内联元素，也可以称之为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，他们在布局中的行为：

• 支持部分样式（不支持宽，高，margin上下，padding上下）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性设置垂直对齐方式。

解决内联元素间隙的问题

1. 去掉内联元素之间的换行
2. 将内联元素的父级设置font-size为0，再设置自身font-size

内联块元素

内联块元素，也叫行内元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转换为这种元素，他们在布局中的表现的行为：

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置元素水平对齐方式，用line-height属性设置子元素垂直对齐方式
  这三种元素，可以通过display属性相互转换，不过实际开发中，块元素用的比较多，所以，我们常把内联元素转换为块元素，少量转换为内联块，而要使用内联元素时，而不用块元素转换了。

display属性

display属性是用来设置元素的类型以及隐藏的，常用的属性有：

1. none元素隐藏且不占位置
2. block元素以块元素显示
3. inline元素以内联元素显示

4. inline-block元素以内联块元素显示
   需求：

   
   
   image.png

  

  

    
首页
    
公司简介
    
联系我们
    
联系我们
    
联系我们
    
联系我们
    
联系我们
  

image.png

浮动

文档流

文档流是指盒子按照html标签编写的顺序依次从上到下，从左到右，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。

浮动特性

1. 浮动元素有左浮动（float:left）和右浮动（float:right）两种
2. 浮动元素会向左或者向右浮动，碰到父元素边界，浮动元素，未浮动的元素才停下来
3. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
4. 浮动让行内元素或者块元素自动转换为行内块元素
5. 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动元素的内的文字会避开浮动的元素，形成文字饶图的效果
6. 父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7. 浮动元素之间没有垂直margin的合并

清除浮动

• 父级元素增加属性：overflow:hidden
• 在最后一个子元素的后面增加一个空的div，给他样式属性clear:both(不推荐)
• 使用成熟的清除浮动样式类，clearfix

定位

使用position属性来设置元素的定位类型，position的设置如下：

• relative生成相应定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
• absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对固定定位元素来进行定位，如果找不到，则相对于body元素进行定位。
• fixed 生成固定定位元素，元素脱离文档流，不占据文档流位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
• static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
• inhert从父元素继承position属性的值

元素定位特征

绝对定位和固定定位的块元素和行内元素会自动转换为行内块元素

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

典型定位布局

1. 固定在顶部的菜单
2. 水平垂直居中弹框
3. 固定在侧边的工具栏

4. 固定在底部的按钮
   案例1：
   布局上面的导航栏

   
   
   image.png

    

  

    
首页
    
网站建设
    
首页
    
首页
    
首页
    
首页
    

  

案例2：

image.png

  
  

    
新闻列表
    

      

        点我点我点我~
        2019-07-28
      
      

        点我点我点我~
        2019-07-28
      
      

        点我点我点我~
        2019-07-28
      
      

        点我点我点我~
        2019-07-28
      
      

        点我点我点我~
        2019-07-28
      
      

        点我点我点我~
        2019-07-28
      
    
  

background

他负责给盒子设置背景图片和背景颜色，backgruond是一个复合属性，他可以分解为：

• backgrround-color:设置背景颜色
• background-image:设置背景图片地址
• background-repeat:设置背景图片如何设置平铺
  background-position:设置图片的位置

• background-attachment 设置背景图片是固定的还是随着页面滚动条滚动
  案例3：

  
  
  image.png

    

  

    上一页
    1
    2
    3
    4
    ...
    5
    6
    7
    8
    下一页