CSS总结（三）

最新推荐文章于 2024-10-16 23:34:20 发布

aojinkun2397

最新推荐文章于 2024-10-16 23:34:20 发布

阅读量185

点赞数

文章标签：操作系统

原文链接：http://www.cnblogs.com/chen88/p/11587265.html

版权

盒子大小计算

影响盒子大小的因素: 边框会影响盒子的大小,padding也会影响盒子大小

计算盒子的大小：

盒子的真实宽度 = width + 左右的border + 左右的padding
盒子的真实高度 = height + 上下的border + 上下的padding

内外边距初始化

* {
      margin: 0;    /*外边距初始化*/
      padding: 0;  /*内边距初始化*/
    }

盒子水平居中

/*水平居中：*/
/*margin: 0 auto;*/

CSS布局

css中的三种布局机制：

页面布局的本质：布局页面其实就是摆放盒子的过程

就是用来在页面布局的时候用来摆放盒子（怎么去摆放盒子）

1.标准流（普通流/文档流）
  遵循HTML的标准文档规范，在页面显示的时候
  从上到下、从左到右的这种方式称为标准流

2.浮动

3.定位

浮动

浮动的最初目的: 实现文字环绕图片的效果

浮动现在的目的：帮助我们实现页面的快速布局

img {
      /*float: left;*/
      float: right;
    }

浮动的特点：

1.脱标（脱离标准流），不占原来的位置
2.浮动能改变元素的显示方式（针对行内元素）
3.浮动的元素以顶部对齐
4.如果元素有包含关系，子元素浮动不会占据父元素的padding和border的位置
5.如果多个块级元素，前面不浮动，后面浮动，后面浮动的元素也只能左右浮动，不会和前面标准流的元素在同一行显示
  如果想要多个块级元素在同一行显示，那么这几个块级元素都必须浮动

css中常见的三种布局方式

版心布局
通栏布局
分栏布局

清除浮动

清除浮动：清除浮动的本质其实就是消除浮动带来的影响

一般元素有包含关系，子元素浮动，父元素没有设置高度，而页面布局中又需要父盒子有高度，这个时候我们就需要清除浮动

清除浮动的方式：

1.给父盒子设置高度

2.给父盒子设置overflow：hidden （触发了BFC）

3.额外标签法（不推荐添加清除浮动的标签必须放在浮动的元素的后面，并且只能是块级元素）

两种重要的清除浮动的方式：

伪元素：在HTML的结构中不需要书写，只是浏览器在解析代码的时候，在自动的在结构中添加的元素

::before    在…………之前
::after     在…………之后

伪元素一定是作用在某个元素身上。

第一种：

/*伪元素清除浮动*/
.clearfix::after {
  content: ".";    /*伪元素必须有content才能有效    这个content中的点是为了解决浏览器之间的兼容*/
  display: block;    /*清除浮动必须使用块级元素，而伪元素是一个行内元素*/
  clear: both;   /*清除浮动的代码*/
  visibility: hidden;  /*隐藏content中的内容*/
  height: 0;  /* 去掉伪元素的高度*/
  line-height: 0;    /*设置行高为0,也是为了解决浏览器的兼容问题*/
}
.clearfix {
  *zoom: 1;    /*为了解决IE6-7的兼容*/
}

第二种：

/*双伪元素清除浮动*/
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

行高

行高：一行的高度 = 文本大小+上间距+下间距

当行高与盒子高度相同时文本会垂直居中

元素的显示和隐藏

 隐藏元素：
    visibility: hidden  隐藏元素，占位置
    display：none   隐藏元素，不占位置

  显示元素：
    visibility：visible
    display: block

鼠标样式

div {
  /*鼠标样式*/
 /*cursor: pointer;   鼠标手*/
 /*cursor: move;   移动光标*/
 /*cursor: default;*/   /*鼠标会跟随操作系统的鼠标样式*/
 /*cursor: auto; */  /*跟随浏览器的鼠标样式*/
}
a{
 /*cursor: default;*/
 /*cursor: auto;*/
 /*cursor: text;   文本光标*/
 /*cursor: help;*/
 /*cursor: crosshair;*/
}

防止文本域拖拽

textarea {
   resize: none;  /* 防止文本域拖拽*/
}

文本溢出处理

一、处理

.box {
      width: 300px;
      height: 300px;
      border: 1px solid #f00;

      /*文本溢出处理：*/
      /*overflow:  visible;   默认的，不做任何处理*/
      /*overflow: hidden;   直接隐藏溢出*/
      /*overflow: auto;   有溢出加滚动条，没有溢出不加*/
      overflow: scroll;   /*始终都有滚动条*/
    }

overflow:hidden 的作用:（溢出隐藏、清除浮动、解决外边距塌陷等等）

二、使用省略号代替溢出部分

.box {
      width: 300px;
      height: 50px;
      border: 1px solid #00f;
      /*如果要使用省略号替代溢出部分*/
      /*隐藏溢出*/
      overflow: hidden;
      /*必须让文本在一行显示*/
      white-space: nowrap;
      /*使用省略号替代*/
      text-overflow: ellipsis;
    }

外轮廓线

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

 /*外轮廓线：*/
 /* outline: none;*/  /*去除外轮廓线     常用*/
 /*outline: 5px dashed pink;*/
 /*outline-top: 5px solid red;*/
}
.box {
  width: 200px;
  height: 200px;
  background: blue;
  outline: 5px solid pink;      /* 外轮廓显示不影响盒子大小*/
}

字间距

两个文字之间的距离

.box {
      /*letter-spacing: 10px;中文*/
      word-spacing: 10px;/*英文单词*/
    }

垂直对齐方式

对于垂直对齐方式，我们一般使用的都是用来设置行内块级元素或者是表单元素与文本的对齐方式

垂直对齐方式：对块级元素无效，只针对行内元素或者行内块级元素

垂直对齐方式一般都是用来设置行内元素或者行内块级元素与文本的垂直

 <style>
    input {
      /*设置垂直对齐方式*/
      /*vertical-align: middle;    设置和文本的中线对齐*/
      vertical-align: top;  /*设置和文本的行顶线对齐*/
    }
    /*对于垂直对齐方式，我们一般使用的都是用来设置行内块级元素或者是表单元素与文本的对齐方式*/
    .box {
      width: 300px;
      border: 1px solid red;
    }
    img {
      /*设置图片的垂直对齐方式*/
      /*vertical-align: top;*/
      vertical-align: middle; 
    }
    /*图片的默认垂直对齐方式是以文本的基线对齐*/
</style>

转载于:https://www.cnblogs.com/chen88/p/11587265.html