CSS使用过程中的一些技巧以及注意点(一)

CSS使用过程中的一些技巧以及注意点(一)

距离上次写博客已经是一年多以前，现在再次起笔是发现自己学的东西还是应该进行输出比较好，一方面可以将这个作为复习的笔记，再者可以加深自己对知识的印象。本文主要是记录一些在使用CSS学习过中学到的一些小技巧和在使用过程中需要注意的点。本次记录分为两个部分，这里所记录的为第一个部分，第二部分将在后续加上。

1. CSS显示模式

html一般分为块元素和行内元素，还有一种特殊的称为行内块元素。

1. 块级元素

   块级元素主要有 h1-h6、p、div、ui、ol、li等。在后续的使用过程中查看其特点可以很方便的对其进行分类。

   块级元素的特点：

   • 独占一行。
   • 宽度、高度、外边距、内边距都可以进行控制。
   • 宽度默认是容器(父级)宽度的100%。
   • 是一个容器及盒子，里面可以放在块级元素和行内元素。

   注意点： 文字类的元素内不能放块级元素，如p标签、h1-h6，其中不能出现div。这些文字类标签再放块级元素，解析之后的元素和你想象的不同。

2. 行内元素

   行内元素包括 a、strong、b、em、i、del、s、ins、u、span等

   行内元素的特点：

   • 相邻的行内元素在一行上可以显示多个。
   • 宽高直接设置是没有效果的。
   • 默认宽度就是他本身内容的宽度。
   • 行内元素只能容纳文本和其他行内元素。

   注意点： 链接里面不能再放链接，a标签中可以放块级元素，但给a标签转化一下块级模式(将其转为块级元素)最安全。

3. 行内块元素

   行内块元素包括img、input、td，他们同时具有行内元素和块元素的特点。

   行内块元素的特点：

   • 和相邻行内元素在同一行上，但他们之间会有空白间隙。-- 行内元素特点
   • 默认宽度就是它本身内容的宽度。–行内元素特点
   • 高度、行高、外边距以及内边距都可以控制。–块级元素特点

4. 显示转换显示模式

   display属性对元素的显示模式进行转换

   /*将当前元素转为块级元素*/ 
   display: block;
   /*将当前元素转为行内元素*/ 
   display: inline;
   /*将当前元素转为行内块元素*/ 
   display: inline-block;
   

2. CSS中的三大特性

css中三个重要的特性：层叠性、继承性、优先级。

1. 层叠性

   相同元素存在样式冲突的情况。
   层叠性原则：

   • 样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式。
   • 样式不冲突，不会层叠。

2. 继承性

   CSS中的继承：子标签会继承父标签中的某些样式，如文本颜色、字号。

   • 恰当的使用继承可以简化代码，降低CSS样式的赋值性。
   • 子元素可以继承父元素中的样式，包括text-、font-、line-这些开头的可以继承，以及color属性。

3. 优先级

   当一个元素指定多个选择器，就会产生优先级

   • 选择器相同，则执行层叠性。
   • 选择器不同，则根据选择器权重执行。

   选择器权重详情如下表：

   选择器	选择器权重
   继承或者 *	0，0，0，0
   素选择器	0，0，0，1
   选择器，伪类选择器	0，0，1，0
   D选择器	0，1，0，0
   内样式style=""	1，0，0，0
   importment 重要的	无穷大

   在某些情况下如果你设置的样式未能生效就需要考虑一下给元素设置样式所对应的选择器权重问题。对于上面的权重计算也即权重叠加，是对位相加，且越靠左越大。

3. 盒子模型

1. 盒子模型的组成
   盒子模型主要由四部分组成，分别为margin(外边距)、border(边框)、padding(内边距)、content(内容)。
   
   注意点：

   • 边框(border)会改变盒子的实际大小，如当前盒子设置为width:200px; height:200px; border: 10px solid red; 则盒子的实际宽高变为了220px;因此在对于盒子大小要求较为严格的情况下需要将边框的影响考虑进去。

     	width: 200px;
     	heigth: 200px;
     	border: 10px solid red;
     

   • 内边距(padding)会影响盒子的实际大小，如当前盒子设置为width:200px; height:200px; padding: 10px; 则盒子的实际宽高变为了220px;因此在对于盒子大小要求较为严格的情况下需要将内边距考虑的影响考虑进去。

     width: 200px;
     heigth: 200px;
     padding: 10px;
     

   • 内边距不会撑开盒子宽度的情况,当前元素不指定宽度,则当前元素和父级元素宽度一致，如果这个时候再给当前元素设置宽度，则会影响盒子实际大小

     /*不设置宽度  默认和父级宽度一致*/ 
     height: 100px;
     pading: 10px;
     

   • 嵌套块元素塌陷(外边距合并)：对于两个嵌套关系(父子关系)的元素，父元素有上外边距同时子元素也有上外边距，此使父元素会塌陷较大的外边距，同时子元素依然贴向父盒子。

     /* 父元素 margin-top为50px*/
     .father {
     	width: 200px;
     	height: 200px;
     	background-color: red;
     	margin-top: 50px;
     }
     /* 子元素设置外边距为100px 此使父元素上边距会被撑大到位 100px，如果父元素外上边距更大则依然是父外边距大小*/
     .son{
     	width:50px;
     	height: 50px;
     	background-color: gray;
     	margin-top: 100px;
     

     解决方法：

     • 为父元素定义上边框。
     • 为父元素添加内边距。
     • 为父元素添加overflow:hidden;

     .father {
     	width: 200px;
     	height: 200px;
     	background-color: red;
     	margin-top: 50px;
     	/* 给父元素添加上边框 即可将父元素和子元素进行分开 边框颜色为透明*/
     	/* border: 1px solid transparent; */
     	/*为父元素设置内边距*/
     	/*padding: 1px*/
     	/*为父元素添加 overflow: hidden*/
     	overflow: hidden;
     }
     

4. CSS三种传统布局方式

css三种传统布局方式：普通流(标准流)、浮动、定位。

1. 标准流： 标签按照规定好的默认方式进行排列。

2. 浮动： float属性用于创建浮动框，将其移动到一旁，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
   特性：

   • 浮动元素会脱离标准流，即脱离标准流的控制(浮)移动到指定的位置(动)，且浮动的盒子不会保留原先的位置。
   • 浮动的元素会在一行内显示，并且会沿着元素顶部对齐。
   • 浮动元素会具有行内块元素的一些特性，如行内元素设置了float属性，则其可以设置宽高，即具有行内块元素的一些特性。

   注意点：

   • 浮动和标准流的父级盒子搭配使用。
   • 如果一个元素浮动了，其余的兄弟元素也要浮动。
   • 浮动会影响浮动盒子后面的标准流，不会影响浮动盒子前面的标准流。

   清除浮动

   为什么要清除浮动？

   因为在很多时候父盒子的高度是不确定的，是不能直接设置高度的，如果不清除浮动，会导致子元素浮动而父元素感受不到使得父盒子高度变为0，从而影响父盒子后面标准流的盒子的展示。

   方式一

   /* 在最后一个浮动元素再添加一个标签(必须是块级元素)，并给这个标签设置样式*/
   .lastAdd {
   	clear: both;
   }
   

   方式二

   /*给父级添加overflow属性 子不教父之过*/
   .father {
   	/* hidden auto scroll */
   	overflow: hidden;
   }
   

   方式三

   /*父元素添加 after伪元素来清除 要求会使用*/
   .clearfix:after {
   	content: "";
   	display: block;
   	height: 0;
   	clear: both;
   	visibility: hidden;
   }
   .clearfix { /*IE6、7专有*/
   	*zoom: 1; 
   }
   

   方式四

   /*给父元素添加  双伪元素清除浮动*/
   .clearfix:before,.clearfix:after {
   	content: "";
   	display: table;	
   }
   .clearfix:after {
   	clear: both;
   }
   .clearfix { /*IE6、7专有*/
   	*zoom: 1; 
   }
   

3. 定位：将盒子定在某一个位置，所以定位也是在拜访盒子，按照定位的方式移动盒子。

    	定位=定位模式 + 边偏移
    	定位模式用于指定一个元素在文档中的定位方式。
    	边偏移则决定了该元素的最终位置。
   

   • 定位模式是通过position属性来进行设置，其中值有

     值	语义
     static	静态定位
     relative	相对定位
     absolute	绝对定位
     fixed	固定定位

   • 边偏移有top、bottom、left和right四个属性

   静态定位
   静态定位是默认的定位方式，无定位的意义。静态定位按照标准流特性摆放位置，他没有边偏移。
   相对定位

   • 相对定位是元素在移动位置的时候，是相对于他原来的位置进行移动的。
   • 保持占有原来的位置，后面的盒子仍以标准的方式对待他。
   • 最重要的作用就是给绝对定位当爹的

   绝对定位
   绝对定位是元素在移动的时候，是相对它祖先来说的。

   • 如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位(Document文档)。
   • 如果祖先元素有定位，则采取就近原则，以最接近当前的结构的有定位的祖先元素进行定位。
   • 绝对定位脱离了标准流，不占有原先的位置。

   子绝父相： 通过对相对定位和绝对定位的特点进行分析，通过结合相对定位和绝对定位可以很方便的解决一些比较困难的布局，如轮播图中的左右箭头和底部小点。
   
   固定定位
   固定定位是元素固定浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变。

   • 以浏览器的可视窗口为参照点
   • 不随滚动条的滚动而滚动
   • 固定定位是不占有原先的位置

   粘性定位(Sticky)
   可以理解为相对定位和固定定位的混合。

   • 以浏览器的可视窗口为参照点来移动元素(固定定位的特点)
   • 黏性定位占有原先的位置的(相对定位的特点)
   • 必须添加top、bottom、right、left中的一个边偏移才有效。

   注意点：

   • 行内元素添加绝对定位或者相对定位，可以直接设置高度和宽度。
   • 块级元素加绝对定位或相对定位，如果不设置宽高，则默认大小为内容大小。
   • 浮动元素、相对定位、绝对定位不会触发外边距合并的问题。

小技巧

1. 单行文字垂直居中

   /*让文字的行高等于盒子的高度*/ 
   /**/ 盒子高度
   height: 100px;
   line-height:  100px; /*通过这种方式可以实现单行文本垂直据中*/ 
   

2. 灵活使用背景图片

• 小的装饰性图片使用背景来进行处理。

  /*设置背景图片*/ 
  background-image: url(url...); //图片url
  /*no-repeat 不重复展示图片*/ 
  background-repleat: no-repeat;
  /*设置背景位置 可以设置top|center|bottom|left|right 或者是精确单位*/ 
  /* background-position： x y; 这个属性的具体内容可以查看手册*/
  background-position: left center;
  /*背景图片固定和滚动*/ 
  /* background-attachment: scroll | fixed*/
  

3. 表格边框合并

   /* 表格相邻边框合并在一起 */ 
   border-collapse: collapse;
   

4. 外边距让块级盒子水平居中
   条件：

   • 盒子必须指定宽度
   • 盒子左右外边距设置为auto

   width: 1024px;
   margin: 0 auto;
   /* || */  
   margin: auto;
   /* || */ 
   margin-left: atuo;
   margin-right: auto; 
   

5. 行内元素和行内块元素水平居中
   为使行内元素和行内块元素水平居中给其父元素添加text-align:center; 即可

   /* 给父级元素设置text-align: center; */
   .father{
   	text-align: center;
   }
   

6. 清除内外边距
   有些情况元素本身会带有内外边距，这样会影响我们设置实际我们想要的内外边距，因此一开始一般情况下我们需要清楚各种元素自带内外边距的影响。

   * {
   	margin: 0px; /*清除外边距*/
   	padding: 0px; /*清除内边距*/
   }
   

7. 浮动元素经常和标准流的父级搭配使用
   为了约束浮动元素，我们一般采用的策略：父元素为标准流上下排列，之后子元素采取活动排列左右位置。

8. 固定定位技巧–固定到版心右侧

   /*主界面  版心 盒子的样式*/
   .main{
   	/*设置盒子宽高*/
   	width: 1024px;
   	height: 2000px;
   	/*设置盒子居中*/
   	margin: auto;
   	background-color: red;
   }
   /*设置固定定位的盒子样式*/
   .fix{
   	position:fixed;
   	/* 走浏览器宽度的一半 */
   	left: 50%;
   	/* 走版心的一半 即512px*/
   	margin-left: 512px;
   	width: 200px;
   	height: 200px;
   	background-color: gray;
   }
   

9. 绝对定位的盒子居中

   .box {
   	/*设置盒子为绝对定位*/
   	postion: absolute;
   	width: 50px;
   	height: 50px;
   	/*边偏移为 父级盒子的 一半  垂直居中同理*/
   	left: 50%;
   	/*再向左移动盒子本身一半 即可使得绝对定位的盒子在父级盒子中居中显示*/
   	margint-left: -25px;
   	background-color: gray;
   }